mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-01 11:38:36 +08:00
update wave & tag & tag snapshots
This commit is contained in:
tangjinzhou
parent
12918ae619
commit
df5db65397
@ -24,22 +24,18 @@ export default {
|
||||
return true
|
||||
},
|
||||
|
||||
onClick (node) {
|
||||
onClick (node, waveColor) {
|
||||
if (node.className.indexOf('-leave') >= 0) {
|
||||
return
|
||||
}
|
||||
this.removeExtraStyleNode()
|
||||
const { insertExtraNode } = this.$props
|
||||
const extraNode = document.createElement('div')
|
||||
this.extraNode = document.createElement('div')
|
||||
const extraNode = this.extraNode
|
||||
extraNode.className = 'ant-click-animating-node'
|
||||
const attributeName = insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node'
|
||||
const attributeName = this.getAttributeName()
|
||||
node.removeAttribute(attributeName)
|
||||
node.setAttribute(attributeName, 'true')
|
||||
// Get wave color from target
|
||||
const waveColor =
|
||||
getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
|
||||
getComputedStyle(node).getPropertyValue('border-color') ||
|
||||
getComputedStyle(node).getPropertyValue('background-color')
|
||||
// Not white or transparnt or grey
|
||||
if (waveColor &&
|
||||
waveColor !== '#ffffff' &&
|
||||
@ -56,20 +52,14 @@ export default {
|
||||
if (insertExtraNode) {
|
||||
node.appendChild(extraNode)
|
||||
}
|
||||
const transitionEnd = () => {
|
||||
node.removeAttribute(attributeName)
|
||||
this.removeExtraStyleNode()
|
||||
if (insertExtraNode) {
|
||||
node.removeChild(extraNode)
|
||||
}
|
||||
TransitionEvents.removeEndEventListener(node, transitionEnd)
|
||||
}
|
||||
TransitionEvents.addEndEventListener(node, transitionEnd)
|
||||
TransitionEvents.addEndEventListener(node, this.onTransitionEnd)
|
||||
},
|
||||
|
||||
bindAnimationEvent (node) {
|
||||
if (node.getAttribute('disabled') ||
|
||||
node.className.indexOf('disabled') >= 0) {
|
||||
if (!node ||
|
||||
!node.getAttribute ||
|
||||
node.getAttribute('disabled') ||
|
||||
node.className.indexOf('disabled') >= 0) {
|
||||
return
|
||||
}
|
||||
const onClick = (e) => {
|
||||
@ -77,7 +67,13 @@ export default {
|
||||
if (e.target.tagName === 'INPUT') {
|
||||
return
|
||||
}
|
||||
setTimeout(() => this.onClick(node), 0)
|
||||
this.resetEffect(node)
|
||||
// Get wave color from target
|
||||
const waveColor =
|
||||
getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
|
||||
getComputedStyle(node).getPropertyValue('border-color') ||
|
||||
getComputedStyle(node).getPropertyValue('background-color')
|
||||
this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0)
|
||||
}
|
||||
node.addEventListener('click', onClick, true)
|
||||
return {
|
||||
@ -86,7 +82,31 @@ export default {
|
||||
},
|
||||
}
|
||||
},
|
||||
getAttributeName () {
|
||||
const { insertExtraNode } = this.$props
|
||||
return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node'
|
||||
},
|
||||
|
||||
resetEffect (node) {
|
||||
if (!node || node === this.extraNode) {
|
||||
return
|
||||
}
|
||||
const { insertExtraNode } = this.$props
|
||||
const attributeName = this.getAttributeName()
|
||||
node.removeAttribute(attributeName)
|
||||
this.removeExtraStyleNode()
|
||||
if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
|
||||
node.removeChild(this.extraNode)
|
||||
}
|
||||
TransitionEvents.removeEndEventListener(node, this.onTransitionEnd)
|
||||
},
|
||||
|
||||
onTransitionEnd (e) {
|
||||
if (!e || e.animationName !== 'fadeEffect') {
|
||||
return
|
||||
}
|
||||
this.resetEffect(e.target)
|
||||
},
|
||||
removeExtraStyleNode () {
|
||||
if (this.styleForPesudo && document.body.contains(this.styleForPesudo)) {
|
||||
document.body.removeChild(this.styleForPesudo)
|
||||
|
||||
@ -685,7 +685,7 @@ exports[`RangePicker switch to corresponding month panel when click presetted ra
|
||||
</div>
|
||||
<div class="ant-calendar-footer ant-calendar-range-bottom ant-calendar-footer-show-ok">
|
||||
<div class="ant-calendar-footer-extra ant-calendar-range-quick-selector">
|
||||
<div class="ant-tag ant-tag-blue">My Birthday</div>
|
||||
<div data-show="true" class="ant-tag ant-tag-blue">My Birthday</div>
|
||||
</div>
|
||||
<div class="ant-calendar-footer-btn"><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>
|
||||
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
changeConfirmLocale()
|
||||
},
|
||||
render () {
|
||||
return this.$slots.default[0]
|
||||
return this.$slots.default ? this.$slots.default[0] : null
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
@ -67,7 +67,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 class="ant-tag ant-tag-blue ant-tag-zoom-enter">nice</div><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">developer</div></span></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><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"></i></a></span></td>
|
||||
</tr>
|
||||
@ -76,7 +76,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 class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
|
||||
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">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"></i></a></span></td>
|
||||
</tr>
|
||||
@ -85,7 +85,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 class="ant-tag ant-tag-blue ant-tag-zoom-enter">cool</div><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">teacher</div></span></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><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"></i></a></span></td>
|
||||
</tr>
|
||||
@ -2517,7 +2517,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
|
||||
<td>Brown</td>
|
||||
<td>32</td>
|
||||
<td>New York No. 1 Lake Park</td>
|
||||
<td><span><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">nice</div><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">developer</div></span></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><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">
|
||||
@ -2526,7 +2526,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
|
||||
<td>Green</td>
|
||||
<td>42</td>
|
||||
<td>London No. 1 Lake Park</td>
|
||||
<td><span><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
|
||||
<td><span><div data-show="true" class="ant-tag ant-tag-blue ant-tag-zoom-enter">loser</div></span></td>
|
||||
<td><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">
|
||||
@ -2535,7 +2535,7 @@ exports[`renders ./components/table/demo/template.md correctly 1`] = `
|
||||
<td>Black</td>
|
||||
<td>32</td>
|
||||
<td>Sidney No. 1 Lake Park</td>
|
||||
<td><span><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">cool</div><div class="ant-tag ant-tag-blue ant-tag-zoom-enter">teacher</div></span></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><a href="javascript:;">Action 一 Joe</a> <div class="ant-divider ant-divider-vertical"></div> <a href="javascript:;">Delete</a></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -14,6 +14,7 @@ export default {
|
||||
color: PropTypes.string,
|
||||
closable: PropTypes.bool,
|
||||
visible: PropTypes.bool,
|
||||
afterClose: PropTypes.func,
|
||||
},
|
||||
model: {
|
||||
prop: 'visible',
|
||||
@ -46,12 +47,13 @@ export default {
|
||||
},
|
||||
updated () {
|
||||
this.$nextTick(() => {
|
||||
if (this.pre_visible && !this.$data._visible) {
|
||||
const preVisible = this.pre_visible
|
||||
this.pre_visible = this.$data._visible
|
||||
if (preVisible && !this.$data._visible) {
|
||||
this.close()
|
||||
} else if (!this.pre_visible && this.$data._visible) {
|
||||
} else if (!preVisible && this.$data._visible) {
|
||||
this.show()
|
||||
}
|
||||
this.pre_visible = this.$data._visible
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
@ -62,6 +64,7 @@ export default {
|
||||
return
|
||||
}
|
||||
this.setState({ _visible: false })
|
||||
this.$forceUpdate()
|
||||
},
|
||||
close () {
|
||||
if (this.$data._closing || this.$data._closed) {
|
||||
@ -111,7 +114,7 @@ export default {
|
||||
|
||||
render () {
|
||||
const { prefixCls, closable, color } = this.$props
|
||||
const closeIcon = closable ? <Icon type='cross' onClick={this.handleIconClick} /> : ''
|
||||
const closeIcon = closable ? <Icon type='close' onClick={this.handleIconClick} /> : ''
|
||||
const isPresetColor = this.isPresetColor(color)
|
||||
const cls = {
|
||||
[`${prefixCls}`]: true,
|
||||
@ -123,9 +126,10 @@ export default {
|
||||
const tagStyle = {
|
||||
backgroundColor: (color && !isPresetColor) ? color : null,
|
||||
}
|
||||
const tag = this.$data._closed ? <span /> : (
|
||||
const tag =
|
||||
<div
|
||||
v-show={!this.$data._closing}
|
||||
data-show={!this.$data._closing}
|
||||
{...{ on: omit(this.$listeners, ['close']) }}
|
||||
class={cls}
|
||||
style={tagStyle}
|
||||
@ -133,18 +137,19 @@ export default {
|
||||
{this.$slots.default}
|
||||
{closeIcon}
|
||||
</div>
|
||||
)
|
||||
const transitionProps = this.$data._closed ? {} : getTransitionProps(`${prefixCls}-zoom`, {
|
||||
const transitionProps = getTransitionProps(`${prefixCls}-zoom`, {
|
||||
afterLeave: () => this.animationEnd(undefined, false),
|
||||
afterEnter: () => this.animationEnd(undefined, true),
|
||||
})
|
||||
return (
|
||||
<Wave>
|
||||
<transition
|
||||
{...transitionProps}
|
||||
>
|
||||
{tag}
|
||||
</transition>
|
||||
{this.$data._closed ? <span/>
|
||||
: <transition
|
||||
{...transitionProps}
|
||||
>
|
||||
{tag}
|
||||
</transition>
|
||||
}
|
||||
</Wave>
|
||||
)
|
||||
},
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
|
||||
exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-tag ant-tag-zoom-enter">Tag 1</div>
|
||||
<div class="ant-tag ant-tag-zoom-enter"><a href="https://github.com/vueComponent/ant-design">Link</a></div>
|
||||
<div class="ant-tag ant-tag-zoom-enter">Tag 2<i class="anticon anticon-cross"></i></div>
|
||||
<div class="ant-tag ant-tag-zoom-enter">Prevent Default<i class="anticon anticon-cross"></i></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"></i></div>
|
||||
<div data-show="true" class="ant-tag ant-tag-zoom-enter">Prevent Default<i class="anticon anticon-close"></i></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -21,40 +21,48 @@ 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 ant-tag-zoom-enter">pink</div>
|
||||
<div class="ant-tag ant-tag-red ant-tag-zoom-enter">red</div>
|
||||
<div class="ant-tag ant-tag-orange ant-tag-zoom-enter">orange</div>
|
||||
<div class="ant-tag ant-tag-green ant-tag-zoom-enter">green</div>
|
||||
<div class="ant-tag ant-tag-cyan ant-tag-zoom-enter">cyan</div>
|
||||
<div class="ant-tag ant-tag-blue ant-tag-zoom-enter">blue</div>
|
||||
<div class="ant-tag ant-tag-purple ant-tag-zoom-enter">purple</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>
|
||||
<h4>Custom:</h4>
|
||||
<div>
|
||||
<div class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(255, 85, 0);">#f50</div>
|
||||
<div class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(45, 183, 245);">#2db7f5</div>
|
||||
<div class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(135, 208, 104);">#87d068</div>
|
||||
<div class="ant-tag ant-tag-has-color ant-tag-zoom-enter" style="background-color: rgb(16, 142, 233);">#108ee9</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>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/control.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-tag ant-tag-zoom-enter">
|
||||
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
|
||||
Unremovable
|
||||
</div>
|
||||
<div class="ant-tag ant-tag-zoom-enter">
|
||||
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
|
||||
Tag 2
|
||||
<i class="anticon anticon-cross"></i></div>
|
||||
<div class="ant-tag ant-tag-zoom-enter">
|
||||
<i class="anticon anticon-close"></i></div>
|
||||
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
|
||||
Tag 3Tag 3Tag 3Tag 3...
|
||||
<i class="anticon anticon-cross"></i></div>
|
||||
<div class="ant-tag ant-tag-zoom-enter" style="border-style: dashed; background: rgb(255, 255, 255);"><i class="anticon anticon-plus"></i> New Tag
|
||||
<i class="anticon anticon-close"></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"></i> New Tag
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/controlled.md correctly 1`] = `
|
||||
<div>
|
||||
<div data-show="true" class="ant-tag ant-tag-zoom-enter">
|
||||
Movies
|
||||
<i class="anticon anticon-close"></i></div> <br> <button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Toggle</span></button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
|
||||
<div><strong>Categories:</strong>
|
||||
<div class="ant-tag ant-tag-checkable">
|
||||
|
||||
13
components/tag/__tests__/__snapshots__/index.test.js.snap
Normal file
13
components/tag/__tests__/__snapshots__/index.test.js.snap
Normal file
@ -0,0 +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 2`] = `<span></span>`;
|
||||
|
||||
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 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 2`] = `<div data-show="true" class="ant-tag"></div>`;
|
||||
|
||||
exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `<div data-show="true" class="ant-tag"></div>`;
|
||||
@ -3,30 +3,25 @@ import { asyncExpect } from '@/tests/utils'
|
||||
import Tag from '..'
|
||||
|
||||
describe('Tag', () => {
|
||||
beforeAll(() => {
|
||||
jest.useFakeTimers()
|
||||
})
|
||||
|
||||
afterAll(() => {
|
||||
jest.useRealTimers()
|
||||
})
|
||||
|
||||
it('should be closable', () => {
|
||||
it('should be closable', async () => {
|
||||
const onClose = jest.fn()
|
||||
const wrapper = mount({
|
||||
render () {
|
||||
return <Tag closable onClose={onClose} />
|
||||
},
|
||||
}, { sync: false, attachToDocument: true })
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('.anticon-close').length).toBe(1)
|
||||
expect(wrapper.findAll('.ant-tag').length).toBe(1)
|
||||
wrapper.find('.anticon-close').trigger('click')
|
||||
expect(onClose).toBeCalled()
|
||||
})
|
||||
expect(wrapper.findAll('.anticon-cross').length).toBe(1)
|
||||
expect(wrapper.findAll('.ant-tag').length).toBe(1)
|
||||
wrapper.find('.anticon-cross').trigger('click')
|
||||
expect(onClose).toBeCalled()
|
||||
jest.runAllTimers()
|
||||
expect(wrapper.findAll('.ant-tag').length).toBe(0)
|
||||
// await asyncExpect(() => {
|
||||
// expect(wrapper.findAll('.ant-tag').length).toBe(0)
|
||||
// })
|
||||
})
|
||||
|
||||
it('should not be closed when prevent default', () => {
|
||||
it('should not be closed when prevent default', async () => {
|
||||
const onClose = (e) => {
|
||||
e.preventDefault()
|
||||
}
|
||||
@ -34,11 +29,43 @@ describe('Tag', () => {
|
||||
render () {
|
||||
return <Tag closable onClose={onClose} />
|
||||
},
|
||||
}, { sync: false })
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('.anticon-close').length).toBe(1)
|
||||
expect(wrapper.findAll('.ant-tag').length).toBe(1)
|
||||
wrapper.find('.anticon-close').trigger('click')
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.findAll('.ant-tag').length).toBe(1)
|
||||
}, 0)
|
||||
})
|
||||
describe('visibility', () => {
|
||||
it('can be controlled by visible with visible as initial value', async () => {
|
||||
const wrapper = mount(Tag, { propsData: { visible: true }, sync: false })
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
wrapper.setProps({ visible: false })
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
wrapper.setProps({ visible: true })
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
it('can be controlled by visible with hidden as initial value', async () => {
|
||||
const wrapper = mount(Tag, { propsData: { visible: false }, sync: false })
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
wrapper.setProps({ visible: true })
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
wrapper.setProps({ visible: false })
|
||||
})
|
||||
await asyncExpect(() => { expect(wrapper.html()).toMatchSnapshot() })
|
||||
})
|
||||
expect(wrapper.findAll('.anticon-cross').length).toBe(1)
|
||||
expect(wrapper.findAll('.ant-tag').length).toBe(1)
|
||||
wrapper.find('.anticon-cross').trigger('click')
|
||||
jest.runAllTimers()
|
||||
expect(wrapper.findAll('.ant-tag').length).toBe(1)
|
||||
})
|
||||
})
|
||||
|
||||
@ -14,11 +14,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" :afterClose="() => 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" :afterClose="() => handleClose(tag)">
|
||||
{{tag}}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
@ -13,7 +13,7 @@ By using the `visible` prop, you can control the close state of Tag.
|
||||
<div>
|
||||
<a-tag
|
||||
closable
|
||||
:visible="visible"
|
||||
v-model="visible"
|
||||
>
|
||||
Movies
|
||||
</a-tag>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
| 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 | Whether the Tag is closed or not | boolean | `true` |
|
||||
| visible(v-model) | Whether the Tag is closed or not | boolean | `true` |
|
||||
|
||||
|
||||
### Tag Events
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
| afterClose | 关闭动画完成后的回调 | () => void | - |
|
||||
| closable | 标签是否可以关闭 | boolean | false |
|
||||
| color | 标签色 | string | - |
|
||||
| visible | 是否显示标签 | boolean | `true` |
|
||||
| visible(v-model) | 是否显示标签 | boolean | `true` |
|
||||
|
||||
### 事件
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user