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

qngyun1029
  • 742

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 () {

    }
}
回复
阅读 1.6k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