前言

前端開(kāi)發(fā)通常使用 第三方 UI 組件庫(kù)，像大家熟悉的 Element-UI、AntD Vue 等

最近發(fā)現(xiàn)一個(gè) 還比較好用的 組件庫(kù) Naive-UI 傳送門 ，Vue 3 組件庫(kù)，使用 TypeScript ，用起來(lái)感覺(jué)還不錯(cuò)，它的主題也可以切換 （有暗夜模式），缺點(diǎn)可能就是提供的組件代碼示例 比較少

---

標(biāo)簽頁(yè)Tab

很多頁(yè)面都需要使用到 Tab 進(jìn)行不同資源的切換展示

---

Naive-UI 的 Tab 樣式比較單一(如下)

---

TabPane

可以使用 TabPane Slots （ <template #tab>） 對(duì) TabPane 的樣式進(jìn)行修改

<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>即時(shí)聊天</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>圓桌會(huì)議</span>
          </div>
        </template>
        
      </n-tab-pane>
    </n-tabs>
  </div>

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

---

后面可以根據(jù)自己的需求，繼續(xù)往 TabPane 中添加內(nèi)容，對(duì)頁(yè)面進(jìn)行編輯

<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>即時(shí)聊天</span>
          </div>
        </template>
        <div class="tab-content">
          <div class="tab-content-text">
            <h2><span>01</span>&nbsp;即時(shí)聊天</h2>
            <p></p>
            <n-divider />
            <ul>
              <li>
                <n-icon color="#006cff" size="24"
                  ><CheckmarkCircleOutline />
                </n-icon>
                <span>在線互通交流平臺(tái)</span>
              </li>
              <li>
                <n-icon color="#006cff" size="24"
                  ><CheckmarkCircleOutline />
                </n-icon>
                <span>用戶異地互動(dòng)聊天，輕松參與</span>
              </li>
              <li>
                <n-icon color="#006cff" size="24"
                  ><CheckmarkCircleOutline />
                </n-icon>
                <span>滿足業(yè)務(wù)接洽的場(chǎng)景需要 </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>圓桌會(huì)議</span>
          </div>
        </template>
        
      </n-tab-pane>
    </n-tabs>
  </div>

---

文章如有錯(cuò)誤，懇請(qǐng)大家提出問(wèn)題，本人不勝感激 。 不懂的地方可以評(píng)論，我都會(huì) 一 一 回復(fù)

文章對(duì)大家有幫助的話，希望大家能動(dòng)手點(diǎn)贊鼓勵(lì)，大家未來(lái)一起努力 長(zhǎng)路漫漫，道阻且長(zhǎng)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-469951.html