vue3实现搜索项超过n行就折叠的思路详解

目录
  • 实现效果
  • 实现思路
  • 实现组件的布局
  • 事件绑定与事件销毁
  • 高度判断和图标的显示与隐藏
  • 完整代码
    • 布局
    • css代码
    • script
    • 组件使用
  • 总结

我们在做列表查询的时候,会有很多查询项,如何实现超过n行查询项的时候自动折叠起来呢?

实现效果

实现思路

  • 实现组件的布局。
  • 绑定监听事件和销毁监听事件
  • 高度判断和图标的显示与隐藏

实现组件的布局

外层盒子(限制高度)、折叠的图标或者文字(用来显示和隐藏多余的行)、插槽(挖个坑给搜索行占位)。

事件绑定与事件销毁

需要绑定一个resize事件。resize事件是在窗口大小发生变化时就会触发。resize事件触发我们就要重新计算盒子查询项的高度,判断是否需要折叠或者显示。mounted生命周期触发计算组件实例高度。并计算查询项高度。resize事件要在组件销毁前的生命周期中进行销毁。不影响其他组件。

高度判断和图标的显示与隐藏

首先图标盒子绑定状态,用来显示和隐藏。 其次外层盒子需要设置一个高度临界点,即多大高度时不折叠,超过了这个高度就折叠。盒子高度需要你计算,比如,你需要4行不折叠,需要算出四行的高度并加上图标的高度。如果大于高度则显示图标、如果小于隐藏图标。

完整代码

布局

<template>
  <div class="fold_box">
    <div
      class="fold_box_over"
      :style="{height: mainHeight > 0 ? mainHeight + 'px' : ''}"
      :class="{'fold_box_over_max': isOver}"
    >
      <div
        ref="foldBoxMain"
        class="fold_box_main"
      >
        <slot></slot>
      </div>
      <div
        v-show="isOverChange"
        class="fold_box_over_show"
      >
        <div
          class="fold_box_over_btn"
          @click="showOver"
        >
        <el-icon :class="{'fold_box_over_btn_rotate': !isOver}" :size="14">
            <ArrowDown />
        </el-icon>

        </div>
      </div>
    </div>
  </div>
</template>

css代码

<style lang="less" scoped>
.fold_box {
  width: 100%;
  .fold_box_over {
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease;
  }
  .fold_box_over_max {
    height: 159px !important;
  }
  .fold_box_main {
    width: 100%;
  }
  .fold_box_over_show {
    height: 15px;
    position: absolute;
    width: 100%;
    background-color: #fff;
    bottom: 0;
    left: 0;
  }
  .fold_box_over_btn {
    width: 20px;
    height: 15px;
    cursor: pointer;
    text-align: center;
    line-height: 15px;
    margin: 0 auto;
    el-icon svg{
      font-weight: bold;
      transition: all 0.4s ease;
    }
    &:hover {
      color: #00caab;
    }
  }
  .fold_box_over_btn_rotate svg{
    transform: rotate(180deg);
  }
}
</style>

script

<script>
import { reactive, toRefs, ref,onMounted,onBeforeUnmount,getCurrentInstance } from "vue";
export default {
  setup() {
    const state = reactive({
      boxWidth: 0,
      mainHeight: 0,
      isOver: false,
      isOverChange: false
    });
    const { ctx } = getCurrentInstance()
    const changeSize = () => {
      let el = ctx.$el
      state.boxWidth = el.offsetWidth
      countMainHeight()
    }
    window.addEventListener('resize', changeSize)
    const countMainHeight = () => {
      if (ctx.$refs['foldBoxMain']) {
        let el= ctx.$refs['foldBoxMain']
        state.mainHeight = el.offsetHeight + 15
        if (state.mainHeight > 129) {
            state.isOverChange = true
            state.isOver = true
          } else {
            state.isOverChange = false
            state.isOver = false
          }
        }
    }
    onMounted(() => {
      changeSize()
    })
    onBeforeUnmount(()=> {
      window.removeEventListener('resize', changeSize)
    })
    const showOver = () => {
       state.isOver = !state.isOver
    }
    return {
      ...toRefs(state),
      changeSize,
      countMainHeight,
      showOver
    };
  },
};
</script>

