Drawer 抽屜

從螢幕邊緣滑出的浮層，適合詳情、篩選等次級操作。四個方向、可控尺寸與遮罩行為。

抽屜

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="open('right')">right 右側</LhButton>
      <LhButton @click="open('left')">left 左側</LhButton>
      <LhButton @click="open('top')">top 頂部</LhButton>
      <LhButton @click="open('bottom')">bottom 底部</LhButton>
      <LhButton @click="openNoMask">遮罩不關閉</LhButton>
    </div>
    <LhDrawer v-model="visible" :title="title" :direction="direction" :size="size">
      <p style="margin: 0 0 8px">direction 控制方向，size 控制尺寸（數字 px 或百分比字串）。</p>
      <p class="demo-note">底部按鈕可觸發 lockScroll / closeOnEsc 等組合。</p>
      <template #footer>
        <LhButton @click="visible = false">取消</LhButton>
        <LhButton type="primary" @click="visible = false">儲存</LhButton>
      </template>
    </LhDrawer>
    <LhDrawer
      v-model="noMask"
      title="點選遮罩不關閉"
      direction="right"
      size="30%"
      :mask-closable="false"
      :show-close="true"
      :lock-scroll="true"
      :close-on-esc="false"
    >
      <p style="margin: 0">maskClosable=false、closeOnEsc=false，只能點按鈕或關閉圖示。</p>
      <template #footer>
        <LhButton type="primary" @click="noMask = false">關閉</LhButton>
      </template>
    </LhDrawer>
  </div>
</template>

<script>
export default {
  data: () => ({
    visible: false,
    noMask: false,
    title: '右側抽屜',
    direction: 'right',
    size: '360px',
  }),
  methods: {
    open(dir) {
      this.direction = dir
      this.title = `${dir} 抽屜`
      this.size = dir === 'top' || dir === 'bottom' ? '30%' : '360px'
      this.visible = true
    },
    openNoMask() {
      this.noMask = true
    },
  },
}
</script>

Props

屬性	說明	類型	預設值
v-model	是否顯示（受控 modelValue prop）	boolean	false
title	標題	string	—
direction	方向	'right' \| 'left' \| 'top' \| 'bottom'	'right'
size	尺寸：數字為 px，字串支援百分比	string \| number	—
maskClosable	點選遮罩是否關閉	boolean	true
showClose	是否顯示關閉按鈕	boolean	true
teleportTarget	彈出層掛載目標（選擇器或元素，預設 body；2.7 無 Teleport，host 移動實作）	string \| HTMLElement	—
lockScroll	是否鎖定頁面捲動	boolean	true
closeOnEsc	是否回應 Esc 關閉	boolean	true
themeVars	元件級主題變數，覆蓋 ConfigProvider 設定	Record<string, string>	—
bgPattern	元件級背景花紋，覆蓋 ConfigProvider 設定	string	—
sx	sx 快速佈局屬性（作用於面板）	—	—

Slots

插槽	說明
header	標題區（預設取 title prop）
default	抽屜正文
footer	底部按鈕區