iDesign

Drawer 抽屉

屏幕边缘滑出的抽屉式浮层面板。

基本用法

可通过 visible 属性控制抽屉显示隐藏。

<template>
  <i-button @click="handleShow">打开抽屉框</i-button>
  <i-drawer :visible="visible" @close="handleHide">
    <span>抽屉内容</span>
    <template #header>
      抽屉标题
    </template>
  </i-drawer>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const handleShow = () => {
  visible.value = true
}

const handleHide = () => {
  visible.value = false
}
</script>
显示代码

禁用退出键关闭功能

可通过 closeOnEsc 属性控制打开抽屉时按下 ESC 退出键是否触发关闭事件，默认为 true，表示 ESC 退出键触发 onClose 关闭事件。

<template>
  <i-button @click="handleShow">禁用抽屉退出键功能</i-button>
  <i-drawer :visible="visible" :closeOnEsc="false" @close="handleHide">
    <span>抽屉内容</span>
    <template #header>
      抽屉标题
    </template>
  </i-drawer>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const handleShow = () => {
  visible.value = true
}

const handleHide = () => {
  visible.value = false
}
</script>
显示代码

隐藏遮罩层

可通过 showMask 属性控制打开抽屉时是否显示遮罩层，默认为 true。

<template>
  <i-button @click="handleShow">隐藏遮罩层</i-button>
  <i-drawer :visible="visible" :showMask="false" @close="handleHide">
    <span>抽屉框内容</span>
    <template #header>
      抽屉框标题
    </template>
  </i-drawer>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const handleShow = () => {
  visible.value = true
}

const handleHide = () => {
  visible.value = false
}
</script>
显示代码

自定义抽屉方向

可通过 placement 属性控制抽屉展开方向，默认为 right。

<template>
  <div className="idesign-demo-block-row">
    <i-button @click="() => handleShow('right')">默认方向</i-button>
    <i-button @click="() => handleShow('left')">从左展开</i-button>
    <i-button @click="() => handleShow('top')">从上展开</i-button>
    <i-button @click="() => handleShow('bottom')">从下展开</i-button>
  </div>

  <i-drawer
    :visible="visible.right"
    @close="() => handleHide('right')"
  >
    <span>默认方向的抽屉框</span>
    <template #header>抽屉框标题</template>
  </i-drawer>
  <i-drawer
    :visible="visible.left"
    placement="left"
    @close="() => handleHide('left')"
  >
    <span>从左展开的抽屉框</span>
    <template #header>抽屉框标题</template>
  </i-drawer>
  <i-drawer
    :visible="visible.top"
    placement="top"
    @close="() => handleHide('top')"
  >
    <span>从上展开的抽屉框</span>
    <template #header>抽屉框标题</template>
  </i-drawer>
  <i-drawer
    :visible="visible.bottom"
    placement="bottom"
    @close="() => handleHide('bottom')"
  >
    <span>从下展开的抽屉框</span>
    <template #header>抽屉框标题</template>
  </i-drawer>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref({
  right: false,
  left: false,
  top: false,
  bottom: false
})

const handleShow = (placement) => {
  visible.value[placement] = true
}

const handleHide = (placement) => {
  visible.value[placement] = false
}
</script>
显示代码

自定义抽屉宽高

可通过 width 或 height 属性控制抽屉宽高。

<template>
  <div className="idesign-demo-block-row">
    <i-button @click="() => handleShow('right')">自定义宽度</i-button>
    <i-button @click="() => handleShow('top')">自定义高度</i-button>
  </div>

  <i-drawer
    :visible="visible.right"
    :width="400"
    @close="() => handleHide('right')"
  >
    <span>自定义宽度的抽屉</span>
    <template #header>抽屉标题</template>
  </i-drawer>
  <i-drawer
    :visible="visible.top"
    placement="top"
    :height="400"
    @close="() => handleHide('top')"
  >
    <span>自定义高度的抽屉</span>
    <template #header>抽屉标题</template>
  </i-drawer>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref({
  right: false,
  top: false
})

const handleShow = (placement) => {
  visible.value[placement] = true
}

const handleHide = (placement) => {
  visible.value[placement] = false
}
</script>
显示代码

自定义抽屉头部

可通过 header 插槽设置抽屉头部内容。

<template>
  <i-button @click="handleShow">自定义头部</i-button>
  <i-drawer :visible="visible" @close="handleHide">
    <span>抽屉框内容</span>
    <template #header>
      <i-icon name="TipWarningFill" />
      <span>这是一个自定义标题</span>
    </template>
  </i-drawer>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const handleShow = () => {
  visible.value = true
}

const handleHide = () => {
  visible.value = false
}
</script>
显示代码

自定义抽屉底部

可通过 footer 插槽设置抽屉底部内容，可通过 hideFooter 隐藏抽屉底部内容。

<template>
  <div className="idesign-demo-block-row">
    <i-button @click="handleShow1">自定义底部</i-button>
    <i-button @click="handleShow2">隐藏底部内容</i-button>
  </div>

  <i-drawer :visible="visible1" @close="handleHide1">
    <span>自定义底部</span>
    <template #header>
      抽屉框标题
    </template>
    <template #footer>
      <i-button variant="outline" @click="handleHide1">我再想想</i-button>
      <i-button>去意已决</i-button>
    </template>
  </i-drawer>
  <i-drawer :visible="visible2" :hideFooter="true" @close="handleHide2">
    <span>隐藏底部内容</span>
    <template #header>
      抽屉框标题
    </template>
  </i-drawer>
</template>

<script setup>
import { ref } from 'vue'

const visible1 = ref(false)
const visible2 = ref(false)

const handleShow1 = () => {
  visible1.value = true
}
const handleShow2 = () => {
  visible2.value = true
}

const handleHide1 = () => {
  visible1.value = false
}
const handleHide2 = () => {
  visible2.value = false
}
</script>
显示代码

Drawer Attributes

属性说明类型默认值
visible控制抽屉框显示隐藏booleanfalse
closeOnEsc按下退出键是否触发关闭事件booleantrue
showMask是否显示遮罩层booleantrue
hideFooter是否显示底部内容booleanfalse
width抽屉框宽度string〡number--
height抽屉框高度string〡number--

Drawer Slots

插槽名说明
header自定义头部
footer自定义底部

Drawer Events

属性说明类型默认值
close抽屉框关闭时触发事件() => void--
Last Updated:
Contributors: Leophen