vue中的模态对话框组件实现过程
写在前面对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们很有必要写成一个通用的组件形式,在需要的地方之间引用。 现在我们来动手实现一个对话框组件 ,按照之前的习惯,我们先看下实现的效果图 1.首先,通过template定义一个组件并添加相应的对话框样式 2.使用Vue.component注册一个全局Vue组件,我们将这个组件叫做v-dialog,然后通过template指定这个组件3.最后,在我们需要的地方通过v-dialog标签来引用这个组件创建一个vue组件步骤大致就是这样,但是,父组件和子组件该怎么进行通信呢? 这里主要使用props传递数据到子组件 修改如下上面的代码,添加props属性 可以看到我们是通过字符串数组来定义prop的,除此之外我们还可以用对象的形式来定义prop,用来为组件的 prop 指定验证规则,如果类型错误,在vue中会有警告,其中 type的值可以是这些:String Number Boolean Function Object Array Symbol 在组件模板中通过 v-if="type==1"用于判断对话框类型 ,显示相应的按钮,代码如下: 在引用组件的地方添加 : 需要注意的是showDialog在组件中需要写成show-dialog这种形式,不然会获取不到数据 我们在data中定义这些属性 然后,我们在按钮点击提交的时候触发弹出对话框事件 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来触发父类事件,如: 代码如下: 在v-dialog标签中添加@close-dialog="closeDialog"监听子组件触发的事件 然后定义closeDialog函数修改showDialog 的状态 这样同样也需要注意的是监听函数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~,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |