Tabs 标签页 ​

<template>
  <w-title>基础用法</w-title>
  <w-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <w-tab-pane label="待整改" name="first" />
    <w-tab-pane label="已完成" name="second" />
    <w-tab-pane label="已质控" name="third" />
  </w-tabs>
  <w-divider />
  <w-title>卡片风格：type="card"</w-title>
  <w-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <w-tab-pane label="待整改" name="first" />
    <w-tab-pane label="已完成" name="second" />
    <w-tab-pane label="已质控" name="third" />
  </w-tabs>
  <w-divider />
  <w-title>边框卡片风格：type="border-card"</w-title>
  <w-tabs v-model="activeName" type="border-card">
    <w-tab-pane label="待整改" name="first" />
    <w-tab-pane label="已完成" name="second" />
    <w-tab-pane label="已质控" name="third" />
  </w-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'win-design-next'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<style></style>

<template>
  <w-radio-group v-model="tabPosition" style="margin-bottom: 30px">
    <w-radio-button value="top">top</w-radio-button>
    <w-radio-button value="right">right</w-radio-button>
    <w-radio-button value="bottom">bottom</w-radio-button>
    <w-radio-button value="left">left</w-radio-button>
  </w-radio-group>

  <w-tabs :tab-position="tabPosition" style="height: 200px" class="demo-tabs">
    <w-tab-pane label="待整改" name="first" />
    <w-tab-pane label="已完成" name="second" />
    <w-tab-pane label="已质控" name="third" />
  </w-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TabsInstance } from 'win-design-next'

const tabPosition = ref<TabsInstance['tabPosition']>('left')
</script>

<style>
.w3-tabs--right .w3-tabs__content,
.w3-tabs--left .w3-tabs__content {
  height: 100%;
}
</style>

<template>
  <w-tabs type="border-card" class="demo-tabs">
    <w-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <w-icon><date /></w-icon>
          <span>待整改</span>
        </span>
      </template>
    </w-tab-pane>
    <w-tab-pane label="已完成" name="second" />
    <w-tab-pane label="已质控" name="third" />
  </w-tabs>
</template>

<script lang="ts" setup>
import { Date } from '@win-design-next/icons-vue'
</script>

<style>
.demo-tabs .custom-tabs-label {
  display: flex;
  align-items: center;
}
.demo-tabs .custom-tabs-label span {
  margin-left: 8px;
}
</style>

<template>
  <w-tabs
    v-model="editableTabsValue"
    type="card"
    editable
    class="demo-tabs"
    @edit="handleTabsEdit"
  >
    <w-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      {{ item.content }}
    </w-tab-pane>
  </w-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TabPaneName } from 'win-design-next'

let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: 'Tab 1 content',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'Tab 2 content',
  },
])

const handleTabsEdit = (
  targetName: TabPaneName | undefined,
  action: 'remove' | 'add'
) => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
  } else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }

    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}
</script>

<style></style>

<template>
  <w-tabs
    v-model="editableTabsValue"
    type="card"
    class="demo-tabs"
    editable
    @edit="handleTabsEdit"
  >
    <template #add-icon>
      <w-icon><Check /></w-icon>
    </template>
    <w-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      {{ item.content }}
    </w-tab-pane>
  </w-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Check } from '@win-design-next/icons-vue'

import type { TabPaneName } from 'win-design-next'

let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: 'Tab 1 content',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'Tab 2 content',
  },
])

const handleTabsEdit = (
  targetName: TabPaneName | undefined,
  action: 'remove' | 'add'
) => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
  } else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }

    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}
</script>

<style></style>

<template>
  <div style="margin-bottom: 20px">
    <w-button size="small" @click="addTab(editableTabsValue)">
      add tab
    </w-button>
  </div>
  <w-tabs
    v-model="editableTabsValue"
    type="card"
    class="demo-tabs"
    closable
    @tab-remove="removeTab"
  >
    <w-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      {{ item.content }}
    </w-tab-pane>
  </w-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TabPaneName } from 'win-design-next'

let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: 'Tab 1 content',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'Tab 2 content',
  },
])

const addTab = (targetName: string) => {
  const newTabName = `${++tabIndex}`
  editableTabs.value.push({
    title: 'New Tab',
    name: newTabName,
    content: 'New Tab content',
  })
  editableTabsValue.value = newTabName
}
const removeTab = (targetName: TabPaneName) => {
  const tabs = editableTabs.value
  let activeName = editableTabsValue.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }

  editableTabsValue.value = activeName
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}
</script>

<style></style>