使用vue实现各类弹出框组件_vue,vue头部导航动态点击处理方法_vue金沙网址

1:DATA中两个变量,

使用vue实现各类弹出框组件_vue,vue头部导航动态点击处理方法_vue金沙网址。简单介绍一下vue中常用dialog组件的封装:

data: { nav:['头条1','头条2'], ins:0,//记录当前点击的INDEX },

 {{item}}

topClick:function{ var t=this; t.ins=i; },

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

ps:下面看下vue实现动态头部

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

h5项目中,经常用到的头部是样式是一致的,只是左右按钮和中间标题会不一致。

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

vue主打组件化,为了减少代码冗余,可以将头部提取成一个单独的组件。接下来考虑是否需要左右按钮,是否固定在页面上不动,中间标题是否为动态。

import dialogBar from './dialog.vue'components:{ 'dialog-bar': dialogBar,},

先写一个简单的头部,position设置成变量customFixed。左右按钮通过来控制。中间标题设置成变量customTitle通过父子组件传值过来。

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

设置好样式以后给customFixed和customTitle默认值和类型。

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

   {{customTitle}}   export default { name: "my-header", props:{ customTitle : { type : String, default : '标题' }, customFixed: { type: Boolean, default: false } } }#header{ width: 100%;height: 40px;background: #666;color: white;text-align: center;line-height: 40px; position: absolute;left:0;top: 0;z-index: 10;} #header button {height: 100%;padding: 0 50px;} #header button:nth-of-type{float: left} #header button:nth-of-type{float: right}在用到头部的地方:   返回 主页   

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

总结

openMask(){ this.sendVal = true;}

以上所述是小编给大家介绍的vue头部导航动态点击处理方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

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

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

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

mounted(){ this.showMask = this.value; // 在生命周期中,把获取的value值获取给showMash},watch:{ value{ this.showMask = newVal; // 监测value的变化,并赋值。 }, showMask { this.$emit; // 此处监测showMask目的为关闭弹窗时,重新更换value值,注意emit的事件一定要为input。 }},

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

closeMask(){ this.showMask = false;},

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

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

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

在dialog.vue中获取内容:

props: {value: {}, content: { type: String, default: '' }, title: { type: String, default: '' },},{{title}}

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

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

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

 {{dangerText}}dangerBtn(){ this.$emit; // 发送一个danger事件作为回调函数 this.closeMask(); // 关闭弹窗},

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

clickDanger(){ console.log},

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

 props: { value: {}, // 类型包括 defalut 默认, danger 危险, confirm 确认, type:{ type: String, default: 'default' }, content: { type: String, default: '' }, title: { type: String, default: '' }, confirmText: { type: String, default: '确认' }, cancelText: { type: String, default: '取消' }, dangerText: { type: String, default: '删除' }, },  {{cancelText}}   {{dangerText}}   {{confirmText}} 

点击此处去github下载弹窗代码:

总结

以上所述是小编给大家介绍的使用vue实现各类弹出框组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

发表评论

电子邮件地址不会被公开。 必填项已用*标注