From 617c908a8dc0522906ad07bb78bb2af975f472a5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-76S42E9\\wj" <kl_wj_lalala@163.com>
Date: Thu, 28 Mar 2024 10:38:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=8Cfold=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B7=BB=E5=8A=A0position=E9=85=8D=E7=BD=AE=EF=BC=8C?=
 =?UTF-8?q?=E5=8F=AF=E8=87=AA=E5=AE=9A=E4=B9=89=E5=B1=95=E5=BC=80=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E7=9B=AE=E5=89=8D=E6=94=AF=E6=8C=81line?=
 =?UTF-8?q?=E5=92=8Cend=E4=B8=A4=E4=B8=AA=E5=8F=82=E6=95=B0=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/components/fold.vue                      |  5 ++--
 packages/src/components/fold/fold.vue         | 12 ++++++++--
 packages/src/components/fold/style/index.scss | 24 +++++++++++++++++--
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/demo/components/fold.vue b/demo/components/fold.vue
index 9db27ff..fbae78a 100644
--- a/demo/components/fold.vue
+++ b/demo/components/fold.vue
@@ -6,14 +6,15 @@
         每当白日依山尽，夕阳余辉便透过朵朵云层，像万道金光，如霞光万丈，把天空白云染得红彤彤，把大地山河映得金灿灿，仿佛整个世界在那一瞬间都变得金碧辉煌，热情奔放起来
       </p>
     </u-fold>
-    <u-fold unfold line="1">
+    <u-divider>我是分割线</u-divider>
+    <u-fold unfold line="3" position="end" style="background: white;">
       <p>
         每当白日依山尽，夕阳余辉便透过朵朵云层，像万道金光，如霞光万丈，把天空白云染得红彤彤，把大地山河映得金灿灿，仿佛整个世界在那一瞬间都变得金碧辉煌，热情奔放起来
       </p>
     </u-fold>
   </div>
   <u-divider />
-  <u-divider>我是分割线</u-divider>
+  
   <u-divider border-style="dashed">我是虚线</u-divider>
   <span>left</span>
   <u-divider vertical border-style="dashed" />
diff --git a/packages/src/components/fold/fold.vue b/packages/src/components/fold/fold.vue
index 869a7a4..f7b637c 100644
--- a/packages/src/components/fold/fold.vue
+++ b/packages/src/components/fold/fold.vue
@@ -3,11 +3,16 @@
     <!-- over-hidden -->
     <div ref="textBox" class="txt-box" :class="{ 'over-hidden': fold }">
       <div ref="divBox">
+        <el-button v-if="isOver && unfold && position == 'end'" @click="fold = !fold" :class="{ 'over-hidden': fold, 'end-btn': 1 }"  type="primary" plain link>{{ fold ? $u('fold.unfold') : $u('fold.fold') }}</el-button>
         <slot></slot>
       </div>
     </div>
     <div class="action-box select-none">
-      <div v-if="isOver && unfold" class="expand-btn" @click="fold = !fold">{{ fold ? $u('fold.unfold') : $u('fold.fold') }}</div>
+      <div v-if="isOver && unfold && position == 'line'" class="expand-btn" @click="fold = !fold">
+        <slot name="expand" :fold="fold">
+          <el-button type="primary" plain link>{{ fold ? $u('fold.unfold') : $u('fold.fold') }}</el-button>
+        </slot>
+      </div>
     </div>
   </div>
 </template>
@@ -15,6 +20,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
 import './style/index.scss'
+import { translate as $u } from '~/util/lang'
 
 defineOptions({
   name: 'UFold'
@@ -23,10 +29,12 @@ defineOptions({
 interface Props {
   line?: number | string
   unfold?: boolean
+  position?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  line: 5
+  line: 5,
+  position: 'line'
 })
 const line = computed(() => {
   let line = Math.trunc(Number(props.line))
diff --git a/packages/src/components/fold/style/index.scss b/packages/src/components/fold/style/index.scss
index 8e75456..7acff42 100644
--- a/packages/src/components/fold/style/index.scss
+++ b/packages/src/components/fold/style/index.scss
@@ -1,5 +1,4 @@
 $line: 5 !default;
-
 .u-fold {
   font-size: 14px;
   line-height: 20px;
@@ -21,7 +20,7 @@ $line: 5 !default;
     }
   }
 
-  .over-hidden {
+  .over-hidden, .over-hidden > div {
     //象作为弹性伸缩盒子模型显示。
     display: -webkit-box;
     overflow: hidden;
@@ -31,4 +30,25 @@ $line: 5 !default;
     //用来限制在一个块元素显示的文本的行数。
     -webkit-line-clamp: $line;
   }
+}
+
+// position为end时，展开按钮位置及状态样式
+.u-fold {
+  .txt-box {
+    display: flex;
+    > div {
+      &::before {
+        content: '';
+        float: right;
+        width: 0;
+        height: 100%;
+        margin-top: -20px;
+      }
+    }
+  }
+  .end-btn {
+    float: right;
+    clear: both;
+    background-color: inherit;
+  }
 }
\ No newline at end of file
-- 
Gitee