Tabs 标签页 ​

<template>
  <w-title>基础用法</w-title>
  <w-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <template #add>
      <w-text type="info">右侧提示信息</w-text>
    </template>
    <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>
  <w-divider />
  <w-title>页面级页签：type="page"</w-title>
  <w-tabs
    v-model="pageActive"
    type="page"
    force-closable
    class="demo-tabs"
    @tab-remove="removePageTab"
  >
    <w-tab-pane
      v-for="tab in pageTabs"
      :key="tab.name"
      :label="tab.label"
      :name="tab.name"
      :disabled="tab.disabled"
    >
      {{ tab.label }}内容
    </w-tab-pane>
  </w-tabs>
  <w-divider />
  <w-title>菜单级页签：type="menu"</w-title>
  <w-tabs
    v-model="menuActive"
    type="menu"
    closable
    class="demo-tabs"
    @tab-remove="removeMenuTab"
  >
    <w-tab-pane
      v-for="tab in menuTabs"
      :key="tab.name"
      :label="tab.label"
      :name="tab.name"
    >
      {{ tab.label }}内容
    </w-tab-pane>
  </w-tabs>
</template>

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

import type { Ref } from 'vue'
import type { TabsPaneContext } from 'win-design-next'

const activeName = ref('first')

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

interface DemoTab {
  name: string
  label: string
  disabled?: boolean
}

// 页面级页签常配 force-closable：关闭图标常显（迁移自 Vue2 type='page'）
const pageActive = ref('first')
const pageTabs = ref<DemoTab[]>([
  { name: 'first', label: '在院患者' },
  { name: 'second', label: '出院患者' },
  { name: 'third', label: '转诊患者', disabled: true },
])

// 菜单级页签常配 closable：悬浮/选中时显示关闭图标（迁移自 Vue2 type='menu'）
const menuActive = ref('first')
const menuTabs = ref<DemoTab[]>([
  { name: 'first', label: '待整改' },
  { name: 'second', label: '已完成' },
  { name: 'third', label: '已质控' },
])

// 移除页签后自动切换到相邻页签
const handleRemove = (
  name: string | number,
  tabs: Ref<DemoTab[]>,
  active: Ref<string>
) => {
  const index = tabs.value.findIndex((tab) => tab.name === name)
  if (index === -1) return
  tabs.value.splice(index, 1)
  if (active.value === name) {
    active.value = tabs.value[index]?.name ?? tabs.value[index - 1]?.name
  }
}

const removePageTab = (name: string | number) =>
  handleRemove(name, pageTabs, pageActive)

const removeMenuTab = (name: string | number) =>
  handleRemove(name, menuTabs, menuActive)
</script>

<style></style>

<template>
  <w-tabs
    v-model="activeName"
    class="demo-tabs"
    default-value="third"
    @tab-click="handleClick"
  >
    <w-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :label="tab.label"
      :name="tab.name"
    >
      default-value: third
      <br />
      active: {{ activeName }}
    </w-tab-pane>
  </w-tabs>
</template>

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

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

const tabs = ref([
  { label: '门诊', name: 'first' },
  { label: '住院', name: 'second' },
  { label: '体检', name: 'third' },
  { label: '急诊', name: 'fourth' },
])

const activeName = ref()

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

<style scoped>
.demo-tabs > .w3-tabs__content {
  color: var(--w3-font-color-second);
  font-weight: 600;
}
</style>

<template>
  <w-tabs v-model="activeName" class="demo-tabs">
    <w-tab-pane label="呼吸内科" sub-label="32 张床位" name="first">
      呼吸内科内容
    </w-tab-pane>
    <w-tab-pane label="心内科" sub-label="28 张床位" name="second">
      心内科内容
    </w-tab-pane>
    <w-tab-pane label="神经内科" name="third" sub-label="28 张床位"
      >神经内科内容</w-tab-pane
    >
  </w-tabs>
</template>

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

const activeName = ref('first')
</script>

<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: '患者列表',
    name: '1',
    content: '患者列表内容',
  },
  {
    title: '医嘱查询',
    name: '2',
    content: '医嘱查询内容',
  },
])

const handleTabsEdit = (
  targetName: TabPaneName | undefined,
  action: 'remove' | 'add'
) => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: '新页签',
      name: newTabName,
      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: '门诊处方',
    name: '1',
    content: '门诊处方内容',
  },
  {
    title: '住院处方',
    name: '2',
    content: '住院处方内容',
  },
])

const handleTabsEdit = (
  targetName: TabPaneName | undefined,
  action: 'remove' | 'add'
) => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: '新处方',
      name: newTabName,
      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)">
      新增页签
    </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: '在院患者',
    name: '1',
    content: '在院患者内容',
  },
  {
    title: '出院患者',
    name: '2',
    content: '出院患者内容',
  },
])

const addTab = (targetName: string) => {
  const newTabName = `${++tabIndex}`
  editableTabs.value.push({
    title: '新页签',
    name: newTabName,
    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>

<template>
  <w-tabs
    v-model="activeName"
    wheel-scrollable
    class="demo-tabs"
    style="max-width: 480px"
  >
    <template #add>
      <w-text type="info">右侧提示信息</w-text>
    </template>
    <w-tab-pane
      v-for="pane in panes"
      :key="pane.name"
      :label="pane.label"
      :name="pane.name"
    >
      {{ pane.label }}内容
    </w-tab-pane>
  </w-tabs>
</template>

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

const activeName = ref('first')

const panes = [
  { label: '内科一病区', name: 'first' },
  { label: '内科二病区', name: 'second' },
  { label: '内科三病区', name: 'third' },
  { label: '内科四病区', name: 'fourth' },
  { label: '内科五病区', name: 'fifth' },
  { label: '内科六病区', name: 'sixth' },
  { label: '内科七病区', name: 'seventh' },
  { label: '外科一病区', name: 'eighth' },
  { label: '外科二病区', name: 'ninth' },
  { label: '外科三病区', name: 'tenth' },
  { label: '外科四病区', name: 'eleventh' },
  { label: '妇产一病区', name: 'twelfth' },
  { label: '妇产二病区', name: 'thirteenth' },
  { label: '妇产三病区', name: 'fourteenth' },
]
</script>

<style></style>