zoukankan      html  css  js  c++  java
  • vue--vant组件库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

  • 相关阅读:
    3-剑指Offer: 连续子数组的最大和
    2-剑指offer: 最小的K个数
    1-剑指offer: 数组中出现次数超过一半的数字
    django中运行定时任务脚本
    django+sqlite进行web开发(二)
    django+sqlite3进行web开发(一)
    TL-WDN5200H无线usb网卡在Linux上的使用
    比较好用的C++11在线编译器
    MarkDown中如何加入上标和下标
    3. 卷积神经网络(CNN)
  • 原文地址:https://www.cnblogs.com/vinieo/p/10178612.html
Copyright © 2011-2022 走看看