Naive-UI自定义TabPane样式

前言

前端开发通常使用 第三方 UI 组件库，像大家熟悉的 Element-UI、AntD Vue 等

最近发现一个 还比较好用的 组件库 Naive-UI 传送门 ，Vue 3 组件库，使用 TypeScript ，用起来感觉还不错，它的主题也可以切换 （有暗夜模式），缺点可能就是提供的组件代码示例 比较少

---

标签页Tab

很多页面都需要使用到 Tab 进行不同资源的切换展示

---

Naive-UI 的 Tab 样式比较单一(如下)

---

TabPane

可以使用 TabPane Slots （ <template #tab>） 对 TabPane 的样式进行修改

<div class="tab">
    <n-tabs default-value="1">
      <n-tab-pane name="1">
        <template #tab>
          <div class="tab-title">
            <n-icon class="icon" size="40"><ChatbubblesOutline /> </n-icon>
            <span>即时聊天</span>
          </div>
        </template>
       
      </n-tab-pane>
      <n-tab-pane name="2">
        <template #tab>
          <div class="tab-title">
            <n-icon class="icon" size="40"><VideocamOutline /> </n-icon>
            <span>线上直播</span>
          </div>
        </template>
        
      </n-tab-pane>
      <n-tab-pane name="3">
        <template #tab>
          <div class="tab-title">
            <n-icon class="icon" size="40"><Contrast /> </n-icon>
            <span>圆桌会议</span>
          </div>
        </template>
        
      </n-tab-pane>
    </n-tabs>
  </div>

可以看到 TabPane 的样式被成功修改

---

后面可以根据自己的需求，继续往 TabPane 中添加内容，对页面进行编辑

<div class="tab">
    <n-tabs default-value="1">
      <n-tab-pane name="1">
        <template #tab>
          <div class="tab-title">
            <n-icon class="icon" size="40"><ChatbubblesOutline /> </n-icon>
            <span>即时聊天</span>
          </div>
        </template>
        <div class="tab-content">
          <div class="tab-content-text">
            <h2><span>01</span>&nbsp;即时聊天</h2>
            <p></p>
            <n-divider />
            <ul>
              <li>
                <n-icon color="#006cff" size="24"
                  ><CheckmarkCircleOutline />
                </n-icon>
                <span>在线互通交流平台</span>
              </li>
              <li>
                <n-icon color="#006cff" size="24"
                  ><CheckmarkCircleOutline />
                </n-icon>
                <span>用户异地互动聊天，轻松参与</span>
              </li>
              <li>
                <n-icon color="#006cff" size="24"
                  ><CheckmarkCircleOutline />
                </n-icon>
                <span>满足业务接洽的场景需要 </span>
              </li>
            </ul>
          </div>
          <div class="tab-content-img">
            <n-image
              lazy
              width="600"
              height="390"
              src="https://static1.weizan.cn/zhibo/static/img/vzan/pc/index_image/block2-img3.png"
            />
          </div>
        </div>
      </n-tab-pane>
      <n-tab-pane name="2">
        <template #tab>
          <div class="tab-title">
            <n-icon class="icon" size="40"><VideocamOutline /> </n-icon>
            <span>线上直播</span>
          </div>
        </template>
      
      </n-tab-pane>
      <n-tab-pane name="3">
        <template #tab>
          <div class="tab-title">
            <n-icon class="icon" size="40"><Contrast /> </n-icon>
            <span>圆桌会议</span>
          </div>
        </template>
        
      </n-tab-pane>
    </n-tabs>
  </div>

---

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会 一 一 回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力 长路漫漫，道阻且长