位置: IT常识 - 正文
vue的双击事件(dbclick的使用)(vue click触发两次)
编辑：rootadminvue的双击事件(dbclick的使用) 双击事件(dblclick)
本文链接地址:https://www.jiuchutong.com/zhishi/287154.html
转载请保留说明！
推荐整理分享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> ) }})上一篇：[遇到的问题-已解决]Cannot resolve plugin org.apache.maven.plugins:maven-compiler-plugin:3.1(遇到的问题及解决方法)
下一篇：Yolov5/Yolov7 引入CVPR 2023 BiFormer: 基于动态稀疏注意力构建高效金字塔网络架构，对小目标涨点明显(yolov5 教程)
