先给大家上效果图
目前很多移动端都有此等模态框的出现,目前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
网友评论