123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- <template>
- <view class="u-rate" :id="elId" @touchmove.stop.prevent="touchMove">
- <view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]">
- <u-icon
- :name="activeIndex > index ? activeIcon : inactiveIcon"
- @click="click(index + 1, $event)"
- :color="activeIndex > index ? activeColor : inactiveColor"
- :style="{
- fontSize: size + 'rpx',
- padding: `0 ${gutter / 2 + 'rpx'}`
- }"
- ></u-icon>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'u-rate',
- props: {
-
- count: {
- type: [Number, String],
- default: 5
- },
-
- current: {
- type: [Number, String],
- default: 0
- },
-
- disabled: {
- type: Boolean,
- default: false
- },
-
- size: {
- type: [Number, String],
- default: 32
- },
-
- inactiveColor: {
- type: String,
- default: '#b2b2b2'
- },
-
- activeColor: {
- type: String,
- default: '#FA3534'
- },
-
- gutter: {
- type: [Number, String],
- default: 10
- },
-
- minCount: {
- type: [Number, String],
- default: 0
- },
-
- allowHalf: {
- type: Boolean,
- default: false
- },
-
- activeIcon: {
- type: String,
- default: 'star-fill'
- },
-
- inactiveIcon: {
- type: String,
- default: 'star'
- }
- },
- data() {
- return {
-
- elId: this.$u.guid(),
- elClass: this.$u.guid(),
- starBoxLeft: 0,
- activeIndex: this.current,
- starWidth: 0,
- starWidthArr: []
- };
- },
- watch: {
- current(val) {
- this.activeIndex = val;
- }
- },
- methods: {
-
- getElRectById() {
-
- this.$u.getRect('#' + this.elId).then(res => {
- this.starBoxLeft = res.left;
- })
- },
-
- getElRectByClass() {
-
- this.$u.getRect('.' + this.elClass).then(res => {
- this.starWidth = res.width;
-
- for (let i = 0; i < this.count; i++) {
- this.starWidthArr[i] = (i + 1) * this.starWidth;
- }
- })
- },
-
- touchMove(e) {
- if (this.disabled) {
- return;
- }
- if (!e.changedTouches[0]) {
- return;
- }
- const movePageX = e.changedTouches[0].pageX;
-
- const distance = movePageX - this.starBoxLeft;
-
- if (distance <= 0) {
- this.activeIndex = 0;
- }
-
- let index = Math.ceil(distance / this.starWidth);
- this.activeIndex = index > this.count ? this.count : index;
-
- if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
- this.$emit('change', this.activeIndex);
- },
-
- click(index, e) {
- if (this.disabled) {
- return;
- }
-
- if (this.allowHalf) {
- }
-
- if (index == 1) {
- if (this.activeIndex == 1) this.activeIndex = 0;
- else this.activeIndex = 1;
- } else {
- this.activeIndex = index;
- }
-
- if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
- this.$emit('change', this.activeIndex);
- }
- },
- mounted() {
- this.getElRectById();
- this.getElRectByClass();
- }
- };
- </script>
- <style scoped lang="scss">
- .u-rate {
- display: -webkit-inline-flex;
- display: inline-flex;
- align-items: center;
- margin: 0;
- padding: 0;
- }
- .u-icon {
- box-sizing: border-box;
- }
- </style>
|