VueDictionary

Switch

Basic

no

View source
<template>
  <dict-switch v-model="value" :data="dictData"></dict-switch>
</template>

<script setup lang="ts">
import { ref } from "vue-demi";

const value = ref("");
const dictData = [
  { label: "no", value: "1" },
  { label: "yes", value: "2" }
];
</script>

Disabled

no

View source
<template>
  <dict-switch v-model="value" :data="dictData" disabled></dict-switch>
</template>

<script setup lang="ts">
import { ref } from "vue-demi";

const value = ref("");
const dictData = [
  { label: "no", value: "1" },
  { label: "yes", value: "2" }
];
</script>

Color

no

View source
<template>
  <dict-switch v-model="value" :data="dictData" border></dict-switch>
</template>

<script setup lang="ts">
import { ref } from "vue-demi";

const value = ref("");
const dictData = [
  { label: "no", value: "1", color: "red" },
  { label: "yes", value: "2", color: "green" }
];
</script>

Icon

View source
<template>
  <dict-switch v-model="value" :data="dictData"></dict-switch>
</template>

<script setup lang="ts">
import { ref } from "vue-demi";
import { Check, Close } from "@element-plus/icons-vue";

const value = ref("");
const dictData = [
  { label: "no", value: "1", icon: Close },
  { label: "yes", value: "2", icon: Check }
];

// elment-ui
// const dictData = [
//   { label: "no", value: "1", icon: "el-icon-close" },
//   { label: "yes", value: "2", icon: "el-icon-check" }
// ];
</script>

Props

支持 el-switch 所有参数和事件

参数说明类型可选值默认值
v-model绑定值string / number / array
data字典数据array--

inactive 和 active 相关参数与字典数据的对应关系如下:

const switchProps = computed(() => {
  const [inactiveItem, activeItem] = props.data ?? [];
  return {
    inactiveText: inactiveItem?.label,
    inactiveValue: inactiveItem?.value,
    inactiveColor: inactiveItem?.color,
    inactiveIcon: inactiveItem?.icon,
    inactiveIconClass: inactiveItem?.icon, // element-ui
    activeText: activeItem?.label,
    activeValue: activeItem?.value,
    activeColor: activeItem?.color,
    activeIcon: activeItem?.icon,
    activeIconClass: activeItem?.icon // element-ui
  };
});