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

2021-06-04 07:03

阅读：710

标签：web 特效 nbsp pre 模态框 common close 注意 loading

一、写组件

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

三、注意事项：

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

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

标签：web 特效 nbsp pre 模态框 common close 注意 loading

原文地址：https://www.cnblogs.com/runner/p/12343719.html

上一篇：Kubernetes--Pod进阶局

下一篇：.NET Core之单元测试（一）：入门

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：vue webpack 架构下使用 bootstrap 的模态框modal 做遮罩效果组件及应用
文章链接：http://soscw.com/essay/90297.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章