• el-tabs(标签栏)的入门学习

    el-tabs(标签栏)的入门学习
    适用场景
    与导航栏相似，项目中常见的是点击某个导航栏，主页面（el-main）模块的最上方会显示我们的标签栏集合，点击不同的导航栏，标签栏会在不断追加，若点击到标签集合中已存在，就进入选中指定的标签栏，显示页面

    知识点

    1. el-tabs嵌套el-tab-pane使用
    2. el-tabs的v-model对应el-tab-pane的name
    3. el-tabs的type可以指定为card,border-card
    4. el-tab-pane的label为显示的标签内容，标签的内容在首尾标签内部
    5. el-tabs可以设置closable,editable,addable,分别设置tab-remove,edit,tab-add动态修改标签集合
    6. 还有tab-click钩子
    7. el-tabs中设置tab-position，修改标签位置，可以为top,bottom,left,right

    效果图

    代码 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    9.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    10.     <script src="https://unpkg.com/element-ui/lib/index.js">script>
    11. head>
    12.  
    13. <body>
    14.     <div id='app'>
    15.         <el-tabs v-model='tabPaneName' @tab-click='handleClick'>
    16.             <el-tab-pane v-for='tab in tabs' :key='tab.name+"1"' :name='tab.name' :label='tab.label'>{{tab.content}}
    17.             el-tab-pane>
    18.         el-tabs>
    19.         <el-tabs v-model='tabPaneName' type='card' closable @tab-remove='handleRemove'>
    20.             <el-tab-pane v-for='tab in tabs' :key='tab.name+"2"' :name='tab.name' :label='tab.label'>{{tab.content}}
    21.             el-tab-pane>
    22.         el-tabs>
    23.         <el-tabs v-model='tabPaneName' type='border-card' editable @edit='handleEdit'>
    24.             <el-tab-pane v-for='tab in tabs' :key='tab.name+"3"' :name='tab.name' :label='tab.label'>{{tab.content}}
    25.             el-tab-pane>
    26.         el-tabs>
    27.         <el-radio-group v-model='position'>
    28.             <el-radio label='top'>topel-radio>
    29.             <el-radio label='bottom'>bottomel-radio>
    30.             <el-radio label='left'>leftel-radio>
    31.             <el-radio label='right'>rightel-radio>
    32.         el-radio-group>
    33.         <el-tabs v-model='tabPaneName' type='border-card' :tab-position='position'>
    34.             <el-tab-pane v-for='tab in tabs' :key='tab.name+"3"' :name='tab.name' >
    35.                 <template slot='label'>
    36.                     <i class='el-icon-search'>i>{{tab.label}}
    37.                 template>
    38.                 {{tab.content}}
    39.             el-tab-pane>
    40.         el-tabs>
    41.     div>
    42. body>
    43.  
    44. html>
    45.  
    46. <script>
    47.     new Vue({
    48.         el: "#app",
    49.         data() {
    50.             return {
    51.                 position: '',
    52.                 tabPaneName: 'first',
    53.                 tabs: [{ name: 'first', label: '首页', content: '欢迎光临' },
    54.                 { name: 'second', label: '菜单', content: '有小炒，火锅，烧烤' },
    55.                 { name: 'third', label: '饮料', content: '杨枝甘露，冰糖雪梨' },
    56.                 { name: 'fouth', label: '部门', content: '餐饮，财经' }]
    57.             }
    58.         },
    59.         methods: {
    60.             //点击钩子
    61.             handleClick(target, action) {
    62.                 console.log(target.name, action)
    63.             },
    64.             //删除钩子
    65.             handleRemove(targetName) {
    66.                 this.tabs.forEach((item, index) => {
    67.                     if (item.name === targetName) {
    68.                         this.tabs.splice(index, 1)
    69.                     }
    70.                 });
    71.             },
    72.             //编辑钩子
    73.             handleEdit(targetName, action) {
    74.                 if (action === 'remove') {
    75.                     this.tabs.forEach((item, index) => {
    76.                         if (item.name === targetName) {
    77.                             this.tabs.splice(index, 1)
    78.                         }
    79.                     })
    80.                 } else if (action === 'add') {
    81.                     let addItem = {
    82.                         name: "newName" + this.tabs.length,
    83.                         label: "newLabel" + this.tabs.length,
    84.                         content: "newContent" + this.tabs.length
    85.                     }
    86.                     this.tabs.push(addItem)
    87.                 }
    88.             }
    89.         }
    90.     })
    91. script>

    官网

    el-tabs的入门学习

  • 相关阅读:
    Android eSIM-LPA基于Android13的实现
    C++继承
    Talk | ICCV’23 清华赵天辰：Ada3D-基于动态推理的3D感知模型压缩及软硬件协同优化
    电脑出现找不到msvcp120.dll无法继续执行代码，不用担心多种方法帮你搞定
    java计算机毕业设计智慧机场管理系统源程序+mysql+系统+lw文档+远程调试
    我所理解liunx下的原子操作
    两台电脑mysql数据迁移，各版本mysql迁移（亲测）
    第一个SpringBoot程序
    【CSDN竞赛第11期】编程竞赛总结
    Vue3基础——Composition API初体验、合成API详解、setup、Provide 和 inject
  • 原文地址：https://blog.csdn.net/ok060/article/details/133626819