Dropdown 下拉菜单 ​

<template>
  <w-dropdown @visible-change="(val: boolean) => (visible = val)">
    <span class="w3-dropdown-link">
      就诊状态
      <w-fake-arrow :is-active="visible" />
    </span>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>待就诊</w-dropdown-item>
        <w-dropdown-item>就诊中</w-dropdown-item>
        <w-dropdown-item>检查中</w-dropdown-item>
        <w-dropdown-item disabled>检验中</w-dropdown-item>
        <w-dropdown-item divided>已完结</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
</template>

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

const visible = ref(false)
</script>

<style scoped>
.example-showcase .w3-dropdown-link {
  cursor: pointer;
  color: var(--w3-color-primary);
  display: flex;
  align-items: center;
}
</style>

<template>
  <div class="flex flex-wrap items-center">
    <w-dropdown>
      <w-button type="primary">
        新增就诊<w-icon class="w3-icon--right"><arrow-down /></w-icon>
      </w-button>
      <template #dropdown>
        <w-dropdown-menu>
          <w-dropdown-item>普通患者</w-dropdown-item>
          <w-dropdown-item>医保患者</w-dropdown-item>
          <w-dropdown-item>自费患者</w-dropdown-item>
          <w-dropdown-item>公费医疗</w-dropdown-item>
          <w-dropdown-item>异地就医</w-dropdown-item>
        </w-dropdown-menu>
      </template>
    </w-dropdown>
    <w-dropdown split-button type="primary" @click="handleClick">
      新增就诊
      <template #dropdown>
        <w-dropdown-menu>
          <w-dropdown-item>普通患者</w-dropdown-item>
          <w-dropdown-item>医保患者</w-dropdown-item>
          <w-dropdown-item>自费患者</w-dropdown-item>
          <w-dropdown-item>公费医疗</w-dropdown-item>
          <w-dropdown-item>异地就医</w-dropdown-item>
        </w-dropdown-menu>
      </template>
    </w-dropdown>
  </div>
</template>

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

const handleClick = () => {
  // eslint-disable-next-line no-alert
  alert('点击了新增就诊按钮')
}
</script>

<style scoped>
.example-showcase .w3-dropdown + .w3-dropdown {
  margin-left: 15px;
}
.example-showcase .w3-dropdown-link {
  cursor: pointer;
  color: var(--w3-color-primary);
  display: flex;
  align-items: center;
}
</style>

<template>
  <w-row class="block-col-2">
    <w-col :span="8">
      <span class="demonstration">悬停触发</span>
      <w-dropdown>
        <span class="w3-dropdown-link">
          切换科室<w-icon class="w3-icon--right"><arrow-down /></w-icon>
        </span>
        <template #dropdown>
          <w-dropdown-menu>
            <w-dropdown-item :icon="Plus">内科</w-dropdown-item>
            <w-dropdown-item :icon="CirclePlusFilled"> 外科 </w-dropdown-item>
            <w-dropdown-item :icon="CirclePlus">妇产科</w-dropdown-item>
            <w-dropdown-item :icon="Check">儿科</w-dropdown-item>
            <w-dropdown-item :icon="CircleCheck">急诊科</w-dropdown-item>
          </w-dropdown-menu>
        </template>
      </w-dropdown>
    </w-col>
    <w-col :span="8">
      <span class="demonstration">点击触发</span>
      <w-dropdown trigger="click">
        <span class="w3-dropdown-link">
          切换科室<w-icon class="w3-icon--right"><arrow-down /></w-icon>
        </span>
        <template #dropdown>
          <w-dropdown-menu>
            <w-dropdown-item :icon="Plus">内科</w-dropdown-item>
            <w-dropdown-item :icon="CirclePlusFilled"> 外科 </w-dropdown-item>
            <w-dropdown-item :icon="CirclePlus">妇产科</w-dropdown-item>
            <w-dropdown-item :icon="Check">儿科</w-dropdown-item>
            <w-dropdown-item :icon="CircleCheck">急诊科</w-dropdown-item>
          </w-dropdown-menu>
        </template>
      </w-dropdown>
    </w-col>
    <w-col :span="8">
      <span class="demonstration">右键触发</span>
      <w-dropdown trigger="contextmenu">
        <span class="w3-dropdown-link">
          切换科室<w-icon class="w3-icon--right"><arrow-down /></w-icon>
        </span>
        <template #dropdown>
          <w-dropdown-menu>
            <w-dropdown-item :icon="Plus">内科</w-dropdown-item>
            <w-dropdown-item :icon="CirclePlusFilled"> 外科 </w-dropdown-item>
            <w-dropdown-item :icon="CirclePlus">妇产科</w-dropdown-item>
            <w-dropdown-item :icon="Check">儿科</w-dropdown-item>
            <w-dropdown-item :icon="CircleCheck">急诊科</w-dropdown-item>
          </w-dropdown-menu>
        </template>
      </w-dropdown>
    </w-col>
  </w-row>
