单选可取消选中

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

<script>
export default {
  data() {
    return {
      value: 1,
      list: [
        {
          label: "单选1",
          value: 1,
        },
        {
          label: "单选2",
          value: 2,
        },
        {
          label: "禁用3",
          value: 3,
          disabled: true,
        },
        {
          label: "禁用4",
          value: 4,
          disabled: true,
        },
        {
          label: "单选5",
          value: 5,
        },
        {
          label: "单选5",
          value: 6,
        },
      ],
    };
  },
  methods: {
    itemClick(a) {
      console.log(a, "单选点击---------------------");
    },
  },
};
</script>

单选不可取消选中

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

<script>
export default {
  data() {
    return {
      value: 1,
      list: [
        {
          label: "单选1",
          value: 1,
        },
        {
          label: "单选2",
          value: 2,
        },
        {
          label: "禁用3",
          value: 3,
          disabled: true,
        },
        {
          label: "禁用4",
          value: 4,
          disabled: true,
        },
        {
          label: "单选5",
          value: 5,
        },
        {
          label: "单选5",
          value: 6,
        },
      ],
    };
  },
};
</script>

基础多选

<template>
  <view style="padding: 40rpx;">
    <ex-btn-select
      :list="list"
      v-model="value"
      @itemClick="itemClick"
      :maxNum="3"
      multiple
    ></ex-btn-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: [1, 2],
      list: [
        {
          label: "多选1",
          value: 1,
        },
        {
          label: "多选2",
          value: 2,
        },
        {
          label: "禁用3",
          value: 3,
          disabled: true,
        },
        {
          label: "禁用4",
          value: 4,
          disabled: true,
        },
        {
          label: "多选5",
          value: 5,
        },
        {
          label: "多选5",
          value: 6,
        },
      ],
    };
  },
  methods: {
    itemClick(a) {
      console.log(a, "多选点击---------------------");
    },
  },
};
</script>

自定义插槽内容

<template>
  <view style="padding: 40rpx;">
    <ex-btn-select :list="list" v-model="value" @itemClick="itemClick">
      <template v-slot:default="{ item, index }">
        <view style="display: flex; align-items: center;">
          <ex-icon color="red" name="radio-checked"></ex-icon>
          <text>{{ item.label }}</text>
        </view>
      </template>
    </ex-btn-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: 1,
      list: [
        {
          label: "单选1",
          value: 1,
        },
        {
          label: "单选2",
          value: 2,
        },
        {
          label: "禁用3",
          value: 3,
          disabled: true,
        },
        {
          label: "禁用4",
          value: 4,
          disabled: true,
        },
        {
          label: "单选5",
          value: 5,
        },
        {
          label: "单选5",
          value: 6,
        },
      ],
    };
  },
  methods: {
    itemClick(a) {
      console.log(a, "单选点击---------------------");
    },
  },
};
</script>

属性

属性名	类型	默认值	可选值	说明
list	Array			按钮选项数组
props	Object	{ 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			显示的字段 ke
value	绑定的 key
disabled	Boolean	false		是否禁用选项 true 禁用

事件

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