<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>模态框组件</title> <style> p,h4{ margin: 0; } .modal{ width: 500px; background: #fff; border: 1px solid rgba(0,0,0,0.2); border-radius: 6px; box-shadow: 0 3px 9px rgba(0,0,0,0.5); } .modal-header{ padding: 15px; border-bottom: 1px solid #e5e5e5; } .modal-content div{ padding: 20px; } .modal-footer{ padding: 15px; text-align: right; border-top: 1px solid #E5E5E5; } .btn{ padding: 5px 15px; border: none; outline: none; } .blue{ color: #fff; background: #39f; border-color: #39f; } </style> <script src="js/vue.js"></script> </head> <body> <div id="app"> <m-modal modal-title="提醒" @on-ok="ok"></m-modal> <m-modal> <ul slot="modal-content"> <li v-for="item of list">{{item}}</li> </ul> <div slot="modal-footer"> <span>确定</span> <span>重置</span> <span>返回</span> </div> </m-modal> <m-modal @on-cancel="cancel"></m-modal> </div> </body> <script> /*设置的props: modalTitle提醒消息默认为'这是一个模态框' 定制模板 slot 为modal-content 定制提醒信息模板 slot 为modal-footer 定制底部模板 监控子组件状态变化 事件名on-ok 点击确定触发 事件名on-cancel 点击取消触发 */ Vue.component("m-modal",{ props:{ modalTitle:{ type:String, default:'这是一个模态框' } }, template:` <div class="modal"> <div class="modal-header"> <h4>{{modalTitle}}</h4> </div> <div class="modal-content"> <div> <slot name="modal-content">在这里添加内容</slot> </div> </div> <div class="modal-footer"> <slot name="modal-footer"> <input class="btn blue" type="button" value="确定" @click="okHandle"/> <input class="btn" type="button" value="取消" @click="cancelHandle"/> </slot> </div> </div> `, methods:{ okHandle(){ //通知父组件点了确定 this.$emit("on-ok"); }, cancelHandle(){ alert('取消了'); this.$emit("on-cancel") } } }); var list=[...'妙味课堂'] new Vue({ el:'#app', data:{ list:list }, methods:{ ok:function(){ alert('改变一个div的样式') }, cancel:function(){ alert('你取消了，我要干别的事情') } } }) </script> </html>
