mirror of https://github.com/sveltejs/svelte
commit
90d2e7f883
@ -1,9 +1,11 @@
|
||||
export default function visitYieldTag ( generator, block, state ) {
|
||||
block.builders.mount.addLine(
|
||||
`${block.component}._yield && ${block.component}._yield.mount( ${state.parentNode || block.target}, null );`
|
||||
const parentNode = state.parentNode || block.target;
|
||||
|
||||
( state.parentNode ? block.builders.create : block.builders.mount ).addLine(
|
||||
`if ( ${block.component}._yield ) ${block.component}._yield.mount( ${parentNode}, null );`
|
||||
);
|
||||
|
||||
block.builders.destroy.addLine(
|
||||
`${block.component}._yield && ${block.component}._yield.destroy( detach );`
|
||||
`if ( ${block.component}._yield ) ${block.component}._yield.destroy( detach );`
|
||||
);
|
||||
}
|
@ -0,0 +1,6 @@
|
||||
<div class='modal-background' on:click='destroy()'></div>
|
||||
|
||||
<div class='modal'>
|
||||
{{yield}}
|
||||
<button on:click='destroy()'>close modal</button>
|
||||
</div>
|
@ -0,0 +1,25 @@
|
||||
export default {
|
||||
data: {
|
||||
showModal: true
|
||||
},
|
||||
|
||||
html: `
|
||||
<div class='modal-background'></div>
|
||||
|
||||
<div class='modal'>
|
||||
<h2>Hello!</h2>
|
||||
<button>close modal</button>
|
||||
</div>
|
||||
`,
|
||||
|
||||
test ( assert, component, target, window ) {
|
||||
const button = target.querySelector( 'button' );
|
||||
const click = new window.MouseEvent( 'click' );
|
||||
|
||||
button.dispatchEvent( click );
|
||||
|
||||
assert.htmlEqual( target.innerHTML, `
|
||||
<button>show modal</button>
|
||||
`);
|
||||
}
|
||||
};
|
@ -0,0 +1,15 @@
|
||||
{{#if showModal}}
|
||||
<Modal on:destroy='set({ showModal: false })'>
|
||||
<h2>Hello!</h2>
|
||||
</Modal>
|
||||
{{else}}
|
||||
<button on:click='set({ showModal: true })'>show modal</button>
|
||||
{{/if}}
|
||||
|
||||
<script>
|
||||
import Modal from './Modal.html';
|
||||
|
||||
export default {
|
||||
components: { Modal }
|
||||
};
|
||||
</script>
|
Loading…
Reference in new issue