| 1 |
- {"version":3,"sources":["components/u-switch/u-switch.vue"],"names":[],"mappings":"AAeC,OAAO,EACP,GAAG,EACH,KAAK,GACJ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAEb,MAAM,KAAK,GAAG,OAyBX,CAAC;QAEJ,SAAA,IAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,uBAAA,EAAA,KAAA,CAAA,GAAA,GAAA,IAAA,CAAA;YAAA,KAAA,CAAA,IAAA,CAAA,KAAA,EAAA,GAAA,uBAAA,CAAA,CAAA;QAAA,CAAqD;QAErD,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAE9B,mEAAmE;QACnE,yCAAyC;QACzC,WAAW,CAAC,GAAG,EAAE;YAChB,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC;YACtB,IAAI,CAAC,IAAI,IAAI,EAAE;gBACd,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,OAAO,CAAC;aAC1B;QACF,CAAC,CAAC,CAAC;QAEH,MAAM,YAAY,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;YAC3E,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QACtE,CAAC,CAAC;;mBA/DD,GAAA,CAUO,MAAA,EAAA,GAAA,CAAA;gBAVD,KAAK,EAAC,WAAW;gBAAE,OAAK,EAAE,YAAY;;gBAC1C,GAAA,CAQO,MAAA,EAAA,GAAA,CAAA;oBARA,KAAK,EAAA,GAAA,CAAA,CAAA,QAAA,EAAa,IAAA,CAAA,KAAI,CAAA,CAAA,CAAA,gBAAA,CAAA,CAAA,CAAA,kBAAA,CAAA,CAAA;;oBAE3B,GAAA,CAGQ,MAAA,EAAA,GAAA,CAAA;wBAFN,KAAK,EAAC,eAAe;wBACpB,KAAK,EAAA,GAAA,CAAE,IAAA,CAAA,KAAI,CAAA,CAAA,CAAA,UAAA,CAAA,CAAA,CAAA,WAAA,CAAA;;2BAEF,IAAA,CAAA,KAAI,CAAA;0BAAhB,GAAA,CAAyC,MAAA,EAAA,GAAA,CAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA,EAAA,GAAA,CAApB,IAAA,CAAA,UAAU,CAAA,EAAA,CAAA,CAAA,UAAA,CAAA;0BAC/B,GAAA,CAAsC,MAAA,EAAA,GAAA,CAAA,EAAA,GAAA,EAAA,CAAA,EAAA,CAAA,EAAA,GAAA,CAAtB,IAAA,CAAA,YAAY,CAAA,EAAA,CAAA,CAAA,UAAA,CAAA","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>"]}
|
