安裝vant UI框架：javascript
cnpm install vant –-save-dev
導入組件-在main.js裏：css
import Vant from 'vant'; import'vant/lib/vant-css/index.css'; Vue.use('Vant')
Dialog彈出框咱們並不陌生，項目中的活動規則啊，登陸註冊啊，分享啊等等都會使用到彈出框vue
彈出框和toast的區別是不能自動消失，由於每每彈出框裏的內容比較多，甚至有些更復雜的交互java
好比登陸等，因此須要手動關閉，天然它就會有交互的按鈕等npm
準備工做：api
建立一個頁面: Dialog.vue框架
在router.js裏配置 Dialog頁面的路由函數
{ path: '/dialog', name: 'dialog', component: () => import('./views/Dialog.vue') }
在index.vue裏添加一項post
<a href="javascript:void(0)" @click="$router.push('/dialog')"> <van-col span="6" class="marb20"> <van-icon name="pending-deliver" /> <div>Dialog 彈出框</div> </van-col> </a>
代碼演示Diaglog 彈出框：this
Dialog組件支持函數調用和組件調兩種方式：
函數調用：顧名思議就是直接一個方法就能夠將彈出框展現出來，不須要其它任何操做，是比較基礎的應用
組件調用：以組件的形式調用，須要在DOM裏插入<van-dialog>標籤，是一種比較高級的用法，一般會伴隨着比較複雜的交互
這節首先講下比較基礎的方法：函數調用Dialog
DOM裏建立一個按鈕，來觸發彈出框的顯示：
<van-button type="primary" @click="onClick">彈出</van-button>
咱們在項目開發的時候，遇到的最簡單的彈出框就是內容，確認按鈕還有蒙層三個元素
蒙層默認狀況都是加上去的，確認按鈕也是
須要說明的一點是，在咱們安裝上vant框架的時候，$dialog會自動掛載到Vue的prototype上，因此直接調用就能夠，這點跟toast同樣
this.$dialog.alert({ message: "hello world", })
咱們還能夠給它多作些點綴，好比加個title啊，加個取消按鈕啊
若是仍是延用$dialog.alert這個方法添加了「取消按鈕」的設置，還須要加上catch()，不然點擊取消時會報錯
this.$dialog.alert({ title: "Hello World!", //加上標題 message: "hello world", //改變彈出框的內容 showCancelButton: true //展現取水按鈕 }) .then(() => { //點擊確認按鈕後的調用 console.log("點擊了確認按鈕噢") }) .catch(() => { //點擊取消按鈕後的調用 console.log("點擊了取消按鈕噢") })
實現上圖的效果其實還有一種更簡單的方式，這種方式不須要設置「顯示取消按鈕」
是能夠自動顯示出來的，這個方法就是使用$dialog.confirm()
this.$dialog.confirm({ title: "hello", message: "hello world", confirmButtonText: "你好", //改變確認按鈕上顯示的文字 cancelButtonText: "你壞" //改變取消按鈕上顯示的文字 }).then(()=> { console.log("點擊了確認按鈕噢") }).catch(() => { console.log("點擊了取消按鈕噢") })
還有一些其它比較有用的option選項
overlay：是否顯示蒙層，默認都是開啓的，通常不用去理會
closeOnClickOverlay：點擊蒙層時是否關閉彈框。默認是關閉的
但若是咱們只有一個按鈕且不須要有其它交互時，咱們通常是將這個設置開啓，這樣用戶體驗較好
lockScroll：是否鎖定背景滾動。默認都是禁止背景滾動的
beforeClose：關閉前的回調函數，咱們在下節課會具體用到
代碼演示Dialog彈出框的登陸交互：
需求介紹：
點擊「登陸」按鈕後，彈出Dialog彈出框-即登陸頁面
頁面裏咱們輸入用戶名和密碼後，請求接口返回200數據，表示登陸成功，關閉彈出框
需求分析：
1.建立登陸按鈕
2.建立Dialog彈出框組件
3.點擊「登陸」後，彈出框的交互
4.建立接口
5.請求後返回數據
6.成功登陸關閉彈出框
實操咱們的需求：
建立登陸按鈕和建立Dialog彈出框組件：
<van-button type="primary" @click="onClick">登陸</van-button> <van-dialog v-model="isShow" show-cancel-button :beforeClose="beforeClose" > <van-field v-model="userName" label="用戶名" placeholder="請輸入姓名" /> <van-field v-model="userPass" label="密碼" placeholder="請輸入密碼" /> </van-dialog>
van-field是一個輸入框的組件，即爲DOM裏的input，這也會在之後的章節中作詳細介紹，這裏不作過多介紹，知道是什麼就能夠了。
beforeClose：至關於一個鉤子函數，會在關閉以前執行一些操做。後面的beforeClose是一個函數。會有兩個參數，action, don。
action是點擊的目標的名稱，若是點擊了"確認"按鈕，則action爲confirm；
若是點擊了"取消"按鈕，則action爲cancel。
done是執行關閉的操做。
confirm: 當點擊確認按鈕時的事件。
點擊「登陸」後，彈出框展現。這個比較好實現，只要改變isShow的值就能夠實現效果：
onClick() { this.isShow = !this.isShow }
在mock.js裏建立接口
將這個接口設定爲「/login/api」，咱們還須要在這個接口裏接收用戶名和密碼兩個參數，這兩個參數是用options來接收
接收過來的數據是字符串格式的，咱們須要用JSON.parse將接收的數據轉換成JSON對象，咱們才能夠對其進行判斷等操做
過多的操做在這裏不作擴展，只簡單判斷傳輸過來的數據是否有值，若是有值則返回status: 200
const _res = function(options) { console.log(options.body) let name = JSON.parse(options.body).userName let pass = JSON.parse(options.body).userPass if(name && pass) { return {status: 200} } } Mock.mock('/login/api', 'post', _res)
請求後根據返回的數據執行操做
beforeClose(action, done) { if(!this.userName || !this.userPass) { this.$toast("請輸入用戶名和密碼") done(false) //不關閉彈框 } if(action === 'confirm') { setTimeout(done, 1000) console.log() } else if(action === 'cancel') { done() //關閉 } }
當點擊「確認」按鈕時，發送請求，請求回來的數據爲200時，提示成功而且關閉彈出框
組件中若是屬性值是布爾值，則其在組件裏賦值須要綁定上，即須要加上":"
事件和方法的區別：事件是觸發的行爲，如同click等，展現在DOM標籤裏，便是「=」左邊的內容
方法是實現某一具體目的的操做，即爲"="右面的內容，也就是寫在methods裏的內容