await nextTick()
expect($div.style.display).toEqual('')
})
-
- // #10151
- test('should respect the display value when v-show value is true', async () => {
- const isVisible = ref(false)
- const useDisplayStyle = ref(true)
- const compStyle = ref({
- display: 'none',
- })
- const withoutDisplayStyle = {
- margin: '10px',
- }
-
- const Component = {
- setup() {
- return () => {
- return withVShow(
- h('div', {
- style: useDisplayStyle.value
- ? compStyle.value
- : withoutDisplayStyle,
- }),
- isVisible.value,
- )
- }
- },
- }
- render(h(Component), root)
-
- const $div = root.children[0]
-
- expect($div.style.display).toEqual('none')
-
- isVisible.value = true
- await nextTick()
- expect($div.style.display).toEqual('none')
-
- compStyle.value.display = 'block'
- await nextTick()
- expect($div.style.display).toEqual('block')
-
- compStyle.value.display = 'inline-block'
- await nextTick()
- expect($div.style.display).toEqual('inline-block')
-
- isVisible.value = false
- await nextTick()
- expect($div.style.display).toEqual('none')
-
- isVisible.value = true
- await nextTick()
- expect($div.style.display).toEqual('inline-block')
-
- useDisplayStyle.value = false
- await nextTick()
- expect($div.style.display).toEqual('')
- expect(getComputedStyle($div).display).toEqual('block')
-
- isVisible.value = false
- await nextTick()
- expect($div.style.display).toEqual('none')
-
- isVisible.value = true
- await nextTick()
- expect($div.style.display).toEqual('')
- })
})
}
},
updated(el, { value, oldValue }, { transition }) {
- if (!value === !oldValue && el.style.display === el[vShowOldKey]) return
+ if (!value === !oldValue) return
if (transition) {
if (value) {
transition.beforeEnter(el)