最近在做后台管理系统，发现同事封装了一个展开/折叠的全局组件，非常简单，全局组件的步骤都是一样的，因此在此做一下记录。
先上效果图：
下面记录一下全局组件的制作步骤：
1.编写组件内容
组件存储位置：我们这边统一将全局组件放置在src/components里面。
组件内容：
<template>
<div class="openclose-box" :class="{'openclose-box-open':isOpen,'openclose-box-close':!isOpen}">
<div class="openclose-btn" @click="isOpen=!isOpen">
<a-space :size="5">
<a-icon type="down" v-if="!isOpen"/>
<a-icon type="up" v-else/>
<span>{
{
isOpen?'收起':'展开'}}</span>
</a-space>
</div>
<a-card>
<slot></slot>
</a-card>
</div>
</template>
<script>
export default{
name:'OpenCloseBox',
props:{
open:{
type:Boolean,
default:false,
}
},
data(){
return{
isOpen:this.open
}
}
}
</script>
<script lang="less" scoped>
.openclose-box{
position:relative;
/deep/ .ant-card-body{
padding:20px 18px;
}
.openclose-btn{
font-size:14px;
line-height:16px;
color:#333;
position:absolute;
top:20px;
right:18px;
display:flex;
align-items:center;
z-index:1;
cursor:pointer;
.openclose-icon{
color:#999;
}
&:hover{
color:#f90;
.openclose-icon{
color:#f90;
}
}
}
}
.openclose-box-open{
/deep/ .ant-card-body{
height:auto;
}
}
.openclose-box-close{
/deep/ .ant-card-body{
height:56px;
overflow:hidden;
}
}
</script>
2.main.js引入并全局注册
import OpenCloseBox from '@/components/customer/OpenCloseBox';
Vue.component(OpenCloseBox.name, OpenCloseBox);
3.页面上使用
<OpenCloseBox class="mb-10">
<div class="form-title">公司信息</div>
<a-row class="widthstyle">
<a-col :span="12">
<a-form-model-item label="公司全称">
<span>{
{
form.name }}</span>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="组织代码">
<span>{
{
form.orgCode }}</span>
</a-form-model-item>
</a-col>
</a-row>
</OpenCloseBox>
完成！！！
根据上面的代码提炼出来两点：