如何通过自定义指令将 elementui el-tooltip 绑定到某个元素?

发布于 2022-09-12 13:46:52 字数 1065 浏览 15 评论 0

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

失退 2022-09-19 13:46:52

请问博主这个问题解决了吗?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文