双击事件(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> ) } })
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)