折叠面板组件（vue）

今天代码敲了吗

于 2024-04-15 09:11:39 发布

阅读量554

点赞数 3

分类专栏： # Vue 组件文章标签： vue.js javascript 前端折叠面板

本文链接：https://blog.csdn.net/z772330927/article/details/137765398

版权

Vue 组件专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用自定义的collapse-info组件，该组件具有可折叠的标题和内容，通过props和方法控制显示与隐藏，展示了简单的状态管理和过渡动画效果。

摘要由CSDN通过智能技术生成

代码

<template>
  <div class="collapse-info">
    <div class="collapse-title">
      <div class="title-left">
        {{ title }}
      </div>
      <div  @click="changeHide"> 
      <Button size="small" v-if="showHideBtn">{{isHide?showTitle:hideTitle}}</Button>
      <slot name="extra"></slot>
      </div>
    </div>
    <transition name="fade">
      <div class="collapse-content"
           v-if="!isHide">
        <slot></slot>
      </div>
    </transition>

  </div>
</template>

<script>
export default {
  props: {
  //左侧标题名称
    title: String,
    //是否显示按钮
    showHideBtn: {
      type: Boolean,
      default: true
    },
    //展示时的标题
   showTitle: {
      type: String,
      default: '展开'
    },
     //折叠时的标题
    hideTitle: {
      type: String,
      default: '折叠'
    }
  },
  data() {
    return {
      isHide: false
    }
  },
  methods: {
    changeHide() {
      this.isHide = !this.isHide
    }
  }
}
</script>

<style lang="less" scoped>
//隐藏显示动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.collapse-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid #e8eaec;
  .title-left {
    color: #333333;
  }
}
.collapse-info {
  border: 1px solid #e8eaec;
  border-bottom: none;
}
.collapse-content {
  padding: 10px 20px;
  border-bottom: 1px solid #e8eaec;
}
</style>

引用方法

 <template>
  <div>
   <collapseInfo title="基本消息">
    <div>测试组件</div>
   </collapseInfo>
  </div>
 </template>
<script>
import collapseInfo from './collapse';
export default {
  components: {
    collapseInfo,
  },
}
</script>