vue.js 实现评价五角星组件的实例代码


Posted in Javascript onAugust 13, 2018

饿了么的五角星有三种形状,分别是实星,半星,空星

vue.js 实现评价五角星组件的实例代码

并且组件要能实现,这个五角星不同大小,评分也不一样,比如满分五颗星,四颗半星,四颗星等等....

所以需要像组件传入一个大小:size,一个分数:score

代码如下:

<template>
   <div class="star" :class="starType">
     <span class="star-item" :class="itemClass" v-for="itemClass in itemClasses"></span>
   </div>
 </template>
 <script type="text/ecmascript-6">
   const LENGTH=5;
   const CLS_ON="on";
   const CLS_OFF="off";
   const CLS_HALF="half";
  export default {
     props:{
       size:{
         type:Number
       },
       score:{
         type:Number
       }
     },
     computed:{
       starType(){
         return "star-"+this.size;
       },
       itemClasses(){
         //计算属性
        let result=[];
         let score=Math.floor(this.score*2)/2;
         let hasDecimal=score%1!==0; //是否有效数
        let integer=Math.floor(score);//取整
        for (var 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;
       }
     }
   };
 </script>
 <style lang="stylus" ref="sheetstyle/stylus">
   @import "../../common/stylus/mixin.styl";
   .star
     font-size:0
     .star-item
       display:inline-block
       background-repeat:no-repeat
     &.star-48
       .star-item
         width:20px
         height:20px
         margin-right:22px
         background-size:20px 20px
         &:last-child
           margin-right:0
         &.on
           bg-image('star48_on')
         &.half
           bg-image('star48_half')
         &.off
           bg-image('star48_off')
     &.star-36
       .star-item
         width:15px
         height:15px
         margin-right:6px
         background-size:15px 15px
         &:last-child
           margin-right:0
         &.on
           bg-image('star36_on')
         &.half
           bg-image('star36_half')
         &.off
           bg-image('star36_off')
     &.star-24
       .star-item
         width:10px
         height:10px
         margin-right:3px
         background-size:10px 10px
         &:last-child
           margin-right:0
         &.on
           bg-image('star24_on')
         &.half
           bg-image('star24_half')
         &.off
           bg-image('star24_off')  
 </style>

其中:使用了size为48,36,24,所以我们需要图片3种类型的图片,并且要使用适应不同分辨率,要有@2x.png,@3x.png图片

vue.js 实现评价五角星组件的实例代码

对了,bg-image方法是在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")

组件的使用就很简单了

<star :size="48" :score="3.5"></star>

vue.js 实现评价五角星组件的实例代码

总结

以上所述是小编给大家介绍的vue.js 实现评价五角星组件的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript与CSS复习(二)
Jun 29 Javascript
心扬JS分页函数代码
Sep 10 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
Vue.js实现数据响应的方法
Aug 13 #Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 #jQuery
Bootstrap Table实现定时刷新数据的方法
Aug 13 #Javascript
angular2实现统一的http请求头方法
Aug 13 #Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 #Javascript
vue后台管理之动态加载路由的方法
Aug 13 #Javascript
jQuery中$原理实例分析
Aug 13 #jQuery
You might like
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
django query模块
2019/04/20 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
民政局未婚证明
2015/06/15 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
辞职申请书范本
2019/05/20 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