vue-star评星组件开发实例


Posted in Javascript onMarch 01, 2018

star文件夹下建立Star.vue,及相关的图片信息。便于组件的就近维护

vue-star评星组件开发实例

Star.vue:

<template>
 <div class="star" :class="starSize">
 <span v-for="(itemClass,key) in itemClasses" :class="itemClass" class="star-item"></span>
 </div>
</template>
<script>
 const LENGTH = 5;
 const CLS_ON = 'on';
 const CLS_HALF = 'half';
 const CLS_OFF = 'off';
 export default{
 props:{
  size:{ //尺寸,24,36,48
  type: Number
  },
  score:{
  type: Number
  }
 },
 computed:{
  starSize(){
  return 'star-'+ this.size;
  },
  itemClasses(){
  let result = [];
  let score = Math.floor(this.score*2)/2; //将数值调整为整数及.5的形式,例:4.3 => 4;4.6 => 4.5
  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;
  }
 }
 }
</script>
<style lang="stylus" rel="stylesheet/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>

Header.vue:

<star :size="48" :score="3.5"></star>
<script>
import star from '../star/Star.vue'
export default{
 components:{
 star
 }
}
</script>

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')

以上这篇vue-star评星组件开发实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
js实现上传图片预览方法
Oct 25 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
浅谈Angular 的变化检测的方法
Mar 01 #Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 #Javascript
Node.js静态服务器的实现方法
Feb 28 #Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 #Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 #Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 #Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 #Javascript
You might like
一步一步学习PHP(3) php 函数
2010/02/15 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
js面向对象编程总结
2017/02/16 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
Python+Wordpress制作小说站
2017/04/14 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
解决python 找不到module的问题
2020/02/12 Python
python利用opencv实现颜色检测
2021/02/23 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
文明青少年标兵事迹材料
2014/01/28 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
求职自荐信怎么写
2015/03/04 职场文书
护理专业自我评价
2015/03/11 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers