updates

src/components/ShowMore.vue

-<script lang="ts">
-export default {
-  data() {
-    return {
-      max: 60,
-      hasMore: false,
-      isOpen: false
-    }
-  },
-  computed: {
-    classes() {
-      return {
-        'has-more': this.hasMore && !this.isOpen
-      }
-    }
-  },
-  methods: {
-    init() {
-      const height = this.$refs.box.offsetHeight
-      this.hasMore = height > this.max
-    },
-    toggle() {
-      this.isOpen = !this.isOpen
-    }
-  },
-  mounted() {
-    this.init()
-  }
-}
-</script>
-
-<template>
-  <div>
-    <div ref="box" :class="classes">
-      <slot></slot>
-    </div>
-    <div class="block-control" @click="toggle" v-if="hasMore">
-      <template v-if="isOpen"> <i class="el-icon-caret-top"></i><span>收起</span> </template>
-      <template v-else> <i class="el-icon-caret-bottom"></i><span>展开</span> </template>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.block-control {
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 10px;
-  padding-top: 5px;
-  color: #d3dce6;
-  cursor: pointer;
-  border-top: 1px solid #eaeefb;
-
-  i {
-    font-size: 16px;
-  }
-  span {
-    display: none;
-    padding-left: 5px;
-    font-size: 12px;
-  }
-  &:hover {
-    color: #1f2f3d;
-    span {
-      display: block;
-    }
-  }
-}
-.has-more {
-  max-height: 40px;
-  overflow: hidden;
-}
-</style>