VUE中实现点击展开、收缩查看更多的效果 并封装单独组件

<div class="labelBox">
  <p class="lf">物流跟踪：</p>
  <div class="rg">
    <p v-for="(item, i) in activeLogisticsList" :key="i">
      <span v-if="logisticsFold ? i + 1 : i < 4"
        >{{ item.time || '--' }} {{
          item.status || '--'
        }}</span
      >
    </p>
    <div
      v-if="activeLogisticsList.length > 4"
      v-on:click="changeLogisticsState"
    >
      <span>{{ logisticsFold ? '收起' : '展开' }}</span>
    </div>
  </div>
</div>

js部分

data() {
   return {
     logisticsFold: false
   }
}


changeLogisticsState() {
  this.logisticsFold = !this.logisticsFold
}

效果预览

以上为原理部分，下面是我封装的一个简单组件

<template>
  <div class="TInfo">
    <div v-if="title !== ''" class="bt">{{title}}</div>
    <div v-show="isExpanded">
      <slot></slot>
    </div>
    <div style="text-align: center;width: 100%;clear: both">
      <el-button type="text" @click="toggleExpand">
        {{ isExpanded ? '隐藏部分信息' : '展开详细信息' }}
        <i :class="'el-icon-arrow-' + (isExpanded ? 'up' : 'down')"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "TInfo",
  props: {
    initialExpanded: {
      type: Boolean,
      default: false
    },
    title:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isExpanded: this.initialExpanded
    };
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    }
  }
};
</script>

调用方式

<t-info>
 这是隐藏部分的内容
</t-info>

版权声明：本文为原创文章，版权归 全栈开发技术博客 所有。

本文链接：https://www.lvtao.net/dev/vue-show-more.html

转载时须注明出处及本声明