开关 switch 待优化 待新增

用于一个数据从两种对立状态的切换

使用说明

简单引入

你需要通过v-model向该组件绑定一个boolean类型的控制变量

展开代码

<vi-switch v-model="val"></vi-switch>

样式

通过type属性定义不同的开关样式

等待后续版本添加

颜色

你可以通过修改css变量--vi-switch-left-color 与 --vi-switch-right-color 修改开关状态颜色

展开代码

<vi-switch class="my-switch" v-model="val"></vi-switch>

<style>
  .my-switch {
    --vi-switch-left-color: var(--vi-red-color1);
    --vi-switch-right-color: var(--vi-green-color1);
  }
</style>

尺寸

通过size类型定义组件尺寸

展开代码

<vi-switch v-model="val" type="big"></vi-switch>
<vi-switch v-model="val"></vi-switch>
<vi-switch v-model="val" type="small"></vi-switch>

禁用

通过disabled属性禁用组件

展开代码

<vi-switch v-model="val" disabled></vi-switch>

控件插槽

通过switch-circle left-choice right-choice插槽，向控件添加描述内容

关 开

展开代码

<vi-switch v-model="val">
  <template v-slot:left-choice>
    关
  </template>
  <template v-slot:switch-circle>
    <vi-icon class="my-switch__my-icon"/>
  </template>
  <template v-slot:right-choice>
    开
  </template>
</vi-switch>

Props

属性名	描述	类型	默认值

插槽

插槽名	描述	有无默认内容

事件支持

事件名	描述	参数列表

可覆写css变量

变量名	描述	默认值