基础用法

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

vue2

vue3

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

<template>
  <tvue-form :option="option.value"></tvue-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>

默认值

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>

禁用状态

vue2

vue3

通过`disabled`属性指定是否禁用

<template>
  <tvue-form :option="option"></tvue-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

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>

网络字典

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

vue2

vue3

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

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

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

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

按钮颜色

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>

图标

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>

阻止切换

vue2

vue3

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

<template>
  <tvue-form :option="option"></tvue-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>