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

fix: drawer style to wrapStyle

Browse Source
This commit is contained in:
tangjinzhou 2019-01-02 20:22:19 +08:00
parent 9ecc5e1855
commit 3534e7d1d3
7 changed files with 178 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/drawer/__tests__/MultiDrawer.test.js
View File

@ -133,7 +133,7 @@ describe('Drawer', () => {
wrapper.find('#open_two_drawer').trigger('click')
}, 0)
await asyncExpect(() => {
const translateX = wrapper.find('.ant-drawer.test_drawer').element.parentElement.style.transform
const translateX = wrapper.find('.ant-drawer.test_drawer').element.style.transform
expect(translateX).toEqual('translateX(-180px)')
expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
}, 1000)
@ -154,7 +154,7 @@ describe('Drawer', () => {
wrapper.find('#open_two_drawer').trigger('click')
}, 0)
await asyncExpect(() => {
const translateX = wrapper.find('.ant-drawer.test_drawer').element.parentElement.style.transform
const translateX = wrapper.find('.ant-drawer.test_drawer').element.style.transform
expect(translateX).toEqual('translateX(180px)')
expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
}, 1000)
@ -174,7 +174,7 @@ describe('Drawer', () => {
wrapper.find('#open_two_drawer').trigger('click')
}, 0)
await asyncExpect(() => {
const translateY = wrapper.find('.ant-drawer.test_drawer').element.parentElement.style.transform
const translateY = wrapper.find('.ant-drawer.test_drawer').element.style.transform
expect(translateY).toEqual('translateY(180px)')
expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
}, 1000)

9
components/drawer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -6,6 +6,15 @@ exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
</div>
`;
exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
<div><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
<path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
</svg></i> New account
</button>
<!---->
</div>
`;
exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] = `
<div><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
<!---->

2
components/drawer/__tests__/demo.test.js
View File

@ -1,3 +1,3 @@
import demoTest from '../../../tests/shared/demoTest'
demoTest('drawer', { skip: ['from-drawer.md'] })
demoTest('drawer')

159
components/drawer/demo/form-in-drawer.md Normal file
View File

@ -0,0 +1,159 @@
<cn>
#### 抽屉表单
在抽屉中使用表单。
</cn>
<us>
#### Submit form in drawer
Use form in drawer with submit button.
</us>
```html
<template>
<div>
<a-button type="primary" @click="showDrawer">
<a-icon type="plus" /> New account
</a-button>
<a-drawer
title="Create a new account"
:width="720"
@close="onClose"
:visible="visible"
:wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
>
<a-form :form="form" layout="vertical" hideRequiredMark>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="Name">
<a-input
v-decorator="['name', {
rules: [{ required: true, message: 'Please enter user name' }]
}]"
placeholder="Please enter user name"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="Url">
<a-input
v-decorator="['url', {
rules: [{ required: true, message: 'please enter url' }]
}]"
style="width: 100%"
addonBefore="http://"
addonAfter=".com"
placeholder="please enter url"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="Owner">
<a-select
v-decorator="['owner', {
rules: [{ required: true, message: 'Please select an owner' }]
}]"
placeholder="Please a-s an owner"
>
<a-select-option value="xiao">Xiaoxiao Fu</a-select-option>
<a-select-option value="mao">Maomao Zhou</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="Type">
<a-select
v-decorator="['type', {
rules: [{ required: true, message: 'Please choose the type' }]
}]"
placeholder="Please choose the type"
>
<a-select-option value="private">Private</a-select-option>
<a-select-option value="public">Public</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item label="Approver">
<a-select
v-decorator="['approver', {
rules: [{ required: true, message: 'Please choose the approver' }]
}]"
placeholder="Please choose the approver"
>
<a-select-option value="jack">Jack Ma</a-select-option>
<a-select-option value="tom">Tom Liu</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="DateTime">
<a-date-picker
v-decorator="['dateTime', {
rules: [{ required: true, message: 'Please choose the dateTime' }]
}]"
style="width: 100%"
:getPopupContainer="trigger => trigger.parentNode"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="24">
<a-form-item label="Description">
<a-textarea
v-decorator="['description', {
rules: [{ required: true, message: 'Please enter url description' }]
}]"
:rows="4"
placeholder="please enter url description"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
<div
:style="{
position: 'absolute',
left: 0,
bottom: 0,
width: '100%',
borderTop: '1px solid #e9e9e9',
padding: '10px 16px',
background: '#fff',
textAlign: 'right',
}"
>
<a-button
:style="{marginRight: '8px'}"
@click="onClose"
>
Cancel
</a-button>
<a-button @click="onClose" type="primary">Submit</a-button>
</div>
</a-drawer>
</div>
</template>
<script>
export default {
data() {
return {
form: this.$form.createForm(this),
visible: false,
}
},
methods: {
showDrawer() {
this.visible = true
},
onClose() {
this.visible = false
},
},
}
</script>
```

4
components/drawer/demo/index.vue
View File

@ -3,7 +3,7 @@ import BasicRight from './basic-right'
import Placement from './placement'
import UserProfile from './user-profile'
import MultiLevelDrawer from './multi-level-drawer'
import FromDrawer from './from-drawer'
import FormInDrawer from './form-in-drawer'
// import CustomPaging from './customPaging'
// import CustomArrows from './customArrows'
@ -50,7 +50,7 @@ export default {
<md cn={md.cn} us={md.us} />
<BasicRight />
<Placement />
<FromDrawer />
<FormInDrawer />
<UserProfile />
<MultiLevelDrawer />
<api>

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

@ -5,16 +5,16 @@
| --- | --- | --- | --- |
| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true |
| destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false |
| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| selectors  | 'body' |
| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' |
| mask | Whether to show mask or not. | Boolean | true |
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true |
| maskStyle | Style for Drawer's mask element. | object | {} |
| title | The title for Drawer. | string\|slot | - |
| visible | Whether the Drawer dialog is visible or not. | boolean | false |
| wrapClassName | The class name of the container of the Drawer dialog. | string | - |
| wrapStyle | The style of the container of the Drawer dialog. | object | - |
| width | Width of the Drawer dialog. | string\|number | 256 |
| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - |
| className | The class name of the container of the Drawer dialog. | string | - |
| zIndex | The `z-index` of the Drawer. | Number | 1000 |
| placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' |

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

@ -4,13 +4,14 @@
| --- | --- | --- | --- |
| closable | 是否显示右上角的关闭按钮 | boolean | true |
| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |
| getContainer | 指定 Drawer 挂载的 HTML 节点 | HTMLElement \| `() => HTMLElement` \| selectors  | 'body' |
| getContainer | 指定 Drawer 挂载的 HTML 节点 | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
| mask | 是否展示遮罩 | Boolean | true |
| maskStyle | 遮罩样式 | object | {} |
| title | 标题 | string \| slot | - |
| visible | Drawer 是否可见 | boolean | - |
| wrapClassName | 对话框外层容器的类名 | string | - |
| wrapStyle | 对话框外层容器的`style` | object | - |
| width | 宽度 | string \| number | 256 |
| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |
| zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |