在Vue中使用iview tabs是非常方便的,它可以幫助我們實現多頁簽切換,且非常易于使用。
首先,我們需要引入iview和vue-router:
import Vue from 'vue' import iView from 'iview' import 'iview/dist/styles/iview.css' import VueRouter from 'vue-router' Vue.use(iView) Vue.use(VueRouter)
接著,在Vue組件中我們可以這樣定義tabs:
內容1 內容2
通過設置v-model="activeName"來控制當前選中的頁簽,TabPane組件中的name屬性是頁簽的標識符,label屬性為頁簽的名稱。
如果需要在切換頁簽時執行一些操作,我們可以通過監聽Tabs的change事件來實現:
... methods: { handleTabClick (name) { console.log('點擊了頁簽:' + name) } } 內容1 內容2
上面的例子中,我們在Tabs上監聽了on-tab-click事件,并在handleTabClick方法中輸出了點擊的頁簽標識符。
除了基本的頁簽切換外,iview tabs還提供了很多實用的功能,比如可以自定義頁簽模板、頁簽滾動、關閉未激活的頁簽等等。在使用上,我們可以根據實際需要選擇使用。
上一篇idea vue圖標