vue中的模态对话框组件实现过程


Posted in Javascript onMay 01, 2018

写在前面

对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们很有必要写成一个通用的组件形式,在需要的地方之间引用。

现在我们来动手实现一个对话框组件 ,按照之前的习惯,我们先看下实现的效果图

vue中的模态对话框组件实现过程
vue中的模态对话框组件实现过程

1.首先,通过template定义一个组件

<template id="dialog">
    <div class="dialog">
      <div class="dialog_mask"></div>
      <div class="dialog_container">
        <div class="dialog_content">
          <div class="dialog_content_top">提示内容</div>
          <div class="dialog_btn">
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">确定</a>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">取消</a>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="login">去登录</a>
          </div>
        </div>
      </div>
    </div>
  </template>

并添加相应的对话框样式

/*对话框style*/
    .dialog{
    }
    .dialog_mask{
      position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
    }
    .dialog_container{
        background: #fff;
  width: 300px;
  height: 120px;
  position: relative;
  border-radius: 10px;
  margin: 0 auto;
    }
    .dialog_content{
      text-align: center;
  padding-top: 30px;
    }
    .dialog_btn{
      margin-top: 20px;
    }
    .dialog_btn a{
      background: yellow;
        padding: 2px 30px;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
    width: 50px;
  display: inline-block;
    }
    .dialog_btn a:nth-child(2){
        margin-left: 20px;
    }

2.使用Vue.component注册一个全局Vue组件,我们将这个组件叫做v-dialog,然后通过template指定这个组件

Vue.component('v-dialog', {
      template: '#dialog',
      data:function(){
        return {
        }
      },
      methods:{
      },
      created:function(){
      }
    })

3.最后,在我们需要的地方通过v-dialog标签来引用这个组件

<v-dialog></v-dialog>

创建一个vue组件步骤大致就是这样,但是,父组件和子组件该怎么进行通信呢?

这里主要使用props传递数据到子组件

修改如下上面的代码,添加props属性

Vue.component('v-dialog', {
      template: '#dialog',
          props:['dialogShow','msg'],
      data:function(){
        return {
        }
      },
      methods:{
      },
      created:function(){
      }
    })

可以看到我们是通过字符串数组来定义prop的,除此之外我们还可以用对象的形式来定义prop,用来为组件的 prop 指定验证规则,如果类型错误,在vue中会有警告,其中 type的值可以是这些:String Number Boolean Function Object Array Symbol

props: {
    name: String,
    showDialog: {
      type: Boolean,
      default: false
    }
   }

在组件模板中通过 v-if="showDialog"判断是否显示或隐藏对话框,通过 v-text="msg"绑定对话框提示内容,

v-if="type==1"用于判断对话框类型 ,显示相应的按钮,代码如下:

<template id="dialog">
    <div class="dialog" v-if="showDialog">
      <div class="dialog_mask"></div>
      <div class="dialog_container">
        <div class="dialog_content">
          <div class="dialog_content_top" v-text="msg">提示内容</div>
          <div class="dialog_btn">
            <a v-if="type==1" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">确定</a>
            <a v-if="type==2" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="close">取消</a>
            <a v-if="type==2" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn" @click="login">去登录</a>
          </div>
        </div>
      </div>
    </div>
  </template>

在引用组件的地方添加 :show-dialog="showDialog" :msg="msg" :type="type"这几个属性,将其值传递给对话框组件

<v-dialog :show-dialog="showDialog" :msg="msg" :type="type"></v-dialog>

需要注意的是showDialog在组件中需要写成show-dialog这种形式,不然会获取不到数据

 我们在data中定义这些属性

data: {
        msg:'',
        showDialog:false,
        type:1,// 提示类型 1单按钮提示框 2双按钮提示框
      },

然后,我们在按钮点击提交的时候触发弹出对话框事件

submit:function(){
          //弹出对话框组件
          if(!this.isLogin){//未登录
            this.msg = "请先去登录再领取金额";
            this.showDialog = !this.showDialog;
            this.type = 2;
            return;
          }
          if(this.amount){
            if(this.amount<1 || this.amount>1000){
              this.msg = "输入金额不能低于1元大于1000";
              this.showDialog = !this.showDialog;
              this.type = 1;
            }else{
              this.msg = "领取成功,请在账户中心查看";
              this.showDialog = !this.showDialog;
              this.type = 1;
            }
          }else{
            this.msg = "领取金额不能为空";
            this.showDialog = !this.showDialog;
              this.type = 1;
          }
        }

这样,我们就能弹出对话框组件了,通过msg设置不同的提示消息

那么,我们该怎么关闭这个对话框呢 ,这里就涉及到子组件需要向父组件传递信息了

主要通过$emit来触发父类事件,如:this.$emit('close-dialog');
然后在父类通过v-on来监听子类触发的事件,v-on:close-dialog="closeDialog" ,也可简写写成@close-dialog="closeDialog"

代码如下:

在v-dialog标签中添加@close-dialog="closeDialog"监听子组件触发的事件

<v-dialog :show-dialog="showDialog" :msg="msg" :type="type" @close-dialog="closeDialog"></v-dialog>

然后定义closeDialog函数修改showDialog 的状态         

closeDialog:function(){//关闭对话框
          this.showDialog = false;
        }

这样同样也需要注意的是监听函数closeDialog需要写成close-dialog形式

ok,以上我们就实现了一个对话框组件

写在后面

我们还可以使用slot来分发内容,这样可以用来混合父组件的内容与子组件自己的模板,从而实现组件的高度复用,使得组件更加灵活关于slot的用法可以查看文档https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容

完整代码已上传到github,地址https://github.com/fozero/front-awesome/blob/master/vue/components/dialog.html,欢迎star~,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
分析JS中this引发的bug
Dec 12 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
小程序实现侧滑删除功能
Jun 25 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 #Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 #Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 #Javascript
如何获取TypeScript的声明文件.d.ts
May 01 #Javascript
Vue项目中使用Vux的安装过程
May 01 #Javascript
在Vue项目中使用d3.js的实例代码
May 01 #Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 #Javascript
You might like
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
range 标准化之获取
2011/08/28 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python本地与全局命名空间用法实例
2015/06/16 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
Tensorflow 实现释放内存
2020/02/03 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python双链表原理与实现方法详解
2020/02/22 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书