feat: update drawer
tangjinzhou
parent
3fb4067d1a
commit
3ca22aa070
|
|
@ -1,3 +1,3 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`DatePicker prop locale should works 1`] = `<span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Избери дата" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-clear anticon anticon-cross-circle"><!----></i><span class="ant-calendar-picker-icon"></span></div></span>`;
|
||||
exports[`DatePicker prop locale should works 1`] = `<span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Избери дата" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></i><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span>`;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`WeekPicker should support style prop 1`] = `<span class="ant-calendar-picker" style="width: 400px;"><span class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></span></span>`;
|
||||
exports[`WeekPicker should support style prop 1`] = `<span class="ant-calendar-picker" style="width: 400px;"><span class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span>`;
|
||||
|
|
|
|||
|
|
@ -57,6 +57,25 @@ describe('Drawer', () => {
|
|||
})
|
||||
})
|
||||
|
||||
it('render top drawer', async () => {
|
||||
const props = {
|
||||
propsData: {
|
||||
visible: true,
|
||||
height: 400,
|
||||
placement: 'top',
|
||||
getContainer: false,
|
||||
},
|
||||
slots: {
|
||||
default: 'Here is content of Drawer',
|
||||
},
|
||||
sync: false,
|
||||
}
|
||||
const wrapper = mount(Drawer, props)
|
||||
await asyncExpect(() => {
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
it('have a title', async () => {
|
||||
const props = {
|
||||
propsData: {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@ import { mount } from '@vue/test-utils'
|
|||
import Drawer from '..'
|
||||
import Button from '../../button'
|
||||
import { asyncExpect } from '@/tests/utils'
|
||||
|
||||
export function $$ (className) {
|
||||
return document.body.querySelectorAll(className)
|
||||
}
|
||||
const MultiDrawer = {
|
||||
props: {
|
||||
placement: {
|
||||
|
|
@ -27,6 +29,7 @@ const MultiDrawer = {
|
|||
this.childrenDrawer = true
|
||||
},
|
||||
onChildrenDrawerClose () {
|
||||
console.log('hello')
|
||||
this.childrenDrawer = false
|
||||
},
|
||||
},
|
||||
|
|
@ -35,7 +38,6 @@ const MultiDrawer = {
|
|||
props: {
|
||||
title: 'Multi-level drawer',
|
||||
width: 520,
|
||||
closable: false,
|
||||
visible: this.visible,
|
||||
getContainer: false,
|
||||
wrapClassName: 'test_drawer',
|
||||
|
|
@ -49,7 +51,7 @@ const MultiDrawer = {
|
|||
props: {
|
||||
title: 'Two-level Drawer',
|
||||
width: 320,
|
||||
closable: false,
|
||||
wrapClassName: 'Two-level',
|
||||
visible: this.childrenDrawer,
|
||||
getContainer: false,
|
||||
placement: this.placement,
|
||||
|
|
@ -137,7 +139,7 @@ describe('Drawer', () => {
|
|||
}, 1000)
|
||||
})
|
||||
|
||||
it('render right MultiDrawer', async () => {
|
||||
it('render left MultiDrawer', async () => {
|
||||
document.body.innerHTML = ''
|
||||
const wrapper = mount(MultiDrawer, {
|
||||
propsData: {
|
||||
|
|
@ -157,4 +159,24 @@ describe('Drawer', () => {
|
|||
expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
it('render top MultiDrawer', async () => {
|
||||
const wrapper = mount(MultiDrawer, {
|
||||
propsData: {
|
||||
placement: 'top',
|
||||
},
|
||||
sync: false,
|
||||
})
|
||||
await asyncExpect(() => {
|
||||
wrapper.find('#open_drawer').trigger('click')
|
||||
}, 0)
|
||||
await asyncExpect(() => {
|
||||
wrapper.find('#open_two_drawer').trigger('click')
|
||||
}, 0)
|
||||
await asyncExpect(() => {
|
||||
const translateY = wrapper.find('.ant-drawer.test_drawer').element.parentElement.style.transform
|
||||
expect(translateY).toEqual('translateY(180px)')
|
||||
expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
|
||||
}, 1000)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ exports[`Drawer class is test_drawer 1`] = `
|
|||
<div class="ant-drawer-mask"></div>
|
||||
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 256px;">
|
||||
<div class="ant-drawer-content">
|
||||
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%; opacity: 0;"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"></span></button>
|
||||
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%; opacity: 0;"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
|
||||
<div class="ant-drawer-body">Here is content of Drawer</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -54,7 +54,7 @@ exports[`Drawer have a title 1`] = `
|
|||
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;">
|
||||
<div class="ant-drawer-header">
|
||||
<div class="ant-drawer-title">Test Title</div>
|
||||
</div><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"></span></button>
|
||||
</div><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
|
||||
<div class="ant-drawer-body">Here is content of Drawer</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -69,7 +69,22 @@ exports[`Drawer render correctly 1`] = `
|
|||
<div class="ant-drawer-mask"></div>
|
||||
<div class="ant-drawer-content-wrapper" style="transform: translateX(100%); width: 400px;">
|
||||
<div class="ant-drawer-content">
|
||||
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"></span></button>
|
||||
<div class="ant-drawer-wrapper-body" style="overflow: auto; height: 100%;"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
|
||||
<div class="ant-drawer-body">Here is content of Drawer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Drawer render top drawer 1`] = `
|
||||
<div>
|
||||
<div class="ant-drawer ant-drawer-top">
|
||||
<div class="ant-drawer-mask"></div>
|
||||
<div class="ant-drawer-content-wrapper" style="transform: translateY(-100%); height: 400px;">
|
||||
<div class="ant-drawer-content">
|
||||
<div class="ant-drawer-wrapper-body"><button aria-label="Close" class="ant-drawer-close"><span class="ant-drawer-close-x"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></button>
|
||||
<div class="ant-drawer-body">Here is content of Drawer</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/drawer/demo/basic-left.md correctly 1`] = `
|
||||
<div><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
|
||||
<div><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
|
||||
<!---->
|
||||
|
|
@ -18,6 +12,13 @@ exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] =
|
|||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-right: 8px;"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="top"><span class="ant-radio-inner"></span></span><span>top</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="right"><span class="ant-radio-inner"></span></span><span>right</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="bottom"><span class="ant-radio-inner"></span></span><span>bottom</span></label><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="left"><span class="ant-radio-inner"></span></span><span>left</span></label></div> <button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-list ant-list-split ant-list-bordered">
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
<cn>
|
||||
#### 左侧滑出
|
||||
基础抽屉，点击触发按钮抽屉从左滑出，点击遮罩区关闭
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Left Slider
|
||||
Basic drawer.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-button type="primary" @click="showDrawer">
|
||||
Open
|
||||
</a-button>
|
||||
<a-drawer
|
||||
placement="left"
|
||||
:closable="false"
|
||||
@close="onClose"
|
||||
:visible="visible"
|
||||
>
|
||||
<span slot="title">Basic Drawer</span>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showDrawer() {
|
||||
this.visible = true
|
||||
},
|
||||
onClose() {
|
||||
this.visible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import BasicRight from './basic-right'
|
||||
import BasicLeft from './basic-left'
|
||||
import Placement from './placement'
|
||||
import UserProfile from './user-profile'
|
||||
import MultiLevelDrawer from './multi-level-drawer'
|
||||
import FromDrawer from './from-drawer'
|
||||
|
|
@ -14,26 +14,34 @@ import '../style'
|
|||
|
||||
const md = {
|
||||
cn: `# Drawer 抽屉
|
||||
抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。
|
||||
## 何时使用
|
||||
屏幕边缘滑出的浮层面板。
|
||||
|
||||
## 何时使用
|
||||
|
||||
抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。
|
||||
|
||||
* 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
|
||||
* 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
|
||||
|
||||
* 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
|
||||
* 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
|
||||
## 代码演示
|
||||
`,
|
||||
us: `# Drawer
|
||||
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context.
|
||||
## When To Use
|
||||
Panel slides from screen edge.
|
||||
|
||||
* Use a Form to create or edit a set of information.
|
||||
* Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
|
||||
* When a same Form is needed in multiple places.
|
||||
## When To Use
|
||||
|
||||
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context.
|
||||
|
||||
* Use a Form to create or edit a set of information.
|
||||
* Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
|
||||
* When a same Form is needed in multiple places.
|
||||
## Examples
|
||||
`,
|
||||
}
|
||||
export default {
|
||||
category: 'Components',
|
||||
type: 'Feedback',
|
||||
zhType: '反馈',
|
||||
title: 'Drawer',
|
||||
subtitle: '抽屉',
|
||||
render () {
|
||||
|
|
@ -41,7 +49,7 @@ export default {
|
|||
<div>
|
||||
<md cn={md.cn} us={md.us} />
|
||||
<BasicRight />
|
||||
<BasicLeft />
|
||||
<Placement />
|
||||
<FromDrawer />
|
||||
<UserProfile />
|
||||
<MultiLevelDrawer />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
<cn>
|
||||
#### 自定义位置
|
||||
自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Custom Placement
|
||||
Basic drawer.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-radio-group
|
||||
style="margin-right: 8px"
|
||||
:defaultValue="placement"
|
||||
@change="onChange"
|
||||
>
|
||||
<a-radio value="top">top</a-radio>
|
||||
<a-radio value="right">right</a-radio>
|
||||
<a-radio value="bottom">bottom</a-radio>
|
||||
<a-radio value="left">left</a-radio>
|
||||
</a-radio-group>
|
||||
<a-button type="primary" @click="showDrawer">
|
||||
Open
|
||||
</a-button>
|
||||
<a-drawer
|
||||
title="Basic Drawer"
|
||||
:placement="placement"
|
||||
:closable="false"
|
||||
@close="onClose"
|
||||
:visible="visible"
|
||||
>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
placement: 'left'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showDrawer() {
|
||||
this.visible = true
|
||||
},
|
||||
onClose() {
|
||||
this.visible = false
|
||||
},
|
||||
onChange(e) {
|
||||
this.placement = e.target.value
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -12,10 +12,12 @@
|
|||
| 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 |
|
||||
| width | Width of the Drawer dialog. | string\|number | 256 |
|
||||
| wrapClassName | The class name of the container of the Drawer dialog. | string | - |
|
||||
| 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. | 'left' \| 'right' | 'right'
|
||||
| placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' |
|
||||
|
||||
|
||||
## Methods
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
import warning from 'warning'
|
||||
import classNames from 'classnames'
|
||||
import VcDrawer from '../vc-drawer/src'
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
import { getComponentFromProp, getOptionProps } from '../_util/props-util'
|
||||
import Icon from '../icon'
|
||||
import { getComponentFromProp, getOptionProps, getClass } from '../_util/props-util'
|
||||
|
||||
const Drawer = {
|
||||
name: 'ADrawer',
|
||||
|
|
@ -10,14 +13,15 @@ const Drawer = {
|
|||
destroyOnClose: PropTypes.bool,
|
||||
getContainer: PropTypes.any,
|
||||
maskClosable: PropTypes.bool.def(true),
|
||||
mask: PropTypes.bool,
|
||||
mask: PropTypes.bool.def(true),
|
||||
maskStyle: PropTypes.object,
|
||||
title: PropTypes.any,
|
||||
visible: PropTypes.bool,
|
||||
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(256),
|
||||
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(256),
|
||||
zIndex: PropTypes.number,
|
||||
prefixCls: PropTypes.string.def('ant-drawer'),
|
||||
placement: PropTypes.string.def('right'),
|
||||
placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('right'),
|
||||
level: PropTypes.any.def(null),
|
||||
wrapClassName: PropTypes.string,
|
||||
},
|
||||
|
|
@ -88,7 +92,16 @@ const Drawer = {
|
|||
getDestoryOnClose () {
|
||||
return this.destroyOnClose && !this.visible
|
||||
},
|
||||
|
||||
// get drawar push width or height
|
||||
getPushTransform (placement) {
|
||||
if (placement === 'left' || placement === 'right') {
|
||||
return `translateX(${placement === 'left' ? 180 : -180}px)`
|
||||
}
|
||||
if (placement === 'top' || placement === 'bottom') {
|
||||
return `translateY(${placement === 'top' ? 180 : -180}px)`
|
||||
}
|
||||
},
|
||||
// render drawer body dom
|
||||
renderBody () {
|
||||
if (this.destoryClose && !this.visible) {
|
||||
return null
|
||||
|
|
@ -110,6 +123,7 @@ const Drawer = {
|
|||
}
|
||||
const { prefixCls, closable } = this.$props
|
||||
const title = getComponentFromProp(this, 'title')
|
||||
// is have header dom
|
||||
let header
|
||||
if (title) {
|
||||
header = (
|
||||
|
|
@ -118,6 +132,7 @@ const Drawer = {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
// is have closer button
|
||||
let closer
|
||||
if (closable) {
|
||||
closer = (
|
||||
|
|
@ -127,7 +142,9 @@ const Drawer = {
|
|||
aria-label='Close'
|
||||
class={`${prefixCls}-close`}
|
||||
>
|
||||
<span class={`${prefixCls}-close-x`} />
|
||||
<span class={`${prefixCls}-close-x`}>
|
||||
<Icon type='close'/>
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
@ -146,31 +163,49 @@ const Drawer = {
|
|||
</div>
|
||||
)
|
||||
},
|
||||
getRcDrawerStyle () {
|
||||
const { zIndex, placement, maskStyle } = this.$props
|
||||
return this.$data._push
|
||||
? {
|
||||
...maskStyle,
|
||||
zIndex,
|
||||
transform: this.getPushTransform(placement),
|
||||
}
|
||||
: {
|
||||
...maskStyle,
|
||||
zIndex,
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
render () {
|
||||
const props = getOptionProps(this)
|
||||
const { zIndex, visible, placement, mask, wrapClassName, ...rest } = props
|
||||
const vcDrawerStyle = this.$data._push
|
||||
? {
|
||||
zIndex,
|
||||
transform: `translateX(${placement === 'left' ? 180 : -180}px)`,
|
||||
const { width, height, visible, placement, wrapClassName, ...rest } = props
|
||||
const haveMask = rest.mask ? '' : 'no-mask'
|
||||
const offsetStyle = {}
|
||||
if (placement === 'left' || placement === 'right') {
|
||||
offsetStyle.width = typeof width === 'number' ? `${width}px` : width
|
||||
} else {
|
||||
offsetStyle.height = typeof height === 'number' ? `${height}px` : height
|
||||
}
|
||||
: { zIndex }
|
||||
const vcDrawerProps = {
|
||||
props: {
|
||||
handler: false,
|
||||
open: visible,
|
||||
showMask: mask,
|
||||
placement,
|
||||
wrapClassName,
|
||||
...rest,
|
||||
...offsetStyle,
|
||||
open: visible,
|
||||
showMask: props.mask,
|
||||
placement,
|
||||
wrapClassName: classNames({
|
||||
[wrapClassName]: !!wrapClassName,
|
||||
[haveMask]: !!haveMask,
|
||||
}),
|
||||
},
|
||||
on: {
|
||||
maskClick: this.onMaskClick,
|
||||
...this.$listeners,
|
||||
},
|
||||
style: vcDrawerStyle,
|
||||
|
||||
style: this.getRcDrawerStyle(),
|
||||
}
|
||||
return (
|
||||
<VcDrawer
|
||||
|
|
|
|||
|
|
@ -10,10 +10,11 @@
|
|||
| maskStyle | 遮罩样式 | object | {} |
|
||||
| title | 标题 | string \| slot | - |
|
||||
| visible | Drawer 是否可见 | boolean | - |
|
||||
| width | 宽度 | string \| number | 256 |
|
||||
| wrapClassName | 对话框外层容器的类名 | string | - |
|
||||
| width | 宽度 | string \| number | 256 |
|
||||
| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |
|
||||
| zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
|
||||
| placement | 抽屉的方向 | 'left' \| 'right' | 'right'
|
||||
| placement | 抽屉的方向 | 'top' \| 'right' \| 'bottom' \| 'left' | 'right'
|
||||
|
||||
## 方法
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ exports[`renders ./components/input/demo/basic.md correctly 1`] = `<input placeh
|
|||
exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
<div><span class="ant-input-group ant-input-group-lg"><div class="ant-col-5"><input defaultvalue="0571" type="text" class="ant-input"></div><div class="ant-col-8"><input defaultvalue="26888888" type="text" class="ant-input"></div></span> <br> <span class="ant-input-group ant-input-group-compact"><input defaultvalue="0571" type="text" class="ant-input" style="width: 20%;"><input defaultvalue="26888888" type="text" class="ant-input" style="width: 30%;"></span> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Zhejiang" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Zhejiang</div></div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span></div>
|
||||
</div><input defaultvalue="Xihu District, Hangzhou" type="text" class="ant-input" style="width: 50%;"></span> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1</div></div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span></div>
|
||||
</div><input defaultvalue="input content" type="text" class="ant-input" style="width: 50%;"></span> <br> <span class="ant-input-group ant-input-group-compact"><input defaultvalue="input content" type="text" class="ant-input" style="width: 50%;"><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span></div></span></span> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option1-1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1-1</div></div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span></div>
|
||||
</div><input defaultvalue="input content" type="text" class="ant-input" style="width: 50%;"></span> <br> <span class="ant-input-group ant-input-group-compact"><input defaultvalue="input content" type="text" class="ant-input" style="width: 50%;"><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option1-1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1-1</div></div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span></div>
|
||||
</div>
|
||||
<div class="ant-select ant-select-enabled">
|
||||
<div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
|
||||
|
|
|
|||
|
|
@ -35,8 +35,9 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
|
|||
</div>
|
||||
</div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon"></i></span>
|
||||
</div>
|
||||
</div> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon"></span>
|
||||
</div></span> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span> <span tabindex="0" class="ant-calendar-picker" style="width: 200px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span>
|
||||
</div> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <span class="ant-time-picker"><input type="text" placeholder="Select time" id="" class="ant-time-picker-input"><span class="ant-time-picker-icon"></span></span> <span tabindex="0" class="ant-calendar-picker" style="width: 200px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
|
||||
<path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
|
||||
</svg></i></span></span>
|
||||
</div>
|
||||
<div class="example"><button type="button" class="ant-btn ant-btn-primary"><span>Show Modal</span></button> <button type="button" class="ant-btn ant-btn-default"><span>Show info</span></button> <button type="button" class="ant-btn ant-btn-default"><span>Show confirm</span></button> <a href="#" class="">Click to confirm</a></div>
|
||||
<div classname="example">
|
||||
|
|
@ -373,7 +374,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue