vue2 uniapp仿微信超过3行显示展开和收起的代码

在Vue2中，如果你想要创建一个类似微信超过三行内容自动展开和收起的功能，可以使用v-if或v-show指令配合计算属性来实现。这里是一个简单的例子：

<template>
  <div>
    <p v-if="content.length > 3" :class="{ 'show-more': isShowMore }">
      {{ content.slice(0, 3) }}...
      <span @click="toggleContent">展开全部</span>
    </p>
    <p v-else>
      {{ content }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "这是你的长文本内容",
      isShowMore: false,
    };
  },
  methods: {
    toggleContent() {
      this.isShowMore = !this.isShowMore;
    },
  },
};
</script>

<style scoped>
.show-more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-line-clamp: 3; /* 长度限制 */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

在这个例子中，如果`content`的内容长度大于3行，会显示前三行内容，并有一个“展开全部”按钮。点击后，`isShowMore`的状态会被切换，内容则会完全展示或者隐藏。