Element UI el-input：如何在focus时将placeholder值设为双向绑定？

Question

elementui前端怎么实现el-input标签的placeholder绑定当前的数据值的同时，当focus事件触发的时候将placeholder的值转为双向绑定的？v-model直接绑定的话placeholder就会失效，我希望实现某些网站的点击之后就自动将placeholder的值输入的那种效果，后续还能拿到这个值进行操作。

Answer 1

在 Vue.js 中实现点击输入框保存输入值作为 placeholder。

实现步骤

1. 定义数据属性：存储当前的 placeholder 值和输入框的值。
2. 绑定 placeholder：使用 v-bind 指令将 placeholder 绑定到数据属性上。
3. 监听 focus 事件：在输入框获得焦点时，将 placeholder 的值更新为输入框的值。

示例代码

模板部分 (.vue 文件)

<template>
  <div>
    <el-input
      v-model="inputValue"
      :placeholder="placeholder"
      @focus="handleFocus"
      @blur="handleBlur"
    ></el-input>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      inputValue: '',
      placeholder: '请输入内容',
    };
  },
  methods: {
    handleFocus() {
      this.placeholder = this.inputValue;
    },
    handleBlur() {
      this.placeholder = '请输入内容';
    },
  },
};
</script>

解释

1. 定义数据属性：

   • inputValue：用于存储输入框的值。
   • placeholder：用于存储 placeholder 的初始值。

2. 绑定 placeholder：

   • 使用 v-bind:placeholder="placeholder" 将 placeholder 绑定到数据属性 placeholder 上。

3. 监听 focus 和 blur 事件：

   • handleFocus 方法：在输入框获得焦点时触发，将 placeholder 更新为输入框的当前值。
   • handleBlur 方法：在输入框失去焦点时触发，将 placeholder 恢复为初始值。

Answer 2

自定义指令：

<template>
  <el-input
    v-model="inputValue"
    v-auto-placeholder="placeholderText">
  </el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      placeholderText: '请输入内容'
    }
  },
  directives: {
    autoPlaceholder: {
      mounted(el, binding) {
        const input = el.querySelector('input')
        input.placeholder = binding.value
        
        input.addEventListener('focus', () => {
          if (!input.value) {
            input.value = binding.value
            input.dispatchEvent(new Event('input'))
          }
        })
      }
    }
  }
}
</script>