87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
<template>
|
|
<view class="design-field">
|
|
<text class="field" :class="{ 'field-required': required }" :style="labelStyle">
|
|
{{ label }}
|
|
</text>
|
|
<view class="flex gap-[10rpx] flex-1 flex-wrap">
|
|
<text
|
|
v-for="(group, index) in groupList"
|
|
:key="index"
|
|
class="px-[24rpx] py-[12rpx] rounded-[16rpx] status"
|
|
:class="{ active: innerValue == group.value }"
|
|
@click="handleSelectedItem(group.value)"
|
|
>
|
|
{{ group.label }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { PropType, ref } from 'vue'
|
|
|
|
interface IGroup {
|
|
label: string
|
|
value: string | number
|
|
}
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: 1
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
labelWidth: {
|
|
type: Number,
|
|
default: 120
|
|
},
|
|
groupList: {
|
|
type: Array as PropType<IGroup[]>,
|
|
defaault: () => []
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
const emit = defineEmits(['update:modelValue'])
|
|
const labelStyle = computed(() => {
|
|
const { labelWidth } = props
|
|
return {
|
|
width: `${labelWidth * 2}` + 'rpx'
|
|
}
|
|
})
|
|
const innerValue = ref(props.modelValue)
|
|
const handleSelectedItem = (val: number) => {
|
|
emit('update:modelValue', val)
|
|
innerValue.value = val
|
|
console.log(val)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.design-field {
|
|
@include flex-align;
|
|
padding: 24rpx 20rpx 24rpx 32rpx;
|
|
border-bottom: 1px solid $gray-3;
|
|
|
|
.field {
|
|
// width: 200rpx;
|
|
}
|
|
.input {
|
|
flex: 1;
|
|
}
|
|
.status {
|
|
border: 1px solid #d5d5d5;
|
|
&.active {
|
|
background-color: #eef6ff;
|
|
color: #0e66fb;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
</style>
|