单选示例

<template>
  <view style="padding: 40rpx;">
    <ex-btn-group :list="list" v-model="value"></ex-btn-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          label: "A",
          list: [
            {
              label: "阿坝",
              value: "00",
            },
            {
              label: "阿克苏",
              value: "01",
            },
          ],
        },
        {
          label: "B",
          list: [
            {
              label: "北京",
              value: "10",
            },
            {
              label: "白城",
              value: "11",
            },
            {
              label: "百色",
              value: "12",
            },
            {
              label: "白山",
              value: "13",
            },
          ],
        },
      ],
      value: "04", // 多选时候为数组
    };
  },
};
</script>

<style lang="scss" scoped></style>

多选示例

<template>
  <view style="padding: 40rpx;">
    <ex-btn-group :list="list" v-model="value" multiple></ex-btn-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          label: "A",
          list: [
            {
              label: "阿坝",
              value: "00",
            },
            {
              label: "阿克苏",
              value: "01",
            },
          ],
        },
        {
          label: "B",
          list: [
            {
              label: "北京",
              value: "10",
            },
            {
              label: "白城",
              value: "11",
            },
            {
              label: "百色",
              value: "12",
            },
            {
              label: "白山",
              value: "13",
            },
          ],
        },
      ],
      value: ["04"], // 多选时候为数组
    };
  },
};
</script>

<style lang="scss" scoped></style>

自定义分组标签插槽

<template>
  <view style="padding: 40rpx;">
    <ex-btn-group :list="list" v-model="value">
      <template v-slot:label="{ item, index }">
        <view class="tag">
          <text>{{ item.label }}</text>
          <text>更多{{ index }}(插槽自定义)</text>
        </view>
      </template>
    </ex-btn-group>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      list: [
        {
          label: "A",
          list: [
            {
              label: "阿坝",
              value: "00",
            },
            {
              label: "阿克苏",
              value: "01",
            },
          ],
        },
        {
          label: "B",
          list: [
            {
              label: "北京",
              value: "10",
            },
            {
              label: "白城",
              value: "11",
            },
            {
              label: "百色",
              value: "12",
            },
            {
              label: "白山",
              value: "13",
            },
          ],
        },
      ],
      value: "04", // 多选时候为数组
    };
  },
};
</script>

<style lang="scss" scoped>
.tag {
  margin: 20rpx 0;
  display: flex;
  justify-content: space-between;
  color: red;
}
</style>

属性

属性名	类型	默认值	可选值	说明
list	Array			二维数组,格式见下方示例
showFilter	Boolean	true	true,false	是否显示过滤输入框
filterKeys	Array	['label']		过滤字段 key,默认 label 支持多个字段,数组传递
props	Object	{label:'label',subListKey:'list', childProps:{label:'label',value:'value' }}		配置项
multiple	Boolean	false	true,false	按钮是否多选
maxNum	Number	Infinity		最大选中数量, 仅多选有效
maxNumToast	String	超出最大选中数量		超出最大选中数量的提示信息
cancelSelectItem	Boolean	true	true,false	选中的选项再次点击能否取消选中，默认 true
disabledArr	Array	[]		禁用选项
lineNumber	Number	3		每行按钮个数
gap	String	12px		按钮间距
selectedStyle	Object	{background: '#409eff',color: '#FFFFFF',borderColor: '#409eff'}		自定义按钮选中样式
unSelectedStyle	Object	{background: '#F5F5F5', color: '#4D4D4D',borderColor: '#F5F5F5'}		自定义按钮未选中样式
disabledStyle	Object	{background: '#e9e9eb',color: '#bcbec2',borderColor: '#e9e9eb'}		按钮禁用的样式
showBadge	Boolean	false		是否显示选中角标
badgePosition	String	top	top,bottom	选中角标的位置
badgeSize	String	16px		角标的大小
badgeColor	String	#cdcdcd		角标默认颜色
badgeSelectedColor	String	#409eff		角标选中颜色
badgeDisabledColor	String	#bcbec2		角标禁用颜色

list 配置项

属性名	类型	默认值	可选值	说明
label	String,Number			分组 key
list	Array			子分组数组

list 数据格式

const list = [
  {
    label: "A",
    list: [
      {
        label: "阿坝",
        value: "00",
      },
      {
        label: "阿克苏",
        value: "01",
      },
    ],
  },
  {
    label: "B",
    list: [
      {
        label: "北京",
        value: "10",
      },
      {
        label: "白城",
        value: "11",
      },
      {
        label: "百色",
        value: "12",
      },
      {
        label: "白山",
        value: "13",
      },
    ],
  },
];

事件

事件名	说明
itemClick	选项点击事件