<template>
<div class="tab-wrap">
<div
class="tab-item"
v-for="tabItem in props.cardItems"
:key="tabItem.value"
:class="[tabItem.value === modelValue ? 'active' : '']"
@click="changeTab(tabItem)"
>
{{ tabItem.label }}
</div>
</div>
</template>
<script setup lang="ts" name="select_tag">
import { computed } from "vue";
import { useFormItem } from "element-plus";
interface cardItem {
label: string;
value: string | number;
}
interface selectTagProps {
cardItems?: cardItem[];
modelValue: string | number;
}
const emit = defineEmits(["update:modelValue"]);
const { formItem } = useFormItem();
const props = withDefaults(defineProps<selectTagProps>(), {
cardItems: () => [],
modelValue: ""
});
const changeTab = (tabItem: cardItem) => {
modelValue.value = tabItem.value;
};
const modelValue = computed({
get() {
return props.modelValue;
},
set(v: string) {
emit("update:modelValue", v);
formItem?.validate?.("change").catch(err => {
console.log(err);
});
}
});
</script>
<style lang="scss" scoped>
.tab-wrap {
display: flex;
width: fit-content;
padding: 4px;
background-color: rgb(241 241 241 / 100%);
border-radius: 4px;
}
.tab-item {
display: flex;
align-items: center;
justify-content: center;
min-width: 116px;
height: 24px;
font-size: 14px;
color: rgb(32 34 35 / 100%);
cursor: pointer;
border-radius: 4px;
&.active {
font-weight: bold;
color: var(--el-color-primary);
background-color: rgb(255 255 255 / 100%);
}
}
</style>
elementplus 自定义单选组件 useFormItem校验
于 2024-02-21 08:52:58 首次发布