Naive-UI自定义TabPane样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>