vue webpack 架构下使用 bootstrap 的模态框modal 做遮罩效果组件及应用

一、写组件

<template>
    <!--这里modal 如果有fade 类，则关闭时需要有等待时间，否则不能关闭透明层，需要使用setTimeout(that.closeMask,500) 等500毫秒才能正常关闭-->
    <div id="mask" class='modal' role="dialog">
       <div class="modal-dialog modal-dialog-centered">
           <div class="modal-content" > 
            <div class="modal-body" style="text-align: center;">
                <img  src="../../assets/pic/loading.gif" alt="" >
                <span>&nbsp;&nbsp;正在处理中，请稍候...</span>
            </div>
           </div>
           </div>
    </div>
</template>

<script>
    export default {
        name: 'Loadingpic',
        props: {
        },
        data() {
            return {
                
            }
        }
        }
</script>

<style>
</style>

二、使用组件

<template>
  .....
     <Loadingpic></Loadingpic>
.....
</template>

//引入组件
import Loadingpic from './common/Loadingpic.vue'

//页面上局部注册
components: 
        {
            Loadingpic
        }

//显示遮罩层 
 $jq("#mask").modal({
        backdrop:"static"
    });

//定义一个关闭遮罩方法，
closeMask:function(){
    $jq("#mask").modal("hide");
    }

三、注意事项：

  如果定义遮罩组件时，modal 的class中，增加了 fade （动画效果），显示遮罩后，如果快速要快速关闭遮罩，必须使用 setTimeout(that.closeMask,500) ,需等待特效完全展示完成后才能正常关闭。