项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/uni_modules/uni-rate/components/uni-rate/uni-rate.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,361 @@
<template>
   <view>
      <view ref="uni-rate" class="uni-rate">
         <view class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}"
            :style="{ 'margin-right': marginNumber + 'px' }" v-for="(star, index) in stars" :key="index"
            @touchstart.stop="touchstart" @touchmove.stop="touchmove" @mousedown.stop="mousedown"
            @mousemove.stop="mousemove" @mouseleave="mouseleave">
            <uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" />
            <!-- #ifdef APP-NVUE -->
            <view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="uni-rate__icon-on">
               <uni-icons style="text-align: left;" :color="disabled?'#ccc':activeColor" :size="size"
                  type="star-filled" />
            </view>
            <!-- #endif -->
            <!-- #ifndef APP-NVUE -->
            <view :style="{ width: star.activeWitch}" class="uni-rate__icon-on">
               <uni-icons :color="disabled?disabledColor:activeColor" :size="size" type="star-filled" />
            </view>
            <!-- #endif -->
         </view>
      </view>
   </view>
</template>

<script>
   // #ifdef APP-NVUE
   const dom = uni.requireNativePlugin('dom');
   // #endif
   /**
    * Rate è¯„分
    * @description è¯„分组件
    * @tutorial https://ext.dcloud.net.cn/plugin?id=33
    * @property {Boolean}    isFill = [true|false]       æ˜Ÿæ˜Ÿçš„类型，是否为实心类型, é»˜è®¤ä¸ºå®žå¿ƒ
    * @property {String}    color                   æœªé€‰ä¸­çŠ¶æ€çš„星星颜色，默认为 "#ececec"
    * @property {String}    activeColor             é€‰ä¸­çŠ¶æ€çš„星星颜色，默认为 "#ffca3e"
    * @property {String}    disabledColor             ç¦ç”¨çŠ¶æ€çš„星星颜色，默认为 "#c0c0c0"
    * @property {Number}    size                   æ˜Ÿæ˜Ÿçš„大小
    * @property {Number}    value/v-model             å½“前评分
    * @property {Number}    max                   æœ€å¤§è¯„分评分数量，目前一分一颗星
    * @property {Number}    margin                   æ˜Ÿæ˜Ÿçš„间距，单位 px
    * @property {Boolean}    disabled = [true|false]    æ˜¯å¦ä¸ºç¦ç”¨çŠ¶æ€ï¼Œé»˜è®¤ä¸º false
    * @property {Boolean}    readonly = [true|false]    æ˜¯å¦ä¸ºåªè¯»çŠ¶æ€ï¼Œé»˜è®¤ä¸º false
    * @property {Boolean}    allowHalf = [true|false]    æ˜¯å¦å®žçŽ°åŠæ˜Ÿï¼Œé»˜è®¤ä¸º false
    * @property {Boolean}    touchable = [true|false]    æ˜¯å¦æ”¯æŒæ»‘动手势，默认为 true
    * @event {Function} change                   uniRate çš„ value æ”¹å˜æ—¶è§¦å‘事件，e={value:Number}
    */

   export default {
      name: "UniRate",
      props: {
         isFill: {
            // æ˜Ÿæ˜Ÿçš„类型，是否镂空
            type: [Boolean, String],
            default: true
         },
         color: {
            // æ˜Ÿæ˜Ÿæœªé€‰ä¸­çš„颜色
            type: String,
            default: "#ececec"
         },
         activeColor: {
            // æ˜Ÿæ˜Ÿé€‰ä¸­çŠ¶æ€é¢œè‰²
            type: String,
            default: "#ffca3e"
         },
         disabledColor: {
            // æ˜Ÿæ˜Ÿç¦ç”¨çŠ¶æ€é¢œè‰²
            type: String,
            default: "#c0c0c0"
         },
         size: {
            // æ˜Ÿæ˜Ÿçš„大小
            type: [Number, String],
            default: 24
         },
         value: {
            // å½“前评分
            type: [Number, String],
            default: 0
         },
         modelValue: {
            // å½“前评分
            type: [Number, String],
            default: 0
         },
         max: {
            // æœ€å¤§è¯„分
            type: [Number, String],
            default: 5
         },
         margin: {
            // æ˜Ÿæ˜Ÿçš„间距
            type: [Number, String],
            default: 0
         },
         disabled: {
            // æ˜¯å¦å¯ç‚¹å‡»
            type: [Boolean, String],
            default: false
         },
         readonly: {
            // æ˜¯å¦åªè¯»
            type: [Boolean, String],
            default: false
         },
         allowHalf: {
            // æ˜¯å¦æ˜¾ç¤ºåŠæ˜Ÿ
            type: [Boolean, String],
            default: false
         },
         touchable: {
            // æ˜¯å¦æ”¯æŒæ»‘动手势
            type: [Boolean, String],
            default: true
         }
      },
      data() {
         return {
            valueSync: "",
            userMouseFristMove: true,
            userRated: false,
            userLastRate: 1
         };
      },
      watch: {
         value(newVal) {
            this.valueSync = Number(newVal);
         },
         modelValue(newVal) {
            this.valueSync = Number(newVal);
         },
      },
      computed: {
         stars() {
            const value = this.valueSync ? this.valueSync : 0;
            const starList = [];
            const floorValue = Math.floor(value);
            const ceilValue = Math.ceil(value);
            for (let i = 0; i < this.max; i++) {
               if (floorValue > i) {
                  starList.push({
                     activeWitch: "100%"
                  });
               } else if (ceilValue - 1 === i) {
                  starList.push({
                     activeWitch: (value - floorValue) * 100 + "%"
                  });
               } else {
                  starList.push({
                     activeWitch: "0"
                  });
               }
            }
            return starList;
         },

         marginNumber() {
            return Number(this.margin)
         }
      },
      created() {
         this.valueSync = Number(this.value || this.modelValue);
         this._rateBoxLeft = 0
         this._oldValue = null
      },
      mounted() {
         setTimeout(() => {
            this._getSize()
         }, 100)
         // #ifdef H5
         this.PC = this.IsPC()
         // #endif
      },
      methods: {
         touchstart(e) {
            // #ifdef H5
            if (this.IsPC()) return
            // #endif
            if (this.readonly || this.disabled) return
            const {
               clientX,
               screenX
            } = e.changedTouches[0]
            // TODO åšä¸€ä¸‹å…¼å®¹ï¼Œåªæœ‰ Nvue ä¸‹æ‰æœ‰ screenX，其他平台式 clientX
            this._getRateCount(clientX || screenX)
         },
         touchmove(e) {
            // #ifdef H5
            if (this.IsPC()) return
            // #endif
            if (this.readonly || this.disabled || !this.touchable) return
            const {
               clientX,
               screenX
            } = e.changedTouches[0]
            this._getRateCount(clientX || screenX)
         },

         /**
          * å…¼å®¹ PC @tian
          */

         mousedown(e) {
            // #ifdef H5
            if (!this.IsPC()) return
            if (this.readonly || this.disabled) return
            const {
               clientX,
            } = e
            this.userLastRate = this.valueSync
            this._getRateCount(clientX)
            this.userRated = true
            // #endif
         },
         mousemove(e) {
            // #ifdef H5
            if (!this.IsPC()) return
            if (this.userRated) return
            if (this.userMouseFristMove) {
               console.log('---mousemove----', this.valueSync);
               this.userLastRate = this.valueSync
               this.userMouseFristMove = false
            }
            if (this.readonly || this.disabled || !this.touchable) return
            const {
               clientX,
            } = e
            this._getRateCount(clientX)
            // #endif
         },
         mouseleave(e) {
            // #ifdef H5
            if (!this.IsPC()) return
            if (this.readonly || this.disabled || !this.touchable) return
            if (this.userRated) {
               this.userRated = false
               return
            }
            this.valueSync = this.userLastRate
            // #endif
         },
         // #ifdef H5
         IsPC() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
            var flag = true;
            for (let v = 0; v < Agents.length - 1; v++) {
               if (userAgentInfo.indexOf(Agents[v]) > 0) {
                  flag = false;
                  break;
               }
            }
            return flag;
         },
         // #endif

         /**
          * èŽ·å–星星个数
          */
         _getRateCount(clientX) {
            this._getSize()
            const size = Number(this.size)
            if (isNaN(size)) {
               return new Error('size å±žæ€§åªèƒ½è®¾ç½®ä¸ºæ•°å­—')
            }
            const rateMoveRange = clientX - this._rateBoxLeft
            let index = parseInt(rateMoveRange / (size + this.marginNumber))
            index = index < 0 ? 0 : index;
            index = index > this.max ? this.max : index;
            const range = parseInt(rateMoveRange - (size + this.marginNumber) * index);
            let value = 0;
            if (this._oldValue === index && !this.PC) return;
            this._oldValue = index;
            if (this.allowHalf) {
               if (range > (size / 2)) {
                  value = index + 1
               } else {
                  value = index + 0.5
               }
            } else {
               value = index + 1
            }

            value = Math.max(0.5, Math.min(value, this.max))
            this.valueSync = value
            this._onChange()
         },

         /**
          * è§¦å‘动态修改
          */
         _onChange() {

            this.$emit("input", this.valueSync);
            this.$emit("update:modelValue", this.valueSync);
            this.$emit("change", {
               value: this.valueSync
            });
         },
         /**
          * èŽ·å–星星距离屏幕左侧距离
          */
         _getSize() {
            // #ifndef APP-NVUE
            uni.createSelectorQuery()
               .in(this)
               .select('.uni-rate')
               .boundingClientRect()
               .exec(ret => {
                  if (ret) {
                     this._rateBoxLeft = ret[0].left
                  }
               })
            // #endif
            // #ifdef APP-NVUE
            dom.getComponentRect(this.$refs['uni-rate'], (ret) => {
               const size = ret.size
               if (size) {
                  this._rateBoxLeft = size.left
               }
            })
            // #endif
         }
      }
   };
</script>

<style lang="scss">
   .uni-rate {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      line-height: 1;
      font-size: 0;
      flex-direction: row;
      /* #ifdef H5 */
      cursor: pointer;
      /* #endif */
   }

   .uni-rate__icon {
      position: relative;
      line-height: 1;
      font-size: 0;
   }

   .uni-rate__icon-on {
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      line-height: 1;
      text-align: left;
   }

   .uni-cursor-not-allowed {
      /* #ifdef H5 */
      cursor: not-allowed !important;
      /* #endif */
   }
</style>