vue2.0+stylus实现星级评定组件，computed计算属性实现全星半星，动态改变星级，多种星星规格

vue2.0+stylus实现星级评定组件，computed计算属性实现全星半星，多种星星规格

使用方法如下：（size为星星的大小，score为评分，比如传4.5，则4.5颗星亮；传4.1则四颗星亮）

          <div class="score-wrapper"><span class="title">服务态度</span><star :size="36" :score="3.5"></star><span class="score">3.5</span></div><div class="score-wrapper"><span class="title">商品评分</span><star :size="36" :score="4.1"></star><span class="score">4.1</span></div>

效果：

以下为star.vue实现代码

template：

<template><div class="star" :class="starType"><span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span></div>
</template>

JavaScript：

<script type="text/ecmascript-6">// 评分有几个等级const LENGTH = 5;// 全星有几个const CLS_ON = 'on';// 半星有几个const CLS_HALF = 'half';// 不亮的星星有几个const CLS_OFF = 'off';export default {props: {// 图片尺寸size: {type: Number},// 评分score: {type: Number}},computed: {// 显示对应尺寸的星星图片, 比如size是48,则添加star-48类,显示对应样式starType() {return 'star-' + this.size;},// 包含itemClasses() {let result = [];// 分数取整let score = Math.floor(this.score * 2) / 2;// 判断是否有半星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：（本人使用的是stylus，功能类似sass、less等）

<style lang="stylus" rel="stylus/stylesheet">@import "../../common/stylus/mixin.styl".starfont-size 0.star-itemdisplay inline-block&.star-48.star-itemwidth 20pxheight 20pxmargin-right 22px&:last-childmargin-right 0&.onbg-image('star48_on',20px,20px,no-repeat)&.halfbg-image('star48_half',20px,20px,no-repeat)&.offbg-image('star48_off',20px,20px,no-repeat)&.star-36.star-itemwidth 15pxheight 15pxmargin-right 6px&:last-childmargin-right 0&.onbg-image('star48_on',15px,15px,no-repeat)&.halfbg-image('star48_half',15px,15px,no-repeat)&.offbg-image('star48_off',15px,15px,no-repeat)&.star-24.star-itemwidth 10pxheight 10pxmargin-right 3px&:last-childmargin-right 0&.onbg-image('star48_on',10px,10px,no-repeat)&.halfbg-image('star48_half',10px,10px,no-repeat)&.offbg-image('star48_off',10px,10px,no-repeat)
</style>

其中 bg-image函数写在mixin.stylus中，通过以下方法引入使用

@import "../../common/stylus/mixin.styl"

bg-image函数的代码为：（实现背景图片的选择，图片大小的设置、是否重复等功能）

bg-image($url,$width,$height,$repeat)@media (-webkit-max-device-pixel-ratio: 2),(max-device-pixel-ratio: 2)background-image url($url + "@2x.png")background-size $width $heightbackground-repeat $repeat@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)background url($url + "@3x.png")background-size $width $heightbackground-repeat $repeat

使用到的图片，以下为size为36px的@2x图片。

star36_on@2x.png

star36_half@2x.png

star36_off@2x.png

vue2.0+stylus实现星级评定组件，computed计算属性实现全星半星，动态改变星级，多种星星规格相关推荐

Vue2.0 的 Material Design UI 组件库 Muse-UI
Muse-UI 基于 Vue2.0 的 Material Design UI 组件库安装 npm install muse-ui --save 使用 import Vue from 'vue' im ...
深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长拿官网简单的例子来看一下: <div id="example"><p> ...
Vue中computed(计算属性)、methods、watch的区别
初学vue,阅读api后,发现Vue提供了多种逻辑处理的方法,单纯的方法methods,computed(计算属性)以及watch等,充分理解这三者的区别,才能写出更加健壮的Vue代码. 1.meth ...
Vue中的computed计算属性
文章目录 computed与watch的异同不同点相同点示例源码结果分析 computed与watch的异同不同点触发条件不同 computed计算属性会依赖于使用它的data属性 ...
Vue入门【三】-- 详解computed计算属性
目录 computed: ♡ ‧₊˚ 基本使用 ‧₊˚ ♡ ♡ ‧₊˚语法‧₊˚ ♡ ♡ ‧₊˚效果‧₊˚ ♡ ♡ ‧₊˚ 面试问点 ‧₊˚ ♡ computed与methods的区别: comput ...
Vue3 - computed 计算属性（详细教程）
简介相信大家在 Vue2 中已经领略到了其功能,不再过多赘述了. 计算属性处理一些复杂的运算非常合适,对于任何包含响应式数据的复杂逻辑的表达式,都建议使用计算属性来完成,而不是臃肿的在模板中直接书写 ...
第十六篇 Computed 计算属性的应用
本篇内容主要讲计算属性的相关知识,如果从之前的有一直关注这一系列的文章内容的话,就会发现之前的一些案例可以用其他方法方式去做,比如第八篇.第九篇所提及到的模糊查询以及第十四篇实现购物车页面的一 ...
Vue中computed计算属性和data数据获取的问题
获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"><h ...
computed计算属性
今天主要介绍我所理解的computed计算属性 1.computed计算属性依赖于他的属性变化而变化也就是依赖于data中的属性只要依赖的data发生变化就会触发调用一次计算属性 2.compu ...

vue2.0+stylus实现星级评定组件，computed计算属性实现全星半星，动态改变星级，多种星星规格

vue2.0+stylus实现星级评定组件，computed计算属性实现全星半星，动态改变星级，多种星星规格相关推荐

最新文章

热门文章