Vue-star에서 별 등급 구성 요소 개발을 구현하는 방법

이제 좋은 참고 가치를 지닌 vue-star 별표 구성 요소의 개발 사례를 공유하겠습니다. 모든 분들께 도움이 되기를 바랍니다.

별 폴더 아래에 Star.vue 및 관련 사진 정보를 생성합니다. 인근 부품 유지 관리에 편리

Star.vue：

<template>
 <p class="star" :class="starSize">
 <span v-for="(itemClass,key) in itemClasses" :class="itemClass" class="star-item"></span>
 </p>
</template>
<script>
 const LENGTH = 5;
 const CLS_ON = &#39;on&#39;;
 const CLS_HALF = &#39;half&#39;;
 const CLS_OFF = &#39;off&#39;;
 export default{
 props:{
  size:{ //尺寸，24,36,48
  type: Number
  },
  score:{
  type: Number
  }
 },
 computed:{
  starSize(){
  return &#39;star-&#39;+ 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(&#39;star48_on&#39;)
  &.half
  bg-image(&#39;star48_half&#39;)
  &.off
  bg-image(&#39;star48_off&#39;)
 &.star-36
 .star-item
  width: 15px
  height: 15px
  margin-right: 6px
  background-size: 15px 15px
  &.last-child
  margin-right: 0
  &.on
  bg-image(&#39;star36_on&#39;)
  &.half
  bg-image(&#39;star36_half&#39;)
  &.off
  bg-image(&#39;star36_off&#39;)
 &.star-24
 .star-item
  width: 10px
  height: 10px
  margin-right: 3px
  background-size: 10px 10px
  &.last-child
  margin-right: 0
  &.on
  bg-image(&#39;star24_on&#39;)
  &.half
  bg-image(&#39;star24_half&#39;)
  &.off
  bg-image(&#39;star24_off&#39;)
</style>

Header.vue：

<star :size="48" :score="3.5"></star>
<script>
import star from &#39;../star/Star.vue&#39;
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는 페이스북 트위터를 사용하여 예제를 공유합니다

200줄의 코드로 블록체인 구현 블록체인 예제에 대한 자세한 설명

react는 create-react-app을 기반으로 프로젝트를 만듭니다

위 내용은 Vue-star에서 별 등급 구성 요소 개발을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!