elementplus 自定义单选组件 useFormItem校验

原创已于 2024-05-29 10:37:45 修改 · 508 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2024-02-21 08:52:58 首次发布

本文介绍了如何在Vue中使用模板和计算属性创建一个可切换的选项卡组件，并处理模型值的更新以及表单验证过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>