Popover 悬浮框 ​

<template>
  <w-popover
    placement="top-start"
    title="标题"
    :width="200"
    trigger="hover"
    content="这是内容，这是内容，这是内容"
  >
    <template #reference>
      <w-button class="m-2">Hover 激活</w-button>
    </template>
  </w-popover>

  <w-popover
    placement="bottom"
    title="标题"
    :width="200"
    trigger="click"
    content="这是内容，这是内容，这是内容"
  >
    <template #reference>
      <w-button class="m-2">Click 激活</w-button>
    </template>
  </w-popover>

  <w-popover
    ref="popover"
    placement="right"
    title="标题"
    :width="200"
    trigger="focus"
    content="这是内容，这是内容，这是内容"
  >
    <template #reference>
      <w-button class="m-2">Focus 激活</w-button>
    </template>
  </w-popover>

  <w-popover
    ref="popover"
    title="标题"
    :width="200"
    trigger="contextmenu"
    content="这是内容，这是内容，这是内容"
  >
    <template #reference>
      <w-button class="m-2">contextmenu 激活</w-button>
    </template>
  </w-popover>

  <w-popover
    :visible="visible"
    placement="bottom"
    title="标题"
    :width="200"
    content="这是内容，这是内容，这是内容"
  >
    <template #reference>
      <w-button class="m-2" @click="visible = !visible"> Manual 激活 </w-button>
    </template>
  </w-popover>
</template>

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

const visible = ref(false)
</script>

<style scoped>
.w3-button + .w3-button {
  margin-left: 8px;
}
</style>

<template>
  <w-popover
    :visible="visible"
    placement="bottom"
    title="医嘱操作"
    :width="240"
  >
    <p>该患者存在未执行的长期医嘱</p>
    <w-button type="danger" size="small" @click="openConfirm">
      停止医嘱
    </w-button>
    <template #reference>
      <w-button @click="visible = !visible">Manual 激活</w-button>
    </template>
  </w-popover>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { WMessage, WMessageBox } from 'win-design-next'

const visible = ref(false)

const openConfirm = () => {
  WMessageBox.confirm(
    '此操作将停止该患者当前全部未执行长期医嘱，是否继续？',
    '停止医嘱',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      WMessage({
        type: 'success',
        message: '医嘱已停止',
      })
    })
    .catch(() => {
      WMessage({
        type: 'info',
        message: '已取消停止',
      })
    })
}
</script>

<template>
  <w-button ref="buttonRef" v-click-outside="onClickOutside"> 点击 </w-button>

  <w-popover
    ref="popoverRef"
    :virtual-ref="buttonRef"
    trigger="click"
    title="标题"
    virtual-triggering
  >
    <span> 内容 </span>
  </w-popover>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'win-design-next'

const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
</script>

<template>
  <div style="display: flex; align-items: center">
    <w-popover placement="right" :width="400" trigger="click">
      <template #reference>
        <w-button style="margin-right: 16px">Click 激活</w-button>
      </template>
      <w-table :data="gridData">
        <w-table-column width="150" property="date" label="入院日期" />
        <w-table-column width="100" property="name" label="姓名" />
        <w-table-column width="300" property="address" label="诊断" />
      </w-table>
    </w-popover>
  </div>
</template>

<script lang="ts" setup>
const gridData = [
  {
    date: '2026-08-01',
    name: '张伟',
    address: '高血压2级（很高危），冠心病',
  },
  {
    date: '2026-08-03',
    name: '李娜',
    address: '社区获得性肺炎（右下肺）',
  },
  {
    date: '2026-07-28',
    name: '王强',
    address: '右胫骨中段闭合性骨折',
  },
  {
    date: '2026-07-15',
    name: '刘秀英',
    address: '脑梗死后遗症期，高血压3级',
  },
]
</script>

<template>
  <w-popover :visible="visible" placement="top" :width="160">
    <p>确定要删除此项吗?</p>
    <div class="flex" style="justify-content: flex-end">
      <w-button size="mini" @click="visible = false">取消</w-button>
      <w-button size="mini" type="primary" @click="visible = false">
        确定
      </w-button>
    </div>
    <template #reference>
      <w-button @click="visible = true">Delete</w-button>
    </template>
  </w-popover>
</template>

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

const visible = ref(false)
</script>

<template>
  <w-popover placement="bottom-start" :width="280" trigger="click">
    <div class="nested-panel">
      <w-date-picker-pro
        v-model="date"
        type="date"
        placeholder="请选择日期"
        :teleported="false"
      />
      <w-select v-model="dept" placeholder="请选择科室" :teleported="false">
        <w-option
          v-for="item in depts"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </w-select>
      <w-cascader
        v-model="region"
        :options="regions"
        placeholder="请选择地区"
        :teleported="false"
      />
    </div>
    <template #reference>
      <w-button>筛选条件</w-button>
    </template>
  </w-popover>
</template>

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

const date = ref('')
const dept = ref('')
const region = ref([])

const depts = [
  { value: 'internal', label: '内科' },
  { value: 'surgery', label: '外科' },
  { value: 'pediatrics', label: '儿科' },
]

const regions = [
  {
    value: 'east',
    label: '华东',
    children: [
      { value: 'sh', label: '上海' },
      { value: 'zj', label: '浙江' },
    ],
  },
  {
    value: 'north',
    label: '华北',
    children: [
      { value: 'bj', label: '北京' },
      { value: 'tj', label: '天津' },
    ],
  },
]
</script>

<style scoped>
.nested-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

<template>
  <w-button v-popover="popoverRef" v-click-outside="onClickOutside">
    点击
  </w-button>

  <w-popover
    ref="popoverRef"
    trigger="click"
    title="标题"
    virtual-triggering
    persistent
  >
    <span> 内容 </span>
  </w-popover>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'win-design-next'

const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
</script>

<template>
  <w-space>
    <ScopedDeepStyleA />
    <ScopedDeepStyleB />

    <w-popover placement="top" :width="240" trigger="hover" title="医嘱提示">
      <p>全局样式照常命中（向下兼容），标题为绿色。</p>
      <template #reference>
        <w-button>全局样式</w-button>
      </template>
    </w-popover>
  </w-space>
</template>

<script lang="ts" setup>
import ScopedDeepStyleA from './scoped-deep-style-a.vue'
import ScopedDeepStyleB from './scoped-deep-style-b.vue'
</script>

<style>
.w3-popover__title {
  color: #67c23a;
}
</style>