【学习随记】btn

<template>
    <div class="Btn">

        <!-- 按钮 -->
        <ul class="btnWrap" ref="btnClick">
            <li v-for="(item, index) in btnList"
                @touchstart="wsSendStart(item, index)"
                @touchend="wsSendEnd(item, index)"
            ></li>
        </ul>
        

    </div>
</template>
<script>

import {
    closePage,
    osCom
} from './../assets/js/public.js';

export default {
    data(){
        return {
            btnList: [
                {
                    name: '左',
                    type: 'left'
                },
                {
                    name: '右',
                    type: 'right'
                }
            ],
            
            sendTimerLeft: null,  // 定时器
            sendTimerRight: null,  // 定时器
            sendNumLeft: 0, // 计数
            sendNumRight: 0, // 计数

            isIOS: !!(navigator.userAgent).match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)


        }
    },
    methods: {
        
        // 按下按钮
        wsSendStart(item, index){
            let that = this;

            console.log("0 按下按钮 index: ", index+1);

            if(index == 0){
                // console.log("sendNumLeft 1", that.sendNumLeft)
                that.sendFn(that.sendNumLeft)
                that.sendTimerLeft = setInterval(function(){
                    // console.log("0-1 按下按钮 sendTimerLeft: ", index)
                    
                    that.sendNumLeft++
                    that.sendFn(that.sendNumLeft)
                    
                    // console.log("sendNumLeft 2", that.sendNumLeft)
                },1000)
            }
            else if(index == 1){
                // console.log("sendTimerRight 1", that.sendTimerRight)
                that.sendFn(that.sendNumRight)
                that.sendTimerRight = setInterval(function(){
                    // console.log("0-2 按下按钮 sendTimerRight: ", index)
                    
                    that.sendNumRight++
                    that.sendFn(that.sendNumRight)
                    
                    // console.log("sendNumRight 2", that.sendNumRight)
                },1000)
            }
         
        },

        // 释放按钮
        wsSendEnd(item, index){
            let that = this;

            console.log("1 释放 index: ", index+1)
            if(index == 0){
                console.log("1-1 清除定时器--left")
                that.sendNumLeft = 0;
                clearInterval(that.sendTimerLeft);        
                that.sendTimerLeft = null;
                console.log("1-1 清除定时器--left ok 完成")

            }
            else if(index == 1){
                console.log("1-2 清除定时器--right")
                that.sendNumRight = 0;
                clearInterval(that.sendTimerRight);        
                that.sendTimerRight = null;
                console.log("1-2 清除定时器--right ok 完成")

            }

        },

        // 按下按钮 触发的事件
        sendFn(msg) {
            console.log('发送消息：', msg)
        },

        // 设置页面背景色
        bodyStyle(){
            let styles = document.createElement('style');
            let heads = document.head;
            styles.innerHTML = `body{-webkit-touch-callout:none;}`
            heads.appendChild(styles);
        },



    },
    mounted(){
        console.log("hello  Btn");

        // isIOS &&this.bodyStyle();

    }
}
</script>
<style>

/* body{
    -webkit-user-select:none;
    user-select:none;
    touch-callout:none;
    -webkit-touch-callout:none;
} */

</style>
<style type="text/css" scoped>

.Btn{
    padding-top: .15rem;
}

/* 按钮 */
.btnWrap{
    display: flex;
    justify-content: space-around;
    margin-bottom: .5rem;
}
.btnWrap li{
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: .5rem;
    color: #ccc;
    text-align: center;
    border: .05rem solid lime;
    border-radius: 50%;

    -webkit-user-select: none;

    /* background: url(../assets/imgs/01.jpg); */
}

.btnWrap li:active{
    transform: scale(0.9);
}
.btnWrap .active{
    /* transform: scale(0.9); */

    /* animation: effect 35ms linear; */

}

@keyframes effect {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(.9);
    }
    100% {
        transform: scale(1);
    }
}



/* 蒙版 */
.mask{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: rgba(0,0,0,.5);
}

button{
    width: 60%;
    line-height: 1rem;
    text-align: center;
    font-size: .38rem;
    color: #fff;
    border: #fff .03rem solid ;
    border-radius: 1rem;
    background: none;
    outline: none;
}


/* 陀螺仪 */

.BtnWrap{
    width: 6.9rem;
    margin: 0 auto .5rem;
    text-align: left;
    border: .01rem solid #ccc;
    border-bottom: none;
}
 
.BtnWrap li{
    box-sizing: border-box;
    line-height: .7rem;
    padding: 0 .3rem;
    border-bottom: .01rem solid #ccc;
}





</style>