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>
完成!!
其它地方引用的效果如下:
展开效果:
折叠效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。
最新评论