@ophiuchus/switch

用于在打开和关闭状态之间进行切换。

Usage no npm install needed!

<script type="module">
  import ophiuchusSwitch from 'https://cdn.skypack.dev/@ophiuchus/switch';
</script>

README

Switch 开关

介绍

用于在打开和关闭状态之间进行切换。

引入

import Vue from 'vue';
import Switch from '@ophiuchus/switch';

Vue.use(Switch);

代码演示

基础用法

通过 v-model 绑定开关的选中状态,true 表示开,false 表示关。

<sf-switch v-model="checked" />
export default {
  data() {
    return {
      checked: true,
    };
  },
};

禁用状态

通过 disabled 属性来禁用开关,禁用状态下开关不可点击。

<sf-switch v-model="checked" disabled />

加载状态

通过 loading 属性设置开关为加载状态,加载状态下开关不可点击。

<sf-switch v-model="checked" loading />

自定义大小

通过 size 属性自定义开关的大小。

<sf-switch v-model="checked" size="24px" />

自定义颜色

active-color 属性表示打开时的背景色,inactive-color 表示关闭时的背景色。

<sf-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />

异步控制

需要异步控制开关时,可以使用 value 属性和 input 事件代替 v-model,并在 input 事件回调函数中手动处理开关状态。

<sf-switch :value="checked" @input="onInput" />
export default {
  data() {
    return {
      checked: true,
    };
  },
  methods: {
    onInput(checked) {
      Dialog.confirm({
        title: '提醒',
        message: '是否切换开关?',
      }).then(() => {
        this.checked = checked;
      });
    },
  },
};

搭配单元格使用

<sf-cell center title="标题">
  <template #right-icon>
    <sf-switch v-model="checked" size="24" />
  </template>
</sf-cell>

API

Props

参数 说明 类型 默认值
v-model 开关选中状态 any false
loading 是否为加载状态 boolean false
disabled 是否为禁用状态 boolean false
size 开关尺寸,默认单位为px number | string 30px
active-color 打开时的背景色 string #1989fa
inactive-color 关闭时的背景色 string white
active-value 打开时对应的值 any true
inactive-value 关闭时对应的值 any false

Events

事件名 说明 回调参数
change 开关状态切换时触发 value: any
click 点击时触发 event: Event

样式变量

组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考主题定制

名称 默认值 描述
@switch-size 30px -
@switch-width 2em -
@switch-height 1em -
@switch-node-size 1em -
@switch-node-background-color @white -
@switch-node-box-shadow 0 3px 1px 0 rgba(0, 0, 0, 0.05) -
@switch-background-color @white -
@switch-on-background-color @blue -
@switch-transition-duration @animation-duration-base -
@switch-disabled-opacity @disabled-opacity -
@switch-border @border-width-base solid rgba(0, 0, 0, 0.1) -