vue.js 实现评价五角星组件的实例代码
2018-08-13 11:34
1236 查看
饿了么的五角星有三种形状,分别是实星,半星,空星
并且组件要能实现,这个五角星不同大小,评分也不一样,比如满分五颗星,四颗半星,四颗星等等....
所以需要像组件传入一个大小: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图片
对了,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开发实现全局调用的MessageBox组件实例代码
- vue.js实现仿原生ios时间选择组件实例代码
- Vuejs 实现简易 todoList 功能 与 组件实例代码
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- Vue.js上下滚动加载组件的实例代码
- Vue组件实例间的直接访问实现代码
- vue.js模仿京东省市区三级联动的选择组件实例代码
- vue.js树形组件之删除双击增加分支实例代码
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
- Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
- vue.js实现条件渲染的实例代码
- Vue.js实现输入框绑定的实例代码
- vue.js通过路由实现经典的三栏布局实例代码
- 使用JS组件实现带ToolTip验证框的实例代码
- Vue.js 递归组件实现树形菜单(实例分享)
- vue中子组件向父组件传递数据的实例代码(实现加减功能)
- Vue.js移动端左滑删除组件的实现代码
- Vue.js实现实例搜索应用功能详细代码
- 基于vue实现swipe轮播组件实例代码