安装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里的内容