tabs 标签样式
Posted Archibald Witwicky
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tabs 标签样式相关的知识，希望对你有一定的参考价值。
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 标签样式的主要内容，如果未能解决你的问题，请参考以下文章