經常使用事件
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 只是用一個spa
@longtap 不推薦使用, 儘可能使用longpress code