自定义指令：el-input获取焦点清空默认值，失去焦点获取默认值 输入不变化

主要依赖于vue2 对element-ui中的el-input开发的输入框获取焦点清空默认值 失去焦点默认值还原

当输入的值发生变化的时候就不再继续清空了 只有第一次清空 主要代码如下

我是再main.js中写的全局组件

//mian.js
import Vue from 'vue'
import App from './App.vue'


//创建自定义指令挂载全局
Vue.directive("inputDefault", {
  inserted: function (el, binding, vnode) {
    let defaultValue = el.children[0].value;
    el.children[0].addEventListener("focus", () => {
      if (el.children[0].value == defaultValue) {
        el.children[0].value = "";
      }
    });
    el.children[0].addEventListener("blur", () => {
      if (el.children[0].value == "") {
        el.children[0].value = defaultValue;
      }
    });
  },
});

new Vue({
  render: h => h(App),
}).$mount('#app')

页面使用的话只需要如下加上自定义指令就好了

 获取焦点清空默认值，失去焦点获取默认值 输入不变化
 <el-input v-model="input1" v-inputDefault ></el-input>