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 parseInt 大改造
Sep 27 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
js加强的经典分页实例
Mar 15 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
javascript检测两个数组是否相似
May 19 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
node.js域名解析实现方法详解
Nov 05 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
PHP 高手之路(一)
2006/10/09 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
Python 除法小技巧
2008/09/06 Python
Django进阶之CSRF的解决
2018/08/01 Python
彻底理解Python中的yield关键字
2019/04/01 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python 装饰器重要在哪
2021/02/14 Python
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
家长给幼儿园的表扬信
2014/01/09 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
骨干教师考核方案
2014/05/09 职场文书
毕业生工作求职信
2014/06/30 职场文书
五年级学生评语大全
2014/12/26 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
公积金具结保证书
2015/05/11 职场文书
离婚案件被告代理词
2015/05/23 职场文书
纪委立案决定书
2015/06/24 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
详解Python类和对象内容
2021/06/22 Python