uView Drawer 抽屉

2024-01-07 21:52:13

有些时候,?Dialog?组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档,?Drawer?拥有和?Dialog?几乎相同的 API, 在 UI 上带来不一样的体验.

TIP

在 Vue 3 之后的版本 v-model 可以用于任何一个组件,visible.sync?已被移除,请使用?v-model="visibilityBinding"?来控制抽屉组件的显示和隐藏状态。

TIP

在 SSR 场景下,您需要将组件包裹在?<client-only></client-only>?之中 (如:?Nuxt) 和 SSG (例如:?VitePress).

基础用法#

呼出一个临时的侧边栏, 可以从多个方向呼出

你必须像?Dialog一样为?Drawer?设置?model-value?属性来控制?Drawer?的显示与隐藏状态,该属性接受一个?boolean?类型。?Drawer?包含三部分:?title?&?body?&?footer, 其中?title?是一个具名 slot, 你还可以通过?title?属性来设置标题, 默认情况下它是一个空字符串, 其中?body?部分是?Drawer?组件的主区域, 它包含了用户定义的主要内容. footer和title用法一致, 用来显示页脚信息. 当?Drawer?打开时,默认设置是从右至左打开?30%?浏览器宽度。 你可以通过传入对应的?direction?和?size?属性来修改这一默认行为。 下面一个示例将展示如何使用?before-close?API,更多详细用法请参考页面底部的 API 部分。

left to rightright to lefttop to bottombottom to top

openwith footer

不添加 Title#

当你不需要标题的时候,你可以将它移除。

通过设置?with-header?属性为?false?来控制是否显示标题。 如果你的应用需要具备可访问性,请务必设置好?title

open

自定义内容#

像?Dialog?组件一样,Drawer?也可以用来显示多种不同的交互。

Open Drawer with nested tableOpen Drawer with nested form

自定义头部#

header?可用于自定义显示标题的区域。 为了保持可用性,除了使用此插槽外,使用?title?属性,或使用?titleId?插槽属性来指定哪些元素应该读取为抽屉标题。

Open Drawer with customized header

嵌套抽屉#

你可以像?Dialog?一样拥有多层嵌套的?Drawer

如果你需要在不同图层中多个抽屉,你必须设置?append-to-body?属性到?true

open

TIP

Drawer 的内容是懒渲染的,即在第一次被打开之前,传入的默认 slot 不会被渲染到 DOM 上。 因此,如果需要执行 DOM 操作,或通过?ref?获取相应组件,请在?open?事件回调中进行。

TIP

Drawer 还提供一个?destroy-on-close?的 API,用来控制是否在 Drawer 隐藏之后把 Drawer 的默认插槽内的内容销毁。 当你需要每次打开抽屉都要调用?mounted?生命周期时,可以使用此 API。

API#

属性#

属性名说明类型默认值
model-value / v-model是否显示 Drawerbooleanfalse
append-to-bodyDrawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 truebooleanfalse
lock-scroll是否在 Drawer 出现时将 body 滚动锁定booleantrue
before-close关闭前的回调,会暂停 Drawer 的关闭Function
close-on-click-modal是否可以通过点击 modal 关闭 Drawerbooleantrue
close-on-press-escape是否可以通过按下 ESC 关闭 Drawerbooleantrue
open-delayDrawer 打开的延时时间,单位毫秒number0
close-delayDrawer 关闭的延时时间,单位毫秒number0
custom-class deprecatedDrawer 的自定义类名string
destroy-on-close控制是否在关闭 Drawer 之后将子元素全部销毁booleanfalse
modal是否需要遮罩层booleantrue
directionDrawer 打开的方向enumrtl
show-close是否显示关闭按钮booleantrue
sizeDrawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释number \string
titleDrawer 的标题,也可通过具名 slot (见下表)传入string
with-header控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效booleantrue
modal-class遮罩层的自定义类名string
z-index设置 z-indexnumber
header-aria-level a11yheader 的 aria-level 属性string2

WARNING

custom-class?已被?弃用将会于?2.3.0?移除, 请使用?class

事件#

插槽名说明类型
openDrawer 打开的回调Function
openedDrawer 打开动画结束时的回调Function
closeDrawer 关闭的回调Function
closedDrawer 关闭动画结束时的回调Function

插槽#

名称说明
defaultDrawer 的内容
headerDrawer 标题的内容;会替换标题部分,但不会移除关闭按钮。
title deprecated与 header 作用相同 请使用 header
footerDrawer 页脚部分

暴露#

事件名说明
handleClose用于关闭 Drawer, 该方法会调用传入的 before-close 方法

文章来源:https://blog.csdn.net/m0_72196169/article/details/135443373
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。