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. springboot 中使用Druid 数据源提供数据库监控

    一.springboot 中注册 Servlet/Filter/Listener 的方式有两种,1 通过代码注册 ServletRegistrationBean. FilterRegistration ...

  2. 如何不使用Navigator空间实现跳转页面？

    //引入 Loading页面 主页面 登录页等页面组件 constructor(props) { super(props); this.state = { 登录状态: 等待检查 }; } compon ...

  3. 给Java开发人员的Play Framework(2.4)介绍 Part1：Play的优缺点以及适用场景

    1. 关于这篇系列 这篇系列不是Play框架的Hello World,由于这样的文章网上已经有非常多. 这篇系列会首先结合实际代码介绍Play的特点以及适用场景.然后会有几篇文章介绍Play与Spri ...

  4. 牛腩记账本core版本源码

    很简单的一个记账本项目,无非就是数据库的增删查改,采用vs2017 + asp.net core + mysql + dapper + layui, 其中访问mysql数据库用的是dapper, 界面 ...

  5. 绑定DDL控件方法

    刚刚写的,用在项目中,先记下来,备忘: 下面是调用方式:

  6. webBrowser获取取Cookie不全的解决方法

    //取当前webBrowser登录后的Cookie值           [DllImport("wininet.dll", CharSet = CharSet.Auto, Set ...

  7. 常用的NodeJS模块

    图片处理 1.Manipulate images 官网:http://github.com/aheckmann/gm ImageMagick和GraphicsMagick主要用于图片的创建.编辑.合成 ...

  8. （原创）C++11改进我们的程序之简化我们的程序（一）

    C++11在很多方面可以简化我们的程序开发,我会在“简化我们的程序”这一系列的博文中一一讲到,敬请关注.这次要讲的是:C++11如何通过获取函数模板的返回值类型来简化我们的程序.在谈到简化之前,我们先 ...

  9. python(42)：进制转换

    十六进制 到 十进制 使用 int() 函数 ,第一个参数是字符串 '0Xff' ,第二个参数是说明,这个字符串是几进制的数.  转化的结果是一个十进制数. >>> int('0xf ...

  10. FTP主动模式和被动模式的区别【转】

    转自:http://www.cnblogs.com/xiaohh/p/4789813.html 基础知识: FTP只通过TCP连接,没有用于FTP的UDP组件.FTP不同于其他服务的是它使用了两个端口 ...