星星评分系统代码模板。

这里使用星星评分的位置是header组件，以此为例。
header.vue中代码，无关代码已经省略。

<template><div class="detail-wrapper clearfix"><div class="detail-main"><h1 class="detail-name">{{seller.name}}</h1><star :size="48" :score="seller.score"></star>//引入star组件,并传入参数size和score</div></div>
</template>
<script type='text/ecmascript-6'>
import star from '../star/star'components: {star//ES6缩写，实际为'star': star},
</script>

star.vue中的内容：

<template><div class="star" :class="starType">//starType表示不同星星尺寸下的类，这里因为有3种星星尺寸。<span v-for="(itemClass,index) of itemClasses" :key="index" :class=itemClass class="star-item"></span>//itemClass表示一颗星的状态，itemClasses表示这个状态数组的合计，通过v-for遍历来实现此功能。star-item用于设置样式。</div>
</template><script type='text/ecmascript-6'>
const LENGTH = 5//常量定义便于以后的代码扩展，例如10星等。
const CLS_ON = 'on'
const CLS_HALF = 'half'
const CLS_OFF = 'off'
export default {props: {size: {//size从父组件header里面传入，决定尺寸type: Number},score: {//score从父组件header里面传入，决定星星数量type: Number}},data () {return {}},components: {},computed: {starType () {return 'star-' + this.size//返回starType的值，表示不同尺寸下的star类。star类与size相关联。},itemClasses () {let result = []let score = Math.floor(this.score * 2) / 2let hasDecimal = score % 1 !== 0//判断是否有半星let integer = Math.floor(score)for (let i = 0; i < integer; i++) {result.push(CLS_ON)}if (hasDecimal) {//判断是否有半星，hasDecimal存在则有，不存在则无。result.push(CLS_HALF)}while (result.length < LENGTH) {//如果不足5颗实星，剩余的位置补上off星星。result.push(CLS_OFF)}return result}},methods: {}
}</script>
<style lang='stylus' rel='stylesheet/stylus'>
@import '../../common/stylus/mixin.styl'
.starfont-size: 0.star-itemdisplay: inline-blockbackground-repeat: no-repeat&.star-48.star-itemmargin-right: 22pxwidth: 20pxheight: 20pxbackground-size: 20px 20px&.last-childmargin-right: 0&.onbg-image('star48_on')&.halfbg-image('star48_half')&.offbg-image('star48_off')&.star-36.star-itemmargin-right: 6pxwidth: 15pxheight: 15pxbackground-size: 15px 15px&.last-childmargin-right: 0&.onbg-image('star36_on')&.halfbg-image('star36_half')&.offbg-image('star36_off')&.star-24.star-itemmargin-right: 3pxwidth: 10pxheight: 10pxbackground-size: 10px 10px&.last-childmargin-right: 0&.onbg-image('star24_on')&.halfbg-image('star24_half')&.offbg-image('star24_off')
</style>

记得提前将对应图片当道组件所在文件夹中便于就近维护。

mixin.styl中的自适应背景图代码为：

bg-image($url)background-image: url($url+"@2x.png")@media (-webkit-min-device-pixel-ratio: 3),(-min-device-pixel-ratio: 3)background-image: url($url+"@3x.png")

星星评分系统代码模板。相关推荐

制作简单的星星评分案例
首先在自己的电脑桌面打开 Visual Studio Code ,第二步打开进去后创建个新的画布, 第三步敲出这些代码,最后把鼠标移到五角星上(鼠标移入的效果) 源代码如下: <!DOCTYPE ...
【Flutter从入门到实战】⑪、豆瓣案例-1、星星评分Widget、虚线Widget、TabbarWidget、BottomNavigationBarItem的封装、初始化配置抽取
Flutter从入门到实战一共分为23个系列 ①(Flutter.Dart环境搭建篇) 共3个内容已更新 ②(Dart语法1 篇) 共4个内容已更新 ③(Dart语法2 篇) 共2个内容已更新 ...
使用 HTML CSS 和 JavaScript 创建星级评分系统
各位读者好,今天在本博客中,您将学习如何使用 HTML CSS 和 JavaScript 创建星级评分系统 (Widget).早些时候,我还分享了一篇关于Star Rating Widget 的博客, ...
源码推荐：仿写映客直播 ,快速切换主题 ,星星评分控件,表格样式，可以横向移动的表格, 仿微信键盘-
仿写映客直播(上传者:五仁月饼) 工作之余写的,基于IJKPlayer播放,对内存做了处理.目前已完成直播列表和直播间的搭建,后续还会慢慢完善. 项目地址 publishImageAndVideoAn ...
Node项目之评分系统（一）- 基本介绍
最近半个月,一直在学习Node的Web开发,使用的Web的框架为express,模版引擎最后还是选用了ejs,相对于jade不需要学习新的语法规则,并且方便粘贴一些HTML代码片段,减轻了前端设计的好 ...
apache评分表的意义_APACHE评分系统及评分表
<APACHE评分系统及评分表>由会员分享,可在线阅读,更多相关<APACHE评分系统及评分表(2页珍藏版)>请在人人文库网上搜索. 1.APACHE评分系统急性生理学及慢性健 ...
angular 指令渲染_Angularjs渲染的 using 指令的星级评分系统示例
本文介绍Angularjs渲染的 using 指令的星级评分系统示例,分享给大家,具体如下: 我试图创建静态使用 angularjs/离子成效甚微的星级评分系统.但目前什么都不输出到屏幕上...... ...
业界 | 裁判太嚣张？平昌之后，奥运会评分系统将引入AI技术
平昌奥运会期间,在人类选手角逐较量的同时,八只机器人队伍也获得了参赛资格.2月12日,首届人形机器人滑雪锦标赛在威里山公园滑雪场开幕,这些装备传感器的8台机器人顺利完成比赛,给世界观众留下了深刻的印象 ...
JS实现星星评分功能实例代码(两种方法)
转载自 JS实现星星评分功能实例代码(两种方法) 一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"&g ...

星星评分系统代码模板。

星星评分系统代码模板。相关推荐

最新文章

热门文章