组件使用

<template>
  <FoldBox ref="foldBox">
    <div class="item" v-for="(item,index) in boxList" :key="index">{{item}}</div>
  </FoldBox>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
import FoldBox from './FoldBox.vue'
export default {
  components:{
    FoldBox
  },
  setup() {
    const state = reactive({
      boxList: [1,2,3,4,5]
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>
<style scoped>
.item {
  height: 30px;
  margin: 6px;
  background-color: skyblue;
}
</style>

总结

  • resize事件的使用
  • vue3中getCurrentInstance获取组件实例以及获取ref属性的使用
  • vue3的生命周期onMounted、onBeforeUnmount、setup的使用
  • css3 transition和transform的使用
  • offsetHeight和offsetWidth的使用

到此这篇关于vue3实现搜索项超过n行就折叠的文章就介绍到这了,更多相关vue3搜索项折叠内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue3+Element-Plus实现左侧菜单折叠与展开功能示例

    目录 1.最终实现的效果图 2.  实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条UI结构,实现折叠与展开功能 2.3  实现点击该DIV时,触发菜单折叠与展开 2.4  折叠与展开功能是实现了,但是背景颜色并没有随着菜单折叠时跟着变小或展开时跟着变大 2.5. 最终效果 3. Home.vue 代码 1.最终实现的效果图 2.  实现左侧菜单折叠与展开功能步骤 2.1 首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,画按钮条

  • vue3实现搜索项超过n行就折叠的思路详解

    目录 实现效果 实现思路 实现组件的布局 事件绑定与事件销毁 高度判断和图标的显示与隐藏 完整代码 布局 css代码 script 组件使用 总结 我们在做列表查询的时候,会有很多查询项,如何实现超过n行查询项的时候自动折叠起来呢? 实现效果 实现思路 实现组件的布局. 绑定监听事件和销毁监听事件 高度判断和图标的显示与隐藏 实现组件的布局 外层盒子(限制高度).折叠的图标或者文字(用来显示和隐藏多余的行).插槽(挖个坑给搜索行占位). 事件绑定与事件销毁 需要绑定一个resize事件.resi

  • Java导出excel时合并同一列中相同内容的行思路详解

    一.有时候导出Excel时需要按类别导出,一大类下好几个小类,小类下又有好几个小小类,就像下图: 要实现这个也不难, 思路如下:按照大类来循环,如上就是按照张江校区.徐汇校区.临港校区三个大类循环,然后再处理小类,因为本例小小类不涉及合并,所以只涉及处理小类,如果需要处理小小类,还需要在处理一下,具体实现原理同小类: 每次循环时记录下此次循环的房屋类型和上次循环的房屋类型,两者相同时,要合并的结束行++,否者,说明这个房屋类型已经循环完毕(前提是各类型都按顺序order by 了,保证相同类型相

  • idea统计代码行数Statistic的步骤详解

    idea统计代码行数可以用到插件:Statistic. 步骤: File→Settings 进入Plugins 点击Marketplace 搜索Statistic     安装蓝框标出的插件 重启idea后就可以看到效果了(图是拿的别人的,基本就是这效果) 如果没有下边的statistic图标,可在View-> Tool Windows中打开 注:Statistic对idea的版本有要求 我的idea版本是2019.1,直接安装后未发现图标,在View -> Tool Windows里也没有,

  • python搜索指定类型文件以及批量移动文件程序详解

    目录 搜索文件并移动的python程序 1.示例文件及路径准备 2.代码示例 3.命令行写法 总结 搜索文件并移动的python程序 使用python写一个程序,其功能满足:可以搜索指定目录下的某类型的文件,并可以移动到指定的目录.                    1.示例文件及路径准备 作为示例,在D盘中放一个名为pic1的文件夹,在该文件夹中放入两个png图片,并在pic1内再创建一个文件夹,里边也随便放两张png图片.如图所示. 在D盘的ABC文件夹中,创建一个名为pic2的文件夹.

  • vue3使用自定义指令实现el dialog拖拽功能示例详解

    目录 实现el-dialog的拖拽功能 通过自定义指令实现拖拽功能 实现拖拽功能 使用方式 实现el-dialog的拖拽功能 这里指的是 element-plus 的el-dialog组件,一开始该组件并没有实现拖拽的功能,当然现在可以通过设置属性的方式实现拖拽. 自带的拖拽功能非常严谨,拖拽时判断是否拖拽出窗口,如果出去了会阻止拖拽. 如果自带的拖拽功能可以满足需求的话,可以跳过本文. 通过自定义指令实现拖拽功能 因为要自己操作dom(设置事件),所以感觉还是使用自定义指令更直接一些,而且对原

  • python文件特定行插入和替换实例详解

    python文件特定行插入和替换实例详解 python提供了read,write,但和很多语言类似似乎没有提供insert.当然真要提供的话,肯定是可以实现的,但可能引入insert会带来很多其他问题,比如在插入过程中crash掉可能会导致后面的内容没来得及写回. 不过用fileinput可以简单实现在特定行插入的需求: Python代码 import os import fileinput def file_insert(fname,linenos=[],strings=[]): ""

  • C++ 线程(串行 并行 同步 异步)详解

    C++  线程(串行 并行 同步 异步)详解 看了很多关于这类的文章,一直没有总结.不总结的话就会一直糊里糊涂,以下描述都是自己理解的非官方语言,不一定严谨,可当作参考. 首先,进程可理解成一个可执行文件的执行过程.在ios app上的话我们可以理解为我们的app的.ipa文件执行过程也即app运行过程.杀掉app进程就杀掉了这个app在系统里运行所占的内存. 线程:线程是进程的最小单位.一个进程里至少有一个主线程.就是那个main thread.非常简单的app可能只需要一个主线程即UI线程.

  • Vue3父子组件传参有关sync修饰符的用法详解

    目录 单向数据流讲解 Vue2.x使用 定义事件的形式, 通知父组件修改 .sync 和 update: 的使用 父传子, 传递多个数据的简写 采用v-model简写(要求严格) Vue3.x使用 普通用法 简写 单向数据流讲解 单向数据流(堆可以修改,栈不可修改) 我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值 但实际上, 对于修改值, 真正是:基本数据类型不可修改,复杂数据类型不要修改引用地址(栈),它的值可以随便修改 Vue2.x使用 定义事件的形式

  • Android搜索框(SearchView)的功能和用法详解

    SearchView是搜索框组件,它可以让用户在文本框里输入文字,通过监听器取得用户的输入,当用户点击搜索时,监听器执行实际的搜索. 1.SearchView组件的常用方法如下: ①setIconifiedByDefault(boolean iconified) ===> 设置搜索框默认是否自动缩小为图标. ②setOnQueryTextListener(SearchView,OnQueryTextListener listener) ===> 为搜索框设置监听器 ③setSubmitButt

  • Vue3中级指南之如何在vite中使用svg图标详解

    目录 前言 vite-plugin-svg-icons 安装 使用 如何在组件中使用 创建SvgIcon组件 icons目录结构 全局注册组件 页面使用 获取所有 SymbolId 总结 前言 svg图片在项目中使用的非常广泛,今天记录一下我是如何在vue3 + vite 中使用svg图标. vite-plugin-svg-icons 预加载 在项目运行时就生成所有图标,只需操作一次 dom 高性能 内置缓存,仅当文件被修改时才会重新生成 安装 node version:  >=12.0.0 v

随机推荐