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
}

效果预览
2024-09-07T15:02:18.png

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

<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>

标签: VUE, Javascript

相关文章

一些编程语言学习心得

作为一名专注于PHP、Go、Java和前端开发(JavaScript、HTML、CSS)的开发者,还得会运维、会谈客户....不想了,都是泪,今天说说这些年学习编程语言的一些体会,不同编程语言在...

Javascript封装WebRTC及使用教程

好的,我们将在现有基础上加入接听对话、加入多人对话、创建多人对话等功能,并重新生成完整的文章内容。WebRTC 封装及使用教程WebRTC 是一个强大的实时通信 API,允许在浏览器中进行音视频...

浏览器指纹识别的 JavaScript 库 - FingerprintJS

FingerprintJS 是一个用于浏览器指纹识别的 JavaScript 库。它通过收集浏览器和设备的各种特征来生成一个唯一的标识符,即“指纹”。这个指纹可以用于识别和跟踪用户,即使他们清除...

在JavaScript或Vue中屏蔽所有报错信息

在 JavaScript 或 Vue 中,如果你想屏蔽所有 JavaScript 报错,可以通过捕获全局的错误事件来实现。需要注意的是,尽量避免屏蔽所有错误,因为这可能会掩盖一些实际问题,影响调...

浏览器的开发工具中有个jsContext是什么

什么是 jsContext?在JavaScript中,jsContext 并不是一个官方的术语或概念。通常情况下,开发者可能会提到 context 这个词,它通常指的是执行上下文(Executi...

图片Base64编码

CSR生成

图片无损放大

图片占位符

Excel拆分文件