XSwitch 组件使用教程
优质
小牛编辑
141浏览
2023-12-01
安装
import { XSwitch } from 'vux'
export default {
components: {
XSwitch
}
}
// 在入口文件全局引入
import Vue from 'vue'
import { XSwitch } from 'vux'
Vue.component('x-switch', XSwitch)
<group>
<x-switch title="title" v-model="value"></x-switch>
</group>
x-switch
只能在Group
中使用
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
title | string | label文字 | -- | |
disabled | boolean | false | 是否不可点击 | -- |
value | boolean | false | 表单值, 使用v-model 绑定 | -- |
inline-desc | string | 标签下文字 | -- | |
prevent-default | boolean | false | 阻止点击时自动设定值 | v2.5.0 |
value-map | array | [false, true] | 用于自定义 false 和 true 映射的实际值,用于方便处理比如接口返回了 0 1 这类非 boolean 值的情况 | v2.7.0 |
事件
名字 | 参数 | 说明 | 版本要求 |
@on-change | (value) | 值变化时触发,参数为 (currentValue) | -- |
@on-click | (newVal, oldVal) | 点击组件时触发 | -- |
样式变量
名字 | 默认值 | 说明 | 继承自变量 |
@switch-checked-bg-color | #04BE02 | -- | @theme-color |
@switch-checked-border-color | #04BE02 | -- | @theme-color |
@switch-disabled-opacity | 0.6 | -- | |
@switch-height | 32px | -- |