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 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
JQuery学习总结【二】
Dec 01 Javascript
layui文件上传实现代码
May 20 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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 中的一些经验积累
2006/10/09 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
jquery tools之tooltip
2009/07/25 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
Javascript实现单例模式
2016/01/24 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
Python中int()函数的用法浅析
2017/10/17 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
python实现汽车管理系统
2018/11/30 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
资料员岗位职责
2013/11/17 职场文书
毕业实习感受与体会
2015/05/26 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书