<slot>元素是一个内容分发API,使用多个内容插槽时可指定name属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- <link rel="stylesheet" href="fonts/iconfont.css" /> --> <style> * { font-family: simhei, Helvetica, Arial, sans-serif; } #dialog-template{ display: none; } button { display: inline-block; border: 0; box-sizing: border-box; color: #fff; font-size: 1em; border-radius: .1em; line-height: 2em; padding: 0 1em; transition: .4s ease-out; outline: 0; text-decoration: none; } button:hover, button:focus { opacity: 0.5; cursor: pointer; transition: .15s ease-in; } .btn-group{ margin: 200px auto; width: 640px; } .btn-info{ background: blue; } .btn-success{ background: gray; } .btn-warning{ background: green; } .btn-error{ background: coral; } .dialog { width: 480px; position: fixed; left: 50%; top: 2em; transform: translateX(-50%); z-index: 2000; visibility: hidden; backface-visibility: hidden; perspective: 1300px; } .dialog-active { visibility: visible; } .dialog-active .dialog-content { position: relative; opacity: 1; transform: rotateY(0); } .dialog-active ~ .dialog-overlay { opacity: 1; visibility: visible; } .dialog-content { border-radius: 3px; background: #fff; overflow: hidden; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); transition: .5s ease-in-out; opacity: 0; transform-style: preserve-3d; transform: rotateY(-70deg); } .dialog-header { color: #fff; } .dialog-title { margin: 0; font-size: 2em; text-align: center; font-weight: 200; line-height: 2em; } .dialog-body { padding: 2em; } .dialog-footer { margin: 0 2em; padding: 2em 0; text-align: right; border-top: 1px solid rgba(0, 0, 0, 0.1); } .dialog-overlay { content: ""; position: fixed; visibility: hidden; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; opacity: 0; background: rgba(0, 0, 0, 0.5); transition: all .6s; } .dialog-info .dialog-header,.dialog-info button { background-color: lightblue; } .dialog-success .dialog-header,.dialog-success button { background-color: lightgray; } .dialog-warning .dialog-header,.dialog-warning button { background-color: lightgreen; } .dialog-error .dialog-header,.dialog-error button { background-color: lightcoral; } .close { display: inline-block; width: 2rem; height: 2rem; position: absolute; top: .5rem; right: .5rem; transition: .8s ease all; -moz-transition: .8s ease all; -webkit-transition: .8s ease all; border: none; border-radius: 3px; color: #333; text-decoration: none; box-sizing: border-box; -webkit-box-sizing: border-box; } .close:hover { transition: .8s ease all; -moz-transition: .8s ease all; -webkit-transition: .8s ease all; } .close .iconfont { font-size: 2rem; color: #fff; } .rotate { cursor: pointer; } .rotate:hover { transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transition: transform 1.0s ease all; -moz-transition: -moz-transform 1.0s ease all; -webkit-transition: -webkit-transform 1.0s ease all; } </style> </head> <body> <div id="app"> <modal-dialog v-bind:show.sync="show" v-bind:class="dialogClass"> <header class="dialog-header" slot="header"> <h1 class="dialog-title">infomation</h1> </header> <div class="dialog-body" slot="body"> <p>contents of dialog box</p> <p>para ,forms ,or pics</p> </div> <footer class="dialog-footer" slot="footer"> <button @click="closeDialog">close</button> </footer> </modal-dialog> <div class="btn-group"> <button class="btn-info" @click="openDialog('dialog-info')">Info dialog</button> <button class="btn-success" @click="openDialog('dialog-success')">Success dialog</button> <button class="btn-warning" @click="openDialog('dialog-warning')">warning dialog</button> <button class="btn-error" @click="openDialog('dialog-error')">error dialog</button> </div> </div> <template id="dialog-template"> <div class="dialogs"> <div class="dialog" v-bind:class="{ 'dialog-active': show }"> <div class="dialog-content"> <div class="close rotate"> <span class="iconfont icon-close" @click="close"></span> </div> <slot name="header"></slot> <slot name="body"></slot> <slot name="footer"></slot> </div> </div> <div class="dialog-overlay"></div> </div> </template> <script src="js/vue.js"></script> <script> Vue.component('modal-dialog', { template: '#dialog-template', props: ['show'], methods: { close: function() { this.show = false } } }) new Vue({ el: '#app', data: { show: false, dialogClass: 'dialog-info' }, methods: { openDialog: function(dialogClass) { this.show = true this.dialogClass = dialogClass }, closeDialog: function() { this.show = false } } }) </script> </body> </html>