cowain-star

小程序点赞星星的实现

使用说明：

属性说明：

属性	默认值	描述
star	string类型，默认值 0	代表几个星星是选中的
color	string类型，默认值：橙色	代表星星的颜色
size	string类型，默认值 30rpx	代表星星的大小
width	string类型，默认值 160rpx	代表所有星星区域的宽度

使用案例：

<template>
	<view class="container">
		<view class="row-item">
			<text class="label">快递评分：</text>
			<cowain-star star='3'  width="260rpx"></cowain-star>
		</view>
		<view class="row-item">
			<text class="label">绿色星星：</text>
			<cowain-star star='3' color='rgba(14, 183, 105, 1)'  width="260rpx"></cowain-star>
		</view>
		<view class="row-item">
			<text class="label">大星星：</text>
			<cowain-star star='4' size='40rpx'  width="260rpx"></cowain-star>
		</view>
		<view class="row-item">
			<text class="label">可点击星：</text>
			<cowain-star :star='star2'  width="260rpx" @onStarClick='onStarClick'></cowain-star>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import CowainStar from '../../uni_modules/cowain-star/components/cowain-star/cowain-star.vue';
	
	const star2 = ref(0);
	
	const onStarClick=(index)=>{
		star2.value = index;
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		background-color: white;


	}

	.row-item {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		width: 100%;
		height: 80rpx;

	}

	.label {
		width: 180rpx;
		font-size: 30rpx;
		color: black
	}
</style>

实现

cowain-star:

<template>
  <view class="stars" :style="{ width }">
    <text
      class="iconfont icon-star-fill"
      :style="{
        background: `linear-gradient(
                    90deg,
                    ${props.color} calc(calc(${item}) * 1%),
                    transparent 0%
                  )`,
        'background-clip': 'text',
        '-webkit-background-clip': 'text',
        color: 'transparent',
        '-webkit-text-stroke': `1px ${props.color}`,
        transition: '0.5s linear',
        'font-size': size,
		'margin-right':marginRight
      }"
      v-for="(item, index) in starList"
      :key="index"
      @click="onStarClick(index)"
    ></text>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { computedStar } from "./utils.js";
const emits = defineEmits(["onStarClick"]);
const starList = ref([0, 0, 0, 0, 0]);
const props = defineProps({
  star: {
    type: String,
    default: "0"
  },
  color: {
    type: String,
    default: "rgba(253, 101, 65, 1)"
  },
  size: {
    type: String,
    default: "30rpx"
  },
  width: {
    type: String,
    default: "160rpx"
  }
});

watch(
  () => props.star,
  (val) => {
    starList.value = computedStar(val);
  },
  {
    immediate: true
  }
);

const onStarClick = (index) => {
  emits("onStarClick", index+1);
};
</script>

<style>
	@import url(../../static/iconfont/iconfont.css);
</style>
<style scoped>
.stars {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 4rpx;
}
</style>

utils.js

//计算星星数
export function computedStar(start) {
  if (start == 0) return [0, 0, 0, 0, 0];
  let arr = [0, 0, 0, 0, 0];
  let currentIndex = 0;
  if (`${start}`.indexOf(".") >= 1) {
    const [head, tail] = start.split(".");
    for (let i = 0; i < head; i++) {
      currentIndex++;
      arr[i] = 100;
    }
    arr[currentIndex] = tail;
  } else {
    for (let i = 0; i < start; i++) {
      currentIndex++;
      arr[i] = 100;
    }
  }
  return arr;
}

项目中使用了图标，自己可以自行下载一个图标库