vue实现一个星级打分效果_Vue实现星级评价效果

我们把星级评价单独做成一个Star组件，抽离出来，其中父组件中引入(传入的是评分的值)

初始Star.vue

export default {

props: {

score: Number

}

首先我们把要做星级图片用类名为star-item的span标签循环出来，星级图片有三张，全星，半星，空星

下面只罗列关键的css部分, 通过增加类区分图片

.star-item.on {

}

.star-item.half {

}

.star-item.off {

}

接下来修改Star.vue的代码

class="star-item"

v-for="(itemClass, index) in itemClasses"

:key="index"

:class="itemClass"

itemClasses值是通过计算属性获取的，思路：

通过computed返回一个长度为5的数组(显示5颗星)

数组的值是上述css取的不同星对应的类名，再通过绑定每一个循环添加的class，从而遍历星级。

比如举例评分：

4.7分对应的数组为['on', 'on', 'on', 'on', 'half']

3.4分对应的数组为['on', 'on', 'on', 'half', 'half']

JS部分的代码：

// 星星长度

const LENGTH = 5

// 星星的状态

const CLS_ON = 'on'

const CLS_HALF = 'half'

const CLS_OFF = 'off'

export default {

props: {

score: Number

computed: {

itemClasses () {

let result = []

let score = Math.floor(this.score * 2) / 2

// 半星 (通过跟1取余判断是否为小数)

let hasDecimal = score % 1 !== 0

// 全星 (向下取整，获取全星部分)

let integer = Math.floor(score)

// 遍历全星

for(let i = 0; i < integer; i++){

result.push(CLS_ON)

}

// 处理半星

if(hasDecimal){

result.push(CLS_HALF)

}

// 补齐

while(result.length < LENGTH){ // 到这里还不够五颗星，则凑空星

result.push(CLS_OFF)

}

return result

}

itemClasses最终是返回了一个长度为5的数组，需要注意的是

let score = Math.floor(this.score * 2) / 2

半星的划分：只有当小数第一位大于或等于5才可以算为半星，否则是空星。该计算是为了小数部分>=0.5的计算结果带有小数，从而再后面跟1取余判断是否为半星。一开始有点蒙，多试几个数想想就懂了。

比如4.3分没有半星，4.5有半星出现

结果：

比如传入的值为4.7，则显示

vue实现一个星级打分效果_Vue实现星级评价效果相关推荐

vue实现一个星级打分效果_Vue实现星级评价效果实例详解
我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) 初始Star.vue {{ score }} export default { name: 'Star', pr ...
vue如何使用原生js写动画效果_Vue中的动画效果
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...
vue实现一个星级打分效果_五分钟用vue实现一个五星打分效果
实现一个像这样的五星打分评价 {{score}}分 export default { data() { return { score: 0, content: '', star: [0,1,2,3, ...
五分钟用vue实现一个五星打分效果
实现一个像这样的五星打分 <template><div> <div class="mask"><div class="pop&q ...
vue实现下拉二级联动_vue实现二级联动效果
你如城市与省份间的二级联动效果 demo .pag-set-bg{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;} 所在区域 {{i ...
vue手势滚动_vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
https://github.com/383514580/any-touch 先看demo demo 说点湿的 iscroll其实代码量挺大的(近2100行, 还有另一个类似的库betterScrol ...
vue 实现无限轮播_用vue写一个轮播图效果
轮播图在网站中几乎无处不在,占用地方少,交互性好.今天就来聊聊如何用vue实现一个轮播效果. 一.原理在轮播图数组dataList中,定义一个变量currentIndex = 0表示第一张图片,默认 ...
vue伸缩效果_Vue.js - 元素展开、收起动画效果组件（附：二级菜单的展开、收缩动画效果）...
子菜单的展开.收缩功能在许多系统上都很常见,如果想要在打开收起时带有动画效果,过去常常会通过 jQuery 实现.而在 Vue 项目中,我们可以单独封装一个动画组件,方便使用. 1,效果图点击一级菜 ...
vue 鼠标拖动画矩形_vue中拖动元素效果实现，以及拖拽`缩放后的元素`效果实现...
START 番茄我又又又来写点啥了,最近被需求折磨的不要不要的,要做一个在线PPT做的网站.元素拖动算是其中一小部分的功能吧,但是还是出了很多的bug,这篇文章算是我对元素拖拽相关的记录吧. 仅以此文 ...

vue实现一个星级打分效果_Vue实现星级评价效果

vue实现一个星级打分效果_Vue实现星级评价效果相关推荐

最新文章

热门文章