chenhaodong / mew-iview

Commit 1ead5bb6c4c546d9b6374500e7cc3dd0c6ba4192

Authored by Aresn
Committed by GitHub
2 parents cc27c42a 552408d5

Merge pull request #3853 from wqzwh/2.0 

feature: rate组件增加character自定义字符配置项
Showing 3 changed files with 65 additions and 3 deletions   Show diff stats
Inline Side-by-side
examples/routers/rate.vue
  Show/Hide comments   View file @1ead5bb
@@ -4,6 +4,11 @@ @@ -4,6 +4,11 @@
4 <Rate allow-half v-model="valueHalf"></Rate> 4 <Rate allow-half v-model="valueHalf"></Rate>
5 <Rate clearable v-model="valueClear"></Rate> 5 <Rate clearable v-model="valueClear"></Rate>
6 <Rate clearable allow-half v-model="valueClearHalf"></Rate> 6 <Rate clearable allow-half v-model="valueClearHalf"></Rate>
  7 + <Rate
  8 + allow-half
  9 + show-text
  10 + v-model="characterValue"
  11 + character="好"/>
7 <!--<Rate show-text v-model="valueText"></Rate>--> 12 <!--<Rate show-text v-model="valueText"></Rate>-->
8 <!--<Rate show-text allow-half v-model="valueCustomText">--> 13 <!--<Rate show-text allow-half v-model="valueCustomText">-->
9 <!--<span style="color: #f5a623">{{ valueCustomText }}</span>--> 14 <!--<span style="color: #f5a623">{{ valueCustomText }}</span>-->
@@ -22,6 +27,7 @@ @@ -22,6 +27,7 @@
22 valueDisabled: 2.4, 27 valueDisabled: 2.4,
23 valueClear: 1, 28 valueClear: 1,
24 valueClearHalf: 1.5, 29 valueClearHalf: 1.5,
  30 + characterValue: 2.5
25 } 31 }
26 } 32 }
27 } 33 }
src/components/rate/rate.vue
  Show/Hide comments   View file @1ead5bb
@@ -5,8 +5,15 @@ @@ -5,8 +5,15 @@
5 v-for="item in count" 5 v-for="item in count"
6 :class="starCls(item)" 6 :class="starCls(item)"
7 @mousemove="handleMousemove(item, $event)" 7 @mousemove="handleMousemove(item, $event)"
  8 + :key="item"
8 @click="handleClick(item)"> 9 @click="handleClick(item)">
9 - <span :class="[prefixCls + '-star-content']" type="half"></span> 10 + <div :class="starCls(item)" v-if="!character">
  11 + <span :class="[prefixCls + '-star-content']" type="half"></span>
  12 + </div>
  13 + <div :class="starCls(item)" v-else>
  14 + <span :class="[prefixCls + '-star-first']" type="half">{{character}}</span>
  15 + <span :class="[prefixCls + '-star-second']">{{character}}</span>
  16 + </div>
10 </div> 17 </div>
11 <div :class="[prefixCls + '-text']" v-if="showText" v-show="currentValue > 0"> 18 <div :class="[prefixCls + '-text']" v-if="showText" v-show="currentValue > 0">
12 <slot><span>{{ currentValue }}</span> <span v-if="currentValue <= 1">{{ t('i.rate.star') }}</span><span v-else>{{ t('i.rate.stars') }}</span></slot> 19 <slot><span>{{ currentValue }}</span> <span v-if="currentValue <= 1">{{ t('i.rate.star') }}</span><span v-else>{{ t('i.rate.stars') }}</span></slot>
@@ -49,6 +56,10 @@ @@ -49,6 +56,10 @@
49 clearable: { 56 clearable: {
50 type: Boolean, 57 type: Boolean,
51 default: false 58 default: false
  59 + },
  60 + character: {
  61 + type: String,
  62 + default: ''
52 } 63 }
53 }, 64 },
54 data () { 65 data () {
@@ -95,8 +106,9 @@ @@ -95,8 +106,9 @@
95 } 106 }
96 107
97 return [ 108 return [
98 - `${prefixCls}-star`,  
99 - { 109 + {
  110 + [`${prefixCls}-star`]: !this.character,
  111 + [`${prefixCls}-star-chart`]: this.character,
100 [`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf), 112 [`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf),
101 [`${prefixCls}-star-half`]: isLast && this.isHalf, 113 [`${prefixCls}-star-half`]: isLast && this.isHalf,
102 [`${prefixCls}-star-zero`]: !full 114 [`${prefixCls}-star-zero`]: !full
src/styles/components/rate.less
  Show/Hide comments   View file @1ead5bb
@@ -19,6 +19,50 @@ @@ -19,6 +19,50 @@
19 } 19 }
20 } 20 }
21 21
  22 + &-star-full, &-star-zero {
  23 + position: relative;
  24 + }
  25 + &-star-first {
  26 + position: absolute;
  27 + left: 0;
  28 + top: 0;
  29 + width: 50%;
  30 + height: 100%;
  31 + overflow: hidden;
  32 + opacity: 0;
  33 + }
  34 +
  35 + &-star-first, &-star-second {
  36 + user-select: none;
  37 + transition: all .3s ease;
  38 + color: #e9e9e9;
  39 + }
  40 +
  41 + &-star-chart {
  42 + display: inline-block;
  43 + margin: 0;
  44 + padding: 0;
  45 + margin-right: 8px;
  46 + position: relative;
  47 + font-family: 'Ionicons';
  48 + transition: all 0.3s ease;
  49 +
  50 + &:hover {
  51 + transform: scale(1.1);
  52 +
  53 + &-star-first, &-star-second {
  54 + color: @rate-star-color;
  55 + }
  56 + }
  57 + }
  58 + &-star-chart&-star-full &-star-first, &-star-chart&-star-full &-star-second{
  59 + color: @rate-star-color;
  60 + }
  61 + &-star-chart&-star-half &-star-first{
  62 + opacity: 1;
  63 + color: @rate-star-color;
  64 + }
  65 +
22 &-star { 66 &-star {
23 display: inline-block; 67 display: inline-block;
24 margin: 0; 68 margin: 0;