【1】修改UI样式如el-input__inner不生效
elementui+vue项目中，在当前vue文件中使用style scoped包裹的样式中重置input框的样式无法生效。
解决方案：在本页面重新定义style样式且不需要写scoped即可生效。
注意：为了不影响其他位置的元素样式，需要定义一个特定的class类名便于区分。
如下所示我们想要修改这里el-input的样式：
<div class="mysearch-container"> <el-input placeholder="搜闲置..." v-model="goodsName" clearable @keyup.enter.native="search" style="width:600px"> <el-button slot="append" icon="el-icon-search" @click="search"></el-button> </el-input> </div>
那么在本文件中可以写style如下：
<style> .mysearch-container input.el-input__inner{ border: 2px solid #1d2331; color: #13181f; font-size: 22px; } .mysearch-container input::-webkit-input-placeholder { color: #13181f; font-size: 22px; } .mysearch-container .el-input-group__append, .el-input-group__prepend { background-color: #1d2331; color: #eceef1; vertical-align: middle; display: table-cell; position: relative; border: 2px solid #1d2331; border-radius: 4px; padding: 0 20px; width: 2px; white-space: nowrap; } </style>
之后，另外写个<style scoped> </style> 写其他样式即可
【2】node-sass的安装
npm install --save node-sass --registry=https://registry.npm.taobao.org
【3】表单字段的校验
① 简单提示
name: [ { required: true, message: "姓名不能为空", trigger: "blur" } ], // 多重校验 code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }, { min: 4, max: 4, message: '验证码长度为4', trigger: 'blur' }]
② 添加规则校验
mobile: [ { required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" } ]
③ 自定义校验器
export function isEmail (s) { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s) } import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate"; var validateEmail = (rule, value, callback) => { if(!value){ callback(); } else if (!isEmail(value)) { callback(new Error("请输入正确的邮箱地址")); } else { callback(); } }; email: [ { validator: validateEmail, trigger: 'blur' }, ],
【4】消息提示封装
对message进行封装，支持动态传入消息、时间以及回调函数（当消息关闭时触发）。
main.js配置如下：
import { Message } from 'element-ui'; Vue.prototype.$message = function(msg,duration=1500,callback={}) { return Message({ message: msg, duration: duration, onClose:callback }); }; // 分别对success、warning和error等样式进行设置 Vue.prototype.$message.success = function(msg,duration=1500,callback={}) { return Message.success({ message: msg, duration: duration, onClose:callback }); }; Vue.prototype.$message.warning = function(msg,duration=1500,callback={}) { return Message.warning({ message: msg, duration: duration, onClose:callback }); }; Vue.prototype.$message.error = function(msg,duration=1500,callback={}) { return Message.error({ message: msg, duration: duration, onClose:callback }); };
使用实例如下：
this.$message.success('登录成功',1000, () => { //这里写函数体 });
【5】对象属性操作
① 移除对象属性
移除forminfo对象的密码
delete this.formInfo.password
【6】style与class动态绑定
:style三目运算表达式如下
<a :style={ '样式名': 三目运算符表达式 ? 'true样式值' : 'false样式值' }> 显示页面字段 </a>
:class三目运算表达式如下
<a :class="[ 三目运算符表达式 ? 'true类名' : 'false类名' ]">显示页面字段</a> ## 示例如下 <span :class="[ 2>1?'active':'' ]">{{item.tagName}}</span>
【7】富文本编辑器quill样式在前台页面不生效
即使用富文本编辑器在管理后台编辑好的页面在前台没有样式，页面标签有class但是没有对应的样式。
解决方案如下：
main.js引入样式
import 'quill/dist/quill.snow.css'
页面父元素使用ql-snow ql-editor 修饰：
<div class="ql-snow ql-editor" v-html="newsInfo.content"></div>
