Vue3 span文字过多 展开收起组件

组件定义：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

<!-- 展开收起 组件 --> <script setup lang="ts"> import { getUuid } from '@/utils';   interface Props {   /** 赋予input的id */   id?: string | number;   /** 字符串 */   content?: string; }   const props = withDefaults(defineProps<Props>(), {   content: '', });   const uId = getUuid(); </script>   <template>   <input     :id="`toggle-btn-${props.id || uId}`"     class="toggle-input"     type="checkbox"   />   <div class="load-more-item-value" :title="props.content ?? '--'">     <label class="toggle-btn" :for="`toggle-btn-${props.id || uId}`"> </label>     {{ props.content ?? '--' }}   </div> </template>   <style scoped lang="scss"> .load-more-item-value {   line-height: 28px;   font-size: 14px;   word-break: break-all;   position: relative;   overflow: hidden;   text-overflow: ellipsis;   text-align: justify;   display: -webkit-box;   -webkit-line-clamp: 1;   -webkit-box-orient: vertical;     &::before {     content: '';     height: calc(100% - 28px);     float: right;   }     &::after {     content: '';     width: 28px;     height: 28px;     position: absolute;     background-color: #fff;     transition: background-color 0.25s ease;   }     .toggle-btn {     float: right;     clear: both;     font-size: 14px;     color: var(--el-color-primary);     font-weight: 400;     cursor: pointer;       &::before {       content: '展开';     }   } }   .toggle-input {   display: none; }   .toggle-input:checked + .load-more-item-value {   -webkit-line-clamp: 999; } .toggle-input:checked + .load-more-item-value::after {   visibility: hidden; } .toggle-input:checked + .load-more-item-value .toggle-btn::before {   content: '收起'; } </style>

组件包装

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<script lang="ts"> import ToggleDisplay from './ToggleDisplay.vue'; import { defineComponent, h } from 'vue';   export default defineComponent({   props: {     addFlex: {       type: Boolean,       default: true,     },   },   setup(props) {     return {       flex: props.addFlex,     };   },   render() {     return this.flex       ? h(           'div',           {             class: 'df',           },           h(ToggleDisplay, {             ...this.$attrs,           }),         )       : h(ToggleDisplay, {           ...this.$attrs,         });   }, }); </script>

使用：

?

1 2 3 4 5

<ToggleDisplay             :id="xxx"             :key="xxx"             :content="111111111111111111111111111111111111111111"           />