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

多种element-ui标签选项卡插件-精品资源网
多种element-ui标签选项卡插件
此内容为免费资源,请登录后查看
0
免费资源

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

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容