蜜雪冰城网站建设策划方案,wordpress自带小工具,湖北 商城网站建设,网站建设管理需要招聘什么人才该分段器一般用于用户从几个选项中选择某一个的场景
#平台差异说明
App#xff08;vue#xff09;App#xff08;nvue#xff09;H5小程序√√√√
#基本使用
通过list数组参数传递分段的选项#xff0c;数组元素可为字符串#xff0c;或者通过keyName参数传入对象(默…该分段器一般用于用户从几个选项中选择某一个的场景
#平台差异说明
AppvueAppnvueH5小程序√√√√
#基本使用
通过list数组参数传递分段的选项数组元素可为字符串或者通过keyName参数传入对象(默认为name)通过current指定初始化时激活的选项
templateu-subsection :listlist :current1/u-subsection
/templatescriptexport default {data() {return {list: [未付款, 待评价, 已付款],// 或者如下也可以配置keyName参数修改对象键名// list: [{name: 未付款}, {name: 待评价}, {name: 已付款}],current: 1}}}
/scriptcopy
#模式选择
通过mode设置分段器的模式
值为button时为按钮类型值为subsection时为分段器形式
u-subsection :listlist modesubsection :current1/u-subsectioncopy
#颜色配置
通过activeColor配置激活选项的文字颜色通过inactiveColor配置未激活选项的文字颜色通过bgColor配置背景颜色mode为button时有效默认 #eeeeef
u-subsection activeColor#f56c6c/u-subsectioncopy
#注意事项
如果想通过一个变量绑定current值需要在change事件回调中修改此值否则可能会由于props的限制前后两次设置current为相同的值 而导致无法通过修改current值触发分段器的变化。
templateu-subsection :listlist :currentcurNow changesectionChange/u-subsection
/templatescriptexport default {data() {return {list: [未付款, 待评价, 已付款],curNow: 0}},methods: {sectionChange(index) {this.curNow index;}}}
/script
