- 博客(18)
- 收藏
- 关注
原创 css设置对话框的指向角
直接写一个案例进行说明(可以有多种方式实现,暂时写一个)展示哪个角通过transform: rotate(90deg);来实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid
2022-04-20 16:22:54
202
原创 如何将项目里node_modules的更改保存起来
在前端项目开发中,我们经常会遇到node_modules里的包有问题,当自己手动更改成正确的后,自己没问题了,但是别人重新npm install时还会有同样的问题,那么如何将node_modules的更改保存到项目中呢,这样别人在生成依赖后能有一个正常的环境通过:patch-packagehttps://www.npmjs.com/package/patch-package这个包可以在npm install后按照项目里保存的更改自动修改node_modules,非常好用使用步骤:一.安装可以
2021-12-03 14:39:39
1149
原创 flex和 flex-grow的区别(计算方式)
flex和 flex-grow的区别(计算方式)前提: 有一个大盒子box,里面有三个div,分别是div1、div2、div3,大盒子的总宽度为900px ,flex: div1和div2的分别设置flex:1,flex:2, div3设置:width: 100px;则div1和div2宽度的计算方式为(900 - 100)/ 3 * 1和(900 - 100)/ 3 * 2 ,div3宽度为 100pxflex-grow: div1和div2的分别设置flex-grow:1,flex-grow:
2021-11-01 10:29:22
165
原创 css中nth-child()和nth-of-type()的区别
css中nth-child()和nth-of-type()的区别nth-child():当前节点下的所有的兄弟结点;nth-of-type():指的是当前节点下同类型节点,比如p:nth-of-type(4),指的是兄弟节点p元素中的所有p元素中的第四个;下面是一个例子:nth-child(4)所处的位置为<span>3333</span>,不为p元素,所以没有红色渲染,若代码这样效果则为...
2021-10-21 16:14:15
136
原创 Vue事件总线以及原理探究
一、引入事件总线只需在main.js的创建Vue实例vm之前的时候引入首先,原理是使用Vue创造的实例vm或者说VueComponent创建的实例vc身上的$on和$emit属性,两者作用的实例必须为同一个,根据这个原理可以写出几种创建事件总线的方法:第一种方法,你可以在VueComponent的实例对象身上创建:在入口文件main.js中,可以在new Vue({})(创建Vue实例vm)之前这样写在这里说一下,在main.js 中无法直接获取VueComponent构造函数,Vue的源码里是通
2021-08-05 17:31:59
1383
原创 2021-06-30
文件下载const { filePath: url, fileName } = artifact; const $link = document.createElement('a'); $link.href = url; $link.setAttribute('download', fileName); document.body.append($link); $link.click(); document.body.removeCh
2021-06-30 11:48:13
78
原创 el-upload上传文件 sha256签名获取
1.安装crypto-js;2.引用AES源码js;const CryptoJS = require('crypto-js');3.methods中 const reader = new FileReader(); reader.readAsArrayBuffer(file.raw); reader.onload = () => { const wordArray = CryptoJS.lib.WordArray.create(reader.resul
2021-06-19 15:03:28
308
原创 Element ui 表单验证问题总结
Element ui 表单验证问题总结第一种 表单项为动态的,所以prop的数量及名称无法设置为一个固定的值1.1 页面元素<el-form :model="questForm" ref="paramForm" :rules="paramFormRules"> <el-row style="padding: 0 20px" v-for="(item,i) in serverParams" :key="i"> <el-form-item :label
2021-04-16 11:22:09
237
原创 验证码,base64转图片
<img :src=“codeImg” alt />this.codeImg = “data:image/png;base64,” + res.data
2021-03-02 09:10:38
367
原创 不用this.$router.go(0),对页面刷新
公共组件有一个刷新按钮<div class=“iconBox refresh” @click=“refresh”>在该组件中定义methods:{refresh() {this.$host.store.commit(‘refreshPage’, new Date())},}在store.js中定义state: {refresh:0,},mutations: {refreshPage(state, data){state.refresh = data},}在需要刷
2021-03-01 11:52:30
419
原创 引入React-devtools
引入React-devtoolsstore.js里面1.安装Redux DevTools插件import {createStore,applyMiddleware,combineReducers} from ‘redux’2.import {composeWithDevTools} from ‘redux-devtools-extension’import countReducer from ‘./reducers/count’import thunk from ‘redux-thunk’im
2021-03-01 08:59:08
152
原创 React使用styled-components进行样式初始化(reset.css)
第一步先安装 styled-components第二步创建style.js(在src目录下)import { createGlobalStyle } from ‘styled-components’;export const GlobalStyle = createGlobalStylehtml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
2021-02-28 15:54:56
399
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人