http://www.jq22.com/jquery-info17973

http://www.jq22.com/demo/elementTab201801262311/

插件描述：基于elementui标签选项卡是一款vue选项卡插件制作多种标签选项卡，水平垂直选项卡切换代码。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>基于element-ui标签选项卡</title>

<link rel="stylesheet" href="css/element.min.css">

</head>

<body>

<div id="myVue">

	<h2>通用标签页，基于element-ui</h2>

	<p>1.基础用法</p>

	<template>

		<el-tabs v-model="activeName" @tab-click="handleClick">

			<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>

			<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>

			<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>

			<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>

		</el-tabs>

	</template>

	<p>2.选项卡样式</p>

	<template>

		<el-tabs v-model="activeName2" type="card" @tab-click="handleClick">

			<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>

			<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>

			<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>

			<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>

		</el-tabs>

	</template>

	<p>3.卡片化</p>

	<el-tabs type="border-card">

		<el-tab-pane label="用户管理">用户管理</el-tab-pane>

		<el-tab-pane label="配置管理">配置管理</el-tab-pane>

		<el-tab-pane label="角色管理">角色管理</el-tab-pane>

		<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>

	</el-tabs>

	<p>4.位置</p>

	<template>

		<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">

			<el-radio-button label="top">top</el-radio-button>

			<el-radio-button label="right">right</el-radio-button>

			<el-radio-button label="bottom">bottom</el-radio-button>

			<el-radio-button label="left">left</el-radio-button>

		</el-radio-group>

		<el-tabs :tab-position="tabPosition" style="height: 200px;">

			<el-tab-pane label="用户管理">用户管理</el-tab-pane>

			<el-tab-pane label="配置管理">配置管理</el-tab-pane>

			<el-tab-pane label="角色管理">角色管理</el-tab-pane>

			<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>

		</el-tabs>

	</template>

	<p>5.自定义标签页</p>

	<el-tabs type="border-card">

		<el-tab-pane>

			<span slot="label"><i class="el-icon-date"></i> 我的行程</span> 我的行程

		</el-tab-pane>

		<el-tab-pane label="消息中心">消息中心</el-tab-pane>

		<el-tab-pane label="角色管理">角色管理</el-tab-pane>

		<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>

	</el-tabs>

	<p>6.动态增减标签页</p>

	<div style="margin-bottom: 20px;">

		<el-button size="small" @click="addTab(editableTabsValue2)">

			add tab

		</el-button>

	</div>

	<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">

		<el-tab-pane v-for="(item, index) in editableTabs2" :key="item.name" :label="item.title" :name="item.name">

			{{item.content}}

		</el-tab-pane>

	</el-tabs>

</div>

<script src="http://www.jq22.com/jquery/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>

</body>

</html>

　　

tabs 标签样式的更多相关文章

  1. 5) 十分钟学会android--ActionBar知识串烧

    建立ActionBar Action bar 最基本的形式,就是为 Activity 显示标题,并且在标题左边显示一个 app icon.即使在这样简单的形式下,action bar对于所有的 act ...

  2. Extjs5 tabs实例

    <%@ page language= "java" contentType ="text/html; charset=UTF-8"     pageEnc ...

  3. jQuery-easyui实现关闭全部tabs

    有时候当我们打开很多tabs选项卡时,要关闭它只能一个一个的进行关闭,显然太麻烦,这时可以在选项卡的最右边添加一个按钮 实现关闭全部. function openTab(text, url, icon ...

  4. EasyUI Tabs绑定右键

    JS:             /*为选项卡绑定右键*/                 $("#tabs").tabs({                     onConte ...

  5. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...

  6. wex5平台放入tabs组件后运行时显示空白

    用tabs组件设置为充满布局时--给window组件增加一个class:x-full-screen

  7. jquery.UI.tabs

    今天对jquery UI的tabs进行了进一步的了解,目的是想把死板的切换效果变得动感点,不过经过这进一步的了解,发现它并不合适或都说并不能实现我想要的效果,我想要的效果就是类似淘宝商城的banner ...

  8. AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

    tabs控件使用uib-tabset指令和uib-tab指令,效果是这样的: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo ...

  9. easyui tabs update后tab上关闭图标失效的解决方案

    问题:使用easyui的tabs组件的时候,调用了tab的update方法,更新后的tab标签上的关闭图标失效 使用的js文件是1.3版本的jquery.easyui.min.js文件,通过读源文件发 ...

随机推荐

  1. jmeter 签名MD5生成

    请求接口需要同时发送签名,签名定义为: 可以看出签名就是把用户的密码 .用户名 和签名key生成一个md5串就可以了 刚好jmeter 有个md5 生成,生成前需要获取name ,password k ...

  2. MySQL的DDL语句、DML语句与DCL语句

    背景:近几年,开源数据库逐渐流行起来.由于具有免费使用.配置简单.稳定性好.性能优良等优点,开源数据库在中低端应用上占据了很大的市场份额,而 MySQL 正是开源数据库中的杰出代表.MySQL 数据库 ...

  3. Mysql 导入CSV数据 语句 导入时出现乱码的解决方案

    1. 登陆mysql 2. use testdb 3. 执行导入语句 LOAD DATA LOCAL INFILE 'd://exportedtest2.csv' INTO TABLE usertab ...

  4. OAuth 2.0介绍

    简介 OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版. 一.应用场景 为了理解OAuth的适用场合,让我举一个假设的例子. 有一个&q ...

  5. iOS底层原理总结 - 探寻block的本质（一）

        面试题 block的原理是怎样的?本质是什么? __block的作用是什么?有什么使用注意点? block的属性修饰词为什么是copy?使用block有哪些使用注意? block在修改NSMu ...

  6. github pull request

    https://stackoverflow.com/questions/14680711/how-to-do-a-github-pull-request https://help.github.com ...

  7. Android Service GetSystemService

    http://blog.sina.com.cn/s/blog_71d1e4fc0100o8qr.html http://blog.csdn.net/bianhaohui/article/details ...

  8. 19、UWP 新特性（Creator Update）

    Build 版本 15063+ 1.能够为 CompositionObjects 的其他属性(阴影,裁剪,属性集合)添加动画 2.当设备插上电源的时候,通过 Extended Excution Ses ...

  9. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-3 模态弹出框

    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...

  10. 使用ViewPager和Fragment实现滑动导航

    ViewPage是android-support-v4.jar包提供的用于页面滑动的库,android-support-v4.jar是google推荐使用的一个类库,在项目中使用之前,你必须其添加到项 ...