| 1 |
- {"version":3,"sources":["components/u-switch/u-switch.vue"],"sourcesContent":["<template>\r\n <view class=\"container\" @click=\"toggleSwitch\">\r\n <view :class=\"['switch', isOn ? 'switch-checked' : 'switch-nochecked']\">\r\n <!-- background handled by switch itself -->\r\n <view\r\n class=\"switch-handle\"\r\n :style=\"isOn ? 'left: 0;' : 'right: 0;'\"\r\n ></view>\r\n <text v-if=\"isOn\">{{ activeText }}</text>\r\n <text v-else>{{ inactiveText }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup>\r\n\timport {\r\n\tref,\r\n\twatch,\r\n\t} from 'vue';\r\n\r\n\tconst props = defineProps({\r\n\t\t\tvalue: {\r\n\t\t\t\ttype: Boolean,\r\n\t\t\t\tdefault: false\r\n\t\t\t},\r\n\t\t\tactiveText: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: '已上线'\r\n\t\t\t},\r\n\t\t\tinactiveText: {\r\n\t\t\t\ttype: String,\r\n\t\t\t\tdefault: '已下线'\r\n\t\t\t},\r\n\t\t\tactiveValue: {\r\n\t\t\t\ttype: [Number,\r\n\t\t\t\t\tString,\r\n\t\t\t\tBoolean],\r\n\t\t\t\tdefault: true\r\n\t\t\t},\r\n\t\t\tinactiveValue: {\r\n\t\t\t\ttype: [Number,\r\n\t\t\t\t\tString,\r\n\t\t\t\tBoolean],\r\n\t\t\t\tdefault: false\r\n\t\t\t},\r\n\t\t});\r\n\r\n\tconst emit = defineEmits(['update:value', 'change']);\r\n\r\n\tconst isOn = ref(props.value);\r\n\t\r\n\t// keep `isOn` in sync when prop changes using watchEffect to avoid\r\n\t// generics/return-type confusion in UTS.\r\n\twatchEffect(() => {\r\n\t\tconst v = props.value;\r\n\t\tif (v != null) {\r\n\t\t\tisOn.value = v as boolean;\r\n\t\t}\r\n\t});\r\n\r\n\tconst toggleSwitch = () => {\r\n\t\tisOn.value = !isOn.value;\r\n\t\temit('update:value', isOn.value ? props.activeValue : props.inactiveValue);\r\n\t\temit('change', isOn.value ? props.activeValue : props.inactiveValue);\r\n\t};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.container {\r\n width: 156rpx;\r\n}\r\n\r\n.switch {\r\n position: relative;\r\n width: 156rpx; /* match container */\r\n height: 50rpx;\r\n border-radius: 40rpx;\r\n background-color: #d5d5d5;\r\n transition: background-color 0.3s ease;\r\n text-align: center;\r\n}\r\n\r\n.switch-handle {\r\n position: absolute;\r\n top: 3rpx;\r\n // left: 3rpx;\r\n width: 44rpx;\r\n height: 44rpx;\r\n border-radius: 22rpx; /* half of 44rpx handle to make it circular */\r\n background: #fff;\r\n border: 2rpx solid #e0e0e0;\r\n box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.switch-checked {\r\n background-color: #ffda59;\r\n}\r\n.switch-nochecked {\r\n background-color: #d5d5d5;\r\n}\r\n.switch-checked .switch-handle {\r\n left: 109rpx; /* moved to other side */\r\n}\r\n\r\n.label {\r\n position: absolute;\r\n width: 156rpx; /* span full switch width */\r\n height: 50rpx;\r\n line-height: 50rpx;\r\n text-align: center;\r\n color: #ffffff;\r\n font-size: 28rpx;\r\n opacity: 0.7;\r\n}\r\n</style>"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;YAoBC,IAAM,QAAQ;YA2Bd,IAAA,KAAA,OAAA,MAAA,EAAA,OAAA,yBAAA,GAAA,CAAA,EAAA;gBAAA,MAAA,IAAA,CAAA,QAAA;YAAA;YAEA,IAAM,OAAO,IAAI,MAAM,KAAK;YAI5B,YAAY,KAAK;gBAChB,IAAM,IAAI,MAAM,KAAK;gBACrB,IAAI,EAAC,EAAA,CAAI,IAAI,EAAE;oBACd,KAAK,KAAK,GAAG,EAAC,EAAA,CAAI,OAAO;;YAE3B;;YAEA,IAAM,eAAe,KAAK;gBACzB,KAAK,KAAK,GAAG,CAAC,KAAK,KAAK;gBACxB,KAAK,gBAAgB,IAAA,KAAK,KAAK,EAAG;oBAAA,MAAM,WAAW;gBAAX,EAAc,IAAmB,CAAnB;oBAAA,MAAM,aAAa;gBAAb;gBAAa;gBACzE,KAAK,UAAU,IAAA,KAAK,KAAK,EAAG;oBAAA,MAAM,WAAW;gBAAX,EAAc,IAAmB,CAAnB;oBAAA,MAAM,aAAa;gBAAb;gBAAa;YACpE;;uBA/DC,IAUO,QAAA,IAVD,WAAM,aAAa,aAAO;oBAC9B,IAQO,QAAA,IARA,WAAK,IAAA;wBAAA;wBAAa,IAAA,KAAA,KAAI,EAAA;4BAAA;wBAAA,EAAA,IAAA,CAAA;4BAAA;wBAAA;qBAAA;wBAE3B,IAGQ,QAAA,IAFN,WAAM,iBACL,WAAK,IAAE,IAAA,KAAA,KAAI,EAAA;4BAAA;wBAAA,EAAA,IAAA,CAAA;4BAAA;wBAAA;wBAAA;mCAEF,KAAA,KAAI,GAAhB;4BAAA,IAAyC,QAAA,IAAA,SAAA,CAAA,GAAA,IAApB,KAAA,UAAU,GAAA,CAAA;wBAAA,EAC/B,IAA4B,CAA5B;4BAAA,IAAsC,QAAA,IAAA,SAAA,CAAA,GAAA,IAAtB,KAAA,YAAY,GAAA,CAAA;wBAAA"}
|
