mosowe-group-choose 单/多选项组

uniapp/uni_modules组件

下载地址

兼容性

平台	android	ios	微信小程序	H5
兼容	√	√	√	√

props

属性	类型	说明	默认
modelValue	string/number/null	v-model	null
list	ListItem[]	选项列表	[]
type	'radio'/'checkbox'/'single'	类型：单选、多选、单个选项，单个选项时list无效	radio
singleText	string[]	单个选择时文案，例：[未选中，已选中]	null
align	'right'/'left'	对其方式	left
color	string	默认文本颜色	rgba(19, 25, 54, 0.5)
selectColor	string	选中文本颜色	rgba(19, 25, 54, 0.75)
icon	string	默认图标	zoicon mosowe-circle
selectIcon	string	选中图标	zoicon mosowe-dot-check
iconColor	string	默认字体图标颜色	rgba(19, 25, 54, 0.75)
iconSelectColor	string	选中字体图标颜色	#37C880
disabledColor	string	禁用选项文案/图标颜色	rgba(19, 25, 54, 0.25)
col	boolean	垂直排列	false
size	string	尺寸大小，同步改变文字图标大小	28rpx

ListItem

属性	类型	说明
label	string	选项文案
value	string/number	选项值
hide	boolean	是否隐藏
disabled	boolean	是否不可选

emits

事件名	说明
click	选中时触发事件

slots

插槽名	说明
default	内容区插槽，包含图标，作用域参数：{item}
icon	图标插槽，作用域参数：{item}

示例代码

<template>
  <view class="s-title">默认</view>
  <mosowe-group-choose
    v-model="value2"
    :list="demoList"
  ></mosowe-group-choose>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import icon from '@/static/logo.png';
  import icon2 from '@/static/tabbarIcons/camera-icon.png';
  const value2 = ref<number | null>(2);
  const demoList = ref([
    {
      label: '选项1',
      value: 1
    },
    {
      label: '选项2',
      value: 2
    },
    {
      label: '选项3',
      value: 3
    },
    {
      label: '选项4',
      value: 4
    },
    {
      label: '不可选',
      value: 5,
      disabled: true
    },
    {
      label: '隐藏',
      value: 6,
      hide: true
    }
  ]);
</script>

贡献者

mosowe