开关组件欢迎

<template>
    <view @click="toggle" class="evan-switch" :class="{'evan-switch--disabled':disabled}" :style="{width:2*20+'px',height:24+'upx',borderRadius:size+'px',backgroundColor:currentValue===activeValue?activeColor:inactiveColor}">
        <view class="evan-switch__circle" :style="{width:24+'upx',height:24+'upx',transform:currentValue===activeValue?`translateX(${30}px)`:`translateX(0)`}"></view>
    </view>
</template>

<script>
    export default {
        name: 'EvanSwitch',
        props: {
            value: {
                type: [String, Number, Boolean],
                default: false
            },
            activeColor: {
                type: String,
                default: '#108ee9'
            },
            inactiveColor: {
                type: String,
                default: '#fff'
            },
            size: {
                type: Number,
                default: 30
            },
            disabled: {
                type: Boolean,
                default: false
            },
            activeValue: {
                type: [String, Number, Boolean],
                default: true
            },
            inactiveValue: {
                type: [String, Number, Boolean],
                default: false
            },
            beforeChange: {
                type: Function,
                default: null
            },
            extraData: null,
            contextLevel: {
                type: Number,
                default: 1
            }
        },
        computed: {
            switchHeight() {
                // #ifdef APP-NVUE
                return this.size + 2 + 'px'
                // #endif
                // #ifndef APP-NVUE
                return this.size + 'px'
                // #endif
            }
        },
        watch: {
            value: {
                immediate: true,
                handler(value) {
                    this.currentValue = value
                }
            }
        },
        data() {
            return {
                currentValue: false
            }
        },
        methods: {
            toggle() {
                if (!this.disabled) {
                    if (this.beforeChange && typeof this.beforeChange === 'function') {
                        let context = this
                        for (let i = 0; i < this.contextLevel; i++) {
                            context = context.$options.parent
                        }
                        const result = this.beforeChange(this.currentValue === this.activeValue ? this.inactiveValue : this.activeValue,
                            this.extraData, context)
                        if (typeof result === 'object') {
                            result.then(() => {
                                this.toggleValue()
                            }).catch(() => {})
                        } else if (typeof result === 'boolean' && result) {
                            this.toggleValue()
                        }
                    } else {
                        this.toggleValue()
                    }
                }
            },
            toggleValue() {
                this.currentValue = this.currentValue === this.activeValue ? this.inactiveValue : this.activeValue
                this.$emit('input', this.currentValue)
                this.$emit('change', this.currentValue)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .evan-switch {
        position: relative;
        border-width: 1px;
        border-color: rgba(0, 0, 0, 0.1);
        border-style: solid;
        transition: background-color 0.3s;
        /* #ifndef APP-NVUE */
        box-sizing: content-box;
        /* #endif */
    }

    .evan-switch--disabled {
        opacity: 0.3;
    }

    .evan-switch__circle {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #fff;
        border-radius: 50%;
        /* #ifndef APP-NVUE */
        box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
        /* #endif */
        /* #ifdef APP-NVUE */
        box-shadow: 1px 0 0px 0 ;
        /* #endif */
        transition: transform 0.3s;
    }
</style>