1. 程式人生 > >vue 移動端仿hover事件

vue 移動端仿hover事件

vue2.0的移動端的touch事件

touch的開始事件是@touchstart,

移動過程是@touchmove,

結束事件是@touchend

模仿hover效果,在PC端就是滑鼠移入移出的效果,在移動端就是手指按下開始和結束的過程,上程式碼

<input class="immediately-btn" :class="{touchColor:whether}" type="button" value="立即領取" @touchstart="touchstart()" @touchend="touchend()">

css中給按鈕設定一個顏色,touchColor是按下的顏色,wheter剛開始預設的是false

export default {
    data(){
        return{
            whether:false
        }
    },
    methods:{
        touchstart(){
            this.whether = true;
        },
        touchend(){
            this.whether = false;
        }
    }
}