vue实现缩略div

实现缩略 DIV 的几种方法

在 Vue 中实现缩略 DIV 可以通过 CSS 和 JavaScript 结合的方式来完成。以下是几种常见的实现方法：

使用 CSS text-overflow

通过 CSS 的 text-overflow 属性可以轻松实现文本的缩略显示。这种方法适用于单行文本的缩略。

<template>
  <div class="truncate">
    {{ longText }}
  </div>
</template>

<style>
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* 设置固定宽度 */
}
</style>

多行文本缩略

如果需要多行文本的缩略，可以使用 -webkit-line-clamp 属性。

<template>
  <div class="multiline-truncate">
    {{ longText }}
  </div>
</template>

<style>
.multiline-truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 200px;
}
</style>

动态计算缩略

如果需要根据内容动态计算是否显示缩略，可以通过 JavaScript 结合 Vue 的指令来实现。

<template>
  <div 
    ref="content"
    class="dynamic-truncate"
    :class="{ 'truncated': isTruncated }"
    @click="toggleTruncate"
  >
    {{ longText }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      longText: '这是一段非常长的文本内容，需要缩略显示...',
      isTruncated: true,
    };
  },
  methods: {
    toggleTruncate() {
      this.isTruncated = !this.isTruncated;
    },
  },
};
</script>

<style>
.dynamic-truncate {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.dynamic-truncate:not(.truncated) {
  white-space: normal;
  overflow: visible;
}
</style>

使用第三方库

如果需要更复杂的功能，可以使用第三方库如 vue-clamp。

npm install vue-clamp

<template>
  <vue-clamp :text="longText" :max-lines="2" ellipsis="..." />
</template>

<script>
import VueClamp from 'vue-clamp';
export default {
  components: { VueClamp },
  data() {
    return {
      longText: '这是一段非常长的文本内容，需要缩略显示...',
    };
  },
};
</script>

结合 Tooltip 显示完整内容

缩略内容可以通过 Tooltip 显示完整内容，提升用户体验。

<template>
  <div class="truncate-with-tooltip" :title="longText">
    {{ longText }}
  </div>
</template>

<style>
.truncate-with-tooltip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}
</style>

以上方法可以根据实际需求选择适合的方式实现 DIV 的缩略效果。