抽屉 Drawer

触发命令后，从屏幕一侧滑出的抽屉式的面板。

基本用法

点击触发按钮抽屉从右侧滑出，点击遮罩区关闭。

代码事例

vue

<template>
  <fk-button type="primary" @click="handleClick">Open Drawer</fk-button>
  <fk-drawer :width="340" :visible="visible" unmount-on-close @ok="handleOk" @cancel="handleCancel">
    <template #title>
      Title
    </template>
    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you
      press the OK button.
    </div>
  </fk-drawer>
</template>

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

export default {
  setup() {
    const visible = ref(false);

    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    }

    return {
      visible,
      handleClick,
      handleOk,
      handleCancel
    }
  },
};
</script>

抽屉位置

自定义位置，点击触发按钮抽屉从相应的位置滑出。

代码事例

vue

<template>
  <fk-radio-group v-model="position">
    <fk-radio value="top">Top</fk-radio>
    <fk-radio value="right">Right</fk-radio>
    <fk-radio value="bottom">Bottom</fk-radio>
    <fk-radio value="left">Left</fk-radio>
  </fk-radio-group>
  <div :style="{marginTop: '20px'}">
    <fk-button type="primary" @click="handleClick">Open Drawer</fk-button>
  </div>
  <fk-drawer
    :width="340"
    :height="340"
    :visible="visible"
    :placement="position"
    unmount-on-close
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title>
      Title
    </template>
    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>
  </fk-drawer>
</template>

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

export default {
  setup() {
    const visible = ref(false);
    const position = ref('right');

    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    }

    return {
      visible,
      position,
      handleClick,
      handleOk,
      handleCancel
    }
  },
};
</script>

自定义节点

通过插槽自定义内容，或者设置相应属性来控制显示或隐藏。

代码事例

vue

<template>
  <fk-checkbox-group v-model="custom" :options="['hide header', 'hide footer', 'hide cancel']"/>
  <div :style="{marginTop: '20px'}">
    <fk-button type="primary" @click="handleClick">Open Drawer</fk-button>
  </div>
  <fk-drawer
    :width="340"
    :header="!custom.includes('hide header')"
    :footer="!custom.includes('hide footer')"
    :hide-cancel="custom.includes('hide cancel')"
    :visible="visible"
    unmount-on-close
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #header>
      <span>Header and title</span>
    </template>
    <div>
      You can customize modal body text by the current situation. This modal will be closed immediately once you
      press the OK button.
    </div>
  </fk-drawer>
</template>

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

export default {
  setup() {
    const visible = ref(false);
    const custom = ref([])

    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    }

    return {
      custom,
      visible,
      handleClick,
      handleOk,
      handleCancel
    }
  },
};
</script>

嵌套抽屉

在抽屉内打开新的抽屉。

代码事例

vue

<template>
  <fk-button type="primary" @click="handleClick">Open Drawer</fk-button>
  <fk-drawer :visible="visible" :width="500" unmount-on-close @ok="handleOk" @cancel="handleCancel">
    <template #title>
      Title
    </template>
    <div :style="{marginBottom: '20px'}">You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>
    <fk-button type="primary" @click="handleNestedClick">Open Nested Drawer</fk-button>
  </fk-drawer>
  <fk-drawer :visible="nestedVisible" unmount-on-close @ok="handleNestedOk" @cancel="handleNestedCancel">
    <template #title>
      Title
    </template>
    <div>You can customize modal body text by the current situation. This modal will be closed immediately once you press the OK button.</div>
  </fk-drawer>
</template>

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

export default {
  setup() {
    const visible = ref(false);
    const nestedVisible = ref(false);

    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    }
    const handleNestedClick = () => {
      nestedVisible.value = true;
    };
    const handleNestedOk = () => {
      nestedVisible.value = false;
    };
    const handleNestedCancel = () => {
      nestedVisible.value = false;
    }

    return {
      visible,
      nestedVisible,
      handleClick,
      handleOk,
      handleCancel,
      handleNestedClick,
      handleNestedOk,
      handleNestedCancel
    }
  },
};
</script>

挂载位置

通过 popup-container 可以设置弹出层节点的挂载位置

代码事例

vue

<template>
  <div>
    <div
      id="parentNode"
      style="width: 100%; height: 300px; background-color: var(--color-fill-2); position: relative; overflow: hidden; line-height: 300px; text-align: center;"
    >
      <fk-button type="primary" @click="handleClick">Open Drawer</fk-button>
    </div>
  </div>
  <fk-drawer
    popup-container="#parentNode"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> Title </template>
    <div
      >You can customize modal body text by the current situation. This modal
      will be closed immediately once you press the OK button.</div
    >
  </fk-drawer>
</template>

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

export default {
  setup() {
    const visible = ref(false);

    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    }

    return {
      visible,
      handleClick,
      handleOk,
      handleCancel
    }
  },
};
</script>

函数调用

