vue 封装dialog_用vue实现各类弹出框组件

导读热词

2d2c3220c9079e8d717c8015a288f4a5.png图片描述" title="">

简单介绍一下vue中常用dialog组件的封装:

实现动态传入内容,实现取消,确认等回调函数。

首先写一个基本的弹窗样式,如上图所示。

在需要用到弹窗的地方中引入组件:

import dialogBar from './dialog.vue'
components:{

'dialog-bar': dialogBar,},

<dialog-bar>dialog-bar>
点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示

在弹窗组件中定义一个value值:v-model="sendVal",sendVal初始值为false。

在打开弹窗的方法中赋值:

openMask(){

this.sendVal = true;

}

在dialog.vue组件中做如下操作:

props: {

value: {} // 注意此处获取的value对应的就是组件标签中的v-model

}

定义一个showMask变量用于控制是否显示弹窗

mounted(){

this.showMask = this.value; // 在生命周期中,把获取的value值获取给showMash

},watch:{

value(newVal,oldVal){

this.showMask = newVal; // 监测value的变化,并赋值。

},showMask(val) {

this.$emit('input',val); // 此处监测showMask目的为关闭弹窗时,重新更换value值,注意emit的事件一定要为input。

}

},

而要想关闭弹窗,只需要定义一个方法:

closeMask(){

this.showMask = false;

},

此刻已经可以实现弹窗的显示与退出。

下面我们要实现的是动态添加标题,内容等,在组件标签中加入title,content:

<dialog-bar title="我是标题" content="我是内容">dialog-bar>

可以运用vue的数据双向绑定,更换title,content。

在dialog.vue中获取内容:

props: {

value: {},content: {

type: String,default: ''

},title: {

type: String,

<div class="dialog-title">{{title}}div>

<div class="content" v-html="content">div>

我们可以运用同样的原理来获取不同按钮中的自定名称。

下面我们利用传入的不同type来确定不同的按钮,并提供不同的回调函数。

-bar title="我是标题" content="我是内容" type="danger" dangerText="这是删除按钮">-bar>

如传入type为danger,我们可以在dialog.vue中props获取type,并定义一个如下按钮:

<div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn">

{{dangerText}}

div>

dangerBtn(){

this.$emit('danger'); // 发送一个danger事件作为回调函数

this.closeMask(); // 关闭弹窗

},

在标签中定义danger的回调并做一些操作:

-bar title="我是标题" content="我是内容" type="danger" dangerText="这是删除按钮" @danger="clickDanger()">-bar>
clickDanger(){

console.log("这里是回调函数")

},

同样原理可以获取和增添一些其他的操作:

 props: {

value: {},// 类型包括 defalut 默认, danger 危险, confirm 确认,

type:{

type: String,default: 'default'

},

content: {

type: String,

default: ''

},title: {

type: String,confirmText: {

type: String,

default: '确认'

},cancelText: {

type: String,

default: '取消'

},dangerText: {

type: String,

default: '删除'

},

<div class="btns">

<div v-if="type != 'confirm'" class="default-btn" @click="closeBtn">

{{cancelText}}

div>

<div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn">

{{dangerText}}

div>

<div v-if="type == 'confirm'" class="confirm-btn" @click="confirmBtn">

{{confirmText}}

div>

div>

相关文章

总结

以上是编程之家为你收集整理的用vue实现各类弹出框组件全部内容,希望文章能够帮你解决用vue实现各类弹出框组件所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

如您喜欢交流学习经验,点击链接加入交流1群:1065694478(已满)交流2群:163560250

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值