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. Java：集合，对列表（List）中的自定义对象按属性（字段）排序（正序、倒序）的方法

    1. 要求 对列表(List)中的自定义对象,要求能够按照对象的属性(字段)进行排序(正序.倒序). 如:用户对象(Member)有用户名(username).级别(level).出生日期(birth ...

  2. keepAlive参数详解

    最近研究netty5.0中 发现http例子里面有关于KeepAlive的处理,于是研究了下 http://www.nowamagic.net/academy/detail/23350305

  3. javascript原生代码取单选框的值

    网上搜索到的,项目中正好用到,先记下来,以后直接从自己的博客上复制粘贴!!! //取单选框选择中的值,传入单选框的name function getRadioBoxValue(radioName) { ...

  4. 【ARM】定时器

    PWM定时器 PWN:脉冲宽度调制 每个定时器都有一个专用的由定时器时钟驱动的16位递减计数器.当递减计数器的计数值达到0的时候,就会产生定时中断请求来通知CPU定时器操作完成.当定时器递减计数器达到 ...

  5. LeetCode: Insertion Sort List 解题报告

    Insertion Sort List Sort a linked list using insertion sort. SOLUTION: 使用一个dummynode 创建一个新的链,将旧的节点插入 ...

  6. 从 shell 眼中看世界

    (字符) 展开每一次你输入一个命令,然后按下 enter 键,在 bash 执行你的命令之前, bash 会对输入的字符完成几个步骤处理.我们已经知道两三个案例,怎样一个简单的字符序列,例如 “*”, ...

  7. 设计模式之开放-封闭原则（引申出Objective-C中继承、Category、Protocol三者的区别，这点面试常问）

    开放封闭原则(OCP原则The Open-Closed Principle)是面向对象的核心设计所在.它是说,软件开发实体(类.模块.函数等)应该可以扩展,但是不能修改. 这个原则有两个特征,一个是说 ...

  8. windows下html2jade批量转换

    将项目中的代码转换为jade,使用html2jade批量转换 @echo off SETLOCAL ENABLEDELAYEDEXPANSION for %%i in (*.html) do ( ht ...

  9. MBCS与Unicode的转换

    一.绪 其实刚开始编程的时候我不太喜欢用Unicode编码,所以比较喜欢 VC6.0,即使使用VS2010,也会设置为未设置模式. 后来,没办法的接触了些Unicode的编程的东西,必须得研究字符集的 ...

  10. Winsock解析

    一.基本知识 1.Winsock,一种标准API,一种网络编程接口,用于两个或多个应用程序(或进程)之间通过网络进行数据通信.具有两个版本: Winsock 1: Windows CE平台支持. 头文 ...