123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275 |
- <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 ? elActiveIcon : inactiveIcon"
- @click="click(index + 1, $event)"
- :color="activeIndex > index ? elActiveColor : inactiveColor"
- :custom-style="{
- fontSize: size + 'rpx',
- padding: `0 ${gutter / 2 + 'rpx'}`
- }"
- :custom-prefix="customPrefix"
- :show-decimal-icon="showDecimalIcon(index)"
- :percent="decimal"
- :inactive-color="inactiveColor"
- ></u-icon>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'u-rate',
- props: {
-
-
- value: {
- type: [Number, String],
- default: -1
- },
-
- 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'
- },
-
- customPrefix: {
- type: String,
- default: 'uicon'
- },
- colors: {
- type: Array,
- default() {
- return []
- }
- },
- icons: {
- type: Array,
- default() {
- return []
- }
- }
- },
- data() {
- return {
-
- elId: this.$u.guid(),
- elClass: this.$u.guid(),
- starBoxLeft: 0,
-
- activeIndex: this.value != -1 ? this.value : this.current,
- starWidth: 0,
- starWidthArr: []
- }
- },
- watch: {
- current(val) {
- this.activeIndex = val
- },
- value(val) {
- this.activeIndex = val
- }
- },
- computed: {
- decimal() {
- if (this.disabled) {
- return this.activeIndex * 100 % 100
- } else if (this.allowHalf) {
- return 50
- }
- },
- elActiveIcon() {
- const len = this.icons.length
-
-
-
- if (len && len <= this.count) {
- const step = Math.round(this.activeIndex / Math.round(this.count / len))
- if (step < 1) return this.icons[0]
- if (step > len) return this.icons[len - 1]
- return this.icons[step - 1]
- }
- return this.activeIcon
- },
- elActiveColor() {
- const len = this.colors.length
-
-
- if (len && len <= this.count) {
- const step = Math.round(this.activeIndex / Math.round(this.count / len))
- if (step < 1) return this.colors[0]
- if (step > len) return this.colors[len - 1]
- return this.colors[step - 1]
- }
- return this.activeColor
- }
- },
- methods: {
-
- getElRectById() {
-
- this.$uGetRect('#' + this.elId).then(res => {
- this.starBoxLeft = res.left
- })
- },
-
- getElRectByClass() {
-
- this.$uGetRect('.' + 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.emitEvent()
- },
-
- 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.emitEvent()
- },
-
- emitEvent() {
-
- this.$emit('change', this.activeIndex)
-
- if (this.value != -1) {
- this.$emit('input', this.activeIndex)
- }
- },
- showDecimalIcon(index) {
- return this.disabled && parseInt(this.activeIndex) === index
- }
- },
- mounted() {
- this.getElRectById()
- this.getElRectByClass()
- }
- }
- </script>
- <style scoped lang="scss">
- @import "../../libs/css/style.components.scss";
- .u-rate {
- display: -webkit-inline-flex;
- display: inline-flex;
- align-items: center;
- margin: 0;
- padding: 0;
- }
- .u-icon {
- box-sizing: border-box;
- }
- </style>
|