• switch在vue中实现原理


    <template>
        <div>
            <span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle" style="position:relative">
                <div v-if="isChecked && direction.length > 0" style="100%;height:100%;position:absolute;padding:0 5px;line-height:20px;color:#FFF;user-select:none">
                    {{direction[0]}}
                </div>
                <div v-if="!isChecked && direction.length > 0" style="100%;height:100%;position:absolute;padding:0 5px;right:2px;line-height:22px;color:#7A7A7A;text-align:right;user-select:none">
                    {{direction[1]}}
                </div>
            </span>
        </div>
    </template>
    
    <script>
        export default {
            name: 'switchComponent',
            props: {
                value: {
                    type: Boolean,
                    default: true
                },
                text: {
                    type: String,
                    default: ''
                }
            },
            data () {
                return {
                    isChecked: this.value
                }
            },
            computed: {
                direction () {
                    if (this.text) {
                        return this.text.split('|')
                    } else {
                        return []
                    }
                }
            },
            watch: {
                value (val) {
                    this.isChecked = val
                },
                isChecked(val) {
                    this.$emit('change', val);
                }
            },
            methods: {
                toggle() {
                    this.isChecked = !this.isChecked;
                }
            }
        }
    </script>
    <style>
        .weui-switch {
            font-size: 12px;
            display: block;
            position: relative;
             65px;
            height: 24px;
            border: 1px solid #DFDFDF;
            outline: 0;
            border-radius: 16px;
            box-sizing: border-box;
            background-color: #DFDFDF;
            transition: background-color 0.1s, border 0.1s;
            cursor: pointer;
        }
        .weui-switch:before {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
          /*   70px;*/
            height: 22px;
            border-radius: 15px;
            background-color: #FDFDFD;
            transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
        }
        .weui-switch:after {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
             22px;
            height: 21px;
            border-radius: 15px;
            background-color: #FFFFFF;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
            transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
        }
        .weui-switch-on {
            border-color: #6F6F6F;
            background-color: #1AAD19;
        }
        .weui-switch-on:before {
            border-color: #1AAD19;
            background-color: #409eff;
        }
        .weui-switch-on:after {
            transform: translateX(41px);
        }
        .cell .weui-switch{
             45px;
        }
        .cell .weui-switch-on:after {
            transform: translateX(20px);
        }
    </style>

    这些就是switch的实现原理代码 有兴趣的可以拿去研究一下
  • 相关阅读:
    各进制字符串转换
    小度智能音箱开发
    讯飞魔飞智能麦克风-->直接输出串口
    node express SSL 证书布署
    紫外线消毒灯智能控制系统
    智能家居解决方案
    Git 分支管理
    C语言MQTT库MQTTPacket.c使用,尤其接收
    Vue 数组控制CSS
    AOP_02 通过ContextBoundObject、ContextAttribute 上下文对象实现
  • 原文地址:https://www.cnblogs.com/mzj143/p/13020621.html
Copyright © 2020-2023  润新知