Fast-UI

# fu-star 评分

用于对事物进行评级操作

# 平台差异

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序
√ √ √ √ √ √

# 基本使用

<template>
  <view>
    <fu-star :value="value"></fu-star>
  </view>
</template>
<script>
    export default {
      data() {
          return {
          value: 3
          }
      }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 自定义图标

  • 可以通过icon设置图标，图标可以在icon图标选择
<template>
  <view>
    <fu-star :value="value" icon="&#xe8c4;"></fu-star>
  </view>
</template>
<script>
    export default {
      data() {
          return {
          value: 3
          }
      }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 自定义样式

<template>
  <view>
    <fu-star :value="value" icon="&#xe8c4;" :size="44" color="#ffd21e" voidColor="#eee" ></fu-star>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        value: 3
      }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 只读状态

<template>
  <view>
    <fu-star :readonly="true" ></fu-star>
  </view>
</template>
1
2
3
4
5

# 监听change事件

<template>
  <view>
    <fu-star :value="value" @change="onChange" ></fu-star>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        value: 3
      }
    },
    method:{
        onChange(val){
            console.log(val);
        }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# API

# Props

参数 说明 类型 默认值 可选值
value 当前分值 Number 5
count 图标总数 Number 5
size 图标大小，单位为rpx Number 40rpx
gutter 图标间距，单位为rpx Number 8rpx
color 选中时的颜色 string #FD8A07
voidColor 选中时的图标名称 String #DCDCDC
icon 未选中时的颜色 String
readonly 是否为只读状态  boolean false

# 事件

事件名 说明 回调参数
change 当前分值变化时触发的事件 当前分值

fu-tab 标签页