el-input 怎么实现动态禁用

Krui
  • 95

使用el-input 想实现动态禁用 当失去焦点时禁用input,点击input时 重新获取焦点取消禁用 我现在的写法禁用后没有办法重新获取焦点取消禁用,想知道怎么实现

<el-input
  v-model="state"
  :disabled="sss"
  placeholder="请输入内容"
  @focus="focusff"
  @blur="blurdd"
/>
data() {
      return {
        state: ''
        sss: true
      };
    },
methods: {
      blurdd() {
        this.sss = true
        console.log('触发1')
      },
      focusff() {
        this.sss = false
        // if(input.blur) {return this.sss = true };
        console.log('触发2')
      },
回复
阅读 538
3 个回答

把聚焦事件改为点击事件,然后判断禁用状态,如果是禁用状态就取消禁用并聚焦,如果已经聚焦则不做处理

你的需求:‘失去焦点时禁用input,点击input时 重新获取焦点取消禁用’。
实现:

    <el-input
      ref="myButton"
      v-model="state"
      :disabled="sss"
      placeholder="请输入内容qqqq"
      @click.native="clickEvent"
      @blur="blurdd"
    />
    
    blurdd() {
      this.sss = true
      console.log('触发1')
    },
    clickEvent(event) {
      console.log('触发2')
      this.sss = false
      this.$nextTick(() => {
        this.$refs.myButton.focus()
      })
    },
    
你知道吗?

宣传栏