一个做展开/收起动作（加过渡效果）的组件（vue3+ts+antd的图标）

最新推荐文章于 2024-07-11 11:41:59 发布

青赤黄及黑白

最新推荐文章于 2024-07-11 11:41:59 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_41775006/article/details/119675228

版权

提示：用哪个组件库就把icon换成哪家的图标就行了

效果图

在这里插入图片描述

expand组件

<template>
  <div class="expand" :style="'width:' + width + 'px'">
    <div class="expand-header">
      <div class="expand-header-title">{{ title }}</div>
      <!-- ant-Design 的图标 -->
      <DownCircleOutlined
        :class="isExpand ? 'expand-header-iconexpand' : 'expand-header-icon'"
        @click="isExpand = !isExpand"
      />
    </div>
    <div
      :class="isExpand ? 'expand-contentexpand' : 'expand-content'"
      :style="isExpand ? 'height:' + height + 'px' : ''"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { DownCircleOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    name: 'Expand',
    components: { DownCircleOutlined },
    props: {
      width: {
        // 内容宽度
        type: Number,
        default: 300,
      },
      height: {
        // 内容高度
        type: Number,
        default: 200,
      },
      title: {
        // 标题
        type: String,
        default: '标题',
      },
    },
    setup() {
      const isExpand = ref<Boolean>(true); //默认展开
      return {
        isExpand,
      };
    },
  });
</script>

<style lang="less" scoped>
  .expand {
    border: 1px solid #eeeeee;
    border-radius: 4px;
    .expand-header {
      height: 40px;
      padding: 0 15px;
      background: #eeeeee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 4px 4px 0 0;
      .expand-header-title {
        font-size: 16px;
      }
      .expand-header-icon {
        font-size: 18px;
        transform: rotate(-180deg);
        transition: all 0.3s;
      }
      .expand-header-iconexpand {
        font-size: 18px;
        transform: rotate(0deg);
        transition: all 0.3s;
      }
    }
    .expand-contentexpand {
      transition: all 0.5s;
      // padding: 15px 0;
      overflow: hidden;
    }
    .expand-content {
      height: 0;
      overflow: hidden;
      transition: all 0.5s;
    }
  }
</style>

页面引入expand组件注册后使用

<template>
  <expand :height="200">
    <div style="text-align: center">11111</div>
    <div style="text-align: center">22222</div>
  </expand>
</template>

<script lang="ts">
  import { defineComponent} from 'vue';
  import expand from './components/expand.vue';
  export default defineComponent({
    name: 'Index',
    components: {
      expand,
    },
  });
</script>

<style lang="less" scoped></style>