vue--vant组件库Dialog弹出框

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Dialog 弹出框

安装vant UI框架：

cnpm install vant –-save-dev

导入组件-在main.js里：

import Vant from \'vant\';
import\'vant/lib/vant-css/index.css\';
Vue.use(\'Vant\')

Dialog弹出框我们并不陌生，项目中的活动规则啊，登录注册啊，分享啊等等都会使用到弹出框

弹出框和toast的区别是不能自动消失，因为往往弹出框里的内容比较多，甚至有些更复杂的交互

比如登录等，所以需要手动关闭，自然它就会有交互的按钮等

准备工作：

 创建一个页面: Dialog.vue

在router.js里配置 Dialog页面的路由

{
      path: \'/dialog\',
      name: \'dialog\',
      component: () => import(\'./views/Dialog.vue\')
 } 

在index.vue里添加一项

<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 弹出框：

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

原文链接：https://mp.weixin.qq.com/s/LqFbnf5IDeNt6aBINPFlkw

以上是 vue--vant组件库Dialog弹出框 的全部内容， 来源链接： utcz.com/z/376422.html

回到顶部