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-08-08 13:51   作者:秦永莲