uniapp自定义switch

1.用于自定义文字和按钮

<template>
    <view class="container">
        <label :class="isChecked ? 'switch-checked' : 'switch-nochecked'">
            <view class="open">开</view>
            <view class="close">关</view>
        </label>
    </view>
</template>

<script>
    export default {
        props: ['isChecked'],
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 120rpx;

        label {
            position: relative;
            display: block;
            border-radius: 55rpx;
            height: 55rpx;
            width: 100%;

            &:before {
                content: " ";
                display: block;
                border-radius: 55rpx;
                height: 100%;
                background-color: #E7F8FF;
                transform: scale(1, 1);
                transition: all 0.3s ease;
            }

            &:after {
                content: " ";
                position: absolute;
                top: 9%;
                margin-left: 5%;
                width: 45rpx;
                height: 45rpx;
                border-radius: 45rpx;
                background-image: url('http://qiniu.shoulongdao.vip/1/material/6b7650fc-e045-4f3b-bc4f-0e2b4ca3c4d6.png');
                background-size: 100% 100%;
                box-shadow: 2rpx rgba(0, 0, 0, 0.08);
                transition: all 0.3s ease;
            }
        }

        %font-style {
            top: 0;
            color: #3FB3FF;
            font-size: 20rpx;
            height: 100%;
            line-height: 55rpx;
            position: absolute;
            transition: all 1s ease;
        }

        .switch-checked {
            &:after {
                margin-left: calc(94% - 45rpx);
                left: unset;
            }

            &:before {
                background-color: #E7F8FF;
            }

            .close {
                display: none;
            }
        }

        .switch-nochecked {
            .open {
                display: none;
            }
        }

        .open {
            left: 20rpx;
            @extend %font-style;
        }

        .close {
            right: 20rpx;
            @extend %font-style;
            color: #3FB3FF ;
        }
    }
</style>