Tab 标签页

基本使用

  <pk-tabs>
    <pk-tab title="标签1">标签1内容</pk-tab>
    <pk-tab title="标签2">标签2内容</pk-tab>
   </pk-tabs>

代码示例

基础用法

template
    <pk-tabs>
        <pk-tab title="标签1">标签1内容</pk-tab>
        <pk-tab title="标签2">标签2内容</pk-tab>
    </pk-tabs>

可滑动

默认就是可滑动的，可通过scrollable设置为false关闭可滑动。

template
    <pk-tabs>
        <pk-tab title="标签1" :name="1">1</pk-tab>
        <pk-tab title="标签2" :name="2">2</pk-tab>
        <pk-tab title="标签3" :name="3">3</pk-tab>
        <pk-tab title="标签4" :name="4">4</pk-tab>
        <pk-tab title="标签5" :name="5">5</pk-tab>
        <pk-tab title="标签6" :name="6">6</pk-tab>
        <pk-tab title="标签7" :name="7">7</pk-tab>
        <pk-tab title="标签8" :name="8">8</pk-tab>
        <pk-tab title="标签最后一个" :name="9">9</pk-tab>
    </pk-tabs>

默认值

可通过model-value设置默认值。也可以通过v-model实现双向绑定。

template
    <pk-tabs :model-value="5">
        <pk-tab title="标签1" :name="1">1</pk-tab>
        <pk-tab title="标签2" :name="2">2</pk-tab>
        <pk-tab title="标签3" :name="3">3</pk-tab>
        <pk-tab title="标签4" :name="4">4</pk-tab>
        <pk-tab title="标签5" :name="5">5</pk-tab>
        <pk-tab title="标签6" :name="6">6</pk-tab>
        <pk-tab title="标签7" :name="7">7</pk-tab>
        <pk-tab title="标签8" :name="8">8</pk-tab>
        <pk-tab title="标签最后一个" :name="9">9</pk-tab>
    </pk-tabs>

事件监听

可以监听on-change事件。

template
   <pk-tabs @on-change="(value, title) => Toast.show(`title:${title},value:${value}`)">
        <pk-tab title="标签1" :name="1">1</pk-tab>
        <pk-tab title="标签2" :name="2">2</pk-tab>
        <pk-tab title="标签3" :name="3">3</pk-tab>
        <pk-tab title="标签4" :name="4">4</pk-tab>
        <pk-tab title="标签5" :name="5">5</pk-tab>
        <pk-tab title="标签6" :name="6">6</pk-tab>
        <pk-tab title="标签7" :name="7">7</pk-tab>
        <pk-tab title="标签8" :name="8">8</pk-tab>
        <pk-tab title="标签最后一个" :name="9">9</pk-tab>
    </pk-tabs>
最近更新:
Contributors: yranky