实现效果:
当鼠标悬浮在输入框时显示上方的提示信息,当鼠标离开输入框时,提示信息消失。
实现方法:
v-if控制提示信息的显隐,当noeIndex=index时显示。
mouseover:鼠标悬浮;mouseleave:鼠标离开。
<div class="item-msg" v-if="nowIndex == index">{{ item.msg }}</div>
<el-input
v-if="item.type == 'input'"
v-model="detailForm[item.prop]"
:placeholder="item.placeholder"
v-on:mouseover.native="showMsg(item, index)"
v-on:mouseleave.native="clearMsg(item)"
></el-input>
data的return中,默认nowIndex的初始值为-1,此时是不显示提示信息的;
nowIndex: -1
methods中:
// 鼠标悬浮
showMsg(item, index) {
if (item.msg && item.msg !== '') {
this.nowIndex = index
}
},
// 鼠标离开
clearMsg(item) {
if (item.msg) {
this.nowIndex = -1
}
},