mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-03 04:21:34 +08:00
docs(popover): vue3
This commit is contained in:
07akioni
parent
2784af7012
commit
6c88053ade
@ -1,6 +1,6 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-popover>
|
||||
<n-popover trigger="hover">
|
||||
<template v-slot:trigger>
|
||||
<n-button>
|
||||
Hover
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
# Delay
|
||||
```html
|
||||
<n-popover :delay="500" :duration="500">
|
||||
<n-popover
|
||||
trigger="hover"
|
||||
:delay="500"
|
||||
:duration="500"
|
||||
>
|
||||
<template v-slot:trigger>
|
||||
<n-button>
|
||||
Delay 500, Duration 500
|
||||
|
||||
@ -3,8 +3,7 @@
|
||||
<n-popover
|
||||
placement="bottom"
|
||||
trigger="hover"
|
||||
@show="handleShow"
|
||||
@hide="handleHide"
|
||||
@update:show="handleUpdateShow"
|
||||
>
|
||||
<template v-slot:trigger>
|
||||
<n-button>
|
||||
@ -18,8 +17,7 @@
|
||||
<n-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
@show="handleShow"
|
||||
@hide="handleHide"
|
||||
@update:show="handleUpdateShow"
|
||||
>
|
||||
<template v-slot:trigger>
|
||||
<n-button>
|
||||
@ -33,8 +31,7 @@
|
||||
<n-popover
|
||||
:show="showPopover"
|
||||
placement="bottom"
|
||||
@show="handleShow"
|
||||
@hide="handleHide"
|
||||
@update:show="handleUpdateShow"
|
||||
>
|
||||
<template v-slot:trigger>
|
||||
<n-button @click="showPopover = !showPopover">
|
||||
@ -49,20 +46,18 @@
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
inject: ['message'],
|
||||
data () {
|
||||
return {
|
||||
showPopover: false
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleShow() {
|
||||
this.$NMessage.success("show popover");
|
||||
},
|
||||
handleHide() {
|
||||
this.$NMessage.success("hide popover");
|
||||
handleUpdateShow (value) {
|
||||
this.message.success(`Update show: ${value}`)
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
@ -21,9 +21,9 @@ manual-position
|
||||
## Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|arrow-style|`Object`|-||
|
||||
|body-class|`string`|-||
|
||||
|body-style|`Object`|-||
|
||||
|arrow-style|`Object`|`undefined`||
|
||||
|body-class|`string`|`undefined`||
|
||||
|body-style|`Object`|`undefined`||
|
||||
|delay|`number`|`200`|Popover showing delay when trigger is `hover`|
|
||||
|disabled|`boolean`|`false`|Whether the popover can't be activated.|
|
||||
|display-directive|`'if' \| 'show'`|`'if'`|The conditionally render directive to show popover content. `if` means using `v-if` to render content, `show` means using `v-show` to render content.|
|
||||
@ -33,20 +33,15 @@ manual-position
|
||||
|placement|`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| `|`'bottom'`||
|
||||
|raw|`boolean`|`false`|Whether to use no default styles.|
|
||||
|show-arrow|`boolean`|`true`||
|
||||
|show|`boolean`|-|Whether to show popover if set.|
|
||||
|show|`boolean`|`undefined`|Whether to show popover if set.|
|
||||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|
||||
|trigger|`'hover' \| 'click'`|`'hover'`||
|
||||
|x|`number`|-|The CSS `left` pixel value when popover manually positioned.|
|
||||
|y|`number`|-|The CSS `top` pixel value when popover manually positioned.|
|
||||
|x|`number`|`undefined`|The CSS `left` pixel value when popover manually positioned.|
|
||||
|y|`number`|`undefined`|The CSS `top` pixel value when popover manually positioned.|
|
||||
|on-update:show|`(value: boolean) => any`|||
|
||||
|
||||
## Slots
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|trigger|`()`|The element or component that triggers popover.|
|
||||
|default|`()`|The content inside popover.|
|
||||
|
||||
|
||||
## Events
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|update:show|`(value: boolean)`||
|
||||
@ -1,6 +1,9 @@
|
||||
# No Arrow
|
||||
```html
|
||||
<n-popover :show-arrow="false">
|
||||
<n-popover
|
||||
trigger="hover"
|
||||
:show-arrow="false"
|
||||
>
|
||||
<template v-slot:trigger>
|
||||
<n-button>
|
||||
Hover
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
# Raw Content
|
||||
```html
|
||||
<n-popover raw :show-arrow="false">
|
||||
<n-popover
|
||||
trigger="hover"
|
||||
raw
|
||||
:show-arrow="false"
|
||||
>
|
||||
<template v-slot:trigger>
|
||||
<n-button>
|
||||
Hover
|
||||
@ -13,10 +17,3 @@
|
||||
</div>
|
||||
</n-popover>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -31,7 +31,7 @@
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
showPopover: false
|
||||
}
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
# Body Style
|
||||
```html
|
||||
<n-popover :body-style="{ width: '500px' }">
|
||||
<n-popover
|
||||
:body-style="{ width: '500px' }"
|
||||
trigger="hover"
|
||||
>
|
||||
<template v-slot:trigger>
|
||||
<n-button>
|
||||
Width 500px
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<n-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
@update:show="handleUpdateShow"
|
||||
@update:show="handleUpdateShow"
|
||||
>
|
||||
<template v-slot:trigger>
|
||||
<n-button>
|
||||
@ -47,7 +47,7 @@
|
||||
```js
|
||||
export default {
|
||||
inject: ['message'],
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
showPopover: false
|
||||
}
|
||||
|
||||
@ -21,9 +21,9 @@ manual-position
|
||||
## Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|arrow-style|`Object \| null`|`null`||
|
||||
|body-class|`string \| null`|`null`||
|
||||
|body-style|`Object \| null`|`null`||
|
||||
|arrow-style|`Object`|`undefined`||
|
||||
|body-class|`string`|`undefined`||
|
||||
|body-style|`Object`|`undefined`||
|
||||
|delay|`number`|`200`|悬浮触发弹出信息的延迟|
|
||||
|disabled|`boolean`|`false`|是否不能激活弹出信息|
|
||||
|display-directive|`'if' \| 'show'`|`'if'`|条件渲染使用的指令，`if` 会让内容被使用 `v-if` 渲染，`show` 会让内容被使用 `v-show` 渲染|
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
# 不用基础样式
|
||||
```html
|
||||
<n-popover trigger="hover" raw :show-arrow="false">
|
||||
<n-popover
|
||||
trigger="hover"
|
||||
raw
|
||||
:show-arrow="false"
|
||||
>
|
||||
<template v-slot:trigger>
|
||||
<n-button style="margin:0;">
|
||||
悬浮
|
||||
@ -13,10 +17,3 @@
|
||||
</div>
|
||||
</n-popover>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -31,7 +31,7 @@
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
showPopover: false
|
||||
}
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
# 主体样式
|
||||
```html
|
||||
<n-popover :body-style="{ width: '500px' }" trigger="hover">
|
||||
<n-popover
|
||||
:body-style="{ width: '500px' }"
|
||||
trigger="hover"
|
||||
>
|
||||
<template v-slot:trigger>
|
||||
<n-button style="margin:0;">
|
||||
宽度 500px
|
||||
|
||||
Loading…
Reference in New Issue
Block a user