Commit e54dc74775e1a0d5d3fdbac0b34eb76c2a579104
1 parent
8a3c7282
update demo
Showing
1 changed file
with
64 additions
and
57 deletions
Show diff stats
examples/routers/drawer.vue
| @@ -5,65 +5,67 @@ | @@ -5,65 +5,67 @@ | ||
| 5 | <Button @click="visible3 = true">show3</Button> | 5 | <Button @click="visible3 = true">show3</Button> |
| 6 | 6 | ||
| 7 | <div style="width: 500px;height:500px;background: green;position: relative;"> | 7 | <div style="width: 500px;height:500px;background: green;position: relative;"> |
| 8 | - <Drawer v-model="visible" title="抽屉标题" :styles="styles" :transfer="false" inner> | ||
| 9 | - <p>一些内容</p> | ||
| 10 | - <p>一些内容</p> | ||
| 11 | - <p>一些内容</p> | ||
| 12 | - <Button @click="visible2 = true">show2</Button> | ||
| 13 | - <p>一些内容</p> | ||
| 14 | - <p>一些内容</p> | ||
| 15 | - <p>一些内容</p> | ||
| 16 | - <p>一些内容</p> | ||
| 17 | - <p>一些内容</p> | ||
| 18 | - <p>一些内容</p> | ||
| 19 | - <p>一些内容</p> | ||
| 20 | - <p>一些内容</p> | ||
| 21 | - <p>一些内容</p> | ||
| 22 | - <p>一些内容</p> | ||
| 23 | - <p>一些内容</p> | ||
| 24 | - <p>一些内容</p> | ||
| 25 | - <p>一些内容</p> | ||
| 26 | - <p>一些内容</p> | ||
| 27 | - <p>一些内容</p> | ||
| 28 | - <p>一些内容</p> | ||
| 29 | - <p>一些内容</p> | ||
| 30 | - <p>一些内容</p> | ||
| 31 | - <p>一些内容</p> | ||
| 32 | - <p>一些内容</p> | ||
| 33 | - <p>一些内容</p> | ||
| 34 | - <p>一些内容</p> | ||
| 35 | - <p>一些内容</p> | ||
| 36 | - <p>一些内容</p> | ||
| 37 | - <p>一些内容</p> | ||
| 38 | - <p>一些内容</p> | ||
| 39 | - <p>一些内容</p> | ||
| 40 | - <p>一些内容</p> | ||
| 41 | - <p>一些内容</p> | ||
| 42 | - <p>一些内容</p> | ||
| 43 | - <p>一些内容</p> | ||
| 44 | - <p>一些内容</p> | ||
| 45 | - <p>一些内容</p> | ||
| 46 | - <p>一些内容</p> | ||
| 47 | - <p>一些内容</p> | ||
| 48 | - <p>一些内容</p> | ||
| 49 | - <p>一些内容</p> | ||
| 50 | - <p>一些内容</p> | ||
| 51 | - <p>一些内容</p> | ||
| 52 | - <p>一些内容</p> | ||
| 53 | - <p>一些内容</p> | ||
| 54 | - <p>一些内容</p> | ||
| 55 | - <p>一些内容</p> | ||
| 56 | - <p>一些内容</p> | ||
| 57 | - <p>一些内容</p> | ||
| 58 | - <p>一些内容</p> | ||
| 59 | - <p>一些内容</p> | ||
| 60 | - <p>一些内容</p> | ||
| 61 | - <p>一些内容</p> | ||
| 62 | - <p>一些内容</p> | ||
| 63 | - <p>一些内容</p> | ||
| 64 | - </Drawer> | 8 | + |
| 65 | </div> | 9 | </div> |
| 66 | 10 | ||
| 11 | + <Drawer v-model="visible" width="70" title="抽屉标题" :styles="styles" @on-close="handleClose"> | ||
| 12 | + <p>一些内容</p> | ||
| 13 | + <p>一些内容</p> | ||
| 14 | + <p>一些内容</p> | ||
| 15 | + <Button @click="visible2 = true">show2</Button> | ||
| 16 | + <p>一些内容</p> | ||
| 17 | + <p>一些内容</p> | ||
| 18 | + <p>一些内容</p> | ||
| 19 | + <p>一些内容</p> | ||
| 20 | + <p>一些内容</p> | ||
| 21 | + <p>一些内容</p> | ||
| 22 | + <p>一些内容</p> | ||
| 23 | + <p>一些内容</p> | ||
| 24 | + <p>一些内容</p> | ||
| 25 | + <p>一些内容</p> | ||
| 26 | + <p>一些内容</p> | ||
| 27 | + <p>一些内容</p> | ||
| 28 | + <p>一些内容</p> | ||
| 29 | + <p>一些内容</p> | ||
| 30 | + <p>一些内容</p> | ||
| 31 | + <p>一些内容</p> | ||
| 32 | + <p>一些内容</p> | ||
| 33 | + <p>一些内容</p> | ||
| 34 | + <p>一些内容</p> | ||
| 35 | + <p>一些内容</p> | ||
| 36 | + <p>一些内容</p> | ||
| 37 | + <p>一些内容</p> | ||
| 38 | + <p>一些内容</p> | ||
| 39 | + <p>一些内容</p> | ||
| 40 | + <p>一些内容</p> | ||
| 41 | + <p>一些内容</p> | ||
| 42 | + <p>一些内容</p> | ||
| 43 | + <p>一些内容</p> | ||
| 44 | + <p>一些内容</p> | ||
| 45 | + <p>一些内容</p> | ||
| 46 | + <p>一些内容</p> | ||
| 47 | + <p>一些内容</p> | ||
| 48 | + <p>一些内容</p> | ||
| 49 | + <p>一些内容</p> | ||
| 50 | + <p>一些内容</p> | ||
| 51 | + <p>一些内容</p> | ||
| 52 | + <p>一些内容</p> | ||
| 53 | + <p>一些内容</p> | ||
| 54 | + <p>一些内容</p> | ||
| 55 | + <p>一些内容</p> | ||
| 56 | + <p>一些内容</p> | ||
| 57 | + <p>一些内容</p> | ||
| 58 | + <p>一些内容</p> | ||
| 59 | + <p>一些内容</p> | ||
| 60 | + <p>一些内容</p> | ||
| 61 | + <p>一些内容</p> | ||
| 62 | + <p>一些内容</p> | ||
| 63 | + <p>一些内容</p> | ||
| 64 | + <p>一些内容</p> | ||
| 65 | + <p>一些内容</p> | ||
| 66 | + <p>一些内容</p> | ||
| 67 | + </Drawer> | ||
| 68 | + | ||
| 67 | 69 | ||
| 68 | <Drawer v-model="visible2" title="抽屉标题" placement="right"> | 70 | <Drawer v-model="visible2" title="抽屉标题" placement="right"> |
| 69 | <p>一些内容</p> | 71 | <p>一些内容</p> |
| @@ -201,6 +203,11 @@ | @@ -201,6 +203,11 @@ | ||
| 201 | backgroundColor: 'rgba(255,0,255,0.5)' | 203 | backgroundColor: 'rgba(255,0,255,0.5)' |
| 202 | } | 204 | } |
| 203 | }; | 205 | }; |
| 206 | + }, | ||
| 207 | + methods: { | ||
| 208 | + handleClose () { | ||
| 209 | + this.$Message.info('关闭了'); | ||
| 210 | + } | ||
| 204 | } | 211 | } |
| 205 | }; | 212 | }; |
| 206 | </script> | 213 | </script> |