94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
<template>
|
|
<view class="my-radio u-font-28 u-flex color-333" @tap.stop="changeVal">
|
|
<view class="circle u-flex u-row-center" :style="computedStyle()"
|
|
:class="{active:modelValue,square:shape==='square'}">
|
|
<uni-icons type="checkmarkempty" v-if="modelValue" :size="size-4" color="#fff"></uni-icons>
|
|
</view>
|
|
<view class="u-m-l-12">
|
|
<slot>{{text}}</slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
disabled: {
|
|
type: [Boolean],
|
|
default: false
|
|
},
|
|
borderColor: {
|
|
type: String,
|
|
default: '#bbb',
|
|
},
|
|
size: {
|
|
//单位px
|
|
type: Number,
|
|
default: 16,
|
|
},
|
|
// v-modal
|
|
modelValue: {
|
|
type: [Number, Boolean],
|
|
default: false,
|
|
},
|
|
shape: {
|
|
//circle square
|
|
type: String,
|
|
default: 'circle',
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
function computedStyle() {
|
|
return `
|
|
width:${props.size}px;
|
|
height:${props.size}px;
|
|
border-color:${props.borderColor};
|
|
border-color:${props.modelValue?uni.$utils.ColorMain:props.borderColor};
|
|
`
|
|
}
|
|
const emits = defineEmits(['update:modelValue', 'change'])
|
|
|
|
function changeVal() {
|
|
if (props.disabled) {
|
|
return
|
|
}
|
|
emits('click')
|
|
let currentVal = props.modelValue
|
|
let type = typeof currentVal
|
|
if (type === 'number') {
|
|
currentVal = currentVal === 0 ? 1 : 0
|
|
}
|
|
if (type === 'boolean') {
|
|
currentVal = !currentVal
|
|
}
|
|
emits('update:modelValue', currentVal)
|
|
emits('change', currentVal)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.my-radio {
|
|
|
|
.circle {
|
|
background: #FFFFFF;
|
|
|
|
&.active {
|
|
background-color: $my-main-color;
|
|
border-color: $my-main-color;
|
|
}
|
|
|
|
border: 1px solid #707070;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
&.square {
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |