mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-02 03:58:05 +08:00
fix: drawer style to wrapStyle
This commit is contained in:
tangjinzhou
parent
14dfebab0b
commit
5a9eb8880b
@ -1,131 +0,0 @@
|
||||
<cn>
|
||||
#### 对象编辑
|
||||
用于承载编辑相关操作，需要点击关闭按钮关闭。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Edit item in drawer
|
||||
A drawer containing an editable form which needs to be collapsed by clicking the close button.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-button type="primary" @click="showDrawer">
|
||||
Open
|
||||
</a-button>
|
||||
<a-drawer
|
||||
title="Create"
|
||||
width=720
|
||||
placement="right"
|
||||
:closable="false"
|
||||
@close="onClose"
|
||||
:visible="visible"
|
||||
style="height: calc(100% - 55px);overflow: 'auto';paddingBottom: 53px"
|
||||
>
|
||||
<a-form layout="vertical" hideRequiredMark>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="Name" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'please enter user name' }]}">
|
||||
<a-input placeholder="please enter user name" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="Url" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'please enter url' }]}">
|
||||
<a-input
|
||||
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" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'Please select an owner' }]}">
|
||||
<a-select 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" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'Please choose the type' }]}">
|
||||
<a-select 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" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'Please choose the approver' }]}">
|
||||
<a-select 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" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'Please choose the dateTime' }]}">
|
||||
<a-date-picker
|
||||
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" :fieldDecoratorOptions="{ rules: [{ required: true, message: 'please enter url description' }]}">
|
||||
<a-textarea :rows="4" placeholder="please enter url description" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</Form>
|
||||
<div
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
borderTop: '1px solid #e8e8e8',
|
||||
padding: '10px 16px',
|
||||
textAlign: 'right',
|
||||
left: 0,
|
||||
background: '#fff',
|
||||
borderRadius: '0 0 4px 4px',
|
||||
}"
|
||||
>
|
||||
<a-button
|
||||
:style="{
|
||||
marginRight: 8,
|
||||
}"
|
||||
@click="onClose"
|
||||
>
|
||||
Cancel
|
||||
</a-button>
|
||||
<a-button @click="onClose" type="primary">Submit</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showDrawer() {
|
||||
this.visible = true
|
||||
},
|
||||
onClose() {
|
||||
this.visible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@ -1,4 +1,3 @@
|
||||
import warning from 'warning'
|
||||
import classnames from 'classnames'
|
||||
import VcDrawer from '../vc-drawer/src'
|
||||
import PropTypes from '../_util/vue-types'
|
||||
@ -15,6 +14,7 @@ const Drawer = {
|
||||
maskClosable: PropTypes.bool.def(true),
|
||||
mask: PropTypes.bool.def(true),
|
||||
maskStyle: PropTypes.object,
|
||||
wrapStyle: PropTypes.object,
|
||||
title: PropTypes.any,
|
||||
visible: PropTypes.bool,
|
||||
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(256),
|
||||
@ -107,7 +107,7 @@ const Drawer = {
|
||||
return null
|
||||
}
|
||||
this.destoryClose = false
|
||||
const { placement, bodyStyle } = this.$props
|
||||
const { placement } = this.$props
|
||||
|
||||
const containerStyle = placement === 'left' ||
|
||||
placement === 'right' ? {
|
||||
@ -157,26 +157,22 @@ const Drawer = {
|
||||
>
|
||||
{header}
|
||||
{closer}
|
||||
<div key='body' class={`${prefixCls}-body`} style={bodyStyle}>
|
||||
<div key='body' class={`${prefixCls}-body`}>
|
||||
{this.$slots.default}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
getRcDrawerStyle () {
|
||||
const { zIndex, placement, maskStyle } = this.$props
|
||||
return this.$data._push
|
||||
? {
|
||||
...maskStyle,
|
||||
zIndex,
|
||||
transform: this.getPushTransform(placement),
|
||||
}
|
||||
: {
|
||||
...maskStyle,
|
||||
zIndex,
|
||||
}
|
||||
const { zIndex, placement, maskStyle, wrapStyle } = this.$props
|
||||
const { _push: push } = this.$data
|
||||
return {
|
||||
...maskStyle,
|
||||
zIndex,
|
||||
transform: push ? this.getPushTransform(placement) : undefined,
|
||||
...wrapStyle,
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
render () {
|
||||
const props = getOptionProps(this)
|
||||
@ -200,12 +196,12 @@ const Drawer = {
|
||||
[wrapClassName]: !!wrapClassName,
|
||||
[haveMask]: !!haveMask,
|
||||
}),
|
||||
wrapStyle: this.getRcDrawerStyle(),
|
||||
},
|
||||
on: {
|
||||
maskClick: this.onMaskClick,
|
||||
...this.$listeners,
|
||||
},
|
||||
style: this.getRcDrawerStyle(),
|
||||
}
|
||||
return (
|
||||
<VcDrawer
|
||||
|
||||
@ -2,7 +2,7 @@ import classnames from 'classnames'
|
||||
import Vue from 'vue'
|
||||
import ref from 'vue-ref'
|
||||
import BaseMixin from '../../_util/BaseMixin'
|
||||
import { initDefaultProps, getEvents, getClass } from '../../_util/props-util'
|
||||
import { initDefaultProps, getEvents } from '../../_util/props-util'
|
||||
import { cloneElement } from '../../_util/vnode'
|
||||
import ContainerRender from '../../_util/ContainerRender'
|
||||
import getScrollBarSize from '../../_util/getScrollBarSize'
|
||||
@ -376,6 +376,7 @@ const Drawer = {
|
||||
maskStyle,
|
||||
width,
|
||||
height,
|
||||
wrapStyle,
|
||||
} = this.$props
|
||||
const children = this.$slots.default
|
||||
const wrapperClassname = classnames(prefixCls, {
|
||||
@ -422,6 +423,7 @@ const Drawer = {
|
||||
}],
|
||||
})
|
||||
}
|
||||
|
||||
const domContProps = {
|
||||
class: wrapperClassname,
|
||||
directives: [{
|
||||
@ -433,6 +435,7 @@ const Drawer = {
|
||||
on: {
|
||||
transitionend: this.onWrapperTransitionEnd,
|
||||
},
|
||||
style: wrapStyle,
|
||||
}
|
||||
const directivesMaskDom = [{
|
||||
name: 'ant-ref',
|
||||
|
||||
@ -18,4 +18,5 @@ export default {
|
||||
showMask: PropTypes.bool,
|
||||
maskStyle: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
wrapStyle: PropTypes.object,
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user