feat: update vc-rate to 2.5.0

components/vc-rate/demo/characterRender.jsx

@@ -0,0 +1,28 @@
+import Rate from '../index';
+import VcTooltip from '../../vc-tooltip/index';
+import '../../vc-tooltip/assets/bootstrap_white.less';
+import '../assets/index.less';
+
+export default {
+  data() {
+    return {};
+  },
+  render() {
+    return (
+      <div style="margin: 100px">
+        <Rate
+          defaultValue={3}
+          characterRender={(node, props) => {
+            // console.dir(node);
+            // console.dir(props.index);
+            return (
+              <VcTooltip placement="top" overlay={props.index}>
+                {node}
+              </VcTooltip>
+            );
+          }}
+        />
+      </div>
+    );
+  },
+};

components/vc-rate/index.js

@@ -1,3 +1,3 @@
-// based on rc-rate 2.4.3
+// based on rc-rate 2.5.0
 import Rate from './src/';
 export default Rate;

components/vc-rate/src/Rate.jsx

@@ -20,6 +20,7 @@ const rateProps = {
   allowClear: PropTypes.bool,
   prefixCls: PropTypes.string,
   character: PropTypes.any,
+  characterRender: PropTypes.func,
   tabIndex: PropTypes.number,
   autoFocus: PropTypes.bool,
 };
@@ -174,6 +175,7 @@ export default {
     const stars = [];
     const disabledClass = disabled ? `${prefixCls}-disabled` : '';
     const character = getComponentFromProp(this, 'character');
+    const characterRender = this.characterRender || this.$scopedSlots.characterRender;
     for (let index = 0; index < count; index++) {
       const starProps = {
         props: {
@@ -184,6 +186,7 @@ export default {
           allowHalf,
           value: hoverValue === undefined ? sValue : hoverValue,
           character,
+          characterRender,
           focused,
         },
         on: {

components/vc-rate/src/Star.jsx

@@ -13,6 +13,7 @@ export default {
     allowHalf: PropTypes.bool,
     disabled: PropTypes.bool,
     character: PropTypes.any,
+    characterRender: PropTypes.func,
     focused: PropTypes.bool,
     count: PropTypes.number,
   },
@@ -52,10 +53,10 @@ export default {
     },
   },
   render() {
-    const { onHover, onClick, onKeyDown, disabled, prefixCls, index, count, value } = this;
+    const { onHover, onClick, onKeyDown, disabled, prefixCls, characterRender, index, count, value } = this;
 
     const character = getComponentFromProp(this, 'character');
-    return (
+    let star = (
       <li
         class={this.getClassName()}
         onClick={disabled ? noop : onClick}
@@ -71,5 +72,9 @@ export default {
         <div class={`${prefixCls}-second`}>{character}</div>
       </li>
     );
+    if (characterRender) {
+      star = characterRender(star, this.$props);
+    }
+    return star;
   },
 };