前言：
由于最近开发的项目基于vue，所以本文是基于vue的
1.阻止鼠标右键事件
mounted () { let that = this // 注意 取消默认行为 我们鼠标右键的时候 一般是弹出 浏览器的 属性 刷新等等的那个菜单 // 阻止默认行为 就没有那个菜单出来了 document.addEventListener('contextmenu', function (e) { e.preventDefault() that.anQuanSeach() console.log("^^^…………………………大大大") }) },
2.bug： 表单编辑时输入无效
做表单时点击编辑页，发现无法对input框内的数据修改(有时也会很正常，但后患无穷)，控制台警告如下
关键词:violation
使用解决办法：
1. （1）npm i default-passive-events -S 2. （2）main.js中加入：import ‘default-passive-events’
成功解决后
然而，我项目中有使用拖拽连线组件jsplumb，发现连线报错。
最终解决方法为：将default-passive-events放到表
单组件中引入而不是全局引入
import './default-passive-events/dist/index'//解决控制台警告……
3.显示/隐藏密码功能+小眼睛效果
//模板 <el-input :type="passwordType" v-model="dialogEdieot.password" autocomplete="off" ></el-input> <span class="show-pwd" @click="showPwd"> <svg-icon :icon-class=" passwordType === 'password' ? 'eye' : 'eye-open' " /> </span> data: passwordType: 'password', method: showPwd () { if (this.passwordType === 'password') { this.passwordType = '' } else { this.passwordType = 'password' } }, css: .show-pwd { position: absolute; right: 0.2084rem; top: -0.0052rem; font-size: 0.0833rem; color: #7c7c7e; opacity: 0.5; cursor: pointer; user-select: none; }
4.当表单必填项没填时提交按钮不可点击且置灰
思路是：
使用watch监听表单数据（v-model绑定的）来动态控制按钮的disabled属性
注意：下面watch是监听的对象，使用的深度监听
watch: { dialogEdieot: { handler (newValue, oldValue) { // 如果点击提交按钮必填项为空按钮不可点击且灰色 if (newValue.ip && newValue.name ) { this.isTiJiao = false //当IP和name无变化时按钮为可点击 } else { this.isTiJiao = true//当IP和name无变化时按钮为不可点击 } }, deep: true, } },
5.屡试不爽的神技-刷新页面
工作中使用比较多，简单暴力可以避免很多很多坑点，还有一个有点，用户体验度比较好
在你的app.vue页面内（如果你的根组件不叫这个，那就找你的路由出口）
按照以下方式设置：
<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', provide () { return { reload: this.reload } }, data () { return { isRouterAlive: true } }, methods: { reload () { this.isRouterAlive = false this.$nextTick(function () { this.isRouterAlive = true }) } } } </script>
然后就可以在任意一个组件内这样使用：
1. inject: ['reload'], 2. data () { 3. return {} 4. },
6.ElementUI表单验证注意事项
其实就三步，这个不多说。
问题：表单验证只有在错误的时候才会提示，且一直卡在错误提示处，这是因为定义的规则那里没有对正确的情况下写callback（）
data () { var checkIp = (rule, value, callback) => { if (!value) { return callback(new Error('ip不能为空')) } let vulue2 = "" + value let values = vulue2.replace(/\s+/g, "") var pattern = /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[1-9])\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)$/ if (pattern.test(values)) { callback() } else { callback(new Error('非法ip地址!')) //ip地址输入有误 } } return {}
7.ElementUI最大输入和最小输入及清空图标
maxlength="30" //最多输入30个字符
minlength="30" //最小输入30个字符
clearable //显示清空按钮
<el-input maxlength="30" //最多输入30个字符 clearable //显示清空按钮 placeholder="请输入1-30个字符" v-model="dialogEdieot.ip" autocomplete="off" />
8.数组累计问题
场景：
比如点击详情页本来数据是三条，再点其他数据累加了，大概率是数组push()的原因，先清空数组再装数据就好了。
