猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 > javascript > vue >

vue 一个简单的模态框组件实现

2018-01-22 14:40:16 作者:yxl 次阅读 vue

模态框是经常需要用到的一个组件,为了复用性,所以开发时一般封装成组件的形式调用

1、新建一个组件文件Model.vue

<template>
<div>
<div class="md-modal modal-msg md-modal-transition" :class="{'md-show':mdShow}">
<div class="md-modal-inner">
<div class="md-top">
<button class="md-close" @click="closeModel">Close</button>
</div>
<div class="md-content">
<div class="config-tips">
             <!--- 这里的slot 分别可以填入不同的内容--!>
<slot name="message"></slot>
</div>
<div class="btn-wrap">
<slot name="btnGroup"></slot>
</div>
</div>
</div>
</div>
<div class="md-overlay" v-if="mdShow" @click="closeModel"> </div>
</div>
</template>
<script>
export default {
            //这里的mdShow 是要传递给使用组件的使用控制模态框的显示关闭
props:['mdShow'],
methods:{
          
closeModel(){
          //这是父组件 必须实现的方法
this.$emit('close')
}
}
}
</script>
<style>

</style>

2、父组件
     首先呢,先引入该模态框组件
      然后呢使用方式如下:
            //这里必须实现  mdShow 属性 和close方法
       <Model :mdShow="modelConfig" @close="closeModel">
<p slot="message">你确认要删除这条数据吗?</p>
<div slot="btnGroup" >
<a href="javascript:void(0)" class="btn btn--m" @click="delCart">确认</a>
<a href="javascript:void(0)" class="btn btn--m" @click="modelConfig = false">关闭</a>
</div>
</Model>
然后在为modelConfig 定义开启和关闭的属性和相关的方法即可

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: Vue
0

网友评论