vue开发项目，往往需要两侧展开收缩效果，所以记录下来，方便后期可能会用到。

运行实例

代码

<template>
  <div class="zhakai">
    <left></left>
    <right></right>
  </div>
</template>

<script>
import left from "./left";
import right from "./right";

export default {
  name: "zhankai",
  components: {
    left,
    right
  },
  data: function () {
    return {
      list: []
    }
  },
  props: {
    top: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  created: function () {

  },
  filters: {},
  methods: {
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
.zhankai {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: relative;
}
</style>

github地址

github地址