Switch开关

基础用法

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

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

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '开关',
          prop: 'switch',
          type: 'switch',
          dicData: [{
            label: '关',
            value: 0
          }, {
            label: '开',
            value: 1
          }]
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

默认值

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

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        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>
export default {
  data () {
    return {
      option: {
        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>
export default {
  data () {
    return {
      option: {
        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>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '开关',
          prop: 'switch',
          type: 'switch',
          props: {
            label: 'name',
            value: 'code'
          },
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

按钮颜色

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

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        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>
export default {
  data () {
    return {
      option: {
        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>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '开关',
          prop: 'switch',
          type: 'switch',
          beforeChange: (done) => {
            setTimeout(() => {
              done(true)
            }, 1000)
          },
          dicData: [{
            label: '关',
            value: 0
          }, {
            label: '开',
            value: 1
          }]
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码