Vue 3 的支持触摸的选项卡组件 - vue3-tabs

Vue 3 的支持触摸的选项卡组件 - vue3-tabs
插件名称 vue3-tabs
发布时间 2021年8月3日
插件作者 HJ29

一个移动端友好的标签组件,允许用户通过触摸滑动在标签内容之间滑动。

安装和下载:

# Yarn
$ yarn add vue3-tabs

# NPM
$ npm i vue3-tabs --save

使用

1、导入并注册tabs组件。

// 全局
import { createApp } from 'vue';
import App from './App.vue'
import Tabs from 'vue3-tabs';
const app = createApp(App);
app.use(Tabs);
app.mount('#app');
// 局部
import { Tabs, Tab, TabPanels, TabPanel } from 'vue3-tabs';
export default {
  components: {
    Tabs,
    Tab,
    TabPanels,
    TabPanel
  },
};

2. 创建一个基本的选项卡组件。

<template>
  <h3>简单演示</h3>
  <tabs
    v-model="selectedTab"
  >
    <tab
      v-for="(tab, i) in tabs"
      :key="`t${i}`"
      :val="tab"
      :label="tab"
      :indicator="true"
    />
  </tabs>
  <tab-panels
    v-model="selectedTab"
    :animate="true"
    :swipeable="true"
  >
    <tab-panel
      v-for="(tab, i) in tabs"
      :key="`tp${i}`"
      :val="tab"
    >
      {{ tab }}
    </tab-panel>
  </tab-panels>
</template>
import { defineComponent, reactive, toRefs } from 'vue';
const tabs = ['A', 'B', 'C'];
export default defineComponent({
  name: 'Example',
  setup() {
    const state = reactive({
      selectedTab: tabs[1]
    });
    return {
      tabs,
      ...toRefs(state)
    };
  }
});

3. 创建自定义选项卡组件。

<template>
  <h3>自定义演示</h3>
  <tabs
    v-model="selectedTab"
  >
    <tab
      v-for="(tab, i) in tabs"
      :key="`t${i}`"
      :val="tab.value"
    >
      <div
        :style="{'border-color': getActive(tab.value) ? tab.color : '', color: getActive(tab.value) ? tab.color : ''}"
        :class="{'active-tab': getActive(tab.value)}"
        class="tab"
      >
        {{ tab.label }}
      </div>
    </tab>
  </tabs>
  <tab-panels
    v-model="selectedTab"
    :animate="true"
    :swipeable="true"
    class="tab-panels"
  >
    <tab-panel
      v-for="(tab, i) in tabs"
      :key="`tp${i}`"
      :val="tab.value"
      class="tab-panel"
      :style="`background: ${tab.color}; color: white;`"
    >
      <div>
        {{ tab.description }}
      </div>
    </tab-panel>
  </tab-panels>
</template>
import { defineComponent, reactive, toRefs } from 'vue';
const tabs = [{
  label: '标签 1',
  value: 1,
  description: `内容1`,
  color: 'blue'
}, {
  label: '标签 2',
  value: 2,
  description: `内容2`,
  color: 'red'
}, {
  label: '标签 3',
  value: 3,
  description: '内容3',
  color: 'grey'
}];
export default defineComponent({
  name: 'Example',
  setup() {
    const state = reactive({
      selectedTab: tabs[0].value
    });
    function getActive(tab: string | number) {
      return state.selectedTab === tab;
    }
    return {
      tabs,
      getActive,
      ...toRefs(state)
    };
  }
});