wxc-rate

评分 - 小程序组件

Install

  1. $ min install @minui/wxc-rate

Demos

自定义颜色

评分 rate - 图1

  1. <template>
  2.   <wxc-rate value="4" color="#ff45a1" active-color="#ff45a1"></wxc-rate>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-rate': '@minui/wxc-rate'
  10.     }
  11.   },
  12.   data: { },
  13.   methods: { }
  14. }
  15. </script>
  17. <style>
  18. </style>

设置个数

评分 rate - 图2

  1. <template>
  2.   <wxc-rate value="2" count="7"></wxc-rate>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-rate': '@minui/wxc-rate'
  10.     }
  11.   },
  12.   data: { },
  13.   methods: { }
  14. }
  15. </script>
  17. <style>
  18. </style>

基础用法

评分 rate - 图3

  1. <template>
  2.   <wxc-rate bind:rate="onClick"></wxc-rate>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-rate': '@minui/wxc-rate'
  10.     }
  11.   },
  12.   data: { },
  13.   /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  14.   methods: {
  15.       onClick(e) {
  16.           console.log(e.detail.value);
  17.       }
  18.   }
  19. }
  20. </script>
  22. <style>
  23. </style>

只读

评分 rate - 图4

<template>
  <wxc-rate value="4" readonly="{{true}}" color="#ff45a1" active-color="#ff45a1"></wxc-rate>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-rate': '@minui/wxc-rate'
    }
  },
  data: { },
  methods: { }
}
</script>

<style>
</style>

自定义大小

评分 rate - 图5

<template>
  <wxc-rate value="4" size="28" padding="10" color="#ff45a1" active-color="#ff45a1"></wxc-rate>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-rate': '@minui/wxc-rate'
    }
  },
  data: { },
  methods: { }
}
</script>

<style>
</style>

设置默认值

评分 rate - 图6

<template>
  <wxc-rate value="3"></wxc-rate>
</template>

<script>
export default {
  config: {
    usingComponents: {
      'wxc-rate': '@minui/wxc-rate'
    }
  },
  data: { },
  methods: { }
}
</script>

<style>
</style>

API

Rate

名称描述
value[说明]：评分值。[类型]：Number[默认值]：0
count[说明]：星星个数。[类型]：Number[默认值]：5
size[说明]：图标大小。[类型]：Number[默认值]：44
color[说明]：初始颜色值。[类型]：String[默认值]：#e5e5e5
active-color[说明]：选中颜色值。[类型]：String[默认值]：#fdb757
padding[说明]：两颗星星间的距离。[类型]：Number[默认值]：20
readonly[说明]：是否只读。[类型]：Boolean[默认值]：false
bind:rate[说明]：评分点击事件，event.detail = {value: value}。

ChangeLog

v1.0.1（2018-6-5）

  • 补充文档，增加 rate 点击事件说明

v1.0.0（2018-4-23）

  • 初始版本