星星评分组件

星星评分组件

前言：第一次写组件啦！

组件：

• 效果图

• 

• 功能：写了一部分自定义属性

  属性名	描述	数值类型	默认值	备注
  score	实际分数	Number	0
  maxScore	最大分数	Number	5.0
  starAllNum	星星个数	Number	5
  下面是星星设置
  show_half	是否展示半星	Boolean	true
  star_size	星星大小	Number	8	单位：px
  light_color	点亮部分颜色	String	‘#FFFF00’	十六进制要加上#，支持英文单词形式
  gray_color	未点亮部分颜色	String	‘#F5f5f5’	十六进制要加上#，支持英文单词形式
  下面是分数设置
  show_score	是否展示分数	Boolean	true
  score_size	分数字体大小	Number	12	单位：px
  score_color	分数字体颜色	String	‘#F0AD4E’	十六进制要加上#，支持英文单词形式

• 属性设置方法：

  <star-score :score= "4" :maxScore = 5 :star_num = 5> </star-score>
  

• 具体代码：

  • 组件代码（代码是 uni-app ，想要用来微信小程序或者vue的话要自己改一改格式喔！）

    • html部分

    //注意这里的组件名 组件名配置（1/4）
    <template name="starScore">
    	<view v-if="!error" class="score">
    		<view class="star">
    			<!-- 点亮的星星 -->
    			<view v-for="light in lightNum" :key="light + 'light'" class="iconfont icon-xingxing light-star" :style="light_style"></view>
    			<!-- 半星 -->
    			<view v-show="half_star" class="iconfont icon-xing3 half-star" :style="light_style "></view>
    			<!-- 灰星 -->
    			<view v-for="gray in grayNum" :key="gray + 'gray'" class="iconfont icon-xingxing gray-star" :style="gray_style "></view>
    		</view>
    		<view v-if = "show_score" class="score-num" :style = "num_style">
    			{{score}}
    		</view>
    	</view>
    	<view v-else class="error" @click="errorModle">
    		分数设置不规范，组件失效，请重新设置
    	</view>
    </template>
    

    • js部分

      <script>
      	export default {
      		// 组件名配置（2/4）
      		name: "starScore",
      		data() {
      			return {
      				// 展示星星值
      				half_star: false,
      				lightNum: 0,
      				grayNum: 0,
      				
      				// 不规范参数
      				error: false,
      				
      				// 文字样式
      				num_style: `color: ${this.score_color};
      						   font-size: ${this.score_size}px;`,
      				// 星星样式
      				// 点亮部分样式
      				light_style: `color: ${this.light_color};
      							font-size: ${this.star_size}px`,
      				// 灰色部分样式
      				gray_style: `color: ${this.gray_color};
      							font-size: ${this.star_size}px`,
      						
      			}
      		},
      		props: {
           		//===================接收的属性值，可以自己加       
      			// 实际分数
      			score: {
      				type: Number,
      				default: 0
      			},
      
      			// 属性值
      			// 最大分数
      			maxScore: {
      				type: Number,
      				default: 5.0
      			},
      			// 星星个数
      			starAllNum: {
      				type: Number,
      				default: 5
      			},
      
      			// ============星星
      			// 是否展示半星
      			show_half: {
      				type: Boolean,
      				default: true
      			},
      			// 星星大小(单位px)
      			star_size: {
      				type: Number,
      				default: 8
      			},
      			// 点亮部分的颜色
      			light_color: {
      				type: String,
      				default: '#FFFF00'
      			},
      			// 灰色部分的颜色
      			gray_color: {
      				type: String,
      				default: '#F5f5f5'
      			},
      
      
      			// ============分值
      			// 是否展示分值
      			show_score: {
      				type: Boolean,
      				default: true
      			},
      			// 分数字体大小（px）
      			score_size: {
      				type: Number,
      				default: 12
      			},
      			// 分数颜色颜色
      			score_color: {
      				type: String,
      				default: '#F0AD4E'
      			},
      		},
      		methods: {
      			// 出错弹窗
      			errorModle() {
      				this.modlePack.errModle("分数设置错误，组件失效，必须重新设置")
      					.then(res => {console.log('11')})
      					.catch(err => {
      						console.log(err)
      						this.errorModle()
      					});
      			}
      		},
      		created(e) {
      			console.log('传值');
      			let score = this.score;
      			let maxScore = this.maxScore;
      			let starAllNum = this.starAllNum;
      
      			if (this.score > this.maxScore || this.score < 0) {
      				this.error = true;
      				this.errorModle()
      			}else if(this.score == this.maxScore){
      				// 达到最大值
      				this.lightNum = this.starAllNum;
      			}else if(this.score == 0 ){
      				// 没有分数
      				this.grayNum = this.starAllNum;
      			}else {
      				// 亮星个数 = 实际分数 / (最大分数/星星总数) ==> 然后取整
      				// 一颗星几份 = is.maxScore / this.starAllNum
      				// 实际占了几分 = this.score / 
      				let temp = this.score / (this.maxScore / this.starAllNum)
      				let lightNum = parseInt(temp);
      				this.lightNum = lightNum;
      
      				// 半星个数
      				if (this.show_half) {
      					// 计算取整被抹去的数值
      					let elseNum = temp - lightNum;
      					// 计算数值上是否需要出现半星
      					this.half_star = Boolean(elseNum >= 0.5);
      				}
      
      				// 灰星个数 = 全星 - 亮星 - 半星
      				this.grayNum = this.starAllNum - lightNum - (this.half_star ? 1 : 0);
      				console.log(this)
      			}
      		}
      	}
      </script>
      
      

      • css 代码

      <style>
      	/*这里用到了iconfont, 没有导入的话星星显示不出来*/
      	@import url("./src/css/iconfont.css");
      	/* 星星评分 */
      	.score .star {
      		display: inline-block;
      	}
      
      	.star .icon-xing3,
      	.star .icon-xingxing {
      		display: inline-block;
      		margin-right: 5rpx;
      		font-size: 8px;
      	}
      
      	.star .light-star {
      		color: #FFFF00;
      	}
      
      	.star .half-star {
      		color: #FFFF00;
      	}
      
      	.gray-star {
      		color: #F5f5f5;
      	}
      
      	.score-num {
      		display: inline-block;
      		font-size: 12px;
      		color: #F0AD4E;
      	}
      </style>
      
      

    • iconfont.css文件

      @font-face {
        font-family: "iconfont"; /* Project id 2704021 */
        src: url('https://at.alicdn.com/t/font_2704021_5e6wdv1s8kq.woff2?t=1627442376645') format('woff2'),
             url('https://at.alicdn.com/t/font_2704021_5e6wdv1s8kq.woff?t=1627442376645') format('woff'),
             url('https://at.alicdn.com/t/font_2704021_5e6wdv1s8kq.ttf?t=1627442376645') format('truetype');
      }
      
      .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      
      .icon-xing3:before {
        content: "\e604";
      }
      
      .icon-xingxing1:before {
        content: "\e609";
      }
      
      .icon-xingxing:before {
        content: "\e641";
      }
      

  2. 引用页面代码

  <script>
  	//引入组件    组件名配置（3/4）
  	import starScore from 'component/star-score/star-score.vue';
  	export default {
  		components: {
              // 组件名配置（4/4）
  			starScore
  		},
  	}
  </script>
  

再看一眼效果：

gitee：（搬到vue项目里啦~）

https://gitee.com/a-qing-xi-xi/star-scoring-component-vue

后记：

前段时间做的项目一塌糊涂，好多东西因为懒都没有去考虑，在迎接新的项目之前，最近在学习uni-app，然后也在看JavaScript高级程序设计的书，配合食用发现好多新知识呀！也有在多方面的尝试封装等知识，慢慢培养自己的代码自觉！喜欢这种学到起飞的感觉呀！