vue组件封装案例--封装modal模态框组件

责编:menVScode 2017-11-16 22:28 阅读(1790)

封装modal模态框组件

        设置的props:

                modalTitle 提醒信息 默认为 '这是一个模态框'

        定制模板:

                slot为modal-content  定制提醒信息模板

                slot为modal-footer   定制底部模板

        监控子组件状态变化:

                事件名on-ok        点击确定触发

                事件名on-cancel   点击取消触发

style样式

p,h4{ margin:0; }
.modal{ width: 500px;background-color: #fff;border: 1px solid rgba(0,0,0,.2);border-radius: 6px;box-shadow: 0 3px 9px rgba(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-color: #39f;border-color: #39f;}

html代码

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

js代码

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(){
            //通知父组件 点了确定
            alert("我触发了")
            this.$emit("on-ok");
        },
        cancelHandle(){
            alert('取消了');
            this.$emit('on-cancel')
        }
    }
});

var list = [...'MVC前端网'];
new Vue({
    el:"#app",
    data:{
        list:list
    },
    methods:{
        ok:function (){
            alert("改变一个div的样式")    
        },
        cancel:function (){
            alert("取消了,干别的事情")    
        }
    }
});

页面效果

QQ截图20171116222658

标签: 模态框 组件 vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码