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. Maven pom.xml中的元素modules、parent、properties以及import(转)

    前言 项目中用到了maven,而且用到的内容不像利用maven/eclipse搭建ssm(spring+spring mvc+mybatis)用的那么简单:maven的核心是pom.xml,那么我就它 ...

  2. 最全PyCharm教程

    最全PyCharm教程--for python PyCharm简介: PyCharm是由JetBrains打造的一款Python IDE,VS2010的重构插件Resharper就是出自JetBrai ...

  3. pm2 设置开机启动

    一.官方文档: 官方相关文档:http://pm2.keymetrics.io/docs/usage/startup/#generating-a-startup-script 二.具体操作过程如下: ...

  4. 【python】Python 资源大全中文版

    申明:感谢原作者的整理与分享,本篇文章分享自:https://www.jianshu.com/p/9c6ae64a1bd7 GitHub 上有一个 Awesome - XXX 系列的资源整理,资源非常 ...

  5. sudo: /etc/sudoers is owned by uid 755, should be 0

    在ubuntu环境下, 想往/etc/sudoers中添加可以执行sudo操作的用户,使用root将/etc/sudoers的权限修改为755后,提示出现标题中的错误: 修正方法:将/etc/sudo ...

  6. 分布式服务管理框架-Zookeeper节点ACL

    文章转自:http://blog.csdn.net/xyang81/article/details/53147894 概述 ACL全称为Access Control List(访问控制列表),用于控制 ...

  7. JDK1.5新特性，基础类库篇，集合框架（Collections）

    集合框架在JDK1.5中增强特性如下: 一. 新语言特性的增强 泛型(Generics)- 增加了集合框架在编译时段的元素类型检查,节省了遍历元素时类型转换代码量. For-Loop循环(Enhanc ...

  8. C#-微信公众平台接口-上传临时素材

    最烦做微信公众平台的东西..文档说得不清不楚,又没示例代码,只能自己 慢慢搜索,弄了一晚上,基本弄出来了,把本地的图片上传到微信的临时素材那里,返回媒体ID,用于其他操作,代码如下 :(自己导入相应的 ...

  9. 精通Docker的50个必备教程、工具、资源

    Docker 已经震惊了软件开发界.它提供了一种根据 DevOps 方法打包和输送应用程序的便捷方法. 最近我们发布了 51 个必备的 Docker 工具列表①,但工具不是完全精通容器化所需的唯一东西 ...

  10. Spring开启方法异步执行

    @EnableAsync @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Import(Async ...