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

102 lines
1.7 KiB
Markdown
Raw Normal View History

2019-12-14 02:05:31 +08:00
# 尺寸
```html
2020-10-04 04:07:14 +08:00
<n-space>
<n-dropdown
placement="bottom-start"
trigger="click"
size="small"
@select="handleSelect"
:options="options"
>
<n-button :keyboard="false">小号</n-button>
</n-dropdown>
<n-dropdown
placement="bottom-start"
trigger="click"
size="medium"
@select="handleSelect"
:options="options"
>
<n-button :keyboard="false">中号</n-button>
</n-dropdown>
<n-dropdown
placement="bottom-start"
trigger="click"
size="large"
@select="handleSelect"
:options="options"
>
<n-button :keyboard="false">大号</n-button>
</n-dropdown>
<n-dropdown
placement="bottom-start"
trigger="click"
size="large"
@select="handleSelect"
:options="options"
>
<n-button :keyboard="false">巨大号</n-button>
</n-dropdown>
</n-space>
2019-12-14 02:05:31 +08:00
```
```js
2020-02-04 22:07:55 +08:00
const options = [
{
label: '杰·盖茨比',
2020-10-04 04:07:14 +08:00
key: 'jay gatsby'
2020-02-04 22:07:55 +08:00
},
{
label: '黛西·布坎南',
2020-10-04 04:07:14 +08:00
key: 'daisy buchanan'
2020-02-04 22:07:55 +08:00
},
{
type: 'divider'
},
{
label: '尼克·卡拉威',
2020-10-04 04:07:14 +08:00
key: 'nick carraway'
2020-02-04 22:07:55 +08:00
},
{
label: '其他',
2020-10-04 04:07:14 +08:00
key: 'others1',
2020-02-04 22:07:55 +08:00
children: [
{
label: '乔丹·贝克',
2020-10-04 04:07:14 +08:00
key: 'jordan baker'
2020-02-04 22:07:55 +08:00
},
{
label: '汤姆·布坎南',
2020-10-04 04:07:14 +08:00
key: 'tom buchanan'
2020-02-04 22:07:55 +08:00
},
{
label: '其他',
2020-10-04 04:07:14 +08:00
key: 'others2',
2020-02-04 22:07:55 +08:00
children: [
{
label: '鸡肉',
2020-10-04 04:07:14 +08:00
key: 'chicken'
2020-02-04 22:07:55 +08:00
},
{
label: '牛肉',
2020-10-04 04:07:14 +08:00
key: 'beef'
2020-02-04 22:07:55 +08:00
}
]
}
]
}
]
2019-12-14 02:05:31 +08:00
export default {
2020-10-04 04:07:14 +08:00
inject: ['message'],
2020-02-04 22:07:55 +08:00
data () {
return {
options
}
},
2019-12-14 02:05:31 +08:00
methods: {
handleSelect (name) {
2020-10-04 04:07:14 +08:00
this.message.info(name)
2019-12-14 02:05:31 +08:00
}
}
}
2020-10-04 04:07:14 +08:00
```