Vue移动端五星好评组件封装（精确到0.1）

我说的五星好评是大家平时很常见的，类似于美团评价那些，不过要精确到0.1的效果展现，的确项目中遇到了，当时也没太注意，很快写了一个，但是最后项目经理又要求不能是全星的评价，要精确到小数点后一位，相对来说是不太难的，但是短暂蒙x了。
其实大致逻辑就是准备两种星星图片，一张用于底板，一张用于显示的颜色，在根据评分的多少（显示星星的个数）/底板的长度=得到想要的星星评分范围。
之前也在网上扒了很多，相对来说评分组件很多，但是相对于精确到0.1的几乎没有。自己就结合大佬整合了一下。（使指完完全全成为一个拿来即用的vue组件）
模板部分

<template><KView class="star_one" :style="mainStyle"><KView class="star_line"><spanclass="star":style="starStyle"v-for="(star, index) in text_star.total":key="index"><img src="@/assets/image/score 4.png" alt="" /></span></KView><KView class="star_line" :style="blackStyle"><spanclass="star":style="starStyle"v-for="(star, index) in text_star.total":key="index"><img src="@/assets/image/score.png" alt="" /></span></KView></KView>
</template><script>
export default {// score指的是点亮星星的数量，在父组件引用的子组件模板上动态绑定props: ['text_star', 'score'],computed: {mainStyle() {return {width: `${(this.text_star.size * this.text_star.total)}px`,}},starStyle() {return {width: `${this.text_star.size}px`,height: `${this.text_star.size}px`,}},blackStyle() {return {width: `${((this.score / this.text_star.total) * 100) + 2}%`,}},},
}
</script><style>
.star_one {position: relative;display: inline-block;width: 75px;height: 27px;
}
.star_line {white-space: nowrap;overflow: hidden;position: absolute;width: 75px;height: 27px;
}
.star_line img {width: 12px;height: 12px;
}
.star {display: inline-block;cursor: pointer;padding: 0 1.5px;text-align: center;
}
</style>

引用父级

 <star :text_star="text_star" :score="shop_base.point"></star>

以上的props（）是从父组件得到的值*
内容相对来说有写杂乱，但是还是可以使用的哈哈哈，不足请大家指出修改。毕竟还算小白一枚呀。

最后星星图片留给大家啦

Vue移动端五星好评组件封装（精确到0.1）相关推荐

移动端基于Vant组件封装底部弹出搜索多选列表
移动端基于Vant组件封装底部弹出搜索多选列表: 效果图如下: 点击确定后赋值给表单使用到的组件:van-popup,van-search 组件页面代码:searchDataPopup.vue &l ...
有关QJ_Filecenter在vue中的使用和组件封装
有关QJ_Filecenter在vue中的使用和组件封装 QJ_FileCenter在vue中的使用和组件封装安装第一步:在官网下载QJ_FileCenter安装包第二部:访问FileCente ...
vue 移动端顶部导航组件
废话不多说,下面是我自己写的vue移动端顶部导航组件给大家分享一下 ,动态绑定背景颜色,字体颜色,以及回退图标.需要的直接拿去放项目里用吧- 示例图: HTML <template>< ...
Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
cookie实现京东五星好评组件评分数据存储
cookie实现京东五星好评组件评分数据存储实现目标: 实现京东五星好评部分的组件,实现鼠标经过星星时星星变红色,星星上方出现对应星级的笑脸,同时在评价n星后显示分数为n分,使用cookie缓存使用 ...
vue移动端项目日历组件，月周切换，点击进入上/下一个月
项目场景: Vue移动端项目的日历组件,移动端如果没有别的特别要求,一般用vant中的日历组件就OK,这里用的另一个.组件是网上找的,原网址:vue-hash-calendar,需要的请自行去看. 我 ...
使用cookie实现京东商品评价的五星好评组件的评分数据存储
整个项目的文件结构: img文件夹中使用的图片 commstar.png: face-red.png: JS代码 export default class Star {elem;label;name; ...
【★更新★】高性能 Windows Socket 服务端与客户端组件（HP-Socket v2.0.1 源代码及测试用例下载）...
HP-Socket 以前为某大型通信项目开发了一套通用 Windows Socket TCP 底层通信组件,组件代号为 HP-Socket.现在把 HP-Socket 的所有代码向大众公开,希望能对大 ...
html移动端表格插件,移动端类table组件封装
简介一个不怎么高度自定义的移动端table组件,可创建不定数量的列的table(自己写着玩为了以后维护修改样式方便封装起来的实现思路表格头部一个循环:循环渲染每一列的列名表格内容两重循环:外层循 ...

Vue移动端五星好评组件封装（精确到0.1）

最后星星图片留给大家啦

Vue移动端五星好评组件封装（精确到0.1）相关推荐

最新文章

热门文章