Drawer 抽屉 |
您所在的位置：网站首页 › drewer发音 › Drawer 抽屉 |
Drawer 抽屉
|
Drawer 抽屉 # 有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验. TIP 在 Vue 3 之后的版本 v-model 可以用于任何一个组件，visible.sync 已被移除，请使用 v-model="visibilityBinding" 来控制抽屉组件的显示和隐藏状态。 TIP 在 SSR 场景下，您需要将组件包裹在 之中 (如: Nuxt) 和 SSG (例如: VitePress). 基础用法 #呼出一个临时的侧边栏, 可以从多个方向呼出 不添加 Title #当你不需要标题的时候，你可以将它移除。 自定义内容 #像 Dialog 组件一样，Drawer 也可以用来显示多种不同的交互。 自定义头部 #header 可用于自定义显示标题的区域。 为了保持可用性，除了使用此插槽外，使用 title 属性，或使用 titleId 插槽属性来指定哪些元素应该读取为抽屉标题。 嵌套抽屉 #你可以像 Dialog 一样拥有多层嵌套的 Drawer TIP Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。 因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。 TIP Drawer 还提供一个 destroy-on-close 的 API，用来控制是否在 Drawer 隐藏之后把 Drawer 的默认插槽内的内容销毁。 当你需要每次打开抽屉都要调用 mounted 生命周期时，可以使用此 API。 API #属性 #属性名说明类型默认值model-value / v-model是否显示 Drawerbooleanfalseappend-to-bodyDrawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 truebooleanfalselock-scroll是否在 Drawer 出现时将 body 滚动锁定booleantruebefore-close关闭前的回调，会暂停 Drawer 的关闭Function—close-on-click-modal是否可以通过点击 modal 关闭 Drawerbooleantrueclose-on-press-escape是否可以通过按下 ESC 关闭 Drawerbooleantrueopen-delayDrawer 打开的延时时间，单位毫秒number0close-delayDrawer 关闭的延时时间，单位毫秒number0custom-class deprecatedDrawer 的自定义类名string—destroy-on-close控制是否在关闭 Drawer 之后将子元素全部销毁booleanfalsemodal是否需要遮罩层booleantruedirectionDrawer 打开的方向enumrtlshow-close是否显示关闭按钮booleantruesizeDrawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释number / string30%titleDrawer 的标题，也可通过具名 slot （见下表）传入string—with-header控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效booleantruemodal-class遮罩层的自定义类名string—z-index设置 z-indexnumber—header-aria-level a11yheader 的 aria-level 属性string2WARNING custom-class 已被 弃用，将会于 2.3.0 移除, 请使用 class。 事件 #事件名称说明类型openDrawer 打开的回调FunctionopenedDrawer 打开动画结束时的回调FunctioncloseDrawer 关闭的回调FunctionclosedDrawer 关闭动画结束时的回调Functionopen-auto-focus输入焦点聚焦在 Drawer 内容时的回调Functionclose-auto-focus输入焦点从 Drawer 内容失焦时的回调Function插槽 #名称说明defaultDrawer 的内容headerDrawer 标题的内容；会替换标题部分，但不会移除关闭按钮。title deprecated与 header 作用相同 请使用 headerfooterDrawer 页脚部分暴露 #事件名说明handleClose用于关闭 Drawer, 该方法会调用传入的 before-close 方法源代码 #组件 • 文档 贡献者 # JeremyWuuuuu 三咲智子 云游君 btea wzc520pyfm qiang kooriookami 0song opengraphica Alan Wang C.Y.Kun drylint Karolis_Stoncius_Sneakybox bqy_fe 류한경 Delyan Haralanov Aex msidolphin on the field of hope zazzaz Hades-li sea liu 大河 Xc LooSheng
|
【本文地址】