93 lines
1.7 KiB
Vue
93 lines
1.7 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">
|
|
{{text}}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
import color from '@/commons/color.js'
|
|
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?color.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> |