先给大家上效果图

目前很多移动端都有此等模态框的出现，目前vue也有很多的组件库，比如滴滴打车ui、饿了么旗下的ui、mint ui等等，但是如果我们使用ui组件，也会很麻烦，下载安装，加上要引入很多的东西，有时候也会出现错误。我本人也使用过很多的框架，最终还是没有很满意的，修改起来也麻烦。本人封装的这个很简单的一个模态框使用起来很方便，你只需要在vue文件安装jq，引入文件即可，下来我来说下使用方法。

1、首先我们要在自己vue文件内安装jq:

npm install jquery

安装以后不需要去管它，不需要引入什么!

2、下面我们在.vue页面引入我们页面排版样式，class类不可修改，如果修改就要修改css文件内的类名，会麻烦的。确定按钮的功能自己给事件做功能即可。

<template>

    <div class="hello">

        <div class="Geyclick">点击</div>

        <div class="Modality">

        <div class="ModalityBlack"></div>

        <div class="ModalityMain">

            <p class="ModalityMainp">简单vue模态框</p>

            <div class="ModalityMainbut">

                <button class="ModalityAdd">取消</button>

                <button class="ModalityOpen">确定</button>

            </div>

        </div>

        </div>

        </div>

</template>

3、然后我们下载css和js文件并且引入页面内，我们从百度网盘内下载：

链接:https://pan.baidu.com/s/1uyG5QawjOSV3rXyuC22z9w    密码:lsjq

4、然后在文件内引入css和js文件即可

<script>

    import ' js文件路径 '

</script>

<style>

    @import ' css文件路径 '

</style>

为了考虑大家需要修改js或css代码，所以我没有压缩文件，可以随意修改样式。此文档是为新手准备，手机端布局的兼容性已为大家配置好，可直接调用。

如有需要可以加QQ或微信互相交流：QQ：848350511    微信：a13717840919