test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-02 03:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: add custom handle

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/drawer/index.en-US.md
View File

@ -16,6 +16,7 @@
| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - | | height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - |
| zIndex | The `z-index` of the Drawer. | Number | 1000 | | zIndex | The `z-index` of the Drawer. | Number | 1000 |
| placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' | | 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 ## Methods

4
components/drawer/index.jsx
View File

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

3
components/drawer/index.zh-CN.md
View File

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

4
components/vc-drawer/src/Drawer.js
View File

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