通过函数的方式使用抽屉。

代码事例

vue

<template>
  <fk-button type="primary" @click="handleClick">Open Drawer</fk-button>
</template>

<script>
import { Drawer } from '@erp/common';

export default {
  setup() {
    const handleClick = () => {
      Drawer.open({
        title: 'Info Title',
        content: 'This is an info message',
        width: 340
      });
    };

    return {
      handleClick,
    }
  },
}
</script>

API

`<drawer>` Props

参数名	描述	类型	默认值	版本
visible (v-model)	抽屉是否可见	`boolean`	`false`
default-visible	抽屉默认是否可见（非受控模式）	`boolean`	`false`
placement	抽屉放置的位置	`'top' \| 'right' \| 'bottom' \| 'left'`	`'right'`
title	标题	`string`	`-`
mask	是否显示遮罩层	`boolean`	`true`
mask-closable	点击遮罩层是否可以关闭	`boolean`	`true`
closable	是否展示关闭按钮	`boolean`	`true`
ok-text	确认按钮的内容	`string`	`-`
cancel-text	取消按钮的内容	`string`	`-`
ok-loading	确认按钮是否为加载中状态	`boolean`	`false`
ok-button-props	确认按钮的Props	`ButtonProps`	`-`	1.0.0
cancel-button-props	取消按钮的Props	`ButtonProps`	`-`	1.0.0
unmount-on-close	关闭时是否卸载节点	`boolean`	`false`	1.0.0
width	抽屉的宽度（仅在placement为right,left时可用）	`number\|string`	`250`
height	抽屉的高度（仅在placement为top,bottom时可用）	`number\|string`	`250`
popup-container	弹出框的挂载容器	`string \| HTMLElement`	`'body'`
drawer-style	抽屉的样式	`CSSProperties`	`-`
on-before-ok	触发 ok 事件前的回调函数。如果返回 false 则不会触发后续事件，也可使用 done 进行异步关闭。	`(done: (closed: boolean) => void) => void \| boolean \| Promise<void \| boolean>`	`-`
on-before-cancel	触发 cancel 事件前的回调函数。如果返回 false 则不会触发后续事件。	`() => boolean`	`-`
esc-to-close	是否支持 ESC 键关闭抽屉	`boolean`	`true`	1.0.0
render-to-body	抽屉是否挂载在 `body` 元素下	`boolean`	`true`
header	是否展示头部内容	`boolean`	`true`	1.0.0
footer	是否展示底部内容	`boolean`	`true`	1.0.0
hide-cancel	是否隐藏取消按钮	`boolean`	`false`	1.0.0
drawer-cls	样式名称	`string \| string[]`	`-`

`<drawer>` Events

事件名	描述	参数	版本
ok	点击确定按钮时触发	ev: `MouseEvent`
cancel	点击取消、关闭按钮时触发	ev: `MouseEvent \| KeyboardEvent`
open	抽屉打开后（动画结束）触发	-
close	抽屉关闭后（动画结束）触发	-
before-open	对话框打开前触发	-	1.0.0
before-close	对话框关闭前触发	-	1.0.0

`<drawer>` Slots

插槽名	描述	参数	版本
header	页眉	-	1.0.0
title	标题	-
footer	页脚	-

`<drawer>` 全局方法

Drawer 提供的全局方法，可以通过以下三种方法使用：

通过 this.$drawer 调用
在 Composition API 中，通过 getCurrentInstance().appContext.config.globalProperties.$drawer 调用
导入 Drawer，通过 Drawer 本身调用

当通过 import 方式使用时，组件没有办法获取当前的 Vue Context，如 i18n 或 route 等注入在 AppContext 上的内容无法在内部使用，需要在调用时手动传入 AppContext，或者为组件全局指定 AppContext

import { createApp } from 'vue'
import { Drawer } from '@erp/common';

const app = createApp(App);
Drawer._context = app._context;

Form 动态表单

SearchForm 查询表单

Table 数据表格

抽屉 Drawer

触发命令后，从屏幕一侧滑出的抽屉式的面板。

基本用法

抽屉位置

自定义节点

嵌套抽屉

挂载位置

函数调用

API

`<drawer>` Props

`<drawer>` Events

`<drawer>` Slots

`<drawer>` 全局方法

抽屉 Drawer ​

触发命令后，从屏幕一侧滑出的抽屉式的面板。 ​

基本用法 ​

抽屉位置 ​

自定义节点 ​

嵌套抽屉 ​

挂载位置 ​

函数调用 ​

API ​

<drawer> Props ​

<drawer> Events ​

<drawer> Slots ​

<drawer> 全局方法 ​

抽屉 Drawer

触发命令后，从屏幕一侧滑出的抽屉式的面板。

基本用法

抽屉位置

自定义节点

嵌套抽屉

挂载位置

函数调用

API

`<drawer>` Props

`<drawer>` Events

`<drawer>` Slots

`<drawer>` 全局方法