Vben
2 years ago
committed by
GitHub
GitHub
75 changed files with 282 additions and 383 deletions
@ -0,0 +1,2 @@ |
|||
export * from './ellipsis-text'; |
|||
export * from './page'; |
|||
@ -1,11 +1,11 @@ |
|||
interface PageHeaderProps { |
|||
title?: string; |
|||
description?: string; |
|||
} |
|||
|
|||
interface Props extends PageHeaderProps { |
|||
headerSticky?: boolean; |
|||
contentClass?: string; |
|||
showFooter?: boolean; |
|||
showHeader?: boolean; |
|||
} |
|||
|
|||
export type { PageHeaderProps, Props }; |
|||
@ -1,7 +1,3 @@ |
|||
export * from './about'; |
|||
export * from './authentication'; |
|||
export * from './dashboard'; |
|||
export * from './ellipsis-text'; |
|||
export * from './fallback'; |
|||
export * from './page'; |
|||
export * from './components'; |
|||
export * from './ui'; |
|||
export { useToast } from '@vben-core/shadcn-ui'; |
|||
|
|||
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
@ -0,0 +1,4 @@ |
|||
export * from './about'; |
|||
export * from './authentication'; |
|||
export * from './dashboard'; |
|||
export * from './fallback'; |
|||
@ -1,11 +1,7 @@ |
|||
<script lang="ts" setup> |
|||
import { Fallback } from '@vben/common-ui'; |
|||
import { Page } from '@vben/common-ui'; |
|||
</script> |
|||
|
|||
<template> |
|||
<Fallback |
|||
description="当前页面仅 Admin 账号可见" |
|||
status="coming-soon" |
|||
title="页面访问测试" |
|||
/> |
|||
<Page description="当前页面仅 Admin 账号可见" title="页面访问测试" /> |
|||
</template> |
|||
|
|||
@ -1,11 +1,7 @@ |
|||
<script lang="ts" setup> |
|||
import { Fallback } from '@vben/common-ui'; |
|||
import { Page } from '@vben/common-ui'; |
|||
</script> |
|||
|
|||
<template> |
|||
<Fallback |
|||
description="当前页面仅 Super 账号可见" |
|||
status="coming-soon" |
|||
title="页面访问测试" |
|||
/> |
|||
<Page description="当前页面仅 Super 账号可见" title="页面访问测试" /> |
|||
</template> |
|||
|
|||
@ -1,11 +1,7 @@ |
|||
<script lang="ts" setup> |
|||
import { Fallback } from '@vben/common-ui'; |
|||
import { Page } from '@vben/common-ui'; |
|||
</script> |
|||
|
|||
<template> |
|||
<Fallback |
|||
description="当前页面仅 User 可见" |
|||
status="coming-soon" |
|||
title="页面访问测试" |
|||
/> |
|||
<Page description="当前页面仅 User 账号可见" title="页面访问测试" /> |
|||
</template> |
|||
|
|||
@ -1,2 +0,0 @@ |
|||
export const longText: string = |
|||
'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 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。'; |
|||
@ -1,42 +1,41 @@ |
|||
<script lang="ts" setup> |
|||
import { ref } from 'vue'; |
|||
|
|||
import { EllipsisText } from '@vben/common-ui'; |
|||
import { EllipsisText, Page } from '@vben/common-ui'; |
|||
|
|||
import { Collapse, CollapsePanel } from 'ant-design-vue'; |
|||
import { Card } from 'ant-design-vue'; |
|||
|
|||
import { longText } from './data'; |
|||
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); |
|||
const activeKey = ref(['1', '2', '3', '4']); |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="card-box p-5"> |
|||
<h1 class="mb-5 text-xl font-semibold">文本省略示例</h1> |
|||
<div> |
|||
<Collapse v-model:activeKey="activeKey"> |
|||
<CollapsePanel key="1" header="Ellipsis 基本使用"> |
|||
<EllipsisText :max-width="240">{{ text }}</EllipsisText> |
|||
</CollapsePanel> |
|||
<CollapsePanel key="2" header="Ellipsis 多行省略"> |
|||
<EllipsisText :line="2">{{ text }}</EllipsisText> |
|||
</CollapsePanel> |
|||
<CollapsePanel key="3" header="Ellipsis 点击展开"> |
|||
<EllipsisText :line="3" expand>{{ text }}</EllipsisText> |
|||
</CollapsePanel> |
|||
<CollapsePanel key="4" header="Ellipsis 定制 Tooltip 内容"> |
|||
<EllipsisText :max-width="240"> |
|||
住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪 |
|||
<template #tooltip> |
|||
<div style="text-align: center"> |
|||
《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦 |
|||
深海的光 停滞的海浪 |
|||
</div> |
|||
</template> |
|||
</EllipsisText> |
|||
</CollapsePanel> |
|||
</Collapse> |
|||
</div> |
|||
</div> |
|||
<Page |
|||
description="用于多行文本省略，支持点击展开和自定义内容。" |
|||
title="文本省略示例" |
|||
> |
|||
<Card class="mb-4" title="基本使用"> |
|||
<EllipsisText :max-width="240">{{ text }}</EllipsisText> |
|||
</Card> |
|||
|
|||
<Card class="mb-4" title="多行省略"> |
|||
<EllipsisText :line="2">{{ text }}</EllipsisText> |
|||
</Card> |
|||
|
|||
<Card class="mb-4" title="点击展开"> |
|||
<EllipsisText :line="3" expand>{{ text }}</EllipsisText> |
|||
</Card> |
|||
<Card class="mb-4" title="自定义内容"> |
|||
<EllipsisText :max-width="240"> |
|||
住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪 |
|||
<template #tooltip> |
|||
<div style="text-align: center"> |
|||
《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦 |
|||
深海的光 停滞的海浪 |
|||
</div> |
|||
</template> |
|||
</EllipsisText> |
|||
</Card> |
|||
</Page> |
|||
</template> |
|||
|
|||
Loading…
Reference in new issue