目录
前言：
由于最近开发的项目基于vue，所以本文是基于vue的
1.阻止鼠标右键事件
mounted () {
let that = this
// 注意 取消默认行为 我们鼠标右键的时候 一般是弹出 浏览器的 属性 刷新等等的那个菜单
// 阻止默认行为 就没有那个菜单出来了
document.addEventListener('contextmenu', function (e) {
e.preventDefault()
that.anQuanSeach()
console.log("^^^…………………………大大大")
})
},2.bug： 表单编辑时输入无效
做表单时点击编辑页，发现无法对input框内的数据修改(有时也会很正常，但后患无穷)，控制台警告如下
关键词:violation
使用解决办法：
（1）npm i default-passive-events -S
（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页面内（如果你的根组件不叫这个，那就找你的路由出口<router-view />）
按照以下方式设置：
<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>然后就可以在任意一个组件内这样使用：
inject: ['reload'],
data () {
return {}
},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()的原因，先清空数组再装数据就好了。
