封装展开收起

最新推荐文章于 2024-08-24 17:09:25 发布

abcdef_520

最新推荐文章于 2024-08-24 17:09:25 发布

阅读量113

点赞数

文章标签： html javascript 前端 vue.js

本文链接：https://blog.csdn.net/abcdef_520/article/details/130267607

版权

文章展示了如何在Vue.js中创建一个可折叠的搜索组件，包括展开和收起的交互，以及一个用于重置表单的按钮组件。搜索组件可以根据内容高度自动折叠，并调整周围布局适应。同时，还提供了一个重置按钮，用于清空表单数据。

摘要由CSDN通过智能技术生成

1 搜索组件 search.vue

<template>
  <div class="search-collapse">
    <div
      class="form-search"
      :style="{ height: isFold ? mixHeight + 'px' : '' }"
    >
      <div ref="collapseContainerRef">
        <slot></slot>
      </div>
    </div>
    <div class="control-search">
      <slot name="control"></slot>
      <template v-if="isCollapse">
        <template v-if="btnStyle === 'default'">
          <el-button
            size="small"
            type="text"
            v-if="isFold"
            @click="handleToggleCollapse"
          >
            展开
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-button
            size="small"
            type="text"
            v-else
            @click="handleToggleCollapse"
          >
            收起
            <i class="el-icon-arrow-up el-icon--right"></i>
          </el-button>
        </template>
        <template v-if="btnStyle === 'simple'">
          <el-link
            :underline="false"
            type="primary"
            size="small"
            v-if="isFold"
            @click="handleToggleCollapse"
          >
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-link>
          <el-link
            :underline="false"
            type="primary"
            size="small"
            v-else
            @click="handleToggleCollapse"
          >
            <i class="el-icon-arrow-up el-icon--right"></i>
          </el-link>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchCollapse",

  props: {
    // 默认自动展开
    autoSpread: {
      type: Boolean,
      default: false,
    },

    // 最小折叠高度
    mixHeight: {
      type: Number,
      default: 40,
    },

    // 按钮风格，default-普通风格，simple-极简风格
    btnStyle: {
      type: String,
      default: "default",
      validator: (value) => ["default", "simple"].includes(value),
    },
  },

  data() {
    return {
      // 是否折叠
      isFold: true,

      // 是否可折叠
      isCollapse: false,
    };
  },

  watch: {
    autoSpread: {
      handler(val) {
        this.isFold = !val;
      },
      immediate: true,
    },
  },

  methods: {
    // [折叠|展开]
    handleToggleCollapse() {
      this.isFold = !this.isFold;
      if (
        document.getElementsByClassName("head-bottom") &&
        document.getElementsByClassName("head-bottom").length > 0 &&
        document.getElementsByClassName("global-row") &&
        document.getElementsByClassName("global-row").length
      ) {
        this.$nextTick(() => {
          const dynicHead =
            document.getElementsByClassName("head-bottom")[0].offsetHeight;
          const contentRow = document.getElementsByClassName("global-row")[0];
          contentRow.style.height = `calc(100vh - ${dynicHead}px - 300px)`;
          if (contentRow.offsetHeight <= 400) {
            contentRow.style.height = "400px";
          }
        });
      }
    },
  },

  mounted() {
    this.$nextTick(() => {
      const height = this.$refs.collapseContainerRef.scrollHeight;
      // 如果大于两倍高度，则显示折叠按钮，其中最小高度与".fold"保持一致
      this.isCollapse = height >= this.mixHeight * 2;
      if (
        document.getElementsByClassName("head-bottom") &&
        document.getElementsByClassName("head-bottom").length > 0 &&
        document.getElementsByClassName("global-row") &&
        document.getElementsByClassName("global-row").length
      ) {
        this.$nextTick(() => {
          const dynicHead =
            document.getElementsByClassName("head-bottom")[0].offsetHeight;
          const contentRow = document.getElementsByClassName("global-row")[0];
          contentRow.style.height = `calc(100vh - ${dynicHead}px - 300px)`;
          if (contentRow.offsetHeight <= 400) {
            contentRow.style.height = "400px";
          }
        });
      }
    });
  },
};
</script>

<style lang="less" scope>
.search-collapse {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  .form-search {
    flex: 1;
    overflow: hidden;

    &.fold {
      height: 40px;
    }

    .el-form-item {
      margin-bottom: 8px;
    }

    .el-input__inner {
      padding-right: 0;
    }
  }

  .control-search {
    padding: 0 0 8px;
    display: flex;
    align-items: center;
  }
}
</style>

2 重置组件 reset.vue

<template>
  <el-button size="small" @click="handleClickReset">
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  props: {
    formEl: {
      type: Object,
    },

    clear: {
      type: Function,
      default: () => () => {},
    },
  },

  methods: {
    handleClickReset() {
      if (!this.formEl) return;
      this.formEl.resetFields();
      this.$emit("clear");
    },
  },
};
</script>

<style></style>

3 页面使用

  <SearchCollapse>
        <el-form :inline="true" :model="searchData" ref="searchLibrary">
          <el-form-item label="测试" prop="projectName">
            <el-input
              v-model="searchData.ceshi"
              placeholder="请输入测试的数据"
            ></el-input>
          </el-form-item>
        </el-form>
        <template #control>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="onSubmit"
            >查询</el-button
          >
          <PipeResetBtn :formEl="$refs.searchLibrary" @clear="empty"
            >重置</PipeResetBtn
          >
        </template>
      </SearchCollapse>
      <script>
export default {
  data() {
    return {
         searchData: {
 			ceshi:null
      },
    };
  },
  methods: {
    empty() {
      this.$refs["searchLibrary"].resetFields();
    },
    onSubmit() {
        
    },
  },
};
</script>