vue的双击事件(dbclick的使用)

双击事件(dblclick)

vue事件中基于点击事件，有一个双击事件，通过dblclick事件触发。

语言：vue3/Ts

函数库：vueuse

1、需求分析

  1. 双击事件触发；

  2. 在双击时隐藏对应文字元素；

  3. 展示输入框；

  4. 输入框自动聚焦；

  5. 失去焦点展示文字（元素等）

  6. 效果展示：

vue的双击事件(dbclick的使用)

2、代码实现(使用jsx写法作为示例)

import { ref, nextTick } from 'vue'
​
export default defineComponent({
  name: 'test',
  setup() {
    const count = ref(999) // 输入框绑定的数据源
    const ipt = ref() // dom元素的定义以及获取
​
    const show = ref(false) // 文字的展示和隐藏
    
    /**
    * 双击事件执行函数
    */
    async function bdlFn() {
      show.value = true
      await nextTick() // 等待dom元素加载完成
      ;(ipt.value as HTMLInputElement).focus() //input元素聚焦
    }
    
    async function iptBlur() {
      console.log('blur')
      show.value = false
    }
    return { count, ipt, iptChange, show, bdlFn, iptBlur }
  },
  render() {
    return (
      <div>
        // jsx语法的v-if实现
        {this.show && (
          <input
            ref={'ipt'}
            class={'h-100px'}
            v-model={this.count}
            onChange={this.iptChange}
            onBlur={this.iptBlur}
            type="text"
          />
        )}
        {!this.show && (
          <span
            onDblclick={this.bdlFn}
            // unocss(原子化css)，用着挺方便
            class={'h-30px w-100px inline-block bg-blue-200 cursor-pointer'}
          >
            {'你好'}
          </span>
        )}
      </div>
    )
  }
})
​
标签 , ,