常用事件
1 <template> 2 <view> 3 <view style="width: 100%; height: 150upx;"></view> 4 5 <input type="text" :value="title" 6 style="background-color: #007AFF;height: 100upx" 7 @input="change" 8 9 @focus="focus" 10 11 @blur="blur" 12 13 @confirm="confirm" 14 15 @click="click" 16 17 @tap="tap" 18 19 @longpress="longpress" 20 21 @touchstart="touchstart" 22 23 @touchend="touchend" 24 25 @touchmove="touchmove" 26 27 @touchcancel="touchcancel" 28 /> 29 <!-- 不推荐使用了, 请使用 longpress @longtap="longtap" --> 30 </view> 31 </template> 32 33 <script> 34 export default { 35 data() { 36 return { 37 38 } 39 }, 40 methods: { 41 change(){ 42 console.log("输入框改变") 43 }, 44 focus(){ 45 console.log("获得焦点") 46 }, 47 blur(){ 48 console.log("失去焦点") 49 }, 50 confirm(){ 51 console.log("点击完成按钮/回车键") 52 }, 53 // 使用时 tap 和 click 只使用一个就好 54 click(){ 55 console.log("单击事件") 56 }, 57 tap(){ 58 console.log("组件被触摸") 59 }, 60 longpress(){ 61 console.log("长时间按压") 62 }, 63 //不推荐使用,请使用longpress 64 // longtap(){ 65 // console.log("长时间触摸") 66 // } 67 touchstart(){ 68 console.log("触摸开始") 69 }, 70 touchend(){ 71 console.log("触摸结束") 72 }, 73 touchmove(){ 74 console.log("手指移动") 75 }, 76 //如打进电话, (暂时无法演示) 77 touchcancel(){ 78 console.log("触摸被打断") 79 } 80 } 81 } 82 </script> 83 84 <style> 85 86 </style>
@click 和 @tap 只是用一个
@longtap 不推荐使用, 尽量使用longpress