先給大家上效果圖

目前很多移動端都有此等模態(tài)框的出現(xiàn)，目前vue也有很多的組件庫，比如滴滴打車ui、餓了么旗下的ui、mint ui等等，但是如果我們使用ui組件，也會很麻煩，下載安裝，加上要引入很多的東西，有時候也會出現(xiàn)錯誤。我本人也使用過很多的框架，最終還是沒有很滿意的，修改起來也麻煩。本人封裝的這個很簡單的一個模態(tài)框使用起來很方便，你只需要在vue文件安裝jq，引入文件即可，下來我來說下使用方法。

1、首先我們要在自己vue文件內(nèi)安裝jq:

npm install jquery

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

2、下面我們在.vue頁面引入我們頁面排版樣式，class類不可修改，如果修改就要修改css文件內(nèi)的類名，會麻煩的。確定按鈕的功能自己給事件做功能即可。

<template>

? ? <div class="hello">

? ? ? ? <div class="Geyclick">點擊</div>

? ? ? ? <div class="Modality">

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

? ? ? ? <div class="ModalityMain">

? ? ? ? ? ? <p class="ModalityMainp">簡單vue模態(tài)框</p>

? ? ? ? ? ? <div class="ModalityMainbut">

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

? ? ? ? ? ? ????<button class="ModalityOpen">確定</button>

? ? ? ? ????</div>

? ? ? ? </div>

? ? ? ? </div>

? ? ? ? </div>

</template>

3、然后我們下載css和js文件并且引入頁面內(nèi)，我們從百度網(wǎng)盤內(nèi)下載：

鏈接:https://pan.baidu.com/s/1uyG5QawjOSV3rXyuC22z9w ? ?密碼:lsjq

4、然后在文件內(nèi)引入css和js文件即可

<script>

? ? import ' js文件路徑 '

</script>

<style>

? ? @import ' css文件路徑 '

</style>

為了考慮大家需要修改js或css代碼，所以我沒有壓縮文件，可以隨意修改樣式。此文檔是為新手準(zhǔn)備，手機(jī)端布局的兼容性已為大家配置好，可直接調(diào)用。

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