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 @in
|