mechanicStore-app/unpackage/dist/dev/.uvue/app-android/components/u-switch/u-switch.vue

import { ref, watch, } from 'vue';
const __sfc__ = defineComponent({
    __name: 'u-switch',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        activeText: {
            type: String,
            default: '已上线'
        },
        inactiveText: {
            type: String,
            default: '已下线'
        },
        activeValue: {
            type: [Number,
                String,
                Boolean],
            default: true
        },
        inactiveValue: {
            type: [Number,
                String,
                Boolean],
            default: false
        },
    },
    emits: ['update:value', 'change'],
    setup(__props) {
        const __ins = getCurrentInstance()!;
        const _ctx = __ins.proxy as InstanceType<typeof __sfc__>;
        const _cache = __ins.renderCache;
        const props = __props;
        function emit(event: string, ...do_not_transform_spread: Array<any | null>) {
            __ins.emit(event, ...do_not_transform_spread);
        }
        const isOn = ref(props.value);
        // keep `isOn` in sync when prop changes using watchEffect to avoid
        // generics/return-type confusion in UTS.
        watchEffect(() => {
            const v = props.value;
            if (v != null) {
                isOn.value = v as boolean;
            }
        });
        const toggleSwitch = () => {
            isOn.value = !isOn.value;
            emit('update:value', isOn.value ? props.activeValue : props.inactiveValue);
            emit('change', isOn.value ? props.activeValue : props.inactiveValue);
        };
        return (): any | null => {
            return _cE("view", _uM({
                class: "container",
                onClick: toggleSwitch
            }), [
                _cE("view", _uM({
                    class: _nC(['switch', isOn.value ? 'switch-checked' : 'switch-nochecked'])
                }), [
                    _cE("view", _uM({
                        class: "switch-handle",
                        style: _nS(isOn.value ? 'left: 0;' : 'right: 0;')
                    }), null, 4 /* STYLE */),
                    isTrue(isOn.value)
                        ? _cE("text", _uM({ key: 0 }), _tD(_ctx.activeText), 1 /* TEXT */)
                        : _cE("text", _uM({ key: 1 }), _tD(_ctx.inactiveText), 1 /* TEXT */)
                ], 2 /* CLASS */)
            ]);
        };
    }
});
export default __sfc__;
export type USwitchComponentPublicInstance = InstanceType<typeof __sfc__>;
const GenComponentsUSwitchUSwitchStyles = [_uM([["container", _pS(_uM([["width", "156rpx"]]))], ["switch", _pS(_uM([["position", "relative"], ["width", "156rpx"], ["height", "50rpx"], ["borderTopLeftRadius", "40rpx"], ["borderTopRightRadius", "40rpx"], ["borderBottomRightRadius", "40rpx"], ["borderBottomLeftRadius", "40rpx"], ["backgroundColor", "#d5d5d5"], ["transitionProperty", "backgroundColor"], ["transitionDuration", "0.3s"], ["transitionTimingFunction", "ease"], ["textAlign", "center"]]))], ["switch-handle", _uM([["", _uM([["position", "absolute"], ["top", "3rpx"], ["width", "44rpx"], ["height", "44rpx"], ["borderTopLeftRadius", "22rpx"], ["borderTopRightRadius", "22rpx"], ["borderBottomRightRadius", "22rpx"], ["borderBottomLeftRadius", "22rpx"], ["backgroundImage", "none"], ["backgroundColor", "#ffffff"], ["borderTopWidth", "2rpx"], ["borderRightWidth", "2rpx"], ["borderBottomWidth", "2rpx"], ["borderLeftWidth", "2rpx"], ["borderTopStyle", "solid"], ["borderRightStyle", "solid"], ["borderBottomStyle", "solid"], ["borderLeftStyle", "solid"], ["borderTopColor", "#e0e0e0"], ["borderRightColor", "#e0e0e0"], ["borderBottomColor", "#e0e0e0"], ["borderLeftColor", "#e0e0e0"], ["boxShadow", "0 2rpx 8rpx rgba(0, 0, 0, 0.12)"], ["transitionProperty", "all"], ["transitionDuration", "0.3s"], ["transitionTimingFunction", "cubic-bezier(0.4,0,0.2,1)"]])], [".switch-checked ", _uM([["left", "109rpx"]])]])], ["switch-checked", _pS(_uM([["backgroundColor", "#ffda59"]]))], ["switch-nochecked", _pS(_uM([["backgroundColor", "#d5d5d5"]]))], ["label", _pS(_uM([["position", "absolute"], ["width", "156rpx"], ["height", "50rpx"], ["lineHeight", "50rpx"], ["textAlign", "center"], ["color", "#ffffff"], ["fontSize", "28rpx"], ["opacity", 0.7]]))], ["@TRANSITION", _uM([["switch", _uM([["property", "backgroundColor"], ["duration", "0.3s"], ["timingFunction", "ease"]])], ["switch-handle", _uM([["property", "all"], ["duration", "0.3s"], ["timingFunction", "cubic-bezier(0.4,0,0.2,1)"]])]])]])];
//# sourceMappingURL=u-switch.vue.map