@ focus等事件

<template>
    <view>
         <view>
             <text style="width: 100%; height: 150upx;">@input当输入框改变时执行{{name}}</text>
             <input type="text" :value="title" @input="change">
         </view>
         
         <view>
             <text style="width: 100%; height: 150upx;">focus获得焦点时执行通俗说就是点击输入框{{name}}</text>
             <input type="text" :value="title" @focus="focus">
         </view>
         <view>
             <text style="width: 100%; height: 150upx;">blur失去焦点时执行，通俗说就是离开输入框{{name}}</text>
             <input type="text" :value="title" @blur="blur">
         </view>
         
         <view>
             <text style="width: 100%; height: 150upx;">confirm点击完成按钮/回车键{{name}}</text>
             <input type="text" :value="title" @confirm="confirm">
            <!-- <text  @confirm="confirm">点击</text> -->
         </view>
         
         <view>
             <text style="width: 100%; height: 150upx;">click单击事件{{name}}</text>
             <input type="text" :value="title" @click="click">
         </view>
         
         <view>
             <text style="width: 100%; height: 150upx;">tap组建被触摸{{name}}</text>
             <input type="text" :value="title" @tap="tap">
         </view>
         
         <view>
                     <text style="width: 100%; height: 150upx;">longpress长时间按压{{name}}</text>
                     <input type="text" :value="title" @longpress="longpress">
         </view>
         
         <view>
                     <text style="width: 100%; height: 150upx;">touchstart触摸开始{{name}}</text>
                     <input type="text" :value="title" @touchstart="touchstart">
         </view>
         
         <view>
                     <text style="width: 100%; height: 150upx;">touchend触摸结束{{name}}</text>
                     <input type="text" :value="title" @touchend="touchend">
         </view>
         
         <view>
                     <text style="width: 100%; height: 150upx;">touchcancel手指移动{{name}}</text>
                     <input type="text" :value="title" @touchcancel="touchcancel">
         </view>
         
         
         <view>
                     <text style="width: 100%; height: 150upx;">touchcancel触摸被打断{{name}}</text>
                     <input type="text" :value="title" @touchcancel="touchcancel">
         </view>
         
         
         
     </view>
 </template>
 
 <script>
     export default {
         data() {
             return {
                 name:'',
                 title:''
             }
         },
         methods: {
             change(e){
                 console.log("输入框改变")
                this.name = e.target.value
             },
             focus(){
                 console.log("获得焦点")
                 this.name = '点击输入框'
             },
             blur(){
                 console.log("失去焦点")
                  this.name = '离开输入框'
             },
             confirm(){
                 console.log("点击完成按钮/回车键")
                  this.name = '离开输入框'
             },
             // 使用时 tap 和 click 只使用一个就好 
             click(){
                 console.log("单击事件")
                 this.name = '单击事件'
             },
             tap(){
                 console.log("组件被触摸")
                 this.name = '组件被触摸'
             },
             longpress(){
                 console.log("长时间按压")
                 this.name = '长时间按压'
             },
             //不推荐使用，请使用longpress
             // longtap(){
             //     console.log("长时间触摸")
             // }
             touchstart(){
                 console.log("触摸开始")
                 this.name = '触摸开始'
             },
             touchend(){
                 console.log("触摸结束")
                 this.name = '触摸结束'
             },
             touchmove(){
                 console.log("手指移动")
                 this.name = '手指移动'
             },
             //如打进电话， （暂时无法演示）
             touchcancel(){
                 console.log("触摸被打断")
                  this.name = '触摸被打断'
             }            
         }
     }
</script>

<style>
input{
    height: 80rpx;
    border: 2rpx solid #4CD964; 
    border-radius:10rpx; 
    width: 300rpx;  
    }
</style>