github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: rating character add params

pull/5629/head
tangjinzhou 2022-08-11 14:24:39 +08:00
parent e7fdb128e3
commit a26ac3e9f4
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/rate/Star.tsx
View File

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

4
components/rate/index.tsx
View File

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