vue2组件系列第十一节:Dialog 弹出框(高级应用)

这节课是Dialog弹出框的高级应用，我们将使用van-dialog组件实现比较复杂的交互-完成弹出登录界面的交互。这节我们暂且不去管登录的验证，只是完成前后端的一个交互哈，具体的验证我们将在以后的章节中去详细介绍，不是这节课的重点哈。

代码演示Dialog弹出框的登录交互：

需求介绍：

点击“登录”按钮后，弹出Dialog弹出框-即登录页面。页面里我们输入用户名和密码后，请求接口返回200数据，表示登录成功，关闭弹出框。

需求分析：

1.创建登录按钮

2.创建Dialog弹出框组件

3.点击“登录”后，弹出框的交互

4.创建接口

5.请求后返回数据

6.成功登录关闭弹出框

实操我们的需求：

1. 创建登录按钮和创建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: 当点击确认按钮时的事件。

1. 点击“登录”后，弹出框展示。这个比较好实现，只要改变isShow的值就可以实现效果：

onClick() {
 this.isShow = !this.isShow
}

1. 在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)

1. 请求后根据返回的数据执行操作

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

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油