feat: update tag
tangjinzhou
parent
c8160867be
commit
93cf802b51
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
dev: {
|
||||
componentName: 'tree', // dev components
|
||||
componentName: 'tag', // dev components
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,9 +3,27 @@ import Icon from '../icon';
|
|||
import getTransitionProps from '../_util/getTransitionProps';
|
||||
import omit from 'omit.js';
|
||||
import Wave from '../_util/wave';
|
||||
import { hasProp, getListeners } from '../_util/props-util';
|
||||
import { hasProp, getListeners, getOptionProps } from '../_util/props-util';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import warning from '../_util/warning';
|
||||
|
||||
const PresetColorTypes = [
|
||||
'pink',
|
||||
'red',
|
||||
'yellow',
|
||||
'orange',
|
||||
'cyan',
|
||||
'green',
|
||||
'blue',
|
||||
'purple',
|
||||
'geekblue',
|
||||
'magenta',
|
||||
'volcano',
|
||||
'gold',
|
||||
'lime',
|
||||
];
|
||||
const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
|
||||
|
||||
export default {
|
||||
name: 'ATag',
|
||||
|
|
@ -26,9 +44,15 @@ export default {
|
|||
},
|
||||
data() {
|
||||
let _visible = true;
|
||||
if (hasProp(this, 'visible')) {
|
||||
const props = getOptionProps(this);
|
||||
if ('visible' in props) {
|
||||
_visible = this.visible;
|
||||
}
|
||||
warning(
|
||||
!('afterClose' in props),
|
||||
'Tag',
|
||||
"'afterClose' will be deprecated, please use 'close' event, we will remove this in the next version.",
|
||||
);
|
||||
return {
|
||||
_visible,
|
||||
};
|
||||
|
|
@ -44,6 +68,11 @@ export default {
|
|||
setVisible(visible, e) {
|
||||
this.$emit('close', e);
|
||||
this.$emit('close.visible', false);
|
||||
const afterClose = this.afterClose;
|
||||
if (afterClose) {
|
||||
// next version remove.
|
||||
afterClose();
|
||||
}
|
||||
if (e.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -53,27 +82,20 @@ export default {
|
|||
},
|
||||
|
||||
handleIconClick(e) {
|
||||
e.stopPropagation();
|
||||
this.setVisible(false, e);
|
||||
},
|
||||
|
||||
animationEnd() {
|
||||
const afterClose = this.afterClose;
|
||||
if (afterClose) {
|
||||
afterClose();
|
||||
}
|
||||
},
|
||||
|
||||
isPresetColor(color) {
|
||||
isPresetColor() {
|
||||
const { color } = this.$props;
|
||||
if (!color) {
|
||||
return false;
|
||||
}
|
||||
return /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/.test(
|
||||
color,
|
||||
);
|
||||
return PresetColorRegex.test(color);
|
||||
},
|
||||
getTagStyle() {
|
||||
const { color } = this.$props;
|
||||
const isPresetColor = this.isPresetColor(color);
|
||||
const isPresetColor = this.isPresetColor();
|
||||
return {
|
||||
backgroundColor: color && !isPresetColor ? color : undefined,
|
||||
};
|
||||
|
|
@ -81,7 +103,7 @@ export default {
|
|||
|
||||
getTagClassName(prefixCls) {
|
||||
const { color } = this.$props;
|
||||
const isPresetColor = this.isPresetColor(color);
|
||||
const isPresetColor = this.isPresetColor();
|
||||
return {
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-${color}`]: isPresetColor,
|
||||
|
|
@ -101,7 +123,7 @@ export default {
|
|||
const prefixCls = getPrefixCls('tag', customizePrefixCls);
|
||||
const { _visible: visible } = this.$data;
|
||||
const tag = (
|
||||
<div
|
||||
<span
|
||||
v-show={visible}
|
||||
{...{ on: omit(getListeners(this), ['close']) }}
|
||||
class={this.getTagClassName(prefixCls)}
|
||||
|
|
@ -109,11 +131,10 @@ export default {
|
|||
>
|
||||
{this.$slots.default}
|
||||
{this.renderCloseIcon()}
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
const transitionProps = getTransitionProps(`${prefixCls}-zoom`, {
|
||||
appear: false,
|
||||
afterLeave: this.animationEnd,
|
||||
});
|
||||
return (
|
||||
<Wave>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,6 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-tag">Tag 1</div>
|
||||
<div class="ant-tag"><a href="https://github.com/vueComponent/ant-design">Link</a></div>
|
||||
<div class="ant-tag">Tag 2<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
|
||||
</svg></i></div>
|
||||
<div class="ant-tag">Prevent Default<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
|
||||
</svg></i></div>
|
||||
</div>
|
||||
`;
|
||||
exports[`renders ./components/tag/demo/basic.md correctly 1`] = `<div><span class="ant-tag">Tag 1</span> <span class="ant-tag"><a href="https://github.com/vueComponent/ant-design">Link</a></span> <span class="ant-tag">Tag 2<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span> <span class="ant-tag">Prevent Default<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></div>`;
|
||||
|
||||
exports[`renders ./components/tag/demo/checkable.md correctly 1`] = `
|
||||
<div>
|
||||
|
|
@ -24,60 +13,31 @@ exports[`renders ./components/tag/demo/checkable.md correctly 1`] = `
|
|||
exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
|
||||
<div>
|
||||
<h4 style="margin-bottom: 16px;">Presets:</h4>
|
||||
<div>
|
||||
<div class="ant-tag ant-tag-pink">pink</div>
|
||||
<div class="ant-tag ant-tag-red">red</div>
|
||||
<div class="ant-tag ant-tag-orange">orange</div>
|
||||
<div class="ant-tag ant-tag-green">green</div>
|
||||
<div class="ant-tag ant-tag-cyan">cyan</div>
|
||||
<div class="ant-tag ant-tag-blue">blue</div>
|
||||
<div class="ant-tag ant-tag-purple">purple</div>
|
||||
</div>
|
||||
<div><span class="ant-tag ant-tag-pink">pink</span> <span class="ant-tag ant-tag-red">red</span> <span class="ant-tag ant-tag-orange">orange</span> <span class="ant-tag ant-tag-green">green</span> <span class="ant-tag ant-tag-cyan">cyan</span> <span class="ant-tag ant-tag-blue">blue</span> <span class="ant-tag ant-tag-purple">purple</span></div>
|
||||
<h4>Custom:</h4>
|
||||
<div>
|
||||
<div class="ant-tag ant-tag-has-color" style="background-color: rgb(255, 85, 0);">#f50</div>
|
||||
<div class="ant-tag ant-tag-has-color" style="background-color: rgb(45, 183, 245);">#2db7f5</div>
|
||||
<div class="ant-tag ant-tag-has-color" style="background-color: rgb(135, 208, 104);">#87d068</div>
|
||||
<div class="ant-tag ant-tag-has-color" style="background-color: rgb(16, 142, 233);">#108ee9</div>
|
||||
</div>
|
||||
<div><span class="ant-tag ant-tag-has-color" style="background-color: rgb(255, 85, 0);">#f50</span> <span class="ant-tag ant-tag-has-color" style="background-color: rgb(45, 183, 245);">#2db7f5</span> <span class="ant-tag ant-tag-has-color" style="background-color: rgb(135, 208, 104);">#87d068</span> <span class="ant-tag ant-tag-has-color" style="background-color: rgb(16, 142, 233);">#108ee9</span></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/control.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-tag">
|
||||
Unremovable
|
||||
</div>
|
||||
<div class="ant-tag">
|
||||
Tag 2
|
||||
<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
|
||||
</svg></i></div>
|
||||
<div class="ant-tag">
|
||||
Tag 3Tag 3Tag 3Tag 3...
|
||||
<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
|
||||
</svg></i></div>
|
||||
<div class="ant-tag" style="border-style: dashed; background: rgb(255, 255, 255);"><i aria-label="icon: plus" class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path>
|
||||
<path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path>
|
||||
</svg></i> New Tag
|
||||
</div>
|
||||
</div>
|
||||
<div><span class="ant-tag">
|
||||
Unremovable
|
||||
</span><span class="ant-tag">
|
||||
Tag 2
|
||||
<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span><span class="ant-tag">
|
||||
Tag 3Tag 3Tag 3Tag 3...
|
||||
<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span> <span class="ant-tag" style="border-style: dashed; background: rgb(255, 255, 255);"><i aria-label="icon: plus" class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></i> New Tag
|
||||
</span></div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/controlled.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-tag">
|
||||
<div><span class="ant-tag">
|
||||
Movies
|
||||
<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
|
||||
</svg></i></div> <br> <button type="button" class="ant-btn ant-btn-sm"><span>Toggle</span></button>
|
||||
</div>
|
||||
<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span> <br> <button type="button" class="ant-btn ant-btn-sm"><span>Toggle</span></button></div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
|
||||
<div><strong>Categories:</strong>
|
||||
<div><span>Categories:</span>
|
||||
<div class="ant-tag ant-tag-checkable">
|
||||
Movies
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `<div class="ant-tag" style="display: none;"></div>`;
|
||||
exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `<span class="ant-tag" style="display: none;"></span>`;
|
||||
|
||||
exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `<div class="ant-tag" style=""></div>`;
|
||||
exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `<span class="ant-tag" style=""></span>`;
|
||||
|
||||
exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `<div class="ant-tag" style="display: none;"></div>`;
|
||||
exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `<span class="ant-tag" style="display: none;"></span>`;
|
||||
|
||||
exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `<div class="ant-tag"></div>`;
|
||||
exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `<span class="ant-tag"></span>`;
|
||||
|
||||
exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `<div class="ant-tag" style="display: none;"></div>`;
|
||||
exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `<span class="ant-tag" style="display: none;"></span>`;
|
||||
|
||||
exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `<div class="ant-tag" style=""></div>`;
|
||||
exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `<span class="ant-tag" style=""></span>`;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import { asyncExpect } from '@/tests/utils';
|
||||
import Tag from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
describe('Tag', () => {
|
||||
mountTest(Tag);
|
||||
mountTest(Tag.CheckableTag);
|
||||
it('should be closable', async () => {
|
||||
const onClose = jest.fn();
|
||||
const wrapper = mount(
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<cn>
|
||||
#### 基本用法
|
||||
基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `onClose` `afterClose` 两个事件。
|
||||
基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `close` 两个事件。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### basic Usage
|
||||
Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` `afterClose` events.
|
||||
Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `close` events.
|
||||
</us>
|
||||
|
||||
```tpl
|
||||
|
|
@ -15,7 +15,7 @@ Usage of basic Tag, and it could be closable by set `closable` property. Closabl
|
|||
<a-tag><a href="https://github.com/vueComponent/ant-design">Link</a></a-tag>
|
||||
<a-tag closable @close="log">Tag 2</a-tag>
|
||||
<a-tag closable @close="preventDefault">Prevent Default</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@
|
|||
|
||||
<us>
|
||||
#### Colorful Tag
|
||||
We preset a series of colorful tag style for different situation usage.
|
||||
And you can always set it to a hex color string for custom color.
|
||||
We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.
|
||||
</us>
|
||||
|
||||
```tpl
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
<cn>
|
||||
#### 动态添加和删除
|
||||
用数组生成一组标签，可以动态添加和删除，通过监听删除动画结束的事件 `afterClose` 实现。
|
||||
用数组生成一组标签，可以动态添加和删除。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Add & Remove Dynamically
|
||||
Generating a set of Tags by array, you can add and remove dynamically.
|
||||
It's based on `afterClose` event, which will be triggered while the close animation end.
|
||||
</us>
|
||||
|
||||
```tpl
|
||||
|
|
@ -14,11 +13,11 @@ It's based on `afterClose` event, which will be triggered while the close animat
|
|||
<div>
|
||||
<template v-for="(tag, index) in tags">
|
||||
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
|
||||
<a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
|
||||
<a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
|
||||
{{`${tag.slice(0, 20)}...`}}
|
||||
</a-tag>
|
||||
</a-tooltip>
|
||||
<a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
|
||||
<a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
|
||||
{{tag}}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ By using the `visible` prop, you can control the close state of Tag.
|
|||
Movies
|
||||
</a-tag>
|
||||
<br />
|
||||
<a-button size="small" @click="()=>{this.visible = !this.visible}">
|
||||
<a-button size="small" @click="visible = !visible">
|
||||
Toggle
|
||||
</a-button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ Select your favourite topics.
|
|||
```tpl
|
||||
<template>
|
||||
<div>
|
||||
<strong :style="{ marginRight: 8 }">Categories:</strong>
|
||||
<span :style="{ marginRight: 8 }">Categories:</span>
|
||||
<template v-for=" tag in tags">
|
||||
<a-checkable-tag
|
||||
:key="tag"
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
|
||||
### Tag
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------------- | --------------------------------------------------- | ---------- | ------- |
|
||||
| afterClose | Callback executed when close animation is completed | () => void | - |
|
||||
| closable | Whether the Tag can be closed | boolean | `false` |
|
||||
| color | Color of the Tag | string | - |
|
||||
| visible(v-model) | Whether the Tag is closed or not | boolean | `true` |
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| afterClose | Callback executed when close animation is completed, please use `close` event, we will remove this in the next version | () => void | - | |
|
||||
| closable | Whether the Tag can be closed | boolean | `false` |
|
||||
| color | Color of the Tag | string | - |
|
||||
| visible(v-model) | Whether the Tag is closed or not | boolean | `true` |
|
||||
|
||||
### Tag Events
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,13 @@
|
|||
|
||||
### Tag
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------- | ---------- | ------ |
|
||||
| afterClose | 关闭动画完成后的回调 | () => void | - |
|
||||
| closable | 标签是否可以关闭 | boolean | false |
|
||||
| color | 标签色 | string | - |
|
||||
| visible(v-model) | 是否显示标签 | boolean | `true` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| afterClose | 关闭动画完成后的回调，请使用 `close` 事件, 我们将在下个版本删除此项 | () => void | - |
|
||||
| afterClose | 关闭动画完成后的回调 | () => void | - |
|
||||
| closable | 标签是否可以关闭 | boolean | false |
|
||||
| color | 标签色 | string | - |
|
||||
| visible(v-model) | 是否显示标签 | boolean | `true` |
|
||||
|
||||
### 事件
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue