要求:
- 鼠标滑过, input无值—-不显示el-tooltip框
- input有值—-显示el-tooltip框
- 光标插入input框 —- 显示el-tooltip框
- input框输入文字时—-显示el-tooltip框
- input值,整数最长10位,小数最长10位的数字
/** 使用 */
<el-tooltip
placement=“top-end”
effect=“light”
:manual=“true”
v-model=“showTooltip”
>
<div slot=“content” :style=“{width:’200px’}”>{{splitInputValue}}</div>
<el-input
v-model=“inputModel”
placeholder=“请输入关键词”
@mouseover.native=“inputModel?showTooltip=true:showTooltip=false”
@mouseleave.native=“showTooltip=false”
@focus=“showTooltip=true”
@input=“showTooltip=true”
@blur=“showTooltip=false”
@clear=“showTooltip=false”
clearable />
</el-tooltip>
// 配置data对象
data() {
return {
inputModel: ‘’,
showTooltip: false
}
},
method: {
checkInput() {
const reg = /^(-?)(0|[1-9]([0-9]{0,9})(?:\.\d{1,10})?$/g
if (!reg.test(this.inputModel)) {
this.$alert(‘请输入整数最长10位,小数最长10位的数字’)
}
}
},
// 配置Computed方法
computed: {
splitInputValue (val) {
const inputData = this.inputModel
return inputData ? (inputData.toString()).replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, ‘$1,’) : ‘’
}
}