Press UI

# Switch 切换选择器

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

# 引入

import PressSwitch from 'press-ui/press-switch/press-switch';

export default {
  components: {
    PressSwitch,
  }
}

# 代码演示

# 基础用法

<press-switch :checked="checked" @change="onChange" />

export default{
  data() {
    return {
      checked: true,
    }
  },
  methods: {
    onChange(value) {
      // 需要手动对 checked 状态进行更新
      this.checked = value;
    }
  }
}

# 禁用状态

<press-switch :checked="checked" disabled />

# 加载状态

<press-switch :checked="checked" loading />

# 自定义大小

<press-switch :checked="checked" size="24px" />

# 自定义颜色

<press-switch
  :checked="checked"
  active-color="#07c160"
  inactive-color="#ee0a24"
/>

# 异步控制

<press-switch :checked="checked" @change="onChange" />

<!-- #ifndef H5 -->
<PressDialog
  id="tip-match-comm-tips-dialog"
/>
<!-- #endif -->

import PressDialogHandler from 'press-ui/press-dialog';

export default {
  data() {
    return {
      checked: true,
    }
  },
  methods: {
    onChange(value) {
      PressDialogHandler.show({
        title: '提示',
        content: '是否切换开关',
        confirmText: '确认',
        cancelText: '取消',
      }).then(() => {
        this.checked = value;
      });
    },
  }
}

# E-SPORT

<PressSwitch
  custom-class="press-switch--e-sport"
  :checked="checked"
  @change="onChange"
/>

# API

# Props

参数 说明 类型 默认值
name 在表单内提交时的标识符 string -
checked 开关选中状态 any false
loading 是否为加载状态 boolean false
disabled 是否为禁用状态 boolean false
size 开关尺寸 string 30px
active-color 打开时的背景色 string #1989fa
inactive-color 关闭时的背景色 string #fff
active-value 打开时的值 any true
inactive-value 关闭时的值 any false

# Events

事件名 说明 参数
change 开关状态切换回调 event.detail: 是否选中开关
click 点击组件，任意状态都会触发，包括 disabled、loading -

# 在线调试

横屏

← Uploader →