feat(demo): add Ellipsis page(文本省略-demo #179) (#290)

Co-authored-by: jackhoo_98 <jackhoo_98@foxmail.com>
vbenjs · Dec 4, 2023 · 9cc5ddf · 9cc5ddf
1 parent c1c40a6
commit 9cc5ddf
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 0 deletions.
diff --git a/apps/admin/src/pages/demo/feat/ellipsis.vue b/apps/admin/src/pages/demo/feat/ellipsis.vue
@@ -0,0 +1,45 @@
+<template>
+  <VbenCard title="文本省略示例">
+    <VbenCard title="Ellipsis 基本使用">
+      <VbenEllipsis>
+        <template #tooltip>
+          <div style="width: 500px">
+            {{ text }}
+          </div>
+        </template>
+        {{ text }}
+      </VbenEllipsis>
+    </VbenCard>
+    <VbenCard title="Ellipsis 多行省略">
+      <VbenEllipsis :line-clamp="2"> {{ text }}</VbenEllipsis>
+    </VbenCard>
+    <VbenCard title="Ellipsis 点击展开">
+      <VbenEllipsis expand-trigger="click" line-clamp="2" :tooltip="false">{{
+        text
+      }}</VbenEllipsis>
+    </VbenCard>
+    <VbenCard title="Ellipsis 定制 Tooltip 内容">
+      <VbenEllipsis style="max-width: 240px">
+        住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
+        <template #tooltip>
+          <div style="text-align: center">
+            《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
+            深海的光 停滞的海浪
+          </div>
+        </template>
+      </VbenEllipsis>
+    </VbenCard>
+  </VbenCard>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const text = ref(
+  `
+    Vben3 是一个免费开源的中后台模版。使用了最新的vue3,vite4,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
+    Vben3 是一个免费开源的中后台模版。使用了最新的vue3,vite4,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
+    Vben3 是一个免费开源的中后台模版。使用了最新的vue3,vite4,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
+    Vben3 是一个免费开源的中后台模版。使用了最新的vue3,vite4,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
+   `,
+)
+</script>
diff --git a/packages/locale/src/lang/en/routes.ts b/packages/locale/src/lang/en/routes.ts
@@ -58,6 +58,7 @@ export default {
       ripple: 'Ripple',
       clickOutSide: 'ClickOutSide',
       print: 'Print',
+      ellipsis: 'EllipsisText',
     },
     page: {
       page: 'Page',

diff --git a/packages/locale/src/lang/zh-CN/routes.ts b/packages/locale/src/lang/zh-CN/routes.ts
@@ -59,6 +59,7 @@ export default {
       ripple: '水波纹',
       clickOutSide: 'ClickOutSide组件',
       print: '打印',
+      ellipsis: '文本省略',
     },
     page: {
       page: '页面',

diff --git a/packages/router/src/routes/modules/demo/feat.ts b/packages/router/src/routes/modules/demo/feat.ts
@@ -36,6 +36,14 @@ const feat: RouteRecordItem = {
         title: 'routes.demo.feat.print',
       },
     },
+    {
+      path: 'ellipsis',
+      name: 'Ellipsis',
+      component: () => import('@/pages/demo/feat/ellipsis.vue'),
+      meta: {
+        title: 'routes.demo.feat.ellipsis',
+      },
+    },
   ],
 }