解决el-textarea计数器挡住文本内容的问题
只需要让文本域的框离下边距比字体高度高一点就可以了，这样滚动滚动条，字一直可以看到。
.el-textarea textarea {
padding-bottom: 13px;
}
.el-textarea .el-input__count {
height: 12px;
line-height: 12px;
}
实现表单必填校验提示并自动定位
需求(根据自身需求)：
- tips警告
- 提示框警告
- 自动定位到首个未通过校验字段
建议： 必填的el-form-item需要添加ref（建议ref与prop同名，ref用于定位)
this.$refs['xxx'].validate((valid, object) => {
if(valid) {
//逻辑处理
} else {
let str = []
for (let key in object) {
object[key].map(item => {
str.push(item.message)
})
let dom = this.$refs[Object.keys(object)[0]]
if (Object.prototype.toString.call(dom) !== '[object Object]') {
dom = dom[0]
break
}
// 定位代码
dom.$el.scrollIntoView({
block: 'center',
behavior: 'smooth'
});
}
this.$message.error(str.join(', '));
}
})
解决表单验证失败，解决v-model和prop无法绑定问题
在使用element-ui时，使用了里面自带的表单验证功能。当数据回显在输入框时，仍然无法通过验证。
原代码：
模态框内代码：
<el-form
:model="formItem"
:rules="rules"
ref="formItem"
label-width="100px"
class="demo-status"
>
...
<el-form-item
label="规则设置:"
prop="time"
ref="timeItem"
>
...
<span v-show="num === '迟到'">
在<el-time-picker
is-range
v-model="formItem.timeLate"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
format="HH:mm:ss"
valueFormat="HH:mm:ss"
></el-time-picker>之间打卡
</span>
...
</el-form-item>
</el-form>
data内验证代码:
rules: {
// 校验规则
...
time: [{ required: true, message: '请选择', trigger: 'blur' }]
}
查询过后，发现是v-model绑定的数据需要于prop的内的名字相同。
修改后：
data内验证代码:
rules: {
// 校验规则
...
timeLate: [{ required: true, message: '请选择', trigger: 'blur' }]
}
模态框内代码：
<el-form-item
label="规则设置:"
prop="timeLate"
ref="timeItem"
>
...
</el-form-item>
这样就能通过表单验证了。
实现日期选择器时间选择范围限制
组件代码
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions0"
/>
情景1: 设置选择今天以及今天之后的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}
情景2: 设置选择今天以及今天以前的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
}
}
情景3: 设置选择今天之后的日期（不能选择当天时间）
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now();
}
},
}
}
情景4: 设置选择今天之前的日期（不能选择当天）
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
}
}
情景5: 设置选择三个月之前到今天的日期
data (){
return {
pickerOptions0: {
disabledDate(time) {
let curDate = (new Date()).getTime();
let three = 90 * 24 * 3600 * 1000;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
},
}
}
解决日期选择器的定位问题
在切换不同的日期选择器时，如果是使用v-if来就行切换的话，会出现定位错误的问题。
实际效果图：
解决方法：不要使用v-if来显示隐藏，使用v-show来对日期选择器显示隐藏。
实际效果图：
常见el-form表单的自定义正则表达式
基本的表单属性name、password、phone、peopleID、carID、email、address...
如下演示：vue.js
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 7, message: '长度在 2 到 7 个字符' },
{ pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文' }
//{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母开头，长度在2-5之间， 只能包含字符、数字和下划线' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 5,max: 25, message: '长度在 5 到 25个字符' },
{ pattern: /^(\w){5,25}$/, message: '只能输入5-25个字母、数字、下划线' }
],
const validPhone = (rule, value, callback) => {
if(/^1[34578]\d{9}$/.test(value) == false){
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
}
phone: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ validator: validPhone, trigger: 'blur' }
{ pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
],
peopleID: [
{ required: true, message: '请输入身份证ID', trigger: 'blur' },
{ pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份证格式不正确' }
],
carId: [
{ required: true, message: '请输入车牌号', trigger: 'blur' },
{ pattern:/(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/, message: '常规格式：晋B12345'},
],
const validEmail = (rule, value, callback) => {
if (value === '') {
callback(new Error('请正确填写邮箱'));
} else {
if (value !== '') {
var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if(!reg.test(value)){
callback(new Error('请输入有效的邮箱'));
}
} else {
callback();
}
}
email: [
{ required: true, message: '请输入邮箱号', trigger: 'blur' },
{ validator: validEmail, trigger: 'blur' }
],
port: [
{ required: true, message: "请输入端口号", trigger: 'blur' },
{ validator: validateNumber, trigger: 'blur' },
],
实现el-autocomplete清除后自动弹出建议框
使用elementUI中的el-autocomplete组件，可以在输入时自动弹出提示框，但触发clearable后并没有自动弹出，若想实现此时自动弹出，可以在clear钩子上修改组件内部的activated。
<el-autocomplete
ref="autocompleteRef"
v-model="searchVal"
clearable
:placeholder="请输入"
:fetch-suggestions="querySearch"
@select="selectSearch"
@clear="handleClear"
/>
const autocompleteRef = ref();
const handleClear = () => {
...
autocompleteRef.value.activated = true;
};
- 但是在这里有一个问题，之前尝试过自定义clear样式和钩子，是无法修改
el-autocomplete内部的activated的，这是为什么呢？
实现输入框尾部蒙层效果
在表示有更多文字内容为展示的时候，通常需要对元素做处理，最常见的是设置超出省略号。但是有时候产品设计上会有其他要求，如尾部蒙层效果。
实现el-input自定义计数器
在使用elementUI的时候，输入框会自带计数器的功能。使用 maxlength 和 minlength 属性, 来控制输入内容的最大字数和最小字数；通过设置 show-word-limit 到 true 来显示剩余字数。
但是这种做法会限制输入框的输入，当出现允许不在限制范围内的字数时，这个计数器就不再使用了。这里讲讲怎么封装一个带自定义计数器的输入框。
表格append行增加固定列阴影
.is-scrolling-middle,.is-scrolling-right
标签页选中活动条样式修改
- 监听样式变化
- 活动条动态样式
后补……
