|
|
@@ -27,8 +27,10 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme
|
|
|
|
|
|
```html
|
|
|
<nut-popover
|
|
|
- v-model:visible="visible"
|
|
|
+ :visible="visible"
|
|
|
:list="List"
|
|
|
+ @open="open"
|
|
|
+ @close="close"
|
|
|
>
|
|
|
<template #reference>
|
|
|
<nut-button type="primary" shape="square">明朗风格</nut-button>
|
|
|
@@ -36,9 +38,11 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme
|
|
|
</nut-popover>
|
|
|
|
|
|
<nut-popover
|
|
|
- v-model:visible="visible"
|
|
|
+ :visible="visible"
|
|
|
theme="dark"
|
|
|
:list="List"
|
|
|
+ @open="open"
|
|
|
+ @close="close"
|
|
|
>
|
|
|
<template #reference>
|
|
|
<nut-button type="primary" shape="square">暗黑风格</nut-button>
|
|
|
@@ -48,14 +52,20 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showPopover: false,
|
|
|
- List: [{name: '选项一'},{name: '选项二'},{name: '选项三'}],
|
|
|
- };
|
|
|
- },
|
|
|
- };
|
|
|
+ setup(){
|
|
|
+ const visible = ref(false);
|
|
|
+ const List = [
|
|
|
+ {name: '选项一'},
|
|
|
+ {name: '选项二'},
|
|
|
+ {name: '选项三'}];
|
|
|
+ }
|
|
|
+
|
|
|
+ const open = () =>{
|
|
|
+ visible.value = true;
|
|
|
+ }
|
|
|
+ const close = () =>{
|
|
|
+ visible.value = false;
|
|
|
+ }
|
|
|
|
|
|
```
|
|
|
|
|
|
@@ -63,9 +73,11 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme
|
|
|
|
|
|
```html
|
|
|
<nut-popover
|
|
|
- v-model:visible="visible"
|
|
|
+ :visible="visible"
|
|
|
theme="dark"
|
|
|
:list="List"
|
|
|
+ @open="open"
|
|
|
+ @close="close"
|
|
|
>
|
|
|
<template #reference>
|
|
|
<nut-button type="primary" shape="square">展示图标</nut-button>
|
|
|
@@ -77,17 +89,22 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- List: [
|
|
|
- {name: '选项一',icon: 'my2'},
|
|
|
- {name: '选项二',icon: 'cart2'},
|
|
|
- {name: '选项三',icon: 'location2'}
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- };
|
|
|
+ setup(){
|
|
|
+ const visible = ref(false);
|
|
|
+ const List = [
|
|
|
+ {name: '选项一',icon: 'my2'},
|
|
|
+ {name: '选项二',icon: 'cart2'},
|
|
|
+ {name: '选项三',icon: 'location2'}
|
|
|
+ ],
|
|
|
+
|
|
|
+ const open = () =>{
|
|
|
+ visible.value = true;
|
|
|
+ }
|
|
|
+ const close = () =>{
|
|
|
+ visible.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
```
|
|
|
|
|
|
@@ -96,8 +113,10 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme
|
|
|
|
|
|
```html
|
|
|
<nut-popover
|
|
|
- v-model:visible="visible"
|
|
|
+ :visible="visible"
|
|
|
:list="List"
|
|
|
+ @open="open"
|
|
|
+ @close="close"
|
|
|
>
|
|
|
<template #reference>
|
|
|
<nut-button type="primary" shape="square">禁用选项</nut-button>
|
|
|
@@ -108,11 +127,10 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showPopover: false,
|
|
|
- List:[{
|
|
|
+
|
|
|
+ setup(){
|
|
|
+ const visible = ref(false);
|
|
|
+ const List = [{
|
|
|
name: '选项一',
|
|
|
disabled: true
|
|
|
},
|
|
|
@@ -123,9 +141,14 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme
|
|
|
{
|
|
|
name: '选项三'
|
|
|
}],
|
|
|
- };
|
|
|
- },
|
|
|
- };
|
|
|
+
|
|
|
+ const open = () =>{
|
|
|
+ visible.value = true;
|
|
|
+ }
|
|
|
+ const close = () =>{
|
|
|
+ visible.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
```
|
|
|
|
|
|
@@ -134,7 +157,10 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme
|
|
|
在名为 content 插槽中自定义内容。
|
|
|
|
|
|
```html
|
|
|
- <nut-popover v-model:visible="visible">
|
|
|
+ <nut-popover
|
|
|
+ :visible="visible"
|
|
|
+ @open="open"
|
|
|
+ @close="close">
|
|
|
<template #reference>
|
|
|
<nut-button type="primary" shape="square">自定义内容</nut-button>
|
|
|
</template>
|
|
|
@@ -160,10 +186,12 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme
|
|
|
|
|
|
```html
|
|
|
<nut-popover
|
|
|
- v-model:visible="visible"
|
|
|
+ :visible="visible"
|
|
|
location="top"
|
|
|
theme="dark"
|
|
|
:list="List"
|
|
|
+ @open="open"
|
|
|
+ @close="close"
|
|
|
>
|
|
|
<template #reference>
|
|
|
<nut-button type="primary" shape="square">向上弹出</nut-button>
|
|
|
@@ -179,7 +207,7 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme
|
|
|
| 字段 | 说明 | 类型 | 默认值 |
|
|
|
|----------------|---------------------------------|---------|------------|
|
|
|
| list | 选项列表 | List[] | [] |
|
|
|
-| v-model | 是否展示气泡弹出层 | boolean | false |
|
|
|
+| visible | 是否展示气泡弹出层 | boolean | false |
|
|
|
| theme | 主题风格,可选值为 dark | string | `light` |
|
|
|
| location | 弹出位置,可选值为 top,left,right | string | `bottom` |
|
|
|
|