2020年11月_F-Fanger

原创手动修改node_modules 中的依赖包并且npm i 时不用再次手动修改node_modules

难免有些情况是需要修改node_modules中的包的，直接放解决办法第一步、安装patch-packagenpm install patch-package --save-dev第二步、在 package.json 文件中的 scripts 中加入 “postinstall”: “patch-package”，这里必须手动加入。 "postinstall": "patch-package"第三步、修改需要修改的node_modules中的包，例如：第四步、手动执行命令创建 npx pa

2020-11-18 12:11:01 1600

原创 element-ui 表单动态添加prop验证 prop显示没有问题但是不触发验证验证无效

直接上代码，试了几个办法都没有行通，下面给出搞定的方式：<el-form-item label="登录密码：" prop="password" :rules=" title === '添加员工' ? [ { required: tr

2020-11-13 20:56:59 1549

原创 css如何让文字两端对齐？使用text-align:justify 使用text-align:justify无效？

css如何让文字两端对齐？使用text-align:justify 使用text-align:justify无效？最后想要的效果，如图所示：css中加上text-align:justify，但是我们看页面是没有任何效果的。如图所示 <p class="header_title"> 东拉西扯ab东拉 </p> // css .header_title { padding-left: 0.25rem; height: 0.4125rem;

2020-11-13 10:56:09 343

原创封装axios form-data 针对统一的formData入参方式

封装axios form-data 针对统一的formData入参方式1. 在axios中，设置请求头的content-type config.headers.post['Content-Type'] = 'multipart/form-data'2. 封装请求//* 封装post请求export function post(url, data = {}) { return new Promise((resolve, reject) => { axios({ url, met

2020-11-11 15:09:32 2623

原创 vue token解析解析token中携带的数据

1. 安装插件 npm install jwt-decode --save2. 在需要使用的地方引入 import jwtDecode from 'jwt-decode' const code = jwtDecode(res.data.data.accessToken) console.log(code)// 就可以解析成功了 3.例子：

2020-11-11 10:48:09 1391

原创 vue vue-cli3.0中引入JQuery

vue vue-cli3.0中引入JQuery安装JQuery npm i jquery -S在vue.config.js中，加入如下代码 const webpack = require('webpack') configureWebpack: config => { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'win

2020-11-10 20:45:18 155

原创 element-ui el-table 鼠标移入滚动条出现移出表格滚动条隐藏

element-ui el-table 鼠标移入滚动条出现移出表格滚动条隐藏使用el-table的两个事件cell-mouse-leave // 当单元格 hover 退出时会触发该事件cell-mouse-enter // 当单元格 hover 进入时会触发该事件我这里用到了jQuery(不会引入的可以去搜一下)<el-table height='500' :data="userList" style="width: 100%" :header-cell

2020-11-10 15:53:27 2415 4

原创 vue中配置bebel-plugin-transform-remove-console插件打包时去除所有的console 移除所有的console

第一步、npm install babel-plugin-transform-remove-console --save-dev第二步、配置babel.config.js文件（第一种则是无论是开发阶段还是发布阶段都会把console移除）第二种：我们只希望在项目发布的阶段移除掉console，测试和开发阶段不需要移除console...

2020-11-08 21:22:22 527

原创 promise和setTimeout执行顺序的问题

promise分为三种状态pending：初始状态；resolve：代表成功；reject：代表失败。promise本身是同步Promise对象表示未来某个将要发生的事件，但在创建Promise时，作为Promise参数传入的函数是同步执行的，但then方法中的回调函数执行则是异步的。|宏任务：将 setTimeout、setlnterval放在宏任务中；微任务：Promise放在微任务中。执行的先后顺序：1、首先执行栈里的任务；（就是同步任务）2、执行栈清空后，检查微任务队列，将可执行

2020-11-08 21:17:44 591 1

原创 JS 惰性载入

// 封装一个事件绑定event.on = function (dom, type, fn) { if (document.addEventListener) { dom.addEventListener(type, fn, false); } else if (document.attachEvent) { dom.attachEvent('on' + type, fn); } else { dom['on' + type] = fn;

2020-11-08 21:11:09 133 1

原创 JS 闭包实现封装

/* 封装进阶: 1、将不需要暴露的属性和方法定义为私有的： 2、可以提供一个特权方法允许其他人进行操作（其他人进行操作指的是读取和写入） 3、使用闭包对整个类的声明进行封装*/ (function () { function User(name, age, gender) { // this.name = name; // 这里既可以 u1.name

2020-11-08 21:05:28 533

原创 css 修改为黑白色修改颜色为黑白 (100% 灰度)

效果如图所示，代码放下面了。在需要致黑白的盒子上加上该css即可：.grayscale { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImag

2020-11-08 21:02:53 784

原创 vue 当多个页面都有同一个请求时可以利用vuex存储请求的结果减少请求

vue 当多个页面都有同一个请求时可以利用vuex存储请求的结果第一步：把异步请求写在actions中，而修改state的状态只能在mutations中，所以需要在action中需要把请求回来的结果提交mutations修改state的状态。// mine.js// 引入axiosimport { myRequest } from '../.././router/axios'const mine = { namespaced: true, //开启命名空间 state: {

2020-11-08 20:49:41 894

原创 element el-table 表格渲染数据后台返回的数据的是状态值前端需要转换显示文字快速展示对应的文字

element el-table 表格渲染数据后台返回的数据的是状态值前端需要转换显示文字快速展示对应的文字比如后端的返回数据state是 0、1、2，分别代表归档、到期、正常。而我们要在表格中快速的展示出对应的文字。如图所示：直接上代码 <el-table-column label="状态"> <template slot-scope="scope"> {{ dataState[scope.row.state] }} &lt

2020-11-04 15:28:39 3162

原创 vue element el-input 搜索实现防抖 @input事件请求频繁

不要使用el-input的@input事件，使用这个事件，使用防抖无效。上实际代码，如下：<template>// 其他代码省略 <el-input suffix-icon="el-icon-search" v-model="page.searchCode" clearable></el-input></template><script> data() { return { timer: '', p

2020-11-03 16:31:18 7316 8

原创 vue element el-collapse 默认展开并展示出从后台请求回来的数据默认展开了但是请求回来的数据并没有渲染

el-collapse 默认展开并展示出从后台请求回来的数据默认展开了但是请求回来的数据并没有渲染遇到一个坑，在控制台打印数据明明已经回来了，也赋了值，但是页面就是没有渲染，不知道大家有没有遇到这个问题。废话不多说直接放代码。在data中声明 data() { return { activeName:'', } }我们在请求数据拿到之后再给activeName赋值就可以渲染成功了。 async getUtilTenantList() { thi

2020-11-03 11:19:44 2273 1

原创 css 背景图居中固定大小显示剩余部分用颜色填充

css 背景图居中固定大小显示剩余部分用颜色填充项目中有遇到这个问题，所以在这里记录一下简写的方式// url 中是图片地址background: url(~@/styles/images/[email protected]) no-repeat center/15rem auto #F0F3F7;分开写 background-image:url(~@/styles/images/[email protected]); background-position: center; backg

2020-11-03 10:55:36 955

qq_41287158的博客