Switch开关

基础用法

表示两种相互对立的状态间的切换，多用于触发「开/关」

效果预览可直接操作下方示例

通过将type属性的值指定为switch,同时配置dicData为字典值

正在加载示例…

<template>
  <avue-form :option="option.value"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: '开关',
    prop: 'switch',
    type: 'switch',
    dicData: [
      { label: '关', value: 0 },
      { label: '开', value: 1 }
    ]
  }]
});
</script>

默认值

效果预览可直接操作下方示例

value属性可以提供一个初始化的默认值

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '开关',
      prop: 'switch',
      type: 'switch',
      dicData: [
        { label: '关', value: 0 },
        { label: '开', value: 1 }
      ],
      value: 1
    }
  ]
});
</script>

禁用状态

效果预览可直接操作下方示例

通过disabled属性指定是否禁用

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '开关',
      prop: 'switch',
      type: 'switch',
      dicData: [{
        label: '关',
        value: 0
      }, {
        label: '开',
        value: 1
      }],
      disabled: true
    }
  ]
});
</script>

字典属性

指定标签文本和值，默认为label和value

效果预览可直接操作下方示例

配置props属性来指定标签文本和值，默认为label和value

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: '开关',
    prop: 'switch',
    type: 'switch',
    props: {
      label: 'name',
      value: 'code'
    },
    dicData: [{
      name: '关',
      code: 0
    }, {
      name: '开',
      code: 1
    }]
  }]
});
</script>

网络字典

更多用法参考表单数据字典

效果预览可直接操作下方示例

配置dicUrl指定后台接口的地址，默认只会取前2项

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: '开关',
    prop: 'switch',
    type: 'switch',
    props: {
      label: 'name',
      value: 'code'
    },
    dicUrl: 'https://api.avuejs.com/area/getProvince'
  }]
});
</script>

按钮颜色

效果预览可直接操作下方示例

使用使用 CSS var --el-switch-on-color和--el-switch-off-color控制颜色。

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [{
    label: '开关',
    prop: 'switch',
    type: 'switch',
    dicData: [
      { label: '关', value: 0 },
      { label: '开', value: 1 }
    ]
  }]
});
</script>

<style>
:root {
  --el-switch-on-color: #13ce66;
  --el-switch-off-color: #ff4949;
}
</style>

图标

效果预览可直接操作下方示例

使用activeIcon属性与inactiveIcon属性来设置状态的图标inlinePrompt属性可以让图标内置。使用activeActionIcon属性与inactiveActionIcon属性来设置按钮状态图标。当使用图标时，文字属性就不会展示

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '开关',
      prop: 'switch',
      type: 'switch',
      activeIcon: "el-icon-check",
      inactiveIcon: "el-icon-close",
      dicData: [
        { label: '关', value: 0 },
        { label: '开', value: 1 }
      ]
    },
    {
      label: '开关',
      prop: 'switch',
      type: 'switch',
      activeIcon: "el-icon-check",
      inactiveIcon: "el-icon-close",
      inlinePrompt: true,
      dicData: [
        { label: '关', value: 0 },
        { label: '开', value: 1 }
      ]
    },
    {
      label: '开关',
      prop: 'switch',
      type: 'switch',
      activeActionIcon: "el-icon-check",
      inactiveActionIcon: "el-icon-close",
      dicData: [
        { label: '关', value: 0 },
        { label: '开', value: 1 }
      ]
    }
  ]
});
</script>

阻止切换

效果预览可直接操作下方示例

设置beforeChange函数回调done方法传入true/false

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '开关',
      prop: 'switch',
      type: 'switch',
      beforeChange: (done) => {
        setTimeout(() => {
          done(true);
        }, 1000);
      },
      dicData: [
        { label: '关', value: 0 },
        { label: '开', value: 1 }
      ]
    }
  ]
});
</script>