<template> <div class="h-text-ellipsis" :style="{width: width ? width + 'px': 'unset'}"> <slot name="before" class="h-text-ellipsis-before"></slot> <span class="text-ellipsis-limit-text" :key="keyIndex" :content="text">{{text}}</span> <span class="h-text-ellipsis-more" v-show='oversize'><slot name="more"></slot></span> <slot name="after" class="h-text-ellipsis-after"></slot> </div> </template> <script> export default { name: 'TextEllipsis', props: { text: String, height: Number, width: { Number, default: 0 }, isLimitHeight: { type: Boolean, default: true } }, data() { return { keyIndex: 0, oversize: false, isHide: false }; }, watch: { isLimitHeight() { this.init(); }, text() { this.init(); }, height() { this.init(); }, width() { this.init(); } }, mounted() { this.init(); }, methods: { init() { this.oversize = false; this.keyIndex += 1; let more = this.$el.querySelector('.h-text-ellipsis-more'); more.style.display = 'none'; if (this.isLimitHeight) { this.limitShow(); } }, limitShow() { this.$nextTick(() => { let textDom = this.$el.querySelector('.text-ellipsis-limit-text'); let title = this.$el; let more = this.$el.querySelector('.h-text-ellipsis-more'); let n = 1000; if (textDom) { if (title.offsetHeight > this.height) { more.style.display = 'inline-block'; let text = this.text; while (title.offsetHeight > this.height && n > 0) { if (title.offsetHeight > this.height * 3) { textDom.innerText = text = text.substring(0, Math.floor(text.length / 2)); } else { textDom.innerText = text = text.substring(0, text.length - 1); } n--; } this.$emit('hide'); this.isHide = true; } else { this.$emit('show'); this.isHide = false; } } }); } } }; </script> <style lang="scss" scoped> .text-ellipsis-limit-text { white-space: pre-wrap; } </style>