From 4fe44611d3b0478698ea945ffae21d96c82dd389 Mon Sep 17 00:00:00 2001 From: Netfan Date: Tue, 17 Dec 2024 14:41:03 +0800 Subject: [PATCH] docs: fix docs-link and add `EllipsisText` docs (#5158) * docs: fix docs-link and add `EllipsisText` docs * fix: ellipsisText docs link --- docs/.vitepress/config/zh.mts | 4 ++ .../common-ui/vben-api-component.md | 2 + .../common-ui/vben-ellipsis-text.md | 56 +++++++++++++++++++ .../demos/vben-ellipsis-text/expand/index.vue | 10 ++++ .../demos/vben-ellipsis-text/line/index.vue | 10 ++++ .../vben-ellipsis-text/tooltip/index.vue | 14 +++++ playground/src/views/examples/doc-button.vue | 8 ++- .../src/views/examples/ellipsis/index.vue | 5 ++ playground/src/views/examples/form/basic.vue | 2 +- 9 files changed, 109 insertions(+), 2 deletions(-) create mode 100644 docs/src/components/common-ui/vben-ellipsis-text.md create mode 100644 docs/src/demos/vben-ellipsis-text/expand/index.vue create mode 100644 docs/src/demos/vben-ellipsis-text/line/index.vue create mode 100644 docs/src/demos/vben-ellipsis-text/tooltip/index.vue diff --git a/docs/.vitepress/config/zh.mts b/docs/.vitepress/config/zh.mts index 25e93ced..dff8ac28 100644 --- a/docs/.vitepress/config/zh.mts +++ b/docs/.vitepress/config/zh.mts @@ -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 省略文本', + }, ], }, ]; diff --git a/docs/src/components/common-ui/vben-api-component.md b/docs/src/components/common-ui/vben-api-component.md index f9db74e4..f275adfc 100644 --- a/docs/src/components/common-ui/vben-api-component.md +++ b/docs/src/components/common-ui/vben-api-component.md @@ -123,6 +123,8 @@ function fetchApi(): Promise> { ::: +## API + ### Props | 属性名 | 描述 | 类型 | 默认值 | diff --git a/docs/src/components/common-ui/vben-ellipsis-text.md b/docs/src/components/common-ui/vben-ellipsis-text.md new file mode 100644 index 00000000..109f1161 --- /dev/null +++ b/docs/src/components/common-ui/vben-ellipsis-text.md @@ -0,0 +1,56 @@ +--- +outline: deep +--- + +# Vben EllipsisText 省略文本 + +框架提供的文本展示组件，可配置超长省略、tooltip提示、展开收起等功能。 + +> 如果文档内没有参数说明，可以尝试在在线示例内寻找 + +## 基础用法 + +通过默认插槽设置文本内容，`maxWidth`属性设置最大宽度。 + + + +## 可折叠的文本块 + +通过`line`设置折叠后的行数，`expand`属性设置是否支持展开收起。 + + + +## 自定义提示浮层 + +通过名为`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 | 启用文本提示时，用来定制提示内容 | diff --git a/docs/src/demos/vben-ellipsis-text/expand/index.vue b/docs/src/demos/vben-ellipsis-text/expand/index.vue new file mode 100644 index 00000000..842f6b32 --- /dev/null +++ b/docs/src/demos/vben-ellipsis-text/expand/index.vue @@ -0,0 +1,10 @@ + + diff --git a/docs/src/demos/vben-ellipsis-text/line/index.vue b/docs/src/demos/vben-ellipsis-text/line/index.vue new file mode 100644 index 00000000..dfbf20ef --- /dev/null +++ b/docs/src/demos/vben-ellipsis-text/line/index.vue @@ -0,0 +1,10 @@ + + diff --git a/docs/src/demos/vben-ellipsis-text/tooltip/index.vue b/docs/src/demos/vben-ellipsis-text/tooltip/index.vue new file mode 100644 index 00000000..e6287a12 --- /dev/null +++ b/docs/src/demos/vben-ellipsis-text/tooltip/index.vue @@ -0,0 +1,14 @@ + + diff --git a/playground/src/views/examples/doc-button.vue b/playground/src/views/examples/doc-button.vue index 529c743a..4dad2a8d 100644 --- a/playground/src/views/examples/doc-button.vue +++ b/playground/src/views/examples/doc-button.vue @@ -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); } diff --git a/playground/src/views/examples/ellipsis/index.vue b/playground/src/views/examples/ellipsis/index.vue index ff5066f3..b88c8190 100644 --- a/playground/src/views/examples/ellipsis/index.vue +++ b/playground/src/views/examples/ellipsis/index.vue @@ -5,6 +5,8 @@ import { EllipsisText, Page } from '@vben/common-ui'; import { Card } from 'ant-design-vue'; +import DocButton from '../doc-button.vue'; + const longText = `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 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`; const text = ref(longText); @@ -15,6 +17,9 @@ const text = ref(longText); description="用于多行文本省略，支持点击展开和自定义内容。" title="文本省略组件示例" > + {{ text }} diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue index bc9de302..da292b2b 100644 --- a/playground/src/views/examples/form/basic.vue +++ b/playground/src/views/examples/form/basic.vue @@ -395,7 +395,7 @@ function handleSetFormValue() {