Merge pull request #3853 from wqzwh/2.0

feature: rate组件增加character自定义字符配置项

Merge pull request #3853 from wqzwh/2.0
feature: rate组件增加character自定义字符配置项
Aresn · GitHub
2 parents cc27c42a 552408d5
Showing 3 changed files with 65 additions and 3 deletions Show diff stats
examples/routers/rate.vue
src/components/rate/rate.vue
src/styles/components/rate.less
@@ -4,6 +4,11 @@
         <Rate allow-half v-model="valueHalf"></Rate>
         <Rate clearable v-model="valueClear"></Rate>
         <Rate clearable allow-half  v-model="valueClearHalf"></Rate>
+        <Rate 
+            allow-half 
+            show-text
+            v-model="characterValue"
+            character="好"/>
         <!--<Rate show-text v-model="valueText"></Rate>-->
         <!--<Rate show-text allow-half v-model="valueCustomText">-->
             <!--<span style="color: #f5a623">{{ valueCustomText }}</span>-->
@@ -22,6 +27,7 @@
                 valueDisabled: 2.4,
                 valueClear: 1,
                 valueClearHalf: 1.5,
+                characterValue: 2.5
             }
         }
     }
@@ -5,8 +5,15 @@
             v-for="item in count"
             :class="starCls(item)"
             @mousemove="handleMousemove(item, $event)"
+            :key="item"
             @click="handleClick(item)">
-            <span :class="[prefixCls + '-star-content']" type="half"></span>
+            <div :class="starCls(item)" v-if="!character">
+                <span :class="[prefixCls + '-star-content']" type="half"></span>
+            </div>
+            <div :class="starCls(item)" v-else>
+                <span :class="[prefixCls + '-star-first']" type="half">{{character}}</span>
+                <span :class="[prefixCls + '-star-second']">{{character}}</span>
+            </div>
         </div>
         <div :class="[prefixCls + '-text']" v-if="showText" v-show="currentValue > 0">
             <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 @@
             clearable: {
                 type: Boolean,
                 default: false
+            },
+            character: {
+                type: String,
+                default: ''
             }
         },
         data () {
@@ -95,8 +106,9 @@
                 }
  
                 return [
-                    `${prefixCls}-star`,
-                    {
+                    {   
+                        [`${prefixCls}-star`]: !this.character,
+                        [`${prefixCls}-star-chart`]: this.character,
                         [`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf),
                         [`${prefixCls}-star-half`]: isLast && this.isHalf,
                         [`${prefixCls}-star-zero`]: !full
@@ -19,6 +19,50 @@
         }
     }
  
+    &-star-full, &-star-zero {
+        position: relative;
+    }
+    &-star-first {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 50%;
+        height: 100%;
+        overflow: hidden;
+        opacity: 0;
+    }
+
+    &-star-first, &-star-second {
+        user-select: none;
+        transition: all .3s ease;
+        color: #e9e9e9;
+    }
+
+    &-star-chart {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        margin-right: 8px;
+        position: relative;
+        font-family: 'Ionicons';
+        transition: all 0.3s ease;
+
+        &:hover {
+            transform: scale(1.1);
+
+            &-star-first, &-star-second {
+                color: @rate-star-color;
+            }
+        }
+    }
+    &-star-chart&-star-full &-star-first, &-star-chart&-star-full &-star-second{
+        color: @rate-star-color;
+    }
+    &-star-chart&-star-half &-star-first{
+        opacity: 1;
+        color: @rate-star-color;
+    }
+    
     &-star {
         display: inline-block;
         margin: 0;