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 相关文章推荐
jQuery动态添加、删除元素的方法
Jan 09 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 Javascript
浅谈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读取IMAP邮件
2006/10/09 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
实用函数3
2007/11/08 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
php目录操作实例代码
2014/02/21 PHP
php遍历CSV类实例
2015/04/14 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
php与js的区别是什么
2013/08/05 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
javascript实现计算器功能
2020/03/30 Javascript
python根据文件大小打log日志
2014/10/09 Python
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
python操作链表的示例代码
2020/09/27 Python
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
工商学院毕业生自荐信
2013/11/12 职场文书
药品质量检测应届生求职信
2013/11/14 职场文书
基督教婚礼主持词
2014/03/14 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
刑事附带民事代理词
2015/05/25 职场文书
禁毒主题班会教案
2015/08/14 职场文书