</template>

<script lang="ts" setup>
import {
  ArrowDown,
  Check,
  CircleCheck,
  CirclePlus,
  CirclePlusFilled,
  Plus,
} from '@win-design-next/icons-vue'
</script>

<style scoped>
.block-col-2 .demonstration {
  display: block;
  color: var(--w3-font-color-second);
  font-size: 14px;
  margin-bottom: 20px;
}

.block-col-2 .w3-dropdown-link {
  display: flex;
  align-items: center;
}
</style>

<template>
  <w-dropdown :hide-on-click="false">
    <span class="w3-dropdown-link">
      检验项目<w-icon class="w3-icon--right"><arrow-down /></w-icon>
    </span>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>血常规</w-dropdown-item>
        <w-dropdown-item>尿常规</w-dropdown-item>
        <w-dropdown-item>肝功能</w-dropdown-item>
        <w-dropdown-item disabled>肾功能</w-dropdown-item>
        <w-dropdown-item divided>血脂四项</w-dropdown-item>
        <w-dropdown-item divided>血糖</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
</template>

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

<style scoped>
.example-showcase .w3-dropdown + .w3-dropdown {
  margin-left: 15px;
}
.example-showcase .w3-dropdown-link {
  cursor: pointer;
  color: var(--w3-color-primary);
  display: flex;
  align-items: center;
}
</style>

<template>
  <w-dropdown @command="handleCommand">
    <span class="w3-dropdown-link">
      医嘱操作<w-icon class="w3-icon--right"><arrow-down /></w-icon>
    </span>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item command="stop">停止医嘱</w-dropdown-item>
        <w-dropdown-item command="void">作废医嘱</w-dropdown-item>
        <w-dropdown-item command="copy">复制医嘱</w-dropdown-item>
        <w-dropdown-item command="print" disabled>打印医嘱</w-dropdown-item>
        <w-dropdown-item command="audit" divided>提交审核</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
</template>

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

const handleCommand = (command: string | number | object) => {
  WMessage(`执行医嘱操作：${command}`)
}
</script>

<style scoped>
.example-showcase .w3-dropdown-link {
  cursor: pointer;
  color: var(--w3-color-primary);
  display: flex;
  align-items: center;
}
</style>

<template>
  <w-card class="content" @click="handleClick" @contextmenu="handleContextmenu">
    在患者卡片上点击右键，弹出快捷操作
  </w-card>
  <w-dropdown
    ref="dropdownRef"
    :virtual-ref="triggerRef"
    :show-arrow="false"
    :popper-options="{
      modifiers: [{ name: 'offset', options: { offset: [0, 0] } }],
    }"
    virtual-triggering
    trigger="contextmenu"
    placement="bottom-start"
  >
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item :icon="Plus">查看详情</w-dropdown-item>
        <w-dropdown-item>编辑档案</w-dropdown-item>
        <w-dropdown-item>预约复诊</w-dropdown-item>
        <w-dropdown-item disabled>打印腕带</w-dropdown-item>
        <w-dropdown-item divided>转科</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
</template>

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

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

