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');