XSwitch

XSwitch

demo 原始链接demo 源码编辑文档组件源码

x-switch - 图1

二维码

x-switch - 图2

Install

安装

局部注册

全局注册

  1. import { XSwitch } from 'vux'
  3. export default {
  4.   components: {
  5.     XSwitch
  6.   }
  7. }

  1. // 在入口文件全局引入
  3. import Vue from 'vue'
  4. import { XSwitch } from 'vux'
  6. Vue.component('x-switch', XSwitch)
  1.   <group>
  2.     <x-switch title="title" v-model="value"></x-switch>
  3.   </group>

x-switch只能在Group中使用

API

属性

名字类型默认值说明版本要求
titlestringlabel文字—
disabledbooleanfalse是否不可点击—
valuebooleanfalse表单值, 使用v-model绑定—
inline-descstring标签下文字—
prevent-defaultbooleanfalse阻止点击时自动设定值v2.5.0
value-maparray[false, true]用于自定义 false 和 true 映射的实际值，用于方便处理比如接口返回了 0 1 这类非 boolean 值的情况v2.7.0

事件

名字参数说明版本要求
@on-change(value)值变化时触发，参数为 (currentValue)—
@on-click(newVal, oldVal)点击组件时触发—

Variables

## 样式变量


名字默认值说明继承自变量
@switch-checked-bg-color #04BE02 —@theme-color
@switch-checked-border-color #04BE02 —@theme-color
@switch-disabled-opacity 0.6 —
@switch-height 32px —

Issues

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 18，贡献人数 3
Estelle00airyland万刚

Changelog

发布日志

  • v2.7.0 [feature] 支持 prop:value-map 自定义值映射，比如 [0, 1] ["0", "1"] 等接口可能返回的非 boolean 值 #2104
  • v2.5.0 [feature] 支持使用 prop:prevent-default 来阻止自动设定值 #1606