vue的双击事件(dbclick的使用)(vue click触发两次)

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

推荐整理分享vue的双击事件(dbclick的使用)(vue click触发两次)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue双击事件不起作用,vue双击触发单击事件,vue点击事件没反应,vue的双击事件,vue按钮点击一下触发两次事件,vue按钮点击一下触发两次事件,vue双击触发单击事件,vue双击事件不起作用,内容如对您有帮助，希望把文章链接给更多的朋友！

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