vue移动端双击事件（vue的双击事件(dbclick的使用)）

双击事件(dblclick)

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

语言：vue3/Ts

函数库：vueuse

1                  、需求分析

双击事件触发；

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

展示输入框；

输入框自动聚焦；

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

效果展示：

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>   ) } }) ​