Switch开关
约 369 字大约 1 分钟
2025-02-06
基础用法
表示两种相互对立的状态间的切换,多用于触发「开/关」
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>