1 line
8.0 KiB
Plaintext
1 line
8.0 KiB
Plaintext
{"version":3,"file":"su-radio.js","sources":["../../../../../../src/sheep/ui/su-radio/su-radio.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS1yYWRpby9zdS1yYWRpby52dWU"],"sourcesContent":["<template>\r\n <view\r\n class=\"ui-radio ss-flex ss-col-center\"\r\n @tap=\"onRaido\"\r\n :class=\"[{ disabled: disabled }, { img: src }, ui]\"\r\n :style=\"[customStyle]\"\r\n >\r\n <slot name=\"leftLabel\"></slot>\r\n <view\r\n v-if=\"!none\"\r\n class=\"ui-radio-input\"\r\n :class=\"[isChecked ? 'cur ' + bg : unbg, src ? 'radius' : 'round']\"\r\n ></view>\r\n <image class=\"ui-radio-img radius\" v-if=\"src\" :src=\"src\" mode=\"aspectFill\"></image>\r\n <view class=\"ui-radio-content\" v-else>\r\n <slot>\r\n <view class=\"ui-label-text\" :style=\"[labelStyle]\">{{ label }}</view>\r\n </slot>\r\n </view>\r\n <view\r\n v-if=\"ui.includes('card')\"\r\n class=\"ui-radio-bg round\"\r\n :class=\"[isChecked ? 'cur ' + bg : '']\"\r\n ></view>\r\n </view>\r\n</template>\r\n\r\n<script setup>\r\n/**\r\n * 单选 - radio\r\n *\r\n *\r\n * property {Object} customStyle \t\t\t\t\t\t\t\t\t\t\t\t- 自定义样式\r\n * property {String} ui \t\t\t\t\t\t\t\t\t\t\t\t\t\t- radio样式Class\r\n * property {String} modelValue\t\t\t\t\t\t\t\t\t\t\t\t\t- 绑定值\r\n * property {Boolean} disabled\t\t\t\t\t\t\t\t\t\t\t\t\t- 是否禁用\r\n * property {String} bg\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t- 选中时背景Class\r\n * property {String} unbg\t\t\t\t\t\t\t\t\t\t\t\t\t\t- 未选中时背景Class\r\n * property {String} src\t\t\t\t\t\t\t\t\t\t\t\t\t\t- 图片选中radio\r\n * property {String} label\t\t\t\t\t\t\t\t\t\t\t\t\t\t- label文本\r\n * property {Boolean} none\t\t\t\t\t\t\t\t\t\t\t\t\t\t- 是否隐藏raido按钮\r\n *\r\n * @slot default\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t- 自定义label样式\r\n * @event {Function} change\t\t\t\t\t\t\t\t\t\t\t\t\t\t- change事件\r\n *\r\n */\r\nimport { computed, reactive, watchPostEffect, getCurrentInstance } from 'vue'\r\nconst vm = getCurrentInstance()\r\n\r\n// 组件数据\r\nconst state = reactive({\r\n currentValue: false,\r\n})\r\n\r\n// 定义事件\r\nconst emits = defineEmits(['change', 'update:modelValue'])\r\n\r\n// 接收参数\r\nconst props = defineProps({\r\n customStyle: {\r\n type: Object,\r\n default: () => ({}),\r\n },\r\n ui: {\r\n type: String,\r\n default: 'check', // check line\r\n },\r\n modelValue: {\r\n type: [String, Number, Boolean],\r\n default: false,\r\n },\r\n disabled: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n bg: {\r\n type: String,\r\n default: 'ui-BG-Main',\r\n },\r\n unbg: {\r\n type: String,\r\n default: 'borderss',\r\n },\r\n src: {\r\n type: String,\r\n default: '',\r\n },\r\n label: {\r\n type: String,\r\n default: '',\r\n },\r\n labelStyle: {\r\n type: Object,\r\n default: () => ({}),\r\n },\r\n none: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n})\r\n\r\nwatchPostEffect(() => {\r\n state.currentValue = props.modelValue\r\n emits('update:modelValue', state.currentValue)\r\n})\r\n\r\n// 是否选中\r\nconst isChecked = computed(() => state.currentValue)\r\n\r\n// 点击\r\nconst onRaido = () => {\r\n if (props.disabled) return\r\n state.currentValue = !state.currentValue\r\n emits('update:modelValue', state.currentValue)\r\n emits('change', {\r\n label: props.label,\r\n value: state.currentValue,\r\n })\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n.ui-radio {\r\n display: flex;\r\n align-items: center;\r\n height: 18px;\r\n margin: 0 0.5em 0 0;\r\n .ui-radio-input {\r\n display: inline-block;\r\n width: 18px;\r\n height: 18px;\r\n margin: 0 0.5em 0 0;\r\n line-height: 18px;\r\n vertical-align: middle;\r\n\r\n &::before {\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n content: '';\r\n background-color: currentColor;\r\n border-radius: 18px;\r\n @include position-center;\r\n }\r\n }\r\n\r\n .ui-radio-input.cur {\r\n position: relative;\r\n\r\n &::before {\r\n width: 10px;\r\n height: 10px;\r\n transition: $transition-base;\r\n }\r\n }\r\n\r\n &:last-child {\r\n margin: 0 0.14286em;\r\n }\r\n\r\n &.check {\r\n .ui-radio-input {\r\n &::before {\r\n width: 18px;\r\n height: 18px;\r\n font-family: 'colorui';\r\n font-size: 0;\r\n content: '\\e69f';\r\n background-color: transparent;\r\n }\r\n }\r\n\r\n .ui-radio-input.cur {\r\n &::before {\r\n width: 18px;\r\n height: 18px;\r\n font-size: 1em;\r\n line-height: 18px;\r\n text-align: center;\r\n transform: scale(0.8);\r\n }\r\n }\r\n }\r\n\r\n &.line {\r\n .ui-radio-input.cur {\r\n &::before {\r\n width: calc(100% - 2px);\r\n height: calc(100% - 2px);\r\n background-color: var(--ui-BG);\r\n }\r\n\r\n &::after {\r\n position: absolute;\r\n width: 10px;\r\n height: 10px;\r\n content: '';\r\n background-color: inherit;\r\n border-radius: 50%;\r\n @include position-center;\r\n }\r\n }\r\n }\r\n\r\n &.lg {\r\n .ui-radio-input {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n &.img {\r\n position: relative;\r\n margin: 0 0.28572em 0;\r\n\r\n .ui-radio-input {\r\n position: absolute;\r\n top: -1px;\r\n left: -1px;\r\n width: 42px;\r\n height: 42px;\r\n margin: 0;\r\n border-radius: 0px;\r\n\r\n &::before {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: $radius;\r\n }\r\n\r\n &.cur {\r\n top: -2px;\r\n left: -2px;\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 7px !important;\r\n opacity: 0.8;\r\n }\r\n }\r\n\r\n .ui-radio-img {\r\n display: block;\r\n width: 40px;\r\n height: 40px;\r\n overflow: hidden;\r\n border-radius: 10px;\r\n }\r\n }\r\n\r\n &.card {\r\n position: relative;\r\n display: flex;\r\n flex-direction: row-reverse;\r\n justify-content: space-between;\r\n padding: 30rpx;\r\n margin: 30rpx;\r\n border-radius: $radius !important;\r\n\r\n .ui-radio-bg {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n z-index: 0;\r\n width: 200%;\r\n height: 200%;\r\n content: '';\r\n background-color: var(--ui-BG);\r\n border-radius: #{$radius * 2} !important;\r\n transform: scale(0.5);\r\n transform-origin: 0 0;\r\n }\r\n\r\n .ui-radio-input {\r\n position: relative;\r\n z-index: 1;\r\n margin-right: 0;\r\n }\r\n\r\n .ui-radio-bg::after {\r\n position: absolute;\r\n top: 4px;\r\n left: 4px;\r\n z-index: 0;\r\n width: calc(200% - 16px);\r\n height: calc(200% - 16px);\r\n content: '';\r\n background-color: var(--ui-BG) !important;\r\n border-radius: #{$radius * 2 + 8} !important;\r\n transform: scale(0.5);\r\n transform-origin: 0 0;\r\n }\r\n\r\n .ui-radio-content {\r\n position: relative;\r\n z-index: 1;\r\n display: flex;\r\n flex: 1;\r\n align-items: center;\r\n }\r\n }\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/ui/su-radio/su-radio.vue'\nwx.createComponent(Component)"],"names":["reactive","watchPostEffect","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,UAAM,QAAQA,cAAAA,SAAS;AAAA,MACrB,cAAc;AAAA,IAChB,CAAC;AAGD,UAAM,QAAQ;AAGd,UAAM,QAAQ;AA2CdC,kBAAAA,gBAAgB,MAAM;AACpB,YAAM,eAAe,MAAM;AAC3B,YAAM,qBAAqB,MAAM,YAAY;AAAA,IAC/C,CAAC;AAGD,UAAM,YAAYC,cAAQ,SAAC,MAAM,MAAM,YAAY;AAGnD,UAAM,UAAU,MAAM;AACpB,UAAI,MAAM;AAAU;AACpB,YAAM,eAAe,CAAC,MAAM;AAC5B,YAAM,qBAAqB,MAAM,YAAY;AAC7C,YAAM,UAAU;AAAA,QACd,OAAO,MAAM;AAAA,QACb,OAAO,MAAM;AAAA,MACjB,CAAG;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrHA,GAAG,gBAAgB,SAAS;"} |