rate

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

组件结构

  1. <template>
  2. <viewclass="tui-rate-class tui-rate-box" @touchmove="touchMove">
  3. <blockv-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. <viewclass="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. exportdefault{
  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;
  79. if(distance <=0){
  80. return;
  81. }
  82. let index =Math.ceil(distance /this.size);
  83. index = index >this.count ?this.count : index;
  84. this.$emit('change',{
  85. index: index
  86. })
  87. }
  88. },
  89. // #ifdef H5
  90. mounted(){
  91. const className ='.tui-rate-box';
  92. let query = uni.createSelectorQuery().in(this)
  93. query.select(className).boundingClientRect((res)=>{
  94. this.pageX = res.left ||0
  95. }).exec()
  96. },
  97. // #endif
  98. onReady(){
  99. const className ='.tui-rate-box';
  100. let query = uni.createSelectorQuery().in(this)
  101. query.select(className).boundingClientRect((res)=>{
  102. this.pageX = res.left ||0
  103. }).exec()
  104. }
  105. }
  106. </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行,下载源码查看