vue 封裝模態框組件

本文轉載自查看原文 2020-09-07 10:51 944 vue

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue 自定義modal 模態框組件 Vue自行封裝常用組件-彈出框 Angular 4 : 封裝拖動指令（模態框拖動） vue+elementui selet框組件封裝傳值 bootstrap3-dialog：更強大、更靈活的模態框（封裝好的模態框） vue可拖動模態框指令實現基於Vue封裝分頁組件 vue封裝分頁組件 JS /CSS 實現模態框（注冊和登錄組件）基於Ant Design的Modal組件來實現一個可拖拽的React模態框