vue webpack 架构下使用 bootstrap 的模态框modal 做遮罩效果组件及应用
2021-06-04 07:03
标签：web 特效 nbsp pre 模态框 common close 注意 loading 一、写组件 二、使用组件 三、注意事项： 如果定义遮罩组件时，modal 的class中，增加了 fade （动画效果），显示遮罩后，如果快速要快速关闭遮罩，必须使用 setTimeout(that.closeMask,500) ,需等待特效完全展示完成后才能正常关闭。 vue webpack 架构下使用 bootstrap 的模态框modal 做遮罩效果组件及应用 标签：web 特效 nbsp pre 模态框 common close 注意 loading 原文地址：https://www.cnblogs.com/runner/p/12343719.htmltemplate>
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> 正在处理中，请稍候...span>
div>
div>
div>
div>
template>
script>
export default {
name: ‘Loadingpic‘,
props: {
},
data() {
return {
}
}
}
script>
style>
style>
.....
.....
//引入组件
import Loadingpic from ‘./common/Loadingpic.vue‘
//页面上局部注册
components:
{
Loadingpic
}//显示遮罩层
$jq("#mask").modal({
backdrop:"static"
});
//定义一个关闭遮罩方法，
closeMask:function(){
$jq("#mask").modal("hide");
}
文章标题：vue webpack 架构下使用 bootstrap 的模态框modal 做遮罩效果组件及应用
文章链接：http://soscw.com/index.php/essay/90297.html