diff --git a/components/mentions/index.jsx b/components/mentions/index.jsx index af8cd4aff..bfc4828e9 100644 --- a/components/mentions/index.jsx +++ b/components/mentions/index.jsx @@ -1,4 +1,4 @@ -import { inject, nextTick } from 'vue'; +import { inject } from 'vue'; import classNames from 'classnames'; import omit from 'omit.js'; import PropTypes from '../_util/vue-types'; @@ -7,7 +7,7 @@ import { mentionsProps } from '../vc-mentions/src/mentionsProps'; import Spin from '../spin'; import BaseMixin from '../_util/BaseMixin'; import { ConfigConsumerProps } from '../config-provider'; -import { getOptionProps, getComponent, filterEmpty } from '../_util/props-util'; +import { getOptionProps, getComponent, filterEmpty, getSlot } from '../_util/props-util'; const { Option } = VcMentions; @@ -65,7 +65,7 @@ const Mentions = { }; }, mounted() { - nextTick(() => { + this.$nextTick(() => { if (this.autoFocus) { this.focus(); } @@ -104,7 +104,7 @@ const Mentions = { }, getOptions() { const { loading } = this.$props; - const children = filterEmpty(this.$slots.default?.() || []); + const children = filterEmpty(getSlot(this) || []); if (loading) { return ( @@ -138,10 +138,11 @@ const Mentions = { getPopupContainer, ...restProps } = getOptionProps(this); + const { class: className, ...otherAttrs } = this.$attrs; const prefixCls = getPrefixCls('mentions', customizePrefixCls); const otherProps = omit(restProps, ['loading']); - const mergedClassName = classNames({ + const mergedClassName = classNames(className, { [`${prefixCls}-disabled`]: disabled, [`${prefixCls}-focused`]: focused, }); @@ -156,7 +157,7 @@ const Mentions = { children: this.getOptions(), class: mergedClassName, rows: 1, - ...this.$attrs, + ...otherAttrs, onChange: this.onChange, onSelect: this.onSelect, onFocus: this.onFocus, diff --git a/components/vc-mentions/src/Mentions.jsx b/components/vc-mentions/src/Mentions.jsx index 0eba8b3e2..494bee270 100644 --- a/components/vc-mentions/src/Mentions.jsx +++ b/components/vc-mentions/src/Mentions.jsx @@ -1,4 +1,5 @@ -import { provide, nextTick } from 'vue'; +import { provide } from 'vue'; +import classNames from 'classnames'; import omit from 'omit.js'; import KeyCode from '../../_util/KeyCode'; import BaseMixin from '../../_util/BaseMixin'; @@ -42,7 +43,7 @@ const Mentions = { }, }, updated() { - nextTick(() => { + this.$nextTick(() => { const { measuring } = this.$data; // Sync measure div top with textarea for rc-trigger usage @@ -173,7 +174,7 @@ const Mentions = { this.setState({ isFocus: false }); this.stopMeasure(); this.$emit('blur', event); - }, 0); + }, 100); }, selectOption(option) { const { _value: value, measureLocation, measurePrefix } = this.$data; @@ -204,7 +205,7 @@ const Mentions = { const { filterOption, children = [] } = this.$props; const list = (Array.isArray(children) ? children : [children]) .map(item => { - return { ...getOptionProps(item), children: item.children.default?.() || item.children }; + return { ...getOptionProps(item), children: item.children.default?.() }; }) .filter(option => { /** Return all result if `filterOption` is false. */ @@ -254,6 +255,8 @@ const Mentions = { ...restProps } = getOptionProps(this); + const { class: className, style, ...otherAttrs } = this.$attrs; + const inputProps = omit(restProps, [ 'value', 'defaultValue', @@ -267,12 +270,12 @@ const Mentions = { const options = measuring ? this.getOptions() : []; return ( -