rate

Rate评分:可设置星星数，可设置大小颜色，支持手势touch选择

组件结构

  1. <template>
  2.     <view class="tui-rate-class tui-rate-box" @touchmove="touchMove">
  3.         <block v-for="(item,index) in quantity" :key="index">
  4.             <view class="tui-icon tui-relative" :class="['tui-icon-collection'+(hollow && (current<=index || (disabled && current<=index+1))?'':'-fill')]"
  5.              :data-index="index" @tap="handleTap" :style="{fontSize:size+'px',color:(current>index+1 || (!disabled && current>index))?active:normal}">
  6.                 <view class="tui-icon tui-icon-main tui-icon-collection-fill" v-if="disabled && current==index+1" :style="{fontSize:size+'px',color:active,width:percent+'%'}"></view>
  7.             </view>
  8.         </block>
  9.     </view>
  10. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name: "tuiRate",
  4.         props: {
  5.             //数量
  6.             quantity: {
  7.                 type: Number,
  8.                 default: 5
  9.             },
  10.             //当前选中
  11.             current: {
  12.                 type: Number,
  13.                 default: 0
  14.             },
  15.             //当前选中星星分数(大于0，小于等于1的数)
  16.             score: {
  17.                 type: [Number, String],
  18.                 default: 1
  19.             },
  20.             //禁用点击
  21.             disabled: {
  22.                 type: Boolean,
  23.                 default: false
  24.             },
  25.             //大小
  26.             size: {
  27.                 type: Number,
  28.                 default: 20
  29.             },
  30.             //未选中颜色
  31.             normal: {
  32.                 type: String,
  33.                 default: "#b2b2b2"
  34.             },
  35.             //选中颜色
  36.             active: {
  37.                 type: String,
  38.                 default: "#e41f19"
  39.             },
  40.             //未选中是否为空心
  41.             hollow: {
  42.                 type: Boolean,
  43.                 default: false
  44.             }
  45.         },
  46.         data() {
  47.             return {
  48.                 pageX: 0,
  49.                 percent: 0
  50.             };
  51.         },
  52.         created() {
  53.             this.percent = Number(this.score || 0) * 100
  54.         },
  55.         watch: {
  56.             score(newVal, oldVal) {
  57.                 this.percent = Number(newVal || 0) * 100
  58.             }
  59.         },
  60.         methods: {
  61.             handleTap(e) {
  62.                 if (this.disabled) {
  63.                     return;
  64.                 }
  65.                 const index = e.currentTarget.dataset.index;
  66.                 this.$emit('change', {
  67.                     index: Number(index) + 1
  68.                 })
  69.             },
  70.             touchMove(e) {
  71.                 if (this.disabled) {
  72.                     return;
  73.                 }
  74.                 if (!e.changedTouches[0]) {
  75.                     return;
  76.                 }
  77.                 const movePageX = e.changedTouches[0].pageX;
  78.                 const distance = movePageX - this.pageX;
  80.                 if (distance <= 0) {
  81.                     return;
  82.                 }
  83.                 let index = Math.ceil(distance / this.size);
  84.                 index = index > this.count ? this.count : index;
  85.                 this.$emit('change', {
  86.                     index: index
  87.                 })
  88.             }
  89.         },
  90.         // #ifdef H5
  91.         mounted() {
  92.             const className = '.tui-rate-box';
  93.             let query = uni.createSelectorQuery().in(this)
  94.             query.select(className).boundingClientRect((res) => {
  95.                 this.pageX = res.left || 0
  96.             }).exec()
  97.         },
  99.         // #endif
  100.         onReady() {
  101.             const className = '.tui-rate-box';
  102.             let query = uni.createSelectorQuery().in(this)
  103.             query.select(className).boundingClientRect((res) => {
  104.                 this.pageX = res.left || 0
  105.             }).exec()
  106.         }
  107.     }
  108. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "quantity" : 数量,类型:"Number",默认值:5
     "current" :  当前选中星星,类型:"Number",默认值:0
     "score" :    当前选中星星分数(大于0，小于等于1的数),类型:"[Number, String]",默认值:1
     "disabled" : 是否禁用点击,类型:"Boolean",默认值:false
     "size" :       星星大小,类型:"Number",默认值:20
     "normal" :   未选中颜色,类型:"String",默认值:"#b2b2b2"
     "active" :   选中颜色,类型:"String",默认值:"#e41f19"
     "hollow" :   未选中是否为空心,类型:"Boolean",默认值:false

 methods:
   "handleTap":点击事件
   "touchMove":touch事件

示例

... 此处省略n行,下载源码查看