weixin_丫头片子-优快云博客

原创 node脚本匹配vue项目中除注释外所有汉字，并导出成json文件

由于公司业务需要，写了一年的项目，要做国际化，一个一个整理汉字太麻烦，so，整理了个脚本

2022-06-01 17:11:38 1096 5

原创 node笔记——第一节

node学习笔记1、node常见属性2、node中的nextTick3、node中模块规范4、node中常用内置模块5、代码实现require1、node常见属性console.log(global);//全局上可以直接访问的属性，（全局变量）console.log(__dirname); // 当前文件执行时的目录是死的（绝对路径）console.log(__filename); // 文件自己的绝对路径console.log(global.process);//process代表进程，可以

2021-06-25 14:29:06 610

原创 Performance获取当前页面中与性能相关信息和部分优化策略

详细api 查看：https://developer.mozilla.org/zh-CN/docs/Web/API/Performance部分优化策略：最后补一个：Lighthouse 可以查看网站性能安装：npm i lighthouse -g使用：Lighthouse http://www.taobao.com注意：对node 版本有要求...

2021-04-09 19:35:44 229

原创查看、修改npm配置

1、npm config list查看npm 配置2、npm i nrm -g --force安装nrm3、nrm ls4、nrm use taobo 切换命令源5、nrm安装完成后可能会报错[ERR_INVALID_ARG_TYPE]感觉应该是node版本问题找到这一行报错的JS文件，17行//const NRMRC = path.join(process.env.HOME, '.nrmrc'); (删除)const NRMRC = path.join(process.env[(

2021-03-18 15:53:26 5195

原创 vue3.0和elementPlus简单后台管理模板，动态路由

自己写的小demo：https://github.com/584832915/vue3.0-ts-elementPlus目前有的功能:全局路由拦截、路由传值，父子传值、computed，watch、简单vuex状态管理、echarts动态数据、element表单验证重置等还在更新，有兴趣可以下载看看，有空再补充博客细节，有疑问留言...

2021-03-05 12:05:28 719

原创 vue2.x + ts + element 踩坑初体验

1、this.message.error(′′)报类型“default”上不存在属性“message.error('') 报类型“default”上不存在属性“message.error(′′)报类型“default”上不存在属性“message”。解决方法：在 tsconfig.json 里面添加"types": [ "webpack-env", "./../element-ui/types" ],原因：然后再去看看element node-model的结

2020-11-30 22:11:19 1308

原创限制el-input输入框只能输入保留两位小数的数字

