筛选胶囊 FilterCapsule

用于商品列表顶部的快捷筛选条件切换（如：常购、有活动、当前可售），支持单选与多选两种交互模式。

单选模式（默认）

未选中态为 #F2F3F5 浅灰圆角胶囊，选中态切换为安井品牌绿 #44B300 实底白字。

全部商品

常购清单

有活动

当前可售

<template>
  <FilterCapsule :options="options" v-model="selected"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FilterCapsule from '@/components/common/FilterCapsule.vue'

const selected = ref('all')
const options = [
  { label: '全部商品', value: 'all' },
  { label: '常购清单', value: 'often' },
  { label: '有活动', value: 'promo' },
  { label: '当前可售', value: 'instock' }
]
</script>

多选模式（multiple）

开启 multiple 属性后，modelValue 绑定数组，支持同时点亮多个筛选条件。

全部商品

常购清单

有活动

当前可售

<FilterCapsule :options="options" multiple v-model="selectedList"/>

API 参数说明

参数名	说明	类型	默认值
modelValue	当前选中值（单选为 string | number，多选为数组）	string | number | Array	必填
options	胶囊选项列表（{ label, value }[]）	CapsuleOption[]	必填
multiple	是否开启多选模式	boolean	false

事件说明

事件名	说明	回调参数
update:modelValue	选中项改变时触发	(val)
change	点击选项后触发	(val)