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 相关文章推荐
解密效果
Jun 23 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
vue3.0生命周期的示例代码
Sep 24 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
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
Python实现的二维码生成小软件
2014/07/11 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
python如何修改装饰器中参数
2018/03/20 Python
python使用turtle库绘制树
2018/06/25 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
python 图片去噪的方法示例
2019/07/09 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
Python如何在bool函数中取值
2020/09/21 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
优秀交警事迹材料
2014/01/26 职场文书
党建示范点实施方案
2014/03/12 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
2015年除四害工作总结
2015/07/23 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Mysql 用户权限管理实现
2021/05/25 MySQL
pytorch 实现在测试的时候启用dropout
2021/05/27 Python