Drawer
屏幕边缘滑出的浮层面板。
说明
组件API详细内容请参考: https://www.antdv.com/components/drawer-cn
新增属性
- 属性说明:
参数名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
closeIconSlot | Function | 否 | 关闭图标 | |
extraSlot | Function | 否 | 抽屉右上角的操作区域 | |
footerSlot | Function | 否 | 抽屉的页脚 | |
content | Function | 否 | 内容部分 |
使用方法
代码示例:
// 在script标签中按需引入 import { Drawer, Button } from '@jecloud/ui'; export default { components: { DatePicker }, setup() { const showDrawer2 = () => { Drawer.show({ title: 'Basic Drawer', content() { return h('div', 'Drawer.show() 方法调用打开'); }, extraSlot() { return h('div', 'Drawer.show() zhognjian '); }, footerSlot() { return h('div', 'Drawer.show() 脚丫子'); }, closeIconSlot() { return h('div', { class: 'fas fa-bolt' }); }, }); }; return { showDrawer2 }; }, }; // 在vue的template标签中 <Button type="primary" @click="showDrawer2">Drawer.show</Button>
事件脚本示例:
const { Drawer } = JE.useUi(); const { h, ref }= JE.useVue(); return h(Drawer, {placement:"top ",closable: false,visible: true});
最后编辑: 秦永莲 文档更新时间: 2024-07-26 14:15 作者:秦永莲