- 博客(48)
- 收藏
- 关注
RSS订阅原创 [Vue warn]: Error in mount hook: “TypeError: Cannot read properties of null (reading ‘getAttribute‘)
使用Echarts报这个错误原因是Echarts的图形容器还未生成就对其进行了初始化，换成vue 的 $refs 获取该图形容器对象就可以了。
2023-04-19 11:16:12
651
原创 el-dialog可拖拽
1. 先创建一个js文件//directive.js文件import Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dia
2022-01-27 10:23:20
5780
9
原创 解决el-col没值 不占位的问题
解决方法：加一个css.el-col{border:1px solid transparent}即使el-col没内容也会自动占位，不会往前推了
2021-12-13 10:12:22
2371
原创 js公历转农历
将以下js复制粘贴 引入 /* 公历转农历代码思路：1、建立农历年份查询表2、计算输入公历日期与公历基准的相差天数3、从农历基准开始遍历农历查询表，计算自农历基准之后每一年的天数，并用相差天数依次相减，确定农历年份4、利用剩余相差天数以及农历每个月的天数确定农历月份5、利用剩余相差天数确定农历哪一天 */// 农历1949-2100年查询表 function sloarToLunar(sy, sm, sd) { let lunarYearArr = [ 0x0b557.
2021-09-15 10:31:14
1803
2
原创 el-form回车页面刷新
由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。解决方法1：加一个隐藏的文本框，即表单不只有一个文本框<el-form-item style="margin-bottom:0;display:none;"> <el-input></el-input></el-form-item>解决方法2：阻止form的enter(回车键)事件<el-form @submit.native.prevent> &
2021-06-17 10:34:29
787
原创 数组中涉及的常见需求问题
找两个数组的交集 var arr1 = [3, 2, 1]; var arr2 = [ { name: 'name1', id: 1 }, { name: 'name2', id: 2 }, { name: 'name3', id: 3 }, { name: 'name4', id: 4 }, { name: 'name5', id: 5 }, ]; var result = arr2.filter(f
2021-05-13 14:33:04
131
原创 table 表头斜线样式
1.csshtml:<table class="tableStyle"> <thead> <tr> <th> <div class="out"> <b>信息</b> <em>姓名</em> </div
2021-05-08 11:03:29
688
原创 vue打印（可分页，可显示背景色，可打印echarts）
在项目中创建print.js文件，将下面代码复制粘贴//print.js// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); .
2021-04-26 11:01:34
1341
原创 webpack 运行项目内存溢出(Last few GCs)---热更新加载项目崩溃
遇到的问题：项目第一次运行时，没问题不报错，然后保存项目，热更新重新加载时，控制台会输出以下信息，导致项目断开，需要重新运行这就是webpack 运行项目内存溢出(Last few GCs)解决方法安装increase-memory-limitnpm i -g increase-memory-limit在运行项目，热更新加载项目时就不会在报错内存溢出啦...
2021-03-11 14:01:22
12492
1
原创 webpack之常用plugin的配置和使用
-webpack中的插件主要是用来完成loader和配置无法完成的事情-常见的几种Plugins： HtmlWebpackPlugin，MiniCssExtractPlugin，OptimizeCssAssetsWebpackPlugin，NamedChunksPlugin，ProvidePluginHtmlWebpackPlugin参考文档html-webpack-plugin插件默认会创建一个HTML模板，并自动引入打包生成的几个主要的chunk包也可以通过template属性配置自己的
2021-02-19 14:32:53
654
原创 vue混入 mixin
混入：公共方法复用，可以使用混入，减少代码冗余定义一个js，将公共方法写入const mixin = { data() { return { msg: "混入信息" }; }, methods: { getmsg() { console.log(this.msg); } }};export default mixin;要用到这个公共方法的页面，将混入js引用，注册<script> import m.
2021-02-05 09:42:27
172
原创 vue全屏和退出全屏
<template> <div> <div class="fullscreen-button" @click="toggleFullscreen" v-show="is">全屏</div> <div class="fullscreen-button" @click="toggleFullscreen" v-show="!is">退出全屏</div> </div></template>
2021-02-05 09:14:08
493
原创 el-upload传其他数据
:data={需要传的参数}:data={id:memberId}<el-upload class="upload" ref="upload" :action="uploadUrl" :headers="uploadHeaders" accept=".jpg, .jpeg, .png, .bmp" :limit="1" :data={id:memberId} :before-upload="picBeforeUpload" :on-success="picSuccess" :
2021-02-04 14:18:09
288
原创 企业微信-面部采集功能（微信JS-SDK调用手机相机拍照上传）
企业微信文档https://work.weixin.qq.com/api/doc/90000/90136/905121.引入JS文件<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>2.获取 wx.config要用到的配置参数参考文档：通过config接口注入权限验证配https://work.weixin.qq.com/api/doc/90000/90136/90514getWxConf
2021-02-02 15:54:58
3076
2
原创 解决el-upload遇到v-for的问题
<div v-for="(item, index) in contractData" :key="index" class="contractItem" > ... <el-upload ref="upload" :action="uploadUrl" :headers="uploadHeaders" accept=".pdf, .jpg, .png, .jpeg" multiple .
2021-01-04 11:37:42
1110
4
原创 el-input禁止复制粘贴（用于密码）
<el-input v-model.trim="password" placeholder="请输入密码" @paste.native.capture.prevent="handlePaste"></el-input>@paste.native.capture.prevent事件修饰符说明:native: 表明这个是dom的原生事件,如果不加native, vue会认为paste是一个自定义事件,必须要在组件内手动触发, 那么在粘贴的时候自然就不会触发了
2021-01-04 11:26:52
2401
原创 vue清除地址栏参数
第一种：this.$router.push({ query: {} });第二种：let path = this.$route.path; //先获取路由路径this.$router.push(path); //再跳转路由路径，query参数没带过去，所以被清除了
2020-11-23 16:13:49
3069
1
原创 前端关于时间年月日的原生js
js获取当前年月日var date = new Date();date .getYear(); //获取当前年份(2位)date .getFullYear(); //获取完整的年份(4位)date .getMonth(); //获取当前月份(0-11,0代表1月)date .getDate(); //获取当前日(1-31)date .getDay(); //获取当前星期X(0-6,0代表星期天)date .getTime(); //获取当前时间(从1970.1.1开始的毫秒数)date .g
2020-11-13 09:53:50
342
原创 vue日程/日历管理插件FullCalendar （模仿wps日程）
vue项目中使用fullcalendar插件 （官网地址 https://fullcalendar.io/)1.npm下载"@fullcalendar/core": "^4.3.1","@fullcalendar/daygrid": "^4.3.0","@fullcalendar/interaction": "^4.3.0","@fullcalendar/timegrid": "^4.3.0","@fullcalendar/vue": "^4.3.1",2.页面引入-script-//引
2020-11-13 09:49:45
4546
7
原创 vue-cli3 项目优化
总结了七种方法，1.路由懒加载路由配置,component: resolve => require(['@c/home/home'], resolve),引入路由var router = new VueRouter({ mode: 'hash', routes: [ { path: '/home', component: resolve => require(['@c/home/home'], resolve)
2020-09-18 15:26:37
262
原创 谷歌插件
谷歌插件谷歌插件网 http://www.cnplugins.com/window电脑1.下载下来的安装包后缀名改成.rar2.解压到对应新建文件中3.有下划线的去掉下划线4.打开开发者模式-加载已解压程序就可以了在这里插入图片描述...
2020-09-09 10:39:58
189
原创 浏览器前进后退按钮联动vue菜单高亮和面包屑变化
在mounted里监听popstate事件，change里面写要改变的方法逻辑，来改变高亮和面包屑<template> <!-- 菜单 --> <div class="menu"> <div class="btn" @click="isExpand"> <i class="iconfont iconcollapse"></i> </div>
2020-09-09 10:35:46
954
原创 用ref控制元素隐藏显示
用ref控制元素隐藏显示<div ref='box'>我是盒子</div>this.$refs.box.$el.style.display = 'none'或者在元素还未渲染使用setTimeoutsetTimeout(() => { _this.$refs.box.$el.style.display = 'none';}, 100);
2020-09-07 15:08:56
5838
原创 vue项目配置gzip，优化代码解决加载慢的问题
vue项目优化打包上传到线上后，加载很慢，使用gzip安装compression-webpack-plugincnpm install compression-webpack-plugin --save-devvue.config.js配置Gzip压缩 // 导入compression-webpack-pluginconst CompressionWebpackPlugin = require('compression-webpack-plugin');// 定义压缩文件类型con
2020-07-28 19:00:29
732
原创 vue中的sync，用于父子组件传值
借鉴于：https://www.jianshu.com/p/d42c508ea9de官方推荐使用一种update:my-prop-name 的模式来替代事件触发，目的是为了优雅而不粗鲁的实现父子组件间的双向绑定！先来完成一个小功能：通过父组件按钮将子组件显示出来，如图：父组件代码：<template> <div> <input type="button" value="我是父组件中的按钮"
2020-07-25 09:54:54
493
原创 js获取近半年月份
//获取近半年月份 getMonths() { var monthArr = []; var data = new Date(); var year = data.getFullYear(); data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份 for (var i = 0; i < 6; i++) { data.setMonth(data.getMonth() - 1
2020-07-16 18:25:04
1232
原创 vue踩坑：vue+ element ui 表单验证有值但验证失败
vue踩坑：vue+ element ui 表单验证有值但验证失败。要对应！！！！！！！！1+2=>31,2必须和3名称保持一致
2020-07-06 15:41:33
1124
原创 标准盒模型和IE盒模型
标准盒模型：宽度=width+padding2+border2ie盒模型：宽度=width (width已经包括了content，padding和border)
2020-07-02 16:35:39
199
原创 本地vue项目部署到线上测试环境，报405错误解决方法
当Vue项目部署至nginx服务器后会出现405错误，首先检查一下，请求接口的方法是否正确，然后看看请求是否发送到后台了，最后按照以下步骤执行！！！原因：出现这个错误，是因为未在nginx.conf中配置api的请求地址。解决方法：如我的api请求地址为：http://172.21.0.88:8080/api，那么我就在nginx.conf中的server{}里面添加以下配置：location /api/{ proxy_pass http://172.21.0.88:8080;}添加
2020-06-02 14:38:34
13154
1
原创 img图片不存在时设置默认图片
img设置是一个圆的样子，发现调取接口之后返回img路径是空，img显示是一个正方形，找了方法解决当图片不存在时设置默认图片<img src="图片的url地址" alt="图片XX"/> <img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/> <img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/> &l
2020-06-01 17:58:55
1150
原创 vue-cli3搭建项目
准备工作 ： 环境要求vue cli要求node版本8或者更高（8.10.0+推荐） vue cli3 需要node版本>=8.9, （官方推荐：8.11.0+ ）有node的情况下就可以使用npm进行安装了1.打开项目文件夹进入cmd 输入 `npm install -g @vue/cli@3` 2.下载好之后输入vue create ‘你的项目名’ 回车创建3.接着就会进入问答环节（选择一些配置）3.1 如果你是第一次使用3.0版本的话，下面的第一个选项是没有的可以忽略
2020-05-19 14:18:59
235
原创 github上下载单个文件夹
下载某一个文件夹，例如 文件夹 tea1.先进入到你要存放的路径$ cd <路径>我的操作 ： $ cd C:desktop/tea_demo我的tea_demo文件夹是刚刚创建的空文件夹。想在命令行里创建文件夹的话，那就$ mkdir 文件夹名称2.创建一个空的本地仓库$ git init3.连接远程仓库GitHub$ git remote add -f origin <url>我的操作：$ git remote add -f origin https:/.
2020-05-19 14:10:38
459
1
原创 vue打包优化
1、路由懒加载当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。所以在router文件夹下 index.js 做如下配置2、不生成.map文件webpack默认会生成map文件，map文件是用来调试代码的。此外，这里还要注意sourcemap的配置分 开发（dev...
2020-02-27 15:16:07
221
原创 vuex在F5刷新后，数据初始化的解决方法
页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后，vuex便可以被应用了。vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。为了克服这个问题， vuex-pe...
2020-02-25 11:51:53
1227
原创 关于时间的项目可以用的js
export default { /* * 语言 */ localeLanguage: window.localStorage.localeLanguage, /* * 月份名称中英文 */ _monthNameEn : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','...
2020-01-10 14:59:54
158
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人