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

 更新时间:2022年09月20日 16:09:51   作者:yehaocheng520  
这篇文章主要为大家详细介绍了vue+antd实现折叠与展开组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

最近在写前台页面,遇到一个需求,如下:点击头部标题,如果有内容,则展开,否则不展开,其实就是展开与折叠的组件。效果图如下:

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

代码如下:

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,
? ? }"
? ? :style="{ height: !isOpen && !card ? height + 'px' : 'auto' }"
? >
? ? <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构造器创建Form组件的通用解决方法

    利用Vue构造器创建Form组件的通用解决方法

    这篇文章主要给大家介绍了关于利用Vue构造器创建Form组件的通用解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • vue源码解读子节点优化更新

    vue源码解读子节点优化更新

    这篇文章主要为大家介绍了vue源码解读子节点优化更新示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue router2.0二级路由的简单使用

    vue router2.0二级路由的简单使用

    这篇文章主要为大家详细介绍了vue router2.0二级路由的简单使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Vuex总体案例详解

    Vuex总体案例详解

    这篇文章主要介绍了Vuex总体案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • vue3封装一个带动画的关闭按钮示例详解

    vue3封装一个带动画的关闭按钮示例详解

    这篇文章主要为大家介绍了vue3封装一个带动画的关闭按钮示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Vue中过滤器定义以及使用方法实例

    Vue中过滤器定义以及使用方法实例

    过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据,下面这篇文章主要给大家介绍了关于Vue中过滤器定义以及使用方法的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue数据更新页面却没有更新的几种情况以及解决方法

    Vue数据更新页面却没有更新的几种情况以及解决方法

    我们在开发过程中会碰到数据更新,但是页面却没有更新的情况,下面这篇文章主要给大家介绍了关于Vue数据更新页面却没有更新的几种情况以及解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 基于Vue2实现简易的省市区县三级联动组件效果

    基于Vue2实现简易的省市区县三级联动组件效果

    这是一个基于Vue2的简易省市区县三级联动组件,可以控制只显示省级或只显示省市两级,可设置默认值等。提供原始省市县代码和名称数据,适用于各种有关城市区县的应用。需要的朋友可以参考下
    2018-11-11
  • 深度解读vue-resize的具体用法

    深度解读vue-resize的具体用法

    这篇文章主要介绍了vue-resize深度解读,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue实现Layui的集成方法步骤

    Vue实现Layui的集成方法步骤

    这篇文章主要介绍了Vue实现Layui的集成方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论

?


http://www.vxiaotou.com