持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第22天,点击查看活动详情
Elementui蓝色阴影边框相关问题的解决方案
- 1.Tabs标签页出现蓝色阴影边框解决方案
css .el-tabs__item:focus.is-active.is-focus:not(:active) { -webkit-box-shadow: none !important; box-shadow: none !important; } .el-tabs__item,.el-tabs__item:focus,.el-tabs__item:focus-visible{ outline: transparent auto 0px !important; }
2.el-button-radio出现蓝色阴影边框解决方案
css .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) { -webkit-box-shadow: none !important; box-shadow: none !important; } .el-radio-button,.el-radio-button:focus,.el-radio-button:focus-visible{ outline: transparent auto 0px !important; }
3.el-dropdown 下拉菜单出现蓝色阴影边框解决方案
css .el-dropdown-link,.el-dropdown-link:focus,.el-dropdown-link:focus-visible { outline: transparent auto 0px !important; }
Element循环表单验证
- 1.表单格式
如果form表单里面的数据存在数组循环,那么我们又通过rules验证,那么就需要循环表单(如下) ```html <template> <div> <el-form ref='formCase' label-width="150px" :model="fromList" :rules="fromeRules"> <div v-for="(itemList,index) in fromList.valueArray" :key="index"> <el-form-item label="测试一" :prop="'valueArray.'+index+'.value1'" :rules="fromeRules.adName"> <el-input v-model="itemList.value1" :placeholder="测试一"></el-input> </el-form-item> <div> </el-form> <button @click='clickBtn'></button> </div> </template> <script> export default { data() { return { fromList:{ valueArray:[ { value1:'xxx' }, { value1:'xxx' }, ] }, fromeRules:{ adName: { required: true, message: '此项不能为空', trigger: 'blur' }, }, } }, methods:{ clickBtn() { this.$refs['formCase'].validate((valid) => { }) } } } </script> ```
- 2.首先我们需要循环数组,实现表单循环
html <div v-for="(itemList,index) in fromList.valueArray" :key="index"> <el-form-item label="测试一" :prop="'valueArray.'+index+'.value1'" :rules="fromeRules.adName"> <el-input v-model="itemList.value1" :placeholder="测试一"></el-input> </el-form-item> <div>
- 3.然后我们需要在
prop
时使用数组名称+index+具体参数
,同时rules
规则需要单独配置,接着v-model
需要双向绑定对应的值
- 4.最后,valueArray这个最好是一开始就有一组默认为空的数组,否则双向绑定、验证会失败,如果需要动态新增可以使用
this.fromList.valueArray.push(this.$options.data.call(this).fromList.valueArray[0])
javascript fromList:{ valueArray:[ { value1:'xxx',//默认的 }, ] },
Form下面只有一个 input 时回车键刷新页面
需要使用`@keyup.enter.native`
```html <el-input v-model="itemList.value1" :placeholder="测试一" @keyup.enter.native="enterInput"></el-input> ```
type="number"去除输入框聚焦时的上下箭头
```html <template> <div> <el-input v-model="itemList.value1" type="number" :placeholder="测试一" class='clear-number-input'></el-input> </div> </template> <style> /* 设置全局 */ .clear-number-input.el-input::-webkit-outer-spin-button, .clear-number-input.el-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none !important; } .clear-number-input.el-input input[type="number"]::-webkit-outer-spin-button, .clear-number-input.el-input input[type="number"]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none !important; } .clear-number-input.el-input { -moz-appearance: textfield; } .clear-number-input.el-input input[type="number"] { -moz-appearance: textfield; } </style>
```