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");
    }