<!-- 实现script定义一个模板 --> <script type="x/template"> <!--模板是否显示通过v-show="show"来设置， transition设置动画效果--> <div v-show="show" transition="modal"> <div> <div> <div> <!--slot 相当于header占位符--> <slot> default header </slot> </div> <div> <!--slot 相当于body占位符--> <slot> default body </slot> </div> <div> <!--slot 相当于footer占位符--> <slot> default footer </slot> <button @click="show = false">OK</button> </div> </div> </div> </div> </script> <div> <!--点击按钮时设置vue实例特性showModal的值为true--> <button @click="showModal = true">show modal</button> <!--modal是自定义的一个插件，插件的特性show绑定vue实例的showModal特性--> <modal :show.sync="showModal"> <!--替换modal插件中slot那么为header的内容--> <h3 slot="header">Custom Header</h3> </modal> </div>
js代码：
//定义一个插件，名称为modal Vue.component("modal", { //插件的模板绑定id为modal-template的DOM元素内容 template: "#modal-template", props: { //特性，类型为布尔 show:{ type: Boolean, required: true, twoWay: true } } }); //实例化vue，作用域在id为app元素下， new Vue({ el: "#app", data: { //特性，默认值为false showModal: false } });
css代码：
.modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: table; transition: opacity .3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 300px; margin: 0px auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .33); transition: all .3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-header h3 { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } /* * the following styles are auto-applied to elements with * v-transition="modal" when their visiblity is toggled * by Vue.js. * * You can easily play with the modal transition by editing * these styles. */ .modal-enter, .modal-leave { opacity: 0; } .modal-enter .modal-container, .modal-leave .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); }
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
由于自己在项目中还没怎么深入使用组件的功能，所以自己对组件的理解也不深入，介绍的比较肤浅，谢谢大家的阅读。
您可能感兴趣的文章: