Drawer add draggable prop
This commit is contained in:
parent
4616d882d5
commit
a17511c397
3 changed files with 160 additions and 62 deletions
|
@ -5,69 +5,68 @@
|
|||
<Button @click="visible3 = true">show3</Button>
|
||||
|
||||
<div style="width: 500px;height:500px;background: green;position: relative;">
|
||||
|
||||
<Drawer v-model="visible" placement="left" draggable inner :transfer="false" width="50" @on-resize-width="hrw" title="抽屉标题" :styles="styles" @on-close="handleClose">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<Drawer v-model="visible" width="70" inner title="抽屉标题" :styles="styles" @on-close="handleClose">
|
||||
<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>
|
||||
|
||||
|
||||
<Drawer v-model="visible2" title="抽屉标题" placement="right">
|
||||
<Drawer v-model="visible2" draggable title="抽屉标题" placement="right">
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
|
@ -126,7 +125,7 @@
|
|||
<p>一些内容</p>
|
||||
<p>一些内容22</p>
|
||||
</Drawer>
|
||||
<Drawer v-model="visible3" placement="left">
|
||||
<Drawer v-model="visible3" draggable placement="left">
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
<p>一些内容</p>
|
||||
|
@ -207,6 +206,9 @@
|
|||
methods: {
|
||||
handleClose () {
|
||||
this.$Message.info('关闭了');
|
||||
},
|
||||
hrw (w) {
|
||||
console.log(w);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue