naive-ui/demo/documentation/components/drawer/zhCN/basic.md
2020-03-03 19:25:25 +08:00

29 lines
689 B
Markdown

# 基础用法
```html
<n-button-group>
<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>
</n-button-group>
<n-drawer v-model="active" :width="502" :placement="placement">
<n-h1>斯通纳</n-h1>
<n-p>《斯通纳》是美国作家约翰·威廉姆斯在 1965 年出版的小说。</n-p>
</n-drawer>
```
```js
export default {
data () {
return {
active: false,
placement: 'right'
}
},
methods: {
activate (placement) {
this.active = true
this.placement = placement
}
}
}
```