本篇内容主要讲解“vue-star中如何实现一个评星组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue-star中如何实现一个评星组件”吧!

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、虚拟空间、营销软件、网站建设、利川网站维护、网站推广。

star文件夹下建立Star.vue，及相关的图片信息。便于组件的就近维护

Star.vue：

@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')

Header.vue：

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中如何实现一个评星组件”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

本文标题：vue-star中如何实现一个评星组件
转载来于：http://scyanting.com/article/jihjdp.html