自定义Tab样式，HTML代码在线实时编辑、实时预览

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12

            
            <!DOCTYPE html>
<html>

<head>
  <script src="./main.ts"></script>
</head>

<body>
  <div id='app'></div>
</body>

</html>

编辑器加载中

main.ts

            
                1
2
3
4
5
6
7
8
9
10

            
            import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
app.mount('#app')
console.log(["Hello 笔.COOL 控制台"], ElementPlus)

编辑器加载中

App.vue

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

            
            <script setup>
import ElementPlusDemo from './ElementPlusDemo.vue'
</script>

<template>
  <div class="container">
    <ElementPlusDemo />
  </div>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>

编辑器加载中

ElementPlusDemo.vue

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

            
            <template>
  <el-tabs
    v-model="activeName"
    size='small'
    class="demo-tabs"
    closable
    @tab-click="handleClick"
  >
    <el-tab-pane class='margin' >
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>首页</span>
        </span>
      </template>
    </el-tab-pane>
   <el-tab-pane class='margin' >
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>物资申购单</span>
        </span>
      </template>
    </el-tab-pane>
    <el-tab-pane class='margin' >
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>页面三</span>
        </span>
      </template>
    </el-tab-pane>
    
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
  import { Calendar } from '@element-plus/icons-vue'

import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<style scoped>

 .demo-tabs :deep(.el-tabs__item) {
  border: 1px solid #E4E7ED;
  padding: 10px !important;
  margin-right: 10px;
  border-radius: 2px;
}
  .demo-tabs :deep(.el-tabs__nav-wrap:after){
    display: none;
  }
  .demo-tabs :deep(.el-tabs__active-bar){
    display: none
  }
  .demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
.demo-tabs :deep(.el-tabs__header .el-tabs__item.is-active){
  color:green;
}
.demo-tabs :deep(.el-tabs__item:hover){
  color: green;
}

</style>

编辑器加载中

package.json

注意：新添加的依赖包首次加载可能会报错，稍后再次刷新即可

            
                1
2
3
4
5
6
7

            
            {
  "dependencies": {
    "vue": "3.5.15",
    "element-plus": "2.9.4",
    "@element-plus/icons-vue": "2.3.1"
  }
}

编辑器加载中