mars-vue-component-tabs v0.3.3

Vue Tabs 組件 - A Vue component render tabs

Live Demo

Install

npm install mars-vue-component-tabs --save

Mount

mount with global

//in your main.js
import Tabs from 'mars-vue-component-tabs'
Vue.use(Tabs)

mount with component

import { Tabs, Tab } from 'mars-vue-component-tabs'

export default {
  components: {
    Tabs,
    Tab,
  },
}

Use

html

<Tabs :value="currentTag" @change="handleTagChange">
  <Tab label="Tab1" index="1">
    <div>content......</div>
  </Tab>
  <Tab label="Tab2" index="2">
    <div>content2......</div>
  </Tab>
</Tabs>

data

data() {
  return {
    currentTag: "1",
  };
}

methods

  methods: {
    handleTagChange(value) {
      this.currentTag = value
    },
  }

Use v-for render

html

<Tabs :value="currentTag" @change="handleTagChange">
  <Tab v-for="item in tags" :key="item.id" :label="item.tab" :index="item.id">
    <div v-html="item.content"></div>
  </Tab>
</Tabs>

data

data() {
  return {
    currentTag: 1,
    tags: [
      {
        id: 1,
        tab: "tab1",
        content: "<h1>Tab1 Content</h1><br><p>Lorem ...</p>"
      },
      {
        id: 2,
        tab: "tab2",
        content: "<h1>Tab2 Content</h1><br><p>Lorem ...</p>"
      },
      {
        id: 3,
        tab: "tab3",
        content: "<h1>Tab2 Content</h1><br><p>Lorem ...</p>"
      }
    ]
  };
}

Source code Demo