在實際開發中，我們經常會用到模態框組件，因此封裝一個模態框組件會是一個不錯的方式

直接上代碼，子組件modal.vue代碼如下：

<template><div class="modal-shade"><div class="my-modal"><div class="modal-title"><slot name="modal-title"></slot></div><div class="modal-content"><slot name="modal-content"></slot></div><div class="modal-footer"><slot name="modal-footer"></slot></div></div></div></template> <style >.modal-shade{/* width:100%;height:100%;position:absolute;top:0;left:0;background-color: rgba(0,0,0,0.6);*/position: fixed;z-index: 999;top: 0;right: 0;bottom: 0;left: 0;overflow: auto;margin: 0;background-color: rgba(0,0,0,0.5);}.my-modal{/* position:absolute;!* left:34%;top:25%;width:32%;height:50%;*!left:50%;top:50%;width: 36%;height: 44%;border: 1px solid #fff;*//*position: relative;margin: 50px auto 50px;*/position:fixed;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);background: #fff;border-radius: 2px;-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);box-shadow: 0 1px 3px rgba(0,0,0,.3);box-sizing: border-box;width: 36%;}.modal-title{/* width:96%;height:50px;background-color: #1B5661;font-family: 黑體;font-size: 18px;color:#fff;line-height: 50px;padding-left: 4%;*/padding: 10px;background-color: #1B5661;font-size: 18px;color:#fff;border: 1px solid #fff;}.modal-content{/* width:100%;position: absolute;left:0;top:70px;bottom: 0;background-color: red;*/}.modal-footer{padding: 10px 20px 20px;box-sizing: border-box;text-align: center;} </style> <script scoped>export default{props:{'title':{type:String,}},data(){return {msg: 'hello vue'}},components: {}} </script>

父組件引用方式：

<template><div id="all"><my-modal><div slot="modal-title"><span>新增供應商</span></div><div slot="modal-content"><div class="form-item"><div class="label-div"><label for="">供應商名稱</label></div><div class="input-div"><input type="text"></div></div><div class="form-item"><div class="label-div"><label for="">開戶銀行</label></div><div class="input-div"><input type="text"></div></div><div class="form-item"><div class="label-div"><label for="">開戶賬號</label></div><div class="input-div"><input type="text"></div></div></div><div slot="modal-footer"><button type="button" class="button-style" @click="modalClose()">取消</button><button type="button" class="button-style" @click="modalClose()">保存</button></div></my-modal></div> </template> <script>import myModal from '../../publicCom/modal.vue'export default {data(){return {}},components: {myModal}} </script> <style scoped>#all{width:100%;height:100%;position: relative;box-sizing: border-box;}.form-item{padding: 10px 50px;font-size: 14px;}.form-item div{display: inline-block;}.form-item .label-div{width: 70px;}.form-item .input-div{margin-left: 10px;}.input-div input{height: 24px;width: 280px;border: 1px solid #B4B4B4;}.label-div{/* vertical-align: top;*/text-align:right;}textarea{width: 300px;height: 100px;}.form-item ul li span{width: 80px;display: inline-block;} </style>

?

效果如下：

?

轉載于:https://www.cnblogs.com/yuwenjing0727/p/9779520.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的模态框的封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。