如何通过自定义指令将 elementui el-tooltip 绑定到某个元素?
element 做的项目,动态表格需要添加行,并且需要做校验,但是默认下提示信息布局不好看(错误信息在输入框下面),所以我想通过指令实现,如果验证错误的控件,鼠标移动上去,就通过el-tooltip
控件来提示错误,现在主要的问题是,如何在指令里面将 el-tooltip
和 输入框(验证错误的控件)绑定起来;
指令代码如下:
import Vue from 'vue'
export default{
bind(el, binding, vnode) {
const formItem = el.querySelector('.el-form-item__content')
formItem.onmouseenter = (s) => {
let current = el
let formItemContent = current.children[0]
if(formItemContent.children && formItemContent.children.length > 1) {
let msg = formItemContent.children[1].innerText //错误信息
// const ep = new Vue({
// el: document.createElement('span'),
// template: `<el-popover
// content="${msg}"
// popper-class="el-tooltip__popper" placement="top-start" :open-delay="10" trigger="hover"> <span slot="reference">${msg}</span>
// </el-popover>` })
// formItem.appendChild(ep.$el)
}
}
},
unbind () {
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
请问博主这个问题解决了吗?