折叠动画

This commit is contained in:
yanyizhou
2021-11-22 18:10:11 +08:00
parent a6ac3c76cf
commit bdf0cb25e6
10 changed files with 20 additions and 0 deletions
@@ -14,6 +14,7 @@
<process-title> <process-title>
<template slot="title">基础信息</template> <template slot="title">基础信息</template>
</process-title> </process-title>
<el-collapse-transition>
<el-form <el-form
v-if="foldFormFlag === false" v-if="foldFormFlag === false"
:model="listForm" :model="listForm"
@@ -80,6 +81,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-collapse-transition>
<el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button> <el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button>
<el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button> <el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button>
<el-form <el-form
@@ -14,6 +14,7 @@
<process-title> <process-title>
<template slot="title">基础信息</template> <template slot="title">基础信息</template>
</process-title> </process-title>
<el-collapse-transition>
<el-form <el-form
v-if="foldFormFlag === false" v-if="foldFormFlag === false"
:model="listForm" :model="listForm"
@@ -71,6 +72,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-collapse-transition>
<el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button> <el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button>
<el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button> <el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button>
<el-form <el-form
@@ -14,6 +14,7 @@
<process-title> <process-title>
<template slot="title">基础信息</template> <template slot="title">基础信息</template>
</process-title> </process-title>
<el-collapse-transition>
<el-form <el-form
v-if="foldFormFlag === false" v-if="foldFormFlag === false"
:model="listForm" :model="listForm"
@@ -71,6 +72,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-collapse-transition>
<el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button> <el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button>
<el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button> <el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button>
<el-form <el-form
@@ -14,6 +14,7 @@
<process-title> <process-title>
<template slot="title">基础信息</template> <template slot="title">基础信息</template>
</process-title> </process-title>
<el-collapse-transition>
<el-form <el-form
v-if="foldFormFlag === false" v-if="foldFormFlag === false"
:model="listForm" :model="listForm"
@@ -88,6 +89,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-collapse-transition>
<el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button> <el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button>
<el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button> <el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button>
<el-form <el-form
@@ -14,6 +14,7 @@
<process-title> <process-title>
<template slot="title">基础信息</template> <template slot="title">基础信息</template>
</process-title> </process-title>
<el-collapse-transition>
<el-form <el-form
v-if="foldFormFlag === false" v-if="foldFormFlag === false"
:model="listForm" :model="listForm"
@@ -71,6 +72,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-collapse-transition>
<el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button> <el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button>
<el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button> <el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button>
<el-form <el-form
@@ -14,6 +14,7 @@
<process-title> <process-title>
<template slot="title">基础信息</template> <template slot="title">基础信息</template>
</process-title> </process-title>
<el-collapse-transition>
<el-form <el-form
v-if="foldFormFlag === false" v-if="foldFormFlag === false"
:model="listForm" :model="listForm"
@@ -71,6 +72,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-collapse-transition>
<el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button> <el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button>
<el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button> <el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button>
<el-form <el-form
@@ -14,6 +14,7 @@
<process-title> <process-title>
<template slot="title">基础信息</template> <template slot="title">基础信息</template>
</process-title> </process-title>
<el-collapse-transition>
<el-form <el-form
v-if="foldFormFlag === false" v-if="foldFormFlag === false"
:model="listForm" :model="listForm"
@@ -71,6 +72,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-collapse-transition>
<el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button> <el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button>
<el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button> <el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button>
<el-form <el-form
@@ -14,6 +14,7 @@
<process-title> <process-title>
<template slot="title">基础信息</template> <template slot="title">基础信息</template>
</process-title> </process-title>
<el-collapse-transition>
<el-form <el-form
v-if="foldFormFlag === false" v-if="foldFormFlag === false"
:model="listForm" :model="listForm"
@@ -71,6 +72,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-collapse-transition>
<el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button> <el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button>
<el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button> <el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button>
<el-form <el-form
@@ -14,6 +14,7 @@
<process-title> <process-title>
<template slot="title">基础信息</template> <template slot="title">基础信息</template>
</process-title> </process-title>
<el-collapse-transition>
<el-form <el-form
v-if="foldFormFlag === false" v-if="foldFormFlag === false"
:model="listForm" :model="listForm"
@@ -71,6 +72,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-collapse-transition>
<el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button> <el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button>
<el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button> <el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button>
<el-form <el-form
@@ -14,6 +14,7 @@
<process-title> <process-title>
<template slot="title">基础信息</template> <template slot="title">基础信息</template>
</process-title> </process-title>
<el-collapse-transition>
<el-form <el-form
v-if="foldFormFlag === false" v-if="foldFormFlag === false"
:model="listForm" :model="listForm"
@@ -71,6 +72,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-collapse-transition>
<el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button> <el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button>
<el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button> <el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button>
<el-form <el-form