const dropdownRef = ref<DropdownInstance>()
const position = ref({
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
} as DOMRect)

const triggerRef = ref({
  getBoundingClientRect: () => position.value,
})

const handleClick = () => {
  dropdownRef.value?.handleClose()
}

const handleContextmenu = (event: MouseEvent) => {
  const { clientX, clientY } = event
  position.value = DOMRect.fromRect({
    x: clientX,
    y: clientY,
  })
  event.preventDefault()

  dropdownRef.value?.handleOpen()
}
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
</style>

<template>
  <div style="font-size: 14px">
    <p>打开（关闭）患者菜单 B 时，将自动关闭（打开）患者菜单 A。</p>
  </div>
  <div style="margin: 15px">
    <w-button @click="showClick">打开菜单</w-button>
  </div>
  <w-dropdown ref="dropdown1" trigger="contextmenu" style="margin-right: 30px">
    <span class="w3-dropdown-link"> 患者菜单 A </span>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>查看详情</w-dropdown-item>
        <w-dropdown-item>编辑档案</w-dropdown-item>
        <w-dropdown-item>预约复诊</w-dropdown-item>
        <w-dropdown-item disabled>打印腕带</w-dropdown-item>
        <w-dropdown-item divided>转科</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>

  <w-dropdown trigger="contextmenu" @visible-change="handleVisible2">
    <span class="w3-dropdown-link"> 患者菜单 B </span>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>查看详情</w-dropdown-item>
        <w-dropdown-item>编辑档案</w-dropdown-item>
        <w-dropdown-item>预约复诊</w-dropdown-item>
        <w-dropdown-item disabled>打印腕带</w-dropdown-item>
        <w-dropdown-item divided>转科</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
</template>

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

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

const dropdown1 = ref<DropdownInstance>()
function handleVisible2(visible: any) {
  if (!dropdown1.value) return
  if (visible) {
    dropdown1.value.handleClose()
  } else {
    dropdown1.value.handleOpen()
  }
}
function showClick() {
  if (!dropdown1.value) return
  dropdown1.value.handleOpen()
}
</script>

<style scoped>
.example-showcase .w3-dropdown-link {
  cursor: pointer;
  color: var(--w3-color-primary);
  display: flex;
  align-items: center;
}
</style>

<template>
  <w-dropdown trigger="click">
    <span class="w3-dropdown-link">按状态筛选</span>
    <template #dropdown-header>
      <w-input
        v-model="keyword"
        size="small"
        clearable
        placeholder="搜索就诊状态"
      />
    </template>
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item v-for="item in options" :key="item" :command="item">
          {{ item }}
        </w-dropdown-item>
      </w-dropdown-menu>
    </template>
    <template #dropdown-footer>
      <span class="dropdown-footer-tip">共 {{ options.length }} 项</span>
    </template>
  </w-dropdown>
</template>

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

const keyword = ref('')
const options = ref(['待就诊', '就诊中', '检查中', '检验中'])
</script>

<style scoped>
.example-showcase .w3-dropdown-link {
  cursor: pointer;
  color: var(--w3-color-primary);
}

.dropdown-footer-tip {
  margin-right: 8px;
  font-size: 12px;
  color: var(--w3-font-color-secondary);
}
</style>

