Segmented Control 分段器

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-segmented-control": "wuss-weapp/w-segmented-control/index",
  3. }

图片演示

Segmented Control 分段器 - 图1

代码演示

  1. <view
  2.  style="margin: 30px 0;"
  3.  hover-class="none"
  4.  hover-stop-propagation="false"
  5. >
  6.     <w-segmented-control styles="font-size: 14px;" options="{{ options1 }}" />
  7. </view>
  9. <view
  10.  style="margin: 30px 0;"
  11.  hover-class="none"
  12.  hover-stop-propagation="false"
  13. >
  14.     <w-segmented-control
  15.      color="#1c75f3"
  16.    defaultIndex="2"
  17.      styles="font-size: 14px;"
  18.      options="{{ options2 }}"
  19.     />
  20. </view>
  22. <view
  23.  style="margin: 30px 0;"
  24.  hover-class="none"
  25.  hover-stop-propagation="false"
  26. >
  27.     <w-segmented-control
  28.    color="#e42112"
  29.    defaultIndex="1"
  30.      styles="font-size: 14px;"
  31.      options="{{ options3 }}"
  32.     />
  33. </view>
  35. <view
  36.  style="margin: 30px 0;"
  37.  hover-class="none"
  38.  hover-stop-propagation="false"
  39. >
  40.     <w-segmented-control
  41.    disabled
  42.    color="green"
  43.      styles="font-size: 14px;"
  44.      options="{{ options4 }}"
  45.     />
  46. </view>
data: {
  options1: ['Segment1','Segment2'],
  options2: ['Segment1','Segment2','Segment3','Segment4'],
  options3: ['Segment1','Segment2','Segment3'],
  options4: ['Segment1','Segment2','Segment3'],
},

API

Attribute 属性

属性 说明 类型 默认值
options 传入的选项组 [‘xxx’,’xxx’,’xxx’,’xxx’] string []
color 组件的主色调 string #ff9900
disabled 禁用 boolean -
defaultIndex 初始化默认的索引 number 0
styles 自定义样式 string -

Event 事件

事件名 说明 参数
onChange 值改变时触发 e.detail.value

Slot 插槽

名称 说明
slot 指定的图片验证码

Class 自定义类名

类名 说明
wuss-class 根节点样式类
wuss-placeholder-class 验证码输入框的placeholder样式