温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用vue+antd实现折叠与展开组件

发布时间:2022-09-22 09:45:26 来源:亿速云 阅读:478 作者:iii 栏目:开发技术

今天小编给大家分享一下怎么用vue+antd实现折叠与展开组件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

效果图如下:

怎么用vue+antd实现折叠与展开组件

由于其它地方也需要实现这种功能,所以,需要封装成一个组件。

代码如下:

1. 父页面代码

1.1 变量:open:表示现在的状态,true是展开,false为折叠

1.2 变量:height:表示折叠时的高度,也就是根据标题的高度来的。

1.3 插槽:在组件中写的内容是一个插槽,可以预知组件内有个<slot></slot>来接收外部的内容

<openCloseBox :open="true" :height="40">
  <div class="card_tit">
    <a-icon type="minus" /><span class="tab_tit">常规工艺</span>
  </div>
  <div class="card_con">
    <a-row>
      <a-col :span="12">产品类型:常规</a-col>
      <a-col :span="12">板子大小:常规</a-col>
      <a-col :span="12">出货方式:常规</a-col>
      <a-col :span="12">交货数量:11</a-col>
    </a-row>
  </div>
</openCloseBox>

1.4 组件引入

import openCloseBox from './modules/openCloseBox.vue';
export default {
  name: 'index',
  components: {
    openCloseBox,
   },
}

2. 组件代码

<template>
  <div
    class="openclose-box"
    :class="{
      'openclose-card-open': isOpen && card,
      'openclose-card-close': !isOpen && card,
      'openclose-box-open': isOpen && !card,
      'openclose-box-close': !isOpen && !card,
    }"
    :
  >
    <div
      class="openclose-btn"
      :class="{ 'openclose-btn-box': !card }"
      @click="isOpen = !isOpen"
    ></div>
    <a-card v-if="card">
      <slot></slot>
    </a-card>
    <slot v-else></slot>
  </div>
</template>

<script>
export default {
  name: 'OpenCloseBox',
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    card: {
      type: Boolean,
      default: false,
    },
    height: {
      type: Number,
      default: 60,
    },
  },
  data() {
    return {
      isOpen: this.open,
    };
  },
};
</script>

<style lang="less" scoped>
.openclose-box {
  position: relative;
  /deep/ .ant-card-body {
    padding: 20px 18px;
  }
  .openclose-btn {
    font-size: 14px;
    line-height: 16px;
    color: #333;
    width: 100%;
    height: 56px;
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 18px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 1;
    user-select: none;
    cursor: pointer;
    .openclose-icon {
      color: #999;
    }
    &:hover {
      color: #f90;
      .openclose-icon {
        color: #f90;
      }
    }
  }
  .openclose-btn-box {
    height: 48px;
  }
}
.openclose-card-open {
  /deep/ .ant-card-body {
    height: auto;
  }
}
.openclose-card-close {
  /deep/ .ant-card-body {
    height: 56px;
    overflow: hidden;
  }
}
.openclose-box-open {
  height: auto;
}
.openclose-box-close {
  height: 60px;
  overflow: hidden;
}
</style>

完成!!

其它地方引用的效果如下:

展开效果:

怎么用vue+antd实现折叠与展开组件

折叠效果:

怎么用vue+antd实现折叠与展开组件

以上就是“怎么用vue+antd实现折叠与展开组件”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI