Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Popover): 优化Popover组件文档 #435

Merged
merged 2 commits into from
Apr 13, 2022
Merged

feat(Popover): 优化Popover组件文档 #435

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
80af708
feat(Popover): 优化Popover组件文档
xingyan95 Apr 12, 2022
fcfbaa5
fix(Popover): 移除四级标题前的br标签
xingyan95 Apr 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 63 additions & 59 deletions packages/devui-vue/docs/components/popover/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,6 @@
```vue
<template>
<div class="popover-demo-item-horizontal">
<d-popover :position="['top']">
<template #content>
<div>top</div>
</template>
<template #reference>
<d-button style="width: 100px;">top</d-button>
</template>
</d-popover>
<d-popover :position="['top-start']" align="start">
<template #content>
<div>
Expand All @@ -104,6 +96,14 @@
<d-button style="width: 100px;">top-start</d-button>
</template>
</d-popover>
<d-popover :position="['top']">
<template #content>
<div>top</div>
</template>
<template #reference>
<d-button style="width: 100px;">top</d-button>
</template>
</d-popover>
<d-popover :position="['top-end']" align="end">
<template #content>
<div>
Expand All @@ -119,14 +119,6 @@

<div class="popover-demo-vertical-wrapper">
<div class="popover-demo-item-vertical">
<d-popover :position="['left']">
<template #content>
<div>left</div>
</template>
<template #reference>
<d-button style="width: 100px;">left</d-button>
</template>
</d-popover>
<d-popover :position="['left-start']" align="start">
<template #content>
<div>
Expand All @@ -138,6 +130,14 @@
<d-button style="width: 100px;">left-start</d-button>
</template>
</d-popover>
<d-popover :position="['left']">
<template #content>
<div>left</div>
</template>
<template #reference>
<d-button style="width: 100px;">left</d-button>
</template>
</d-popover>
<d-popover :position="['left-end']" align="end">
<template #content>
<div>
Expand All @@ -151,14 +151,6 @@
</d-popover>
</div>
<div class="popover-demo-item-vertical">
<d-popover :position="['right']">
<template #content>
<div>right</div>
</template>
<template #reference>
<d-button style="width: 100px;">right</d-button>
</template>
</d-popover>
<d-popover :position="['right-start']" align="start">
<template #content>
<div>
Expand All @@ -170,6 +162,14 @@
<d-button style="width: 100px;">right-start</d-button>
</template>
</d-popover>
<d-popover :position="['right']">
<template #content>
<div>right</div>
</template>
<template #reference>
<d-button style="width: 100px;">right</d-button>
</template>
</d-popover>
<d-popover :position="['right-end']" align="end">
<template #content>
<div>
Expand All @@ -184,14 +184,6 @@
</div>
</div>
<div class="popover-demo-item-horizontal">
<d-popover :position="['bottom']">
<template #content>
<div>bottom</div>
</template>
<template #reference>
<d-button style="width: 100px;">bottom</d-button>
</template>
</d-popover>
<d-popover :position="['bottom-start']" align="start">
<template #content>
<div>
Expand All @@ -203,6 +195,14 @@
<d-button style="width: 100px;">bottom-start</d-button>
</template>
</d-popover>
<d-popover :position="['bottom']">
<template #content>
<div>bottom</div>
</template>
<template #reference>
<d-button style="width: 100px;">bottom</d-button>
</template>
</d-popover>
<d-popover :position="['bottom-end']" align="end">
<template #content>
<div>
Expand Down Expand Up @@ -307,43 +307,47 @@ export default defineComponent({

:::

### d-popover 参数

| 参数 | 类型 | 默认值 | 描述 | 跳转 Demo |
| ----------------- | ------------------------- | ---------- | --------------------------------------------------------------------------------------------- | ------------------------- |
| content | `string` | - | 可选，弹出框的显示内容 | [基本用法](#基本用法) |
| is-open | `boolean` | false | 可选，手动控制弹出状态 | [手动触发](#手动触发) |
| trigger | `TriggerType` | click | 可选，弹框触发方式 | [自定义内容](#自定义内容) |
| pop-type | `PopType` | default | 可选，弹出框类型，样式不同 | [基本用法](#基本用法) |
| position | `Placement[]` | ['bottom'] | 可选，控制弹框出现的方向 | [弹出位置](#弹出位置) |
| align | `start \| end \| null` | null | 可选，对齐方式，默认居中对齐。若指定`start`对齐，当`start`位置放不下时，会自动调整为`end`对齐 | [弹出位置](#弹出位置) |
| offset | `number \| OffsetOptions` | 8 | 可选，指定相对触发元素的偏移距离 | |
| show-animation | `boolean` | true | 可选，是否显示动画 | [基本用法](#基本用法) |
| mouse-enter-delay | `number` | 150 | 可选，仅在 trigger 为 hover 的时候，设置鼠标移入后延时多久才显示 Popover，单位是 `ms` | [延时触发](#延时触发) |
| mouse-leave-delay | `number` | 100 | 可选，仅在 trigger 为 hover 的时候，设置鼠标移出后延时多久才隐藏 popover，单位是 `ms` | [延时触发](#延时触发) |

### d-popover 插槽

| 名称 | 说明 |
| --------- | --------------------------- |
### Popover 参数

| 参数名 | 类型 | 默认值 | 描述 | 跳转 Demo |
| :---------------- | :------------------------------------------ | :--------- | :-------------------------------------------------------------------------------------------- | :------------------------ |
| content | `string` | - | 可选，弹出框的显示内容 | [基本用法](#基本用法) |
| is-open | `boolean` | false | 可选，手动控制弹出状态 | [手动触发](#手动触发) |
| trigger | [TriggerType](#triggertype) | click | 可选，弹框触发方式 | [自定义内容](#自定义内容) |
| pop-type | [PopType](#poptype) | default | 可选，弹出框类型，样式不同 | [基本用法](#基本用法) |
| position | [Placement[]](#placement) | ['bottom'] | 可选，控制弹框出现的方向 | [弹出位置](#弹出位置) |
| align | `start \| end \| null` | null | 可选，对齐方式，默认居中对齐。若指定`start`对齐，当`start`位置放不下时，会自动调整为`end`对齐 | [弹出位置](#弹出位置) |
| offset | `number` \| [OffsetOptions](#offsetoptions) | 8 | 可选，指定相对触发元素的偏移距离 | |
| show-animation | `boolean` | true | 可选，是否显示动画 | [基本用法](#基本用法) |
| mouse-enter-delay | `number` | 150 | 可选，仅在 trigger 为 hover 的时候，设置鼠标移入后延时多久才显示 Popover，单位是 `ms` | [延时触发](#延时触发) |
| mouse-leave-delay | `number` | 100 | 可选，仅在 trigger 为 hover 的时候，设置鼠标移出后延时多久才隐藏 popover，单位是 `ms` | [延时触发](#延时触发) |

### Popover 插槽

| 名称名 | 说明 |
| :-------- | :-------------------------- |
| content | 自定义菜单内容 |
| reference | 触发 Popover 显示的元素内容 |

### TriggerType 类型
### Popover 类型定义

<br />
xingyan95 marked this conversation as resolved.
Show resolved Hide resolved

#### TriggerType

```typescript
```ts
type TriggerType = 'click' | 'hover' | 'manually';
```

### PopType 类型
#### PopType

```typescript
```ts
type PopType = 'success' | 'error' | 'warning' | 'info' | 'default';
```

### Placement 类型
#### Placement

```typescript
```ts
type Placement =
| 'top'
| 'right'
Expand All @@ -359,8 +363,8 @@ type Placement =
| 'left-end';
```

### OffsetOptions 类型
#### OffsetOptions

```typescript
```ts
type OffsetOptions = { mainAxis?: number; crossAxis?: number };
```