64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
<template>
|
|
<view class="db-radio-group">
|
|
<view
|
|
v-for="opt in options"
|
|
:key="opt.value"
|
|
class="db-radio"
|
|
:class="{ 'db-radio--active': modelValue === opt.value, 'db-radio--disabled': disabled }"
|
|
@click="onPick(opt.value)"
|
|
>
|
|
<view class="db-radio__dot" />
|
|
<text>{{ opt.label }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
modelValue: String,
|
|
disabled: Boolean,
|
|
options: {
|
|
type: Array,
|
|
default: () => [
|
|
{ label: '入库', value: '入库' },
|
|
{ label: '出库', value: '出库' }
|
|
]
|
|
}
|
|
})
|
|
const emit = defineEmits(['update:modelValue', 'change'])
|
|
|
|
function onPick(v) {
|
|
if (props.disabled) return
|
|
emit('update:modelValue', v)
|
|
emit('change', v)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.db-radio-group {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
.db-radio {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 14px;
|
|
color: #323233;
|
|
}
|
|
.db-radio__dot {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
border: 1px solid #c8c9cc;
|
|
box-sizing: border-box;
|
|
}
|
|
.db-radio--active .db-radio__dot {
|
|
border-color: #52b788;
|
|
background: radial-gradient(circle, #52b788 0 45%, transparent 50%);
|
|
}
|
|
.db-radio--disabled {
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|