stars 星级

星级组件（Star Rating Component）是一种常见的用户界面组件，用于让用户对某个项目或内容进行评级，并显示相应的星级评分。

Props参数

名称	类型	是否必传	默认值	描述
value	number	否	-	当前星级数量
src	string | string[]	否	-	选中图片
voidSrc	string | string[]	否	-	未选中图片
size	number	否	18	尺寸大小
count	number	否	5	星级总数量
showVoid	boolean	否	true	是否显示为选中的
gap	number	否	15	间距
onChange	(value: number) => void	否	-	改变事件

示例

import { useState } from 'react'
import { View } from '@tarojs/components'
import MMStars from '~/components/stars'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'

export default () => {
  const [value, setValue] = useState(3.5)

  function onChange(value: number) {
    setValue(value)
  }

  return (
    <MMPageContainer title="星级">
      <PageDemoBlock title="使用">
        <View>基础使用</View>
        <MMStars value={value} onChange={onChange} />

        <View className="spacing" />
        <View>可以设置星星尺寸 和间距</View>
        <View className="spacing" />
        <MMStars value={value} size={30} gap={5} onChange={onChange} />

        <View className="spacing" />
        <View>可以设置数量</View>
        <View className="spacing" />
        <MMStars value={value} count={10} gap={5} onChange={onChange} />
      </PageDemoBlock>

      <PageDemoBlock title="高级">
        <View>你可以针对每个项目设置图片,这在一些表情评价时非常有用</View>
        <MMStars
          value={value}
          size={30}
          src={[
            'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/mock/head0.png',
            'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/mock/head1.png',
            'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/mock/head2.png',
            'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/mock/head3.png',
            'https://wmm-mock.oss-cn-shanghai.aliyuncs.com/mock/head4.png'
          ]}
          onChange={onChange}
        />
      </PageDemoBlock>
    </MMPageContainer>
  )
}