2020-03-15 22:58:26 +08:00
|
|
|
# 显示在指定区域
|
|
|
|
|
```html
|
|
|
|
|
<n-button-group>
|
2020-03-17 16:48:36 +08:00
|
|
|
<n-button @click="activate('top')">上</n-button>
|
|
|
|
|
<n-button @click="activate('right')">右</n-button>
|
|
|
|
|
<n-button @click="activate('bottom')">下</n-button>
|
|
|
|
|
<n-button @click="activate('left')">左</n-button>
|
2020-03-15 22:58:26 +08:00
|
|
|
</n-button-group>
|
2020-03-17 16:48:36 +08:00
|
|
|
<div
|
2020-09-27 00:35:51 +08:00
|
|
|
id="drawer-target"
|
2020-03-20 22:25:21 +08:00
|
|
|
style="
|
|
|
|
|
position:relative;
|
2020-03-20 16:04:42 +08:00
|
|
|
width: 100%;
|
2020-03-20 22:25:21 +08:00
|
|
|
height: 300px;
|
|
|
|
|
border: 1px solid rgba(128, 128, 128, .2);
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
2020-08-27 14:31:04 +08:00
|
|
|
overflow: hidden;
|
2020-03-20 22:25:21 +08:00
|
|
|
"
|
2020-03-17 16:48:36 +08:00
|
|
|
>
|
2020-03-20 22:25:21 +08:00
|
|
|
显示区域
|
2020-03-15 22:58:26 +08:00
|
|
|
</div>
|
2020-03-20 22:25:21 +08:00
|
|
|
<n-drawer
|
2020-09-27 00:35:51 +08:00
|
|
|
v-model:show="active"
|
2020-03-20 22:25:21 +08:00
|
|
|
:width="200"
|
|
|
|
|
:height="200"
|
|
|
|
|
:placement="placement"
|
2020-09-27 00:35:51 +08:00
|
|
|
to="#drawer-target"
|
2020-03-20 22:25:21 +08:00
|
|
|
>
|
2020-03-17 16:48:36 +08:00
|
|
|
<n-h1>斯通纳</n-h1>
|
|
|
|
|
<n-p>《斯通纳》是美国作家约翰·威廉姆斯在 1965 年出版的小说。</n-p>
|
2020-03-15 22:58:26 +08:00
|
|
|
</n-drawer>
|
|
|
|
|
```
|
|
|
|
|
```js
|
|
|
|
|
export default {
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
active: false,
|
|
|
|
|
placement: 'right'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
activate (placement) {
|
|
|
|
|
this.active = true
|
|
|
|
|
this.placement = placement
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
