feat: add custom handle

This commit is contained in:
tangjinzhou 2019-04-04 23:28:50 +08:00
parent 995469eb9b
commit 791783344a
4 changed files with 8 additions and 4 deletions

View File

@ -16,6 +16,7 @@
| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - |
| zIndex | The `z-index` of the Drawer. | Number | 1000 |
| placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' |
| handle | After setting, the drawer is directly mounted on the DOM, and you can control the drawer to open or close through this `handle`. | VNode \| slot | - |
## Methods

View File

@ -24,6 +24,7 @@ const Drawer = {
placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('right'),
level: PropTypes.any.def(null),
wrapClassName: PropTypes.string, // not use class like react, vue will add class to root dom
handle: PropTypes.any,
},
mixins: [BaseMixin],
data() {
@ -181,10 +182,11 @@ const Drawer = {
} else {
offsetStyle.height = typeof height === 'number' ? `${height}px` : height;
}
const handler = getComponentFromProp(this, 'handle') || false;
const vcDrawerProps = {
props: {
handler: false,
...rest,
handler,
...offsetStyle,
open: visible,
showMask: props.mask,

View File

@ -15,7 +15,8 @@
| width | 宽度 | string \| number | 256 |
| height | 高度, 在 `placement``top``bottom` 时使用 | string \| number | 256 |
| zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
| placement | 抽屉的方向 | 'top' \| 'right' \| 'bottom' \| 'left' | 'right'
| placement | 抽屉的方向 | 'top' \| 'right' \| 'bottom' \| 'left' | 'right'|
| handle | 设置后抽屉直接挂载到DOM上你可以通过该handle控制抽屉打开关闭 | VNode \| slot | - |
## 方法

View File

@ -408,8 +408,8 @@ const Drawer = {
<i class="drawer-handle-icon" />
</div>
);
const { handler: handlerSlot } = this.$slots;
const handlerSlotVnode = handlerSlot || handlerDefalut;
const { handler: handlerSlot } = this;
const handlerSlotVnode = (handlerSlot && handlerSlot[0]) || handlerDefalut;
const { click: handleIconClick } = getEvents(handlerSlotVnode);
handlerChildren = cloneElement(handlerSlotVnode, {
on: {