Skip to content

Commit

Permalink
docs: fix docs-link and add EllipsisText docs
Browse files Browse the repository at this point in the history
  • Loading branch information
mynetfan committed Dec 17, 2024
1 parent 593916d commit d0696db
Show file tree
Hide file tree
Showing 9 changed files with 107 additions and 2 deletions.
4 changes: 4 additions & 0 deletions docs/.vitepress/config/zh.mts
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,10 @@ function sidebarComponents(): DefaultTheme.SidebarItem[] {
link: 'common-ui/vben-count-to-animator',
text: 'CountToAnimator 数字动画',
},
{
link: 'common-ui/vben-ellipsis-text',
text: 'EllipsisText 省略文本',
},
],
},
];
Expand Down
2 changes: 2 additions & 0 deletions docs/src/components/common-ui/vben-api-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,8 @@ function fetchApi(): Promise<Record<string, any>> {

:::

## API

### Props

| 属性名 | 描述 | 类型 | 默认值 |
Expand Down
56 changes: 56 additions & 0 deletions docs/src/components/common-ui/vben-ellipsis-text.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
outline: deep
---

# Vben EllipsisText 省略文本

框架提供的文本展示组件,可配置超长省略、tooltip提示、展开收起等功能。

> 如果文档内没有参数说明,可以尝试在在线示例内寻找
## 基础用法

通过默认插槽设置文本内容,`maxWidth`属性设置最大宽度。

<DemoPreview dir="demos/vben-ellipsis-text/line" />

## 可折叠的文本块

通过`line`设置折叠后的行数,`expand`属性设置是否支持展开收起。

<DemoPreview dir="demos/vben-ellipsis-text/expand" />

## 自定义提示浮层

通过名为`tooltip`的插槽定制提示信息。

<DemoPreview dir="demos/vben-ellipsis-text/tooltip" />

## API

### Props

| 属性名 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| expand | 支持点击展开或收起 | `boolean` | `false` |
| line | 文本最大行数 | `number` | `1` |
| maxWidth | 文本区域最大宽度 | `number \| string` | `'100%'` |
| placement | 提示浮层的位置 | `'bottom'\|'left'\|'right'\|'top'` | `'top'` |
| tooltip | 启用文本提示 | `boolean` | `true` |
| tooltipBackgroundColor | 提示文本的背景颜色 | `string` | - |
| tooltipColor | 提示文本的颜色 | `string` | - |
| tooltipFontSize | 提示文本的大小 | `string` | - |
| tooltipMaxWidth | 提示浮层的最大宽度。如不设置则保持与文本宽度一致 | `number` | - |
| tooltipOverlayStyle | 提示框内容区域样式 | `CSSProperties` | `{ textAlign: 'justify' }` |

### Events

| 事件名 | 描述 | 类型 |
| ------------ | ------------ | -------------------------- |
| expandChange | 展开状态改变 | `(isExpand:boolean)=>void` |

### Slots

| 插槽名 | 描述 |
| ------- | -------------------------------- |
| tooltip | 启用文本提示时,用来定制提示内容 |
10 changes: 10 additions & 0 deletions docs/src/demos/vben-ellipsis-text/expand/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<script lang="ts" setup>
import { EllipsisText } from '@vben/common-ui';
const text = `
Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。
`;
</script>
<template>
<EllipsisText :line="3" expand>{{ text }}</EllipsisText>
</template>
10 changes: 10 additions & 0 deletions docs/src/demos/vben-ellipsis-text/line/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<script lang="ts" setup>
import { EllipsisText } from '@vben/common-ui';
const text = `
Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈,可以作为项目的启动模版,以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。
`;
</script>
<template>
<EllipsisText :max-width="500">{{ text }}</EllipsisText>
</template>
14 changes: 14 additions & 0 deletions docs/src/demos/vben-ellipsis-text/tooltip/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<script lang="ts" setup>
import { EllipsisText } from '@vben/common-ui';
</script>
<template>
<EllipsisText :max-width="240">
住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
<template #tooltip>
<div style="text-align: center">
《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
深海的光 停滞的海浪
</div>
</template>
</EllipsisText>
</template>
8 changes: 7 additions & 1 deletion playground/src/views/examples/doc-button.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ import { Button } from 'ant-design-vue';
const props = defineProps<{ path: string }>();
function handleClick() {
openWindow(VBEN_DOC_URL + props.path);
// 如果没有.html,打开页面时可能会出现404
const path =
VBEN_DOC_URL +
(props.path.toLowerCase().endsWith('.html')
? props.path
: `${props.path}.html`);
openWindow(path);
}
</script>

Expand Down
3 changes: 3 additions & 0 deletions playground/src/views/examples/ellipsis/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ const text = ref(longText);
description="用于多行文本省略,支持点击展开和自定义内容。"
title="文本省略组件示例"
>
<template #extra>
<DocButton class="mb-2" path="/components/common-ui/vben-ellipsis-text" />
</template>
<Card class="mb-4" title="基本使用">
<EllipsisText :max-width="500">{{ text }}</EllipsisText>
</Card>
Expand Down
2 changes: 1 addition & 1 deletion playground/src/views/examples/form/basic.vue
Original file line number Diff line number Diff line change
Expand Up @@ -395,7 +395,7 @@ function handleSetFormValue() {
</Tabs>
</template>
<template #extra>
<DocButton path="/components/common-ui/vben-form" />
<DocButton class="mb-2" path="/components/common-ui/vben-form" />
</template>
<Card v-show="activeTab === 'basic'" title="基础示例">
<template #extra>
Expand Down

0 comments on commit d0696db

Please sign in to comment.