Connect_logo_6.png 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码

多种element-ui标签选项卡插件

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-01-13
多种基于element-ui标签选项卡插件,vue选项卡插件制作的标签选项卡代码,支持水平垂直选项卡切换效果。


js代码

<script type="text/javascript" src="js/vue.min.js"></script>
<script src="js/element.min.js"></script>
<script type="text/javascript">
	new Vue({
		el: '#myVue',
		data() {
			return {
				activeName: 'second',
				activeName2: 'first',
				tabPosition: 'top',
				editableTabsValue2: '2',
				editableTabs2: [{
					title: 'Tab 1',
					name: '1',
					content: 'Tab 1 content'
				}, {
					title: 'Tab 2',
					name: '2',
					content: 'Tab 2 content'
				}],
				tabIndex: 2
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			},
			addTab(targetName) {
				let newTabName = ++this.tabIndex + '';
				this.editableTabs2.push({
					title: 'New Tab',
					name: newTabName,
					content: 'New Tab content'
				});
				this.editableTabsValue2 = newTabName;
			},
			removeTab(targetName) {
				let tabs = this.editableTabs2;
				let activeName = this.editableTabsValue2;
				if(activeName === targetName) {
					tabs.forEach((tab, index) => {
						if(tab.name === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if(nextTab) {
								activeName = nextTab.name;
							}
						}
					});
				}

				this.editableTabsValue2 = activeName;
				this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
			}
		}
	})
</script>