naive-ui/demo/documentation/components/dropdown/zhCN/placement.md

42 lines
855 B
Markdown
Raw Normal View History

2019-12-14 02:05:31 +08:00
# 弹出位置
2020-02-04 22:07:55 +08:00
使用不同的弹出位置。
2019-12-14 02:05:31 +08:00
```html
2020-02-04 22:07:55 +08:00
<n-dropdown
@select="handleSelect"
placement="bottom-start"
:options="options"
>
<n-button :keyboard="false">金钱所迫,起床工作</n-button>
2019-12-14 02:05:31 +08:00
</n-dropdown>
```
```js
export default {
data () {
return {
2020-02-04 22:07:55 +08:00
options: [
{
label: '滨海湾金沙,新加坡',
value: 'marina bay sands'
2020-02-04 22:07:55 +08:00
},
{
label: '布朗酒店,伦敦',
value: 'brown\'s hotel, london'
2020-02-04 22:07:55 +08:00
},
{
label: '亚特兰蒂斯巴哈马,拿骚',
value: 'atlantis nahamas, nassau'
2020-02-04 22:07:55 +08:00
},
{
label: '比佛利山庄酒店,洛杉矶',
value: 'the beverly hills hotel, los angeles'
2020-02-04 22:07:55 +08:00
}
2019-12-14 02:05:31 +08:00
]
}
},
methods: {
2020-02-04 22:07:55 +08:00
handleSelect (key) {
this.$NMessage.info(key)
2019-12-14 02:05:31 +08:00
}
}
}
2020-02-04 22:07:55 +08:00
```