注册 登录 充值会员 退出
联系客服 毕业设计 java源码 PHP源码
充值

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

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2023-05-23
多种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>

关注公众号,免费赠送安装视频教程、环境和学习视频,后面会不断更新。