vue-star评星组件开发实例
网络编程 2021-07-04 17:33www.168986.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家分享一篇vue-star评星组件开发实例,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
star文件夹下建立Star.vue,及相关的图片信息。便于组件的就近维护
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 } }, puted:{ 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 "../../mon/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{ ponents:{ 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评星组件开发实例就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
上一篇:vue 实现类似淘宝星级评分的示例
下一篇:浅谈Angular 的变化检测的方法
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程