组件定义：
<!-- 展开收起 组件 -->
<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>
组件包装
<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>
使用：
<ToggleDisplay:id="xxx":key="xxx":content="111111111111111111111111111111111111111111"/>
