时间:2021-05-26
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 } }, 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评星组件开发实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值)初始Star.vue{{score}}exportdefault{name
本文实例讲述了vue组件开发原理与实现方法。分享给大家供大家参考,具体如下:概要vue的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比
Vue动态创建组件实例并挂载到body方式一importVuefrom'vue'/***@paramComponent组件实例的选项对象*@paramprops
本文实例为大家分享了vue实现商城上货组件的具体代码,供大家参考,具体内容如下0、结果放前面点击查看效果带脚手架的源码加个Star后,fork下来。然后在控制台
组件在vue开发中是必不可少的一环,用好组件这把屠龙刀,就能解决不少问题。组件是什么官方的定义:组件是可复用的Vue实例,并且可带有一个名字。官方的定义已经非常