<template>
  <div class="flex flex-wrap items-center gap-4">
    <w-dropdown placement="top-start">
      <w-button> topStart </w-button>
      <template #dropdown>
        <w-dropdown-menu>
          <w-dropdown-item>1 号诊室</w-dropdown-item>
          <w-dropdown-item>2 号诊室</w-dropdown-item>
          <w-dropdown-item>3 号诊室</w-dropdown-item>
        </w-dropdown-menu>
      </template>
    </w-dropdown>
    <w-dropdown placement="top">
      <w-button> top </w-button>
      <template #dropdown>
        <w-dropdown-menu>
          <w-dropdown-item>1 号诊室</w-dropdown-item>
          <w-dropdown-item>2 号诊室</w-dropdown-item>
          <w-dropdown-item>3 号诊室</w-dropdown-item>
        </w-dropdown-menu>
      </template>
    </w-dropdown>
    <w-dropdown placement="top-end">
      <w-button> topEnd </w-button>
      <template #dropdown>
        <w-dropdown-menu>
          <w-dropdown-item>1 号诊室</w-dropdown-item>
          <w-dropdown-item>2 号诊室</w-dropdown-item>
          <w-dropdown-item>3 号诊室</w-dropdown-item>
        </w-dropdown-menu>
      </template>
    </w-dropdown>
    <w-dropdown placement="bottom-start">
      <w-button> bottomStart </w-button>
      <template #dropdown>
        <w-dropdown-menu>
          <w-dropdown-item>1 号诊室</w-dropdown-item>
          <w-dropdown-item>2 号诊室</w-dropdown-item>
          <w-dropdown-item>3 号诊室</w-dropdown-item>
        </w-dropdown-menu>
      </template>
    </w-dropdown>
    <w-dropdown placement="bottom">
      <w-button> bottom </w-button>
      <template #dropdown>
        <w-dropdown-menu>
          <w-dropdown-item>1 号诊室</w-dropdown-item>
          <w-dropdown-item>2 号诊室</w-dropdown-item>
          <w-dropdown-item>3 号诊室</w-dropdown-item>
        </w-dropdown-menu>
      </template>
    </w-dropdown>
    <w-dropdown placement="bottom-end">
      <w-button> bottomEnd </w-button>
      <template #dropdown>
        <w-dropdown-menu>
          <w-dropdown-item>1 号诊室</w-dropdown-item>
          <w-dropdown-item>2 号诊室</w-dropdown-item>
          <w-dropdown-item>3 号诊室</w-dropdown-item>
        </w-dropdown-menu>
      </template>
    </w-dropdown>
  </div>
</template>

<template>
  <w-dropdown size="large" split-button type="primary">
    Large
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>新增患者</w-dropdown-item>
        <w-dropdown-item>批量导入</w-dropdown-item>
        <w-dropdown-item>导出列表</w-dropdown-item>
        <w-dropdown-item>批量删除</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>

  <w-dropdown split-button type="danger">
    Default
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>新增患者</w-dropdown-item>
        <w-dropdown-item>批量导入</w-dropdown-item>
        <w-dropdown-item>导出列表</w-dropdown-item>
        <w-dropdown-item>批量删除</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>

  <w-dropdown size="small" split-button type="error">
    Small
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>新增患者</w-dropdown-item>
        <w-dropdown-item>批量导入</w-dropdown-item>
        <w-dropdown-item>导出列表</w-dropdown-item>
        <w-dropdown-item>批量删除</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>

  <w-dropdown size="mini" split-button type="success">
    Mini
    <template #dropdown>
      <w-dropdown-menu>
        <w-dropdown-item>新增患者</w-dropdown-item>
        <w-dropdown-item>批量导入</w-dropdown-item>
        <w-dropdown-item>导出列表</w-dropdown-item>
        <w-dropdown-item>批量删除</w-dropdown-item>
      </w-dropdown-menu>
    </template>
  </w-dropdown>
</template>

<style scoped>
.example-showcase .w3-dropdown + .w3-dropdown {
  margin-left: 15px;
}
</style>

<template>
  <div class="compact-panel-example">
    <w-dropdown trigger="click" :spread="false">
      <span class="w3-dropdown-link">留白面板（spread=false）</span>
      <template #dropdown>
        <w-dropdown-menu>
          <w-dropdown-item v-for="item in options" :key="item" :command="item">
            {{ item }}
          </w-dropdown-item>
        </w-dropdown-menu>
      </template>
    </w-dropdown>
  </div>
</template>

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

const options = ref(['待就诊', '就诊中', '检查中', '检验中'])
</script>

<style scoped>
.compact-panel-example {
  display: flex;
  gap: 16px;
}

.example-showcase .w3-dropdown-link {
  cursor: pointer;
  color: var(--w3-color-primary);
}
</style>