vue2 自定义指令 替换 el-input 的placeholder 解决方案

背景：产品需要在聚焦时变换原标签的placeholder

原理自定义指令绑定时， 拿到对应节点dom, 根据节点取出对应的 placeholder 值；

1. 在聚焦获取 placeholder 值， 将原始值存起来, 将指令传入的值赋给 placeholder

2. 失焦时做对应的处理, 重新将旧值赋给 placeholder

通过const compTag = vnode.componentInstance.$options._componentTag 拿到标签，如下

拿到的节点

实现效果

完整code

   // 切换placehold内容
    'toggle-place': {
      bind: function (el, binding, vnode) {
        let inputRef = null
        try {
          const compTag = vnode.componentInstance.$options._componentTag
          console.log('标签compTag===》', compTag);
          if (compTag == 'el-select') {
             inputRef = vnode.componentInstance.$refs.reference.getInput()
          } else if (compTag == 'el-input') {
            inputRef = vnode.componentInstance.getInput()
          } else if (compTag == 'el-autocomplete') {
            inputRef = vnode.componentInstance.getInput()
          }
          console.log('inputRef', inputRef);
          if (!inputRef) {
            console.log('input ref not found!')
            return
          }
          const originPlace = inputRef.placeholder
          inputRef.addEventListener('focus', function (e) {// 聚焦时
            let text = originPlace
                   if (typeof binding.value == 'string') {
              text = binding.value
            } else if (binding.value && binding.value[0]) {
              text = binding.value[0]
            }
            inputRef.placeholder = text
          })
             inputRef.addEventListener('blur', function (e) {// 失去焦点时 再次替换原理的 placeholder
            inputRef.placeholder = originPlace
          })
        } catch (error) {
          console.log('error', error);
        }