uniapp中文本内容超出规定行数后展开收起的处理示例代码

以下是一个使用 Vue 自定义指令实现文本展开收起功能的示例代码：

<template>
  <div>
    <div class="text-container" v-text="content" v-is-ellipsis></div>
    <div v-if="showToggleBtn" @click="toggleText">
      {{ isExpanded ? '收起' : '展开' }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '这是一段很长的文本内容...',
      isExpanded: false,
      showToggleBtn: false,
    };
  },
  directives: {
    'is-ellipsis': {
      inserted(el, binding) {
        const lineHeight = parseInt(getComputedStyle(el).lineHeight);
        const maxHeight = lineHeight * binding.value; // 规定行数的高度
        const contentHeight = el.offsetHeight;
        el.style.maxHeight = maxHeight + 'px';
        if (contentHeight > maxHeight) {
          el.parentNode.nextSibling.style.display = 'block';
          el.parentNode.nextSibling.addEventListener('click', () => {
            el.style.maxHeight = '';
          });
        }
      },
    },
  },
  methods: {
    toggleText() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>

<style>
.text-container {
  overflow: hidden;
  line-clamp: 3; /* 控制显示行数 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>

在上述示例代码中，我们通过`v-is-ellipsis`指令来处理文本内容超出规定行数后的展开收起功能。在指令的`inserted`钩子中，我们获取文本容器的高度和行数，判断是否超出规定行数，如果超出则显示展开收起按钮。点击展开收起按钮时，切换文本容器的样式，实现展开收起的功能。CSS 样式中使用了`line-clamp`来控制显示的行数。你可以根据实际需求修改样式和文本内容。希望这个示例代码能够帮到你！