<el-input-number v-model="renewForm.rentalTime" v-inputNumber="{formName:'renewForm',formKey:'rentalTime'}" controls-position="right" :disabled="active" :min="1" :max="999"></el-input-number>Vue.directive('inputNumber

2020-10-17 15:08:47 1279

原创 moment 常用时间方法

1、获取日期的23时59分59秒//今天的moment().endOf('day')//指定日期的moment('2020-06-25').endOf('day')2、获取日期的0时0分0秒//今天的，跟上面的endOf一样的moment().startOf('day')3、获取时间戳moment().endOf('day').valueOf()4、时间戳转日期 moment(val).format("YYYY-MM-DD HH:mm:ss")5、获取当前时间前 X 天mo

2020-09-27 15:38:09 6062

原创 es6 小知识记录（二）

1、数组实例的 copyWithin()数组实例的copyWithin()方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。它接受三个参数。target（必需）：从该位置开始替换数据。如果为负值，表示倒数。start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算。end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。[1, 2, 3, 4, 5].

2020-09-15 13:58:01 99

原创防抖函数和节流函数使用及应用场景

一、防抖性能优化方案，防抖用于减少函数请求次数，对于频繁的请求，只执行这些请求的最后一次。基础版本function debounce(func, wait = 300){ let timer = null; return function(){ if(timer !== null){ clearTimeout(timer); } timer = setTimeout(fn,wait); }}使用debounce(function(e){ co

2020-08-29 11:42:45 430

原创 js 小知识记录（一）

1、选择 Map / Object 字面量，而不是Switch语句特别适合vue里面的filter过滤的写法function test(color) { // 使用 switch case 语句，根据颜色找出对应的水果 switch (color) { case 'red': return ['apple', 'strawberry']; case 'yellow': return ['banana', 'pineapple']; case 'pu

2020-08-29 10:35:29 125 1

原创 vue @hook/is的用法

自己做个记录，会持续更新1、@hook<script> export default { mounted() { this.timer = setInterval(() => { ... }, 1000); }, beforeDestroy() { clearInterval(this.timer); } };</script><script> export default { m

2020-08-27 14:27:31 189

原创 vue 项目利用element el-upload图片自定义上传到七牛云

以前写的，想起来了就写一下， <el-upload :class="{hide:ishide}"//控制上传按钮是否隐藏 ref="upload" list-type="picture-card" :auto-upload="false"//不自动上传 :on-change="changeUpload" :on-success="successUpload" :on-remove="handleRemove" :fi

2020-08-25 17:00:50 791

原创解决 Avoided redundant navigation to current location: “/“.报错

重复定位路由导致的错误，是vue-router版本的问题，不影响使用，但是看着有点难受import Vue from 'vue'import VueRouter from 'vue-router'// 解决路由访问重复时报错问题：const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, .

2020-08-21 11:46:42 574 1

原创 vue.observable

2.6.0 新增跨组件数据状态共享，一个简易的vuex一、首先创建一个observable.js文件二、import Vue from 'vue'export const store = Vue.observable({ count: 0, token:sessionStorage.name,});export const mutations = { setCount(count) { store.count = count; }, se

2020-08-13 13:14:46 173

原创 el-scrollbar element-ui的滚动条组件（官方文档没有）

el-scrollbar 配合 el-menu 写侧边栏，简直没有太好使<el-aside width="200px" style="overflow:hidden"> <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="default-scrollbar__view" >

2020-08-12 20:03:37 1606 3

原创 vue cli3/4 vue.config.js配置详解

vue.config.js 创建的时候没有，需要手动创建const path = require('path');const webpack = require('webpack');const UglifyPlugin = require('uglifyjs-webpack-plugin');const CompressionPlugin = require("compression-webpack-plugin");// const PurgeCssWebpackPlugin = requir

2020-08-12 18:45:09 1774

原创 vue 常用组件通讯总结，包括互相调用方法

一、props （父传字，父组件用自定义属性，太常见，不多说）这个应该非常属性,就是父传子的属性;props 值可以是一个数组或对象;// 对象props:{ inpVal:{ type:Number, //传入值限定类型 // type 值可为String,Number,Boolean,Array,Object,Date,Function,Symbol // type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认 required: true, /

2020-08-11 15:37:12 307

原创 vue 项目，全局路由拦截

在做后台管理系统的时候，是要先登录才能查看内部页面，那么如果没有登录，直接打开内部页面地址，要拦截下来返回到登录页router.beforeEach((to, from, next) => { // 只有/test页面并且isShow=false的时候可以不经登录打开 if (to.path == "/test" && to.query.isShow == 'false') { next() } else if (to.path == '/') { nex

2020-08-11 14:57:56 455

原创压缩图片

methods: { compress(img, Orientation) { let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); //瓦片canvas let tCanvas = document.createElement("canvas"); let tct

2020-08-07 17:10:34 154

原创 vue 利用自定义指令设置按钮和router权限

Vue.directive('permission', { // 钩子函数，被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)。 inserted(el, binding, vnode) { let buttonRole = JSON.parse(sessionStorage.getItem('buttonRole'));//后端返的权限 let arr = buttonRole.filter(res => { //这个根据后端返的字段

2020-07-29 23:59:14 342

原创更换echarts默认主题

init的时候后面加个lightthis.pieChart = echarts.init(document.getElementById("pieBox"), "light");

2020-07-29 23:08:28 942

原创 vue 下载后端返回的文件流

请求的时候请求头加：responseType: “blob”,因为项目中多个地方用到，写的公共方法，传参的方式conversionBlob(res, name) { let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8" }); let con

2020-07-29 22:32:42 1639

原创高德地图自定义icon，并根据地址设置多个marker标记

第一步：首先引入地图就不多说了第二步：将自定义的小图标放入static img文件夹中第三步：使用mapInit() { this.map = new AMap.Map("mapContent", { resizeEnable: true, zoom: 4 }); let icon = new AMap.Icon({ image: "./../../../static/img/icon.png",//自定义icon size: new AMap.Size(42,

2020-07-29 22:25:39 3070

原创 vue 引入tinymce富文本框

第一步：package.json 中的dependencies加入"@tinymce/tinymce-vue": "^2.0.0","tinymce": "^5.0.6",执行 npm i第二步：node_modules 中找到tinymce 中skins文件夹，复制到static中，然后从tinymce官网下载中文js文件第三步：准备好之后就可以开始啦 <div class="lists"> <span @click="setContent('#姓名#')"&g

2020-07-29 22:12:43 308

原创 echarts饼图，自定义legend，解决legend字数太多和太长的问题，翻页处理

{ tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { type: "scroll", orient: "vertical", right: 20, top: obj.legendTop, bottom:

2020-07-07 17:14:42 8288 4

原创 echarts折线图，渐变背景色

{ grid: { right: "3%" }, tooltip: { trigger: "axis", backgroundColor: "rgba(38, 104, 255, 0.36)", padding: [5, 15] }, xAxis: [ { type: "category",

2020-07-07 17:06:32 3121 1

原创 element表格滚动加载

template<el-table :data="tableData" v-loadmore="getData" height="427" style="width: 100%;margin-top:32px" > </el-table>自定义指令directives: { loadmore: { // 指令的定义 ...

2020-05-07 16:44:40 802

原创 axios取消接口请求

其中一个应用场景：比如说我们项目中的分页请求，如果点的快的话，一次点十几下，那么我们就会向后端发送十几个请求，这个时候，我们可以把之前还在请求的接口取消掉，只请求最后一页的数据,我是在拦截器里面直接加的let axiosList = []; let cancelToken = axios.CancelToken;let removePending = (config) => { ax...

2020-04-30 17:59:14 182

原创 vue 项目引入高德地图，搜索提示与地理编码

一、第一步index.html 引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"> //plugin后面是你要用到的模块二、...

2020-04-27 16:05:20 1307

原创 element多选表格，回显勾选

一般我们在后端返回要回显的数据之后回显//要回显的数据let plantFormList = [...res.data.data];//tableData 表格//等DOM元素渲染完毕之后再处理回显 this.$nextTick(res => { plantFormList.forEach((res,ind)=>{ tableData.forEach((va...

2020-04-08 14:53:07 1292

原创 element表格自定义表头，slot="header"内，数据不更新的问题

element 官网上 slot=“header”，这种写法，template 内不能获取到showKey的值，打印出来的一直是初始值，将slot=“header” 改成#header ，就可以了<el-table-column show-overflow-tooltip > <template #header> <span>密码<...

2020-03-27 11:47:39 6214 15

原创 el-form-item 绑定复杂数组对象，并自定义验证

<div v-for="(item,index) in submitForm.classesWorkingTimes" :key="index"> <el-form-item :prop="`classesWorkingTimes[${index}].attendanceTime`" :rules="[ { ...

2020-03-26 16:28:13 6840

原创重置vue组件的data数据

做项目的时候有时候需要重置数据，比如用户填完了想重新写，或者弹窗表单，关闭弹窗的时候，就可以用这个方法，当然如果用的element-ui也可以用this.$refs[ruleForm].resetFields();export default{ data(){ retrun{ ruleForm:{ name:"", age:"", sex:'' } ...

2020-03-25 14:08:27 498

原创 element select 框绑定对象时的回显处理

<el-select v-model="dockingForm" placeholder="请选择平台名称" value-key="accessInfoId"//value-key 与下面的key保持一致，且必须是value对象中的一个属性 @change="changeInfoId" > <e...

2020-03-25 13:53:26 2719

原创利用vue中的provide和inject，子组件直接调用父组件中的方法

provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中!!!这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。示例：父组件export default{ provide() { return { demo: this.demo, };...

2020-03-23 11:27:34 711

原创 div plaintext-only属性，点击按钮，插入不可编辑标签

<template> <el-button @click.stop="pushTag()">插入的内容</el-button> <div :key="index" ref="PreviewContent" contenteditable="plaintext-only" @clic...

2020-03-19 14:00:27 748

weixin_43899935的博客