一、写组件

<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) ,需等待特效完全展示完成后才能正常关闭。