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. 浅谈Mysql 表设计规范(转)

    本文首先探讨下数据库设计的三大范式,因为范式只是给出了数据库设计的原则,并没有告诉我们实际操作中应该怎样操作,应该注意什么,所以我们还会谈下实际工作中需要注意的具体操作问题. 三大范式 首先放出三大范 ...

  2. jmeter 正则获取参数集合和ForEach控制器结合使用

    怎么把第一个请求获取的返回的多个id,在第二个请求中逐个以单个id作为请求参数来请求? 为了解决这个问题,模拟下该场景 1.请求www.163.com 主页,获取响应中的所有数字,这个获取的数字集合暂 ...

  3. 使用OkHttpClient处理json请求处理的方式

    今天遇到一个问题,重构老系统时,前端传递的参数是一个json,controller层可以用@ResponseBody来接收. 因为新系统用的是spring cloud这一套,调用其他服务使用的是fei ...

  4. [fixed] 解决 slf4j + log4j eclipse 可以打印日志，而在云服务器上不能打印

    今天发现服务上没有打印任何日志,而log4j已经设置为了INFO 很奇怪,在eclipse中是可以打印的,也能输出到单独的日志中 后来发现原来是冲突了 把log4j注释掉即可 保留slf4j即可

  5. Xilinx官网查询各个版本软件的手册

    在Xilinx官网查询各个版本软件的手册需要点击 See All Versions

  6. [nginx]盗链和防盗链场景模拟实现

    盗链环境模拟 http://www.daolian.com/index.html 这个页面盗用http://www.maotai.com/qq.jpg这个站点页面的图. <!doctype ht ...

  7. 【Unity】第10章 Mecanim动画系统

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 Unity提供了两种动画系统:一种是早期版本提供的旧版(Legacy)动画系统,旧版本(Legacy)以后将逐步被淘汰掉 ...

  8. 菜鸟学SSH（六）——Spring事务管理

    Spring是SSH中的管理员,负责管理其它框架,协调各个部分的工作.今天一起学习一下Spring的事务管理.Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.Tran ...

  9. Fluent UDF【5】：第一个UDF

    这里以一个简单的初始化案例来描述UDF的使用过程. 0 Fluent中的Patch Fluent中提供了全域初始化以及局部Patch功能.对于整体区域的全局初始化可以采用starndard及hybri ...

  10. (原创)c++11中的日期和时间库

    c++11提供了日期时间相关的库chrono,通过chrono相关的库我们可以很方便的处理日期和时间.c++11还提供了字符串的宽窄转换功能,也提供了字符串和数字的相互转换的库.有了这些库提供的便利的 ...