Browse Source

Merge branch 'show-display' into next

dev
Evan You 8 years ago
parent
commit
543ff97487
  1. 12
      src/platforms/web/runtime/directives/show.js
  2. 15
      test/unit/features/directives/show.spec.js

12
src/platforms/web/runtime/directives/show.js

@ -11,15 +11,17 @@ function locateNode (vnode: VNode): VNodeWithData {
} }
export default { export default {
bind (el: HTMLElement, { value }: VNodeDirective, vnode: VNodeWithData) { bind (el: any, { value }: VNodeDirective, vnode: VNodeWithData) {
vnode = locateNode(vnode) vnode = locateNode(vnode)
const transition = vnode.data && vnode.data.transition const transition = vnode.data && vnode.data.transition
if (value && transition && transition.appear && !isIE9) { if (value && transition && transition.appear && !isIE9) {
enter(vnode) enter(vnode)
} }
el.style.display = value ? '' : 'none' const originalDisplay = el.style.display
el.style.display = value ? originalDisplay : 'none'
el.__vOriginalDisplay = originalDisplay
}, },
update (el: HTMLElement, { value, oldValue }: VNodeDirective, vnode: VNodeWithData) { update (el: any, { value, oldValue }: VNodeDirective, vnode: VNodeWithData) {
/* istanbul ignore if */ /* istanbul ignore if */
if (value === oldValue) return if (value === oldValue) return
vnode = locateNode(vnode) vnode = locateNode(vnode)
@ -27,14 +29,14 @@ export default {
if (transition && !isIE9) { if (transition && !isIE9) {
if (value) { if (value) {
enter(vnode) enter(vnode)
el.style.display = '' el.style.display = el.__vOriginalDisplay
} else { } else {
leave(vnode, () => { leave(vnode, () => {
el.style.display = 'none' el.style.display = 'none'
}) })
} }
} else { } else {
el.style.display = value ? '' : 'none' el.style.display = value ? el.__vOriginalDisplay : 'none'
} }
} }
} }

15
test/unit/features/directives/show.spec.js

@ -49,4 +49,19 @@ describe('Directive v-show', () => {
expect(vm.$el.firstChild.style.display).toBe('') expect(vm.$el.firstChild.style.display).toBe('')
}).then(done) }).then(done)
}) })
it('should respect display value in style attribute', done => {
const vm = new Vue({
template: '<div><span v-show="foo" style="display:block">hello</span></div>',
data: { foo: true }
}).$mount()
expect(vm.$el.firstChild.style.display).toBe('block')
vm.foo = false
waitForUpdate(() => {
expect(vm.$el.firstChild.style.display).toBe('none')
vm.foo = true
}).then(() => {
expect(vm.$el.firstChild.style.display).toBe('block')
}).then(done)
})
}) })

Loading…
Cancel
Save