Browse Source

feat: rating character add params

pull/5629/head
tangjinzhou 2 years ago
parent
commit
a26ac3e9f4
  1. 20
      components/rate/Star.tsx
  2. 4
      components/rate/index.tsx

20
components/rate/Star.tsx

@ -1,6 +1,5 @@
import type { ExtractPropTypes } from 'vue';
import { defineComponent, computed } from 'vue';
import { getPropsSlot } from '../_util/props-util';
import PropTypes from '../_util/vue-types';
export const starProps = {
@ -24,7 +23,7 @@ export default defineComponent({
inheritAttrs: false,
props: starProps,
emits: ['hover', 'click'],
setup(props, { slots, emit }) {
setup(props, { emit }) {
const onHover = (e: MouseEvent) => {
const { index } = props;
emit('hover', e, index);
@ -61,8 +60,17 @@ export default defineComponent({
});
return () => {
const { disabled, prefixCls, characterRender, index, count, value } = props;
const character = getPropsSlot(slots, props, 'character');
const { disabled, prefixCls, characterRender, character, index, count, value } = props;
const characterNode =
typeof character === 'function'
? character({
disabled,
prefixCls,
index,
count,
value,
})
: character;
let star = (
<li class={cls.value}>
<div
@ -75,8 +83,8 @@ export default defineComponent({
aria-setsize={count}
tabindex={disabled ? -1 : 0}
>
<div class={`${prefixCls}-first`}>{character}</div>
<div class={`${prefixCls}-second`}>{character}</div>
<div class={`${prefixCls}-first`}>{characterNode}</div>
<div class={`${prefixCls}-second`}>{characterNode}</div>
</div>
</li>
);

4
components/rate/index.tsx

@ -1,6 +1,6 @@
import type { CSSProperties, ExtractPropTypes, PropType, VNode } from 'vue';
import { watch, defineComponent, ref, reactive, onMounted } from 'vue';
import { initDefaultProps, getPropsSlot, findDOMNode } from '../_util/props-util';
import { initDefaultProps, findDOMNode } from '../_util/props-util';
import { withInstall } from '../_util/type';
import { getOffsetLeft } from './util';
import classNames from '../_util/classNames';
@ -196,13 +196,13 @@ const Rate = defineComponent({
if (!tooltips) return node;
return <Tooltip title={tooltips[index]}>{node}</Tooltip>;
};
const character = getPropsSlot(slots, props, 'character') || <StarFilled />;
return () => {
const { count, allowHalf, disabled, tabindex, id = formItemContext.id.value } = props;
const { class: className, style } = attrs;
const stars = [];
const disabledClass = disabled ? `${prefixCls.value}-disabled` : '';
const character = props.character || slots.character || (() => <StarFilled />);
for (let index = 0; index < count; index++) {
stars.push(
<Star

Loading…
Cancel
Save