使用element 封装简单的展开折叠组件

创建updoun.vue文件添加一下代码

<template>
  <div>
    <el-collapse-transition name="el-fade-in"><div v-show="status"><slot></slot></div></el-collapse-transition>
    <el-button type="primary" autofocus size="mini" @click="toggle">{{ status ? "收起筛选" : "展开筛选"}}<i :class="status ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></el-button>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      status: false,
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    toggle() {
      this.status = !this.status;
    },
  },
};
</script>

<style scoped lang="scss">
</style>

import引入组件

直接使用<updown>展开收起的内容</updown>