<!-- * @Author: your name * @Date: 2022-03-25 17:15:31 * @LastEditTime: 2022-04-28 16:02:51 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue --> <template> <div class="czcard"> <div class="card" :style="{ height: transitionHeight }" :class="{ hide: carHide }" > <div class="title flex"> <div class="left"> <div class="device">{{ title }}</div> <slot name="chackbox" /> </div> <div class="right"> <i class="iconfont icon-jt" @click="hide" :class="{ active: !carHide }" ></i> </div> </div> <div ref="container"> <transition name="fade" mode="out-in"> <div :key="listNum"> <slot name="container" /> </div> </transition> </div> </div> </div> </template> <script> import { mapGetters } from "vuex"; export default { props: { title: String, // 动画需求 listNum: { type: Number, default: "1", }, }, data() { return { carHide: true, transitionHeight: "60px", }; }, computed: { ...mapGetters(["sidebar"]), }, watch: { ["sidebar.opened"](val) { setTimeout(this.getHeight, 200); // this.getHeight(); }, listNum(val) { console.log(val); setTimeout(() => { this.getHeight(); }, 300); }, }, mounted() { this.getHeight(); }, methods: { hide() { this.carHide = !this.carHide; this.getHeight(); }, getHeight() { const { height } = this.$refs?.container?.getBoundingClientRect(); // if (!height) { // return; // } // 高度必须是一个指定的值才能过渡变化,这样就计算出了整个元素的指定高度,然后赋值 if (height > 0) { this.transitionHeight = height + 60 + 18 + "px"; } else { this.transitionHeight = "60px"; } }, }, }; </script> <style lang="scss" scoped> .fade-enter-active, .fade-leave-active { transition: all 0.25s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } .card { transition: all 0.5s; // height: 212px; background: #ffffff; box-shadow: 2px 0px 12px 1px rgba(0, 0, 0, 0.1); border-radius: 4px 4px 4px 4px; border: 1px solid #e6ebf5; box-sizing: border-box; padding: 15px 22px 18px 22px; overflow: hidden; margin-bottom: 20px; &.hide { height: 60px !important; } .title { margin-bottom: 16px; margin-left: 40px; .left { display: flex; .device { font-size: 18px; color: #666666; font-weight: 500; margin-right: 62px; width: 60px; } } .right { i { transition: all 0.5s; display: inline-block; font-size: 30px; color: #c4c4c4; cursor: pointer; &.active { transform: rotate(90deg); } } } } } .flex { display: flex; justify-content: space-between; } </style>