【学习随记】 btn2

<template>
    <div class="Btn">

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

        
        <!-- @touchstart="" -->
        <!-- @click="test()" -->
        
        <!-- @touchstart="wsSendStart($event, item, index)"
        @touchend="wsSendEnd(item, index)" -->
        

    </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/)
            isIOS: /\(i[^;]+;( U;)? CPU.+Mac OS X\)/i.test(navigator.userAgent),

            noTime: false,

        }
    },
    methods: {

        test(){
            console.log("test 666")
        },
        
        // 按下按钮
        wsSendStart(e, item, index){
            
            console.log('wsSendStart--e:', e)

            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(()=>{
                    // console.log("0-1 按下按钮 sendTimerLeft: ", index)
                    
                    that.sendNumLeft++
                    that.sendFn(that.sendNumLeft)
                    
                    // console.log("sendNumLeft 2", that.sendNumLeft)
                },300)

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

                console.log("that.sendTimerRight ID: ", that.sendTimerRight)
            }
            
            e.preventDefault();
        },

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

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

            }
            else if(index == 1 && that.sendTimerRight !== null){
                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)
        },


        // 设置页面背景色
        noSelect(){
            // let styles = document.createElement('style');
            // let heads = document.head;
            // styles.innerHTML = `body { -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; }`
            // heads.appendChild(styles);
            // console.log('styles', styles)

            let body = document.getElementsByTagName('body')[0];
            body.setAttribute("class", "noSelect")
            console.log("body", body);

        },
        textSelect(){
            // let styles = document.createElement('style');
            // let heads = document.head;
            // styles.innerHTML = `body { -webkit-touch-callout: default;-webkit-user-select: text;-khtml-user-select: text;-moz-user-select: text;-ms-user-select: text;user-select: text; }`
            // heads.appendChild(styles);
            // console.log('styles', styles)

            let body = document.getElementsByTagName('body')[0];
            body.setAttribute("class", "")
            console.log("body", body);


        },


        t(){
            let that = this;
            for(let i = 0; i < 6; i++){
                setTimeout(()=>{
                    // console.log('noTime', i, that.noTime);
                    if(i == 5){
                        that.noTime = true;
                        // console.log('noTime 22',  that.noTime);
                    }
                    console.log('noTime', i, that.noTime);
                    this.c();
                }, i*1000)
            }
            // console.log('noTime 22',  that.noTime);
        },


        c(){
            let that = this;
            let list = document.getElementById('btnWrap')
            let lis = list.getElementsByTagName('li')
            console.log("lis", lis)
            if(that.noTime){
                for(let i = 0, len = lis.length; i< len; i++){
                    lis[i].addEventListener('touchstart',function(){
                        console.log("添加事件成功了")
                    },false);
                }
            }
        }



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

        this.noSelect();

        if(this.isIOS){
            console.log("isIOS 苹果手机");
            // this.noSelect()
        }else{
            console.log("安卓机型");
        }

        // this.t()

        

        

    },
    beforeDestroy() {
        this.textSelect();

    },
}
</script>
<style>

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.textSelect {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

</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>