网站建设淘宝客模板,石家庄外贸做网站,网站建设人力资源分配,个人公众号做电影网站目录
#平台差异说明
#基础使用
#加载中
#禁用switch
#自定义尺寸
#自定义颜色
#自定义样式
#异步控制
API
#Switch Props
#Switch Event 选择开关用于在打开和关闭状态之间进行切换。
#平台差异说明
App#xff08;vue#xff09;App#xff08;nvue#xff0…
目录
#平台差异说明
#基础使用
#加载中
#禁用switch
#自定义尺寸
#自定义颜色
#自定义样式
#异步控制
API
#Switch Props
#Switch Event 选择开关用于在打开和关闭状态之间进行切换。
#平台差异说明
AppvueAppnvueH5小程序√√√√
#基础使用
通过v-model绑定一个布尔值变量这个变量是双向绑定的当用户开或关选择器的时候在父组件的该值也会相应的变为true或者false也就是说 您不用监听change事件也能知道选择器当前处于开或者关的状态。
我们为其提供了加载中 禁用 自定义尺寸 自定义颜色 自定义样式 异步控制等六种能力并在以下案例中为您展示
u-switch v-modelvalue changechange/u-switch
!-- methods --
change(e) {console.log(change, e);
}, #加载中
设置loading属性默认为true可以让switch处于加载中的状态这时switch是不可操作的您可以通过:loadingloading以动态设置加载状态
u-switch v-modelvalue3 loading /u-switch
u-switch v-modelvalue4 loading /u-switch
!-- data --
value3: false,
value4: true,#禁用switch
设置disabled属性,默认为true即可禁用某个组件让用户无法点击禁用分为两种状态
一是关闭情况下的禁用这时只显示一个白色的区域。二是打开后再禁用这时会在原有的颜色上加一个opacity透明度但此时依然是不可操作的。
u-switch v-modelvalue disabled /u-switch#自定义尺寸
设置size属性可以让您自定义switch的尺寸单位为px
u-switch v-modelvalue3 size28 /u-switch
u-switch v-modelvalue4 size20 /u-switch
!-- data --
value3: false,
value4: true,#自定义颜色
设置activeColor属性可以让您自定义switch的颜色支持多种设置方式如activeColor#f56c6c activeColorred activeColorrgb(0,0,0)
u-switch v-modelvalue activeColor#f56c6c loading /u-switch
u-switch v-modelvalue1 activeColor#5ac725 loading /u-switch
!-- data --
value: true,
value1: true,#自定义样式
同时设置activeColor和inactiveColor属性可以让您自定义switch的样式同样支持多种设置方式
u-switchspace2 v-modelvalue11 activeColor#f9ae3d inactiveColorrgb(230, 230, 230)
/u-switch
u-switchspace2 v-modelvalue12 activeColor#f9ae3dinactiveColorrgb(230, 230, 230)
/u-switch
!-- data --
value11: false,
value12: true,#异步控制
异步控制场景一般发生在用户打开或者关闭选择器时需要本地或者向后端请求判断是否允许用户打开或者关闭的场景。 同时您也可以组合使用例如根据接口结果添加disabledloading属性等
注意
请添加asyncChange属性来支持异步控制操作否则您将先操作v-model绑定的值并失去控制效果
templateu-switch v-modelvalue13 asyncChange changeasyncChange /u-switch
/templatescriptexport default {data() {return {value13:true};},methods: {asyncChange(e) {uni.showModal({content: e ? 确定要打开吗 : 确定要关闭吗,success: (res) {if (res.confirm) {this.value13 e}}})}}};
/script
API
#Switch Props
注意需要给switch组件通过v-model绑定一个布尔值来初始化switch的状态随后该值被双向绑定 当用打开选择器时该值在switch组件内部被修改为true并反映到父组件否则为false换言之您无需监听switch的change事件也能 知道某一个switch是否被选中的状态
参数说明类型默认值可选值loading是否处于加载中Booleanfalsetruedisabled是否禁用Booleanfalsetruesize开关尺寸单位rpxString | Number25-activeColor打开时的背景色String#2979ff-inactiveColor关闭时的背景色String#ffffff-value通过v-model双向绑定的值Boolean | String | Numberfalse-activeValueswitch打开时的值Boolean | String | Numbertrue-inactiveValueswitch关闭时的值Boolean | String | Numberfalse-asyncChange是否开启异步变更开启后需要手动控制输入值Booleanfalsetruespace圆点与外边框的距离String | Number0-
#Switch Event
事件名说明回调参数change在switch打开或关闭时触发value打开时为activeValue值关闭时为inactiveValue值input在switch打开或关闭时触发没开启异步value打开时为activeValue值关闭时为inactiveValue值
