<template>
<view class="container">
<text>{{title}}</text>
<input type="text" :value="title" style="background-color: #F5F5F5;"
@input="change"
@focus="focus"
@blur="blur"
@confirm="confirm"
@click="click"
@tap="tap"
@longpress="longpress"
@longtap="longtap"
@touchstart="touchstart"
@touchend="touchend"
@touchmove="touchmove"
@touchcancel="touchcancel"/>
</view>
</template>
<script>
export default {
data() {
return {
title: '测试'
}
},
methods: {
change(e){
console.log(e.detail.value)
this.title = e.detail.value
},
focus(){
console.log('获得焦点')
},
blur(){
console.log('失去焦点')
},
confirm(){
console.log('类似于完成、或是回车键')
},
click(){
console.log('组件单击事件')
},
// 在网页上tap组件会覆盖click组件,在手机上不会覆盖
tap(){
console.log('被触摸')
},
longpress(){
console.log('长时间按住')
},
// 不推荐使用
longtap(){
console.log('长时间触摸')
},
touchstart(){
console.log('触摸开始')
},
touchend(){
console.log('触摸结束')
},
touchmove(){
console.log('手指移动')
},
touchcancel(){
console.log('触摸被打断')
}
}
}
</script>
<style>
.container {
padding: 20px;
font-size: 14px;
line-height: 24px;
}
</style>
UNI-APP的事件处理
最新推荐文章于 2024-09-16 01:56:42 发布