vue 自定义modal 模态框组件

参数名	类型	说明
visible	Boolean	是否显示，默认false
title	String	标题
update:visible	Boolean	更新visible, 使用:visible.sync实现动态绑定

Modal.vue

<template>
  <transition name="fade">
  <div class="modal-wrap" v-if="visible">
    <div class="modal">
      <div class="hd">
        {{title}}
        <i class="btn-close iconfont icon-close" @click="close"></i>
      </div>
      <div class="bd">
        <slot name="content"></slot>
      </div>
      <slot name="ft">
        <!--<div class="ft" slot="ft">
          <a href="javscript:void(0)" class="btn make-sure" @click="sure">确定</a>
          <a href="javscript:void(0)" class="btn cancel" @click="close">取消</a>
        </div>-->
      </slot>
    </div>
    <div class="backdrop" @click="close"></div>
  </div>
  </transition>
</template>

<script>
  export default {
    name: "MyModal",
    props: {
      visible: {
        type: Boolean,
        default: false,
        required: true,
      },
      title: {
        type: String,
        default: '',
      }
    },
    watch:{
      visible:function(curVal) {
        if(curVal&&document.body.scrollHeight > window.innerHeight){
          $('body').addClass('backdrop-open')
        }else{
          $('body').removeClass('backdrop-open');
        }
      }
    },
    methods: {
      close() {
        this.$emit('update:visible', false)
      },
    }
  }
</script>

index.js

import Modal from './Modal.vue'
Modal.install=function(Vue){
  Vue.component(Modal.name,Modal)
}
export default Modal

main.js

import Modal from '@/components/common/modal'
Vue.use(Modal)

页面调用

<my-modal title="消息" :visible.sync="isVisible">
  <div slot="content">
    内容
  </div>
  <div slot="ft" class="ft">
    <a class="btn btn-primary" @click="sure">确定</a>
    <a class="btn btn-default" @click="isVisible=false">取消</a>
  </div>
</my-modal>

效果图：