diff --git a/components/tag/CheckableTag.jsx b/components/tag/CheckableTag.jsx index 8e9b1a9cb..b0163acc4 100644 --- a/components/tag/CheckableTag.jsx +++ b/components/tag/CheckableTag.jsx @@ -1,17 +1,17 @@ +import { inject } from 'vue'; import PropTypes from '../_util/vue-types'; import { ConfigConsumerProps } from '../config-provider'; export default { name: 'ACheckableTag', - model: { - prop: 'checked', - }, props: { prefixCls: PropTypes.string, - checked: Boolean, + checked: PropTypes.bool, }, - inject: { - configProvider: { default: () => ConfigConsumerProps }, + setup() { + return { + configProvider: inject('configProvider', ConfigConsumerProps), + }; }, computed: { classes() { @@ -28,7 +28,7 @@ export default { methods: { handleClick() { const { checked } = this; - this.$emit('input', !checked); + this.$emit('update:checked', !checked); this.$emit('change', !checked); }, }, @@ -36,7 +36,7 @@ export default { const { classes, handleClick, $slots } = this; return (
- {$slots.default} + {$slots.default && $slots.default()}
); }, diff --git a/components/tag/Tag.jsx b/components/tag/Tag.jsx index 7fbe56180..0971e8a77 100644 --- a/components/tag/Tag.jsx +++ b/components/tag/Tag.jsx @@ -1,10 +1,9 @@ -import { Transition } from 'vue'; +import { Transition, inject } from 'vue'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import PropTypes from '../_util/vue-types'; import getTransitionProps from '../_util/getTransitionProps'; -import omit from 'omit.js'; import Wave from '../_util/wave'; -import { hasProp, getListeners, getOptionProps } from '../_util/props-util'; +import { hasProp, getOptionProps } from '../_util/props-util'; import BaseMixin from '../_util/BaseMixin'; import { ConfigConsumerProps } from '../config-provider'; import warning from '../_util/warning'; @@ -29,10 +28,6 @@ const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)? export default { name: 'ATag', mixins: [BaseMixin], - model: { - prop: 'visible', - event: 'close.visible', - }, props: { prefixCls: PropTypes.string, color: PropTypes.string, @@ -40,8 +35,10 @@ export default { visible: PropTypes.bool, afterClose: PropTypes.func, }, - inject: { - configProvider: { default: () => ConfigConsumerProps }, + setup() { + return { + configProvider: inject('configProvider', ConfigConsumerProps), + }; }, data() { let _visible = true; @@ -68,7 +65,7 @@ export default { methods: { setVisible(visible, e) { this.$emit('close', e); - this.$emit('close.visible', false); + this.$emit('update:visible', false); const afterClose = this.afterClose; if (afterClose) { // next version remove. @@ -120,16 +117,11 @@ export default { render() { const { prefixCls: customizePrefixCls } = this.$props; - const getPrefixCls = this.configProvider().getPrefixCls; + const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('tag', customizePrefixCls); const { _visible: visible } = this.$data; const tag = ( - + {this.$slots.default()} {this.renderCloseIcon()} diff --git a/components/tag/index.js b/components/tag/index.js index ef4aeda22..c91755a02 100644 --- a/components/tag/index.js +++ b/components/tag/index.js @@ -1,14 +1,12 @@ import Tag from './Tag'; import CheckableTag from './CheckableTag'; -import Base from '../base'; Tag.CheckableTag = CheckableTag; /* istanbul ignore next */ -Tag.install = function(Vue) { - Vue.use(Base); - Vue.component(Tag.name, Tag); - Vue.component(Tag.CheckableTag.name, Tag.CheckableTag); +Tag.install = function(app) { + app.component(Tag.name, Tag); + app.component(Tag.CheckableTag.name, Tag.CheckableTag); }; export default Tag; diff --git a/examples/index.js b/examples/index.js index 8df19afea..e475fc1e8 100644 --- a/examples/index.js +++ b/examples/index.js @@ -21,6 +21,7 @@ import Col from 'ant-design-vue/col'; import Row from 'ant-design-vue/row'; import Tooltip from 'ant-design-vue/tooltip'; import Descriptions from 'ant-design-vue/descriptions'; +import Tag from 'ant-design-vue/tag'; import 'ant-design-vue/style.js'; createApp(App) @@ -44,4 +45,5 @@ createApp(App) .use(Row) .use(Tooltip) .use(Descriptions) + .use(Tag) .mount('#app');