drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Drawer

Browse source
This commit is contained in:
梁灏 2018-08-24 11:49:02 +08:00
parent 1416321be5
commit ab58648e93
4 changed files with 295 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

265
examples/routers/drawer.vue
View file

@ -1,75 +1,208 @@
<template> <template>
<Row :gutter="16"> <div>
<i-col span="12"> <Button @click="visible = true">show1</Button>
<Card title="horizontal divider"> <Button @click="visible2 = true">show2</Button>
<div> <Button @click="visible3 = true">show3</Button>
<p> <Drawer v-model="visible" title="抽屉标题" :styles="styles" width="520">
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
</p> <Button @click="visible2 = true">show2</Button>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
</Drawer>
<Divider/> <Drawer v-model="visible2" title="抽屉标题" placement="right">
<p>一些内容</p>
<p> <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
</p> <p>一些内容</p>
<p>一些内容</p>
<Divider>iView </Divider> <p>一些内容</p>
<p>一些内容</p>
<p> <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
</p> <p>一些内容</p>
<p>一些内容</p>
<Divider dashed/> <p>一些内容</p>
<p>一些内容</p>
<p> <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
</p> <p>一些内容</p>
<p>一些内容</p>
<Divider orientation="left">iView</Divider> <p>一些内容</p>
<p>一些内容</p>
<p> <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
</p> <p>一些内容</p>
<p>一些内容</p>
<Divider orientation="right">iView</Divider> <p>一些内容</p>
<p>一些内容</p>
<p> <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
iView is a set of UI components and widgets built on Vue.js. <p>一些内容</p>
</p> <p>一些内容</p>
<p>一些内容</p>
</div> <p>一些内容</p>
</Card> <p>一些内容</p>
</i-col> <p>一些内容</p>
<i-col span="12"> <p>一些内容</p>
<Card title="vertical divider"> <p>一些内容</p>
<div> <p>一些内容</p>
iView <p>一些内容</p>
<Divider type="vertical" /> <p>一些内容</p>
<a href="#">Components</a> <p>一些内容</p>
<Divider type="vertical" /> <p>一些内容</p>
<a href="#">Divider</a> <p>一些内容</p>
</div> <p>一些内容</p>
</Card> <p>一些内容</p>
</i-col> <p>一些内容</p>
</Row> <p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容22</p>
</Drawer>
<Drawer v-model="visible3" placement="left">
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容</p>
<p>一些内容22</p>
</Drawer>
</div>
</template> </template>
<script> <script>
export default {} export default {
data () {
return {
visible: false,
visible2: false,
visible3: false,
styles: {
height: 'calc(100% - 55px)',
paddingBottom: '53px',
},
ms: {
backgroundColor: 'rgba(255,0,255,0.5)'
}
};
}
};
</script> </script>
<style> <style>
body{
height: 2000px;
}
</style> </style>

19
src/components/drawer/drawer.vue
View file

@ -4,8 +4,8 @@
<div class="ivu-drawer-mask" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div> <div class="ivu-drawer-mask" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
</transition> </transition>
<div :class="wrapClasses" @click="handleWrapClick"> <div :class="wrapClasses" @click="handleWrapClick">
<transition name="fade"> <transition :name="'move-' + placement">
<div class="ivu-drawer" :style="mainStyles" v-show="visible"> <div :class="classes" :style="mainStyles" v-show="visible">
<div :class="contentClasses" ref="content"> <div :class="contentClasses" ref="content">
<a class="ivu-drawer-close" v-if="closable" @click="close"> <a class="ivu-drawer-close" v-if="closable" @click="close">
<slot name="close"> <slot name="close">
@ -24,13 +24,14 @@
import Icon from '../icon'; import Icon from '../icon';
import { oneOf } from '../../utils/assist'; import { oneOf } from '../../utils/assist';
import TransferDom from '../../directives/transfer-dom'; import TransferDom from '../../directives/transfer-dom';
import Emitter from '../../mixins/emitter';
import ScrollbarMixins from '../modal/mixins-scrollbar'; import ScrollbarMixins from '../modal/mixins-scrollbar';
const prefixCls = 'ivu-drawer'; const prefixCls = 'ivu-drawer';
export default { export default {
name: 'Drawer', name: 'Drawer',
mixins: [ ScrollbarMixins ], mixins: [ Emitter, ScrollbarMixins ],
components: { Icon }, components: { Icon },
directives: { TransferDom }, directives: { TransferDom },
props: { props: {
@ -60,6 +61,9 @@
maskStyle: { maskStyle: {
type: Object type: Object
}, },
styles: {
type: Object
},
scrollable: { scrollable: {
type: Boolean, type: Boolean,
default: false default: false
@ -124,6 +128,15 @@
} }
]; ];
}, },
classes () {
return [
`${prefixCls}`,
`${prefixCls}-${this.placement}`,
{
[`${prefixCls}-no-header`]: !this.showHead,
}
];
}
}, },
methods: { methods: {
close () { close () {

79
src/styles/components/drawer.less
View file

@ -1,5 +1,84 @@
@drawer-prefix-cls: ~"@{css-prefix}drawer"; @drawer-prefix-cls: ~"@{css-prefix}drawer";
.@{drawer-prefix-cls} { .@{drawer-prefix-cls} {
width: auto;
height: 100%;
position: fixed;
top: 0;
&-left{
left: 0;
}
&-right{
right: 0;
}
&-hidden {
display: none !important;
}
&-wrap {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-drawer;
-webkit-overflow-scrolling: touch;
outline: 0;
}
&-wrap * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
&-mask {
.mask;
}
&-content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
background-color: #fff;
border: 0;
background-clip: padding-box;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
&-no-mask{
pointer-events: auto;
}
}
&-header {
.content-header;
}
&-close {
z-index: 1;
.content-close(1px, 31px);
}
&-body {
width: 100%;
height: calc(~'100% - 51px');
padding: 16px;
font-size: 12px;
line-height: 1.5;
word-wrap: break-word;
position: absolute;
overflow: auto;
}
&-no-header &-body{
height: 100%;
}
&-no-mask{
pointer-events: none;
}
} }

1
src/styles/custom.less
View file

@ -166,6 +166,7 @@
@zindex-back-top : 10; @zindex-back-top : 10;
@zindex-select : 900; @zindex-select : 900;
@zindex-modal : 1000; @zindex-modal : 1000;
@zindex-drawer : 1000;
@zindex-message : 1010; @zindex-message : 1010;
@zindex-notification : 1010; @zindex-notification : 1010;
@zindex-tooltip : 1060; @zindex-tooltip : 1060;