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

多种基于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>

在线预览
资源均来自第三方，谨慎下载，前往第三方网站下载