123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- <template>
- <view class="uni-rate">
- <view :key="index" :style="{ marginLeft: margin + 'px' }" @click="_onClick(index)" class="uni-rate__icon" v-for="(star, index) in stars">
- <uni-icons :color="color" :size="size" :type="isFill ? 'star-filled' : 'star'" />
-
- <view :style="{ width: star.activeWitch.replace('%','')*size/100+'px'}" class="uni-rate__icon-on">
- <uni-icons style="text-align: left;" :color="activeColor" :size="size" type="star-filled" />
- </view>
-
-
- <view :style="{ width: star.activeWitch,top:-size/2+'px' }" class="uni-rate__icon-on">
- <uni-icons :color="activeColor" :size="size" type="star-filled" />
- </view>
-
- </view>
- </view>
- </template>
- <script>
- import uniIcons from "../uni-icons/uni-icons.vue";
- export default {
- name: "UniRate",
- components: {
- uniIcons
- },
- props: {
- isFill: {
-
- type: [Boolean, String],
- default: true
- },
- color: {
-
- type: String,
- default: "#ececec"
- },
- activeColor: {
-
- type: String,
- default: "#ffca3e"
- },
- size: {
-
- type: [Number, String],
- default: 24
- },
- value: {
-
- type: [Number, String],
- default: 0
- },
- max: {
-
- type: [Number, String],
- default: 5
- },
- margin: {
-
- type: [Number, String],
- default: 0
- },
- disabled: {
-
- type: [Boolean, String],
- default: false
- }
- },
- data() {
- return {
- valueSync: ""
- };
- },
- 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"
- });
- }
- }
- console.log("starList[4]: " + starList[4].activeWitch);
- return starList;
- }
- },
- created() {
- this.valueSync = Number(this.value);
- },
- methods: {
- _onClick(index) {
- if (this.disabled) {
- return;
- }
- this.valueSync = index + 1;
- this.$emit("change", {
- value: this.valueSync
- });
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .uni-rate {
-
- display: flex;
-
- line-height: 0;
- font-size: 0;
- flex-direction: row;
- }
- .uni-rate__icon {
- position: relative;
- line-height: 0;
- font-size: 0;
- }
- .uni-rate__icon-on {
- overflow: hidden;
- position: absolute;
- top: 0;
- left: 0;
- line-height: 1;
- text-align: left;
- }
- </style>
|