当前位置: 首页 > 文档资料 > VUX 中文文档 >

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中使用

属性

名字类型默认值说明版本要求
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)点击组件时触发--

样式变量

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