update Drawer
This commit is contained in:
梁灏
parent
1416321be5
commit
ab58648e93
4 changed files with 295 additions and 69 deletions
|
|
@ -1,75 +1,208 @@
|
|||
<template>
|
||||
<Row :gutter="16">
|
||||
<i-col span="12">
|
||||
<Card title="horizontal divider">
|
||||
<div>
|
||||
<p>
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
</p>
|
||||
<div>
|
||||
<Button @click="visible = true">show1</Button>
|
||||
<Button @click="visible2 = true">show2</Button>
|
||||
<Button @click="visible3 = true">show3</Button>
|
||||
<Drawer v-model="visible" title="抽屉标题" :styles="styles" width="520">
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</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/>
|
||||
|
||||
<p>
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
</p>
|
||||
|
||||
<Divider>iView </Divider>
|
||||
|
||||
<p>
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
</p>
|
||||
|
||||
<Divider dashed/>
|
||||
|
||||
<p>
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
</p>
|
||||
|
||||
<Divider orientation="left">iView</Divider>
|
||||
|
||||
<p>
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
</p>
|
||||
|
||||
<Divider orientation="right">iView</Divider>
|
||||
|
||||
<p>
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
iView is a set of UI components and widgets built on Vue.js.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
</i-col>
|
||||
<i-col span="12">
|
||||
<Card title="vertical divider">
|
||||
<div>
|
||||
iView
|
||||
<Divider type="vertical" />
|
||||
<a href="#">Components</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="#">Divider</a>
|
||||
</div>
|
||||
</Card>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Drawer v-model="visible2" title="抽屉标题" placement="right">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<style>
|
||||
|
||||
body{
|
||||
height: 2000px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<div class="ivu-drawer-mask" :style="maskStyle" v-show="visible" v-if="mask" @click="handleMask"></div>
|
||||
</transition>
|
||||
<div :class="wrapClasses" @click="handleWrapClick">
|
||||
<transition name="fade">
|
||||
<div class="ivu-drawer" :style="mainStyles" v-show="visible">
|
||||
<transition :name="'move-' + placement">
|
||||
<div :class="classes" :style="mainStyles" v-show="visible">
|
||||
<div :class="contentClasses" ref="content">
|
||||
<a class="ivu-drawer-close" v-if="closable" @click="close">
|
||||
<slot name="close">
|
||||
|
|
@ -24,13 +24,14 @@
|
|||
import Icon from '../icon';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import TransferDom from '../../directives/transfer-dom';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
import ScrollbarMixins from '../modal/mixins-scrollbar';
|
||||
|
||||
const prefixCls = 'ivu-drawer';
|
||||
|
||||
export default {
|
||||
name: 'Drawer',
|
||||
mixins: [ ScrollbarMixins ],
|
||||
mixins: [ Emitter, ScrollbarMixins ],
|
||||
components: { Icon },
|
||||
directives: { TransferDom },
|
||||
props: {
|
||||
|
|
@ -60,6 +61,9 @@
|
|||
maskStyle: {
|
||||
type: Object
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
},
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
@ -124,6 +128,15 @@
|
|||
}
|
||||
];
|
||||
},
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-${this.placement}`,
|
||||
{
|
||||
[`${prefixCls}-no-header`]: !this.showHead,
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,84 @@
|
|||
@drawer-prefix-cls: ~"@{css-prefix}drawer";
|
||||
|
||||
.@{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;
|
||||
}
|
||||
}
|
||||
|
|
@ -166,6 +166,7 @@
|
|||
@zindex-back-top : 10;
|
||||
@zindex-select : 900;
|
||||
@zindex-modal : 1000;
|
||||
@zindex-drawer : 1000;
|
||||
@zindex-message : 1010;
|
||||
@zindex-notification : 1010;
|
||||
@zindex-tooltip : 1060;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue