refactor: tag
tangjinzhou
parent
98eb6b2a04
commit
ac88e4949b
|
|
@ -686,7 +686,7 @@ exports[`RangePicker switch to corresponding month panel when click presetted ra
|
|||
<div class="ant-calendar-footer ant-calendar-range-bottom ant-calendar-footer-show-ok">
|
||||
<div class="ant-calendar-footer-btn">
|
||||
<div class="ant-calendar-footer-extra ant-calendar-range-quick-selector">
|
||||
<div data-show="true" class="ant-tag ant-tag-blue">My Birthday</div>
|
||||
<div class="ant-tag ant-tag-blue">My Birthday</div>
|
||||
</div><a role="button" class="ant-calendar-time-picker-btn ant-calendar-time-picker-btn-disabled">select time</a><a role="button" class="ant-calendar-ok-btn ant-calendar-ok-btn-disabled">Ok</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
|
|||
<!----><a href="javascript:;">John Brown</a></td>
|
||||
<td>32</td>
|
||||
<td>New York No. 1 Lake Park</td>
|
||||
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">nice</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">developer</div></span></td>
|
||||
<td><span><div class="ant-tag ant-tag-blue">nice</div><div class="ant-tag ant-tag-blue">developer</div></span></td>
|
||||
<td><span><a href="javascript:;">Invite 一 John Brown</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;" class="ant-dropdown-link">
|
||||
More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td>
|
||||
</tr>
|
||||
|
|
@ -95,7 +95,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
|
|||
<!----><a href="javascript:;">Jim Green</a></td>
|
||||
<td>42</td>
|
||||
<td>London No. 1 Lake Park</td>
|
||||
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
|
||||
<td><span><div class="ant-tag ant-tag-blue">loser</div></span></td>
|
||||
<td><span><a href="javascript:;">Invite 一 Jim Green</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;" class="ant-dropdown-link">
|
||||
More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td>
|
||||
</tr>
|
||||
|
|
@ -104,7 +104,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
|
|||
<!----><a href="javascript:;">Joe Black</a></td>
|
||||
<td>32</td>
|
||||
<td>Sidney No. 1 Lake Park</td>
|
||||
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">cool</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">teacher</div></span></td>
|
||||
<td><span><div class="ant-tag ant-tag-blue">cool</div><div class="ant-tag ant-tag-blue">teacher</div></span></td>
|
||||
<td><span><a href="javascript:;">Invite 一 Joe Black</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;" class="ant-dropdown-link">
|
||||
More actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></a></span></td>
|
||||
</tr>
|
||||
|
|
@ -2903,7 +2903,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
|
|||
<td class="">Brown</td>
|
||||
<td class="">32</td>
|
||||
<td class="">New York No. 1 Lake Park</td>
|
||||
<td class=""><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">nice</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">developer</div></span></td>
|
||||
<td class=""><span><div class="ant-tag ant-tag-blue">nice</div><div class="ant-tag ant-tag-blue">developer</div></span></td>
|
||||
<td class=""><span><a href="javascript:;">Action 一 John</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
|
||||
|
|
@ -2912,7 +2912,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
|
|||
<td class="">Green</td>
|
||||
<td class="">42</td>
|
||||
<td class="">London No. 1 Lake Park</td>
|
||||
<td class=""><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
|
||||
<td class=""><span><div class="ant-tag ant-tag-blue">loser</div></span></td>
|
||||
<td class=""><span><a href="javascript:;">Action 一 Jim</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
|
||||
</tr>
|
||||
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
|
||||
|
|
@ -2921,7 +2921,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
|
|||
<td class="">Black</td>
|
||||
<td class="">32</td>
|
||||
<td class="">Sidney No. 1 Lake Park</td>
|
||||
<td class=""><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">cool</div><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">teacher</div></span></td>
|
||||
<td class=""><span><div class="ant-tag ant-tag-blue">cool</div><div class="ant-tag ant-tag-blue">teacher</div></span></td>
|
||||
<td class=""><span><a href="javascript:;">Action 一 Joe</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export default {
|
|||
props: {
|
||||
prefixCls: PropTypes.string.def('ant-tag'),
|
||||
color: PropTypes.string,
|
||||
closable: PropTypes.bool,
|
||||
closable: PropTypes.bool.def(false),
|
||||
visible: PropTypes.bool,
|
||||
afterClose: PropTypes.func,
|
||||
},
|
||||
|
|
@ -21,22 +21,13 @@ export default {
|
|||
event: 'close.visible',
|
||||
},
|
||||
data () {
|
||||
const props = getOptionProps(this)
|
||||
let state = {}
|
||||
if ('visible' in props) {
|
||||
state = {
|
||||
_visible: props.visible,
|
||||
_closed: !props.visible,
|
||||
}
|
||||
let _visible = true
|
||||
if (hasProp(this, 'visible')) {
|
||||
_visible = this.visible
|
||||
}
|
||||
state = {
|
||||
_closing: false,
|
||||
_closed: false,
|
||||
_visible: true,
|
||||
...state,
|
||||
return {
|
||||
_visible,
|
||||
}
|
||||
this.pre_visible = state._visible
|
||||
return state
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
|
|
@ -45,61 +36,26 @@ export default {
|
|||
})
|
||||
},
|
||||
},
|
||||
updated () {
|
||||
this.$nextTick(() => {
|
||||
const preVisible = this.pre_visible
|
||||
this.pre_visible = this.$data._visible
|
||||
if (preVisible && !this.$data._visible) {
|
||||
this.close()
|
||||
} else if (!preVisible && this.$data._visible) {
|
||||
this.show()
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleIconClick (e) {
|
||||
setVisible (visible, e) {
|
||||
this.$emit('close', e)
|
||||
this.$emit('close.visible', false)
|
||||
if (e.defaultPrevented || hasProp(this, 'visible')) {
|
||||
if (e.defaultPrevented) {
|
||||
return
|
||||
}
|
||||
this.setState({ _visible: false })
|
||||
this.$forceUpdate()
|
||||
},
|
||||
close () {
|
||||
if (this.$data._closing || this.$data._closed) {
|
||||
return
|
||||
if (!hasProp(this, 'visible')) {
|
||||
this.setState({ _visible: visible })
|
||||
}
|
||||
const dom = this.$el
|
||||
dom.style.width = `${dom.getBoundingClientRect().width}px`
|
||||
// It's Magic Code, don't know why
|
||||
dom.style.width = `${dom.getBoundingClientRect().width}px`
|
||||
this.setState({
|
||||
_closing: true,
|
||||
})
|
||||
},
|
||||
|
||||
show () {
|
||||
this.setState({
|
||||
_closed: false,
|
||||
})
|
||||
handleIconClick (e) {
|
||||
this.setVisible(false, e)
|
||||
},
|
||||
|
||||
animationEnd (_, existed) {
|
||||
if (!existed && !this.$data._closed) {
|
||||
this.setState({
|
||||
_closed: true,
|
||||
_closing: false,
|
||||
})
|
||||
|
||||
const afterClose = this.afterClose
|
||||
if (afterClose) {
|
||||
afterClose()
|
||||
}
|
||||
} else {
|
||||
this.setState({
|
||||
_closed: false,
|
||||
})
|
||||
animationEnd () {
|
||||
const afterClose = this.afterClose
|
||||
if (afterClose) {
|
||||
afterClose()
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -110,46 +66,51 @@ export default {
|
|||
.test(color)
|
||||
)
|
||||
},
|
||||
getTagStyle () {
|
||||
const { color } = this.$props
|
||||
const isPresetColor = this.isPresetColor(color)
|
||||
return {
|
||||
backgroundColor: color && !isPresetColor ? color : undefined,
|
||||
}
|
||||
},
|
||||
|
||||
getTagClassName () {
|
||||
const { prefixCls, color } = this.$props
|
||||
const isPresetColor = this.isPresetColor(color)
|
||||
return {
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-${color}`]: isPresetColor,
|
||||
[`${prefixCls}-has-color`]: color && !isPresetColor,
|
||||
}
|
||||
},
|
||||
|
||||
renderCloseIcon () {
|
||||
const { closable } = this.$props
|
||||
return closable ? <Icon type='close' onClick={this.handleIconClick} /> : null
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { prefixCls, closable, color } = this.$props
|
||||
const closeIcon = closable ? <Icon type='close' onClick={this.handleIconClick} /> : ''
|
||||
const isPresetColor = this.isPresetColor(color)
|
||||
const cls = {
|
||||
[`${prefixCls}`]: true,
|
||||
[`${prefixCls}-${color}`]: isPresetColor,
|
||||
[`${prefixCls}-has-color`]: (color && !isPresetColor),
|
||||
[`${prefixCls}-close`]: this.$data._closing,
|
||||
}
|
||||
|
||||
const tagStyle = {
|
||||
backgroundColor: (color && !isPresetColor) ? color : null,
|
||||
}
|
||||
const tag =
|
||||
const { prefixCls } = this.$props
|
||||
const { _visible: visible } = this.$data
|
||||
const tag = (
|
||||
<div
|
||||
v-show={!this.$data._closing}
|
||||
data-show={!this.$data._closing}
|
||||
v-show={visible}
|
||||
{...{ on: omit(this.$listeners, ['close']) }}
|
||||
class={cls}
|
||||
style={tagStyle}
|
||||
class={this.getTagClassName()}
|
||||
style={this.getTagStyle()}
|
||||
>
|
||||
{this.$slots.default}
|
||||
{closeIcon}
|
||||
{this.renderCloseIcon()}
|
||||
</div>
|
||||
)
|
||||
const transitionProps = getTransitionProps(`${prefixCls}-zoom`, {
|
||||
afterLeave: () => this.animationEnd(undefined, false),
|
||||
afterEnter: () => this.animationEnd(undefined, true),
|
||||
appear: false,
|
||||
afterLeave: this.animationEnd,
|
||||
})
|
||||
return (
|
||||
<Wave>
|
||||
{this.$data._closed ? <span/>
|
||||
: <transition
|
||||
{...transitionProps}
|
||||
>
|
||||
{tag}
|
||||
</transition>
|
||||
}
|
||||
<transition {...transitionProps}>{tag}</transition>
|
||||
</Wave>
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
|
||||
exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
|
||||
<div>
|
||||
<div data-show="true" class="ant-tag ant-tag-zoom-enter">Tag 1</div>
|
||||
<div data-show="true" class="ant-tag ant-tag-zoom-enter"><a href="https://github.com/vueComponent/ant-design">Link</a></div>
|
||||
<div data-show="true" class="ant-tag ant-tag-zoom-enter">Tag 2<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<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 class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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 data-show="true" class="ant-tag ant-tag-zoom-enter">Prevent Default<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<div class="ant-tag">Prevent Default<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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>
|
||||
|
|
@ -25,40 +25,40 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
|
|||
<div>
|
||||
<h4 style="margin-bottom: 16px;">Presets:</h4>
|
||||
<div>
|
||||
<div data-show="true" class="ant-tag ant-tag-pink ant-tag-zoom-enter">pink</div>
|
||||
<div data-show="true" class="ant-tag ant-tag-red ant-tag-zoom-enter">red</div>
|
||||
<div data-show="true" class="ant-tag ant-tag-orange ant-tag-zoom-enter">orange</div>
|
||||
<div data-show="true" class="ant-tag ant-tag-green ant-tag-zoom-enter">green</div>
|
||||
<div data-show="true" class="ant-tag ant-tag-cyan ant-tag-zoom-enter">cyan</div>
|
||||
<div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">blue</div>
|
||||
<div data-show="true" class="ant-tag ant-tag-purple ant-tag-zoom-enter">purple</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>
|
||||
<h4>Custom:</h4>
|
||||
<div>
|
||||
<div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(255, 85, 0);">#f50</div>
|
||||
<div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(45, 183, 245);">#2db7f5</div>
|
||||
<div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(135, 208, 104);">#87d068</div>
|
||||
<div data-show="true" class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(16, 142, 233);">#108ee9</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>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/control.md correctly 1`] = `
|
||||
<div>
|
||||
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
|
||||
<div class="ant-tag">
|
||||
Unremovable
|
||||
</div>
|
||||
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
|
||||
<div class="ant-tag">
|
||||
Tag 2
|
||||
<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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 data-show="true" class="ant-tag ant-tag-zoom-enter">
|
||||
<div class="ant-tag">
|
||||
Tag 3Tag 3Tag 3Tag 3...
|
||||
<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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 data-show="true" class="ant-tag ant-tag-zoom-enter" style="border-style: dashed; background: rgb(255, 255, 255);"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<div class="ant-tag" style="border-style: dashed; background: rgb(255, 255, 255);"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
|
||||
</svg></i> New Tag
|
||||
</div>
|
||||
|
|
@ -67,7 +67,7 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
|
|||
|
||||
exports[`renders ./components/tag/demo/controlled.md correctly 1`] = `
|
||||
<div>
|
||||
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
|
||||
<div class="ant-tag">
|
||||
Movies
|
||||
<i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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>
|
||||
|
|
|
|||
|
|
@ -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`] = `<span></span>`;
|
||||
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 2`] = `<span></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 3`] = `<span></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 visible as initial value 1`] = `<div data-show="true" class="ant-tag"></div>`;
|
||||
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 2`] = `<div data-show="true" class="ant-tag"></div>`;
|
||||
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 3`] = `<div data-show="true" class="ant-tag"></div>`;
|
||||
exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `<div class="ant-tag" style=""></div>`;
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ describe('Tag', () => {
|
|||
}, { sync: false, attachToDocument: true })
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('.anticon-close').length).toBe(1)
|
||||
expect(wrapper.findAll('.ant-tag').length).toBe(1)
|
||||
expect(wrapper.findAll('.ant-tag').filter(w => w.isVisible()).length).toBe(1)
|
||||
wrapper.find('.anticon-close').trigger('click')
|
||||
expect(onClose).toBeCalled()
|
||||
})
|
||||
// await asyncExpect(() => {
|
||||
// expect(wrapper.findAll('.ant-tag').length).toBe(0)
|
||||
// })
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('.ant-tag').filter(w => w.isVisible()).length).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
it('should not be closed when prevent default', async () => {
|
||||
|
|
@ -32,11 +32,11 @@ describe('Tag', () => {
|
|||
}, { sync: false })
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('.anticon-close').length).toBe(1)
|
||||
expect(wrapper.findAll('.ant-tag').length).toBe(1)
|
||||
expect(wrapper.findAll('.ant-tag').filter(w => w.isVisible()).length).toBe(1)
|
||||
wrapper.find('.anticon-close').trigger('click')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('.ant-tag').length).toBe(1)
|
||||
expect(wrapper.findAll('.ant-tag').filter(w => w.isVisible()).length).toBe(1)
|
||||
}, 0)
|
||||
})
|
||||
describe('visibility', () => {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
title: 'Tag',
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<div id='components-tag-demo'>
|
||||
<md cn={md.cn} us={md.us}/>
|
||||
<Basic />
|
||||
<Checkable />
|
||||
|
|
@ -56,3 +56,8 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#components-tag-demo .ant-tag{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| checked | Checked status of Tag | boolean | `false` |
|
||||
| checked(v-model) | Checked status of Tag | boolean | `false` |
|
||||
|
||||
### Tag.CheckableTag Events
|
||||
| Events Name | Description | Arguments |
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| checked | 设置标签的选中状态 | boolean | false |
|
||||
| checked(v-model) | 设置标签的选中状态 | boolean | false |
|
||||
|
||||
### 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
|
|
|||
Loading…
Reference in New Issue