vue高阶组件怎么用(vue更多筛选项小组件使用详解)
类别:编程学习 浏览量:2012
时间:2021-10-18 11:32:08 vue高阶组件怎么用
vue更多筛选项小组件使用详解本文实例为大家分享了vue更多筛选项小组件的实现方法,供大家参考,具体内容如下
效果:
就是一个简单的小效果,当有很多筛选条件时,默认只展示几项,不会觉得很冗余,有需要可以点击展开,进行更过的条件筛选。并且能够自动判断界面的尺寸,决定是否需要更多筛选项。直接把“查询、重置”内置到组件里面了,便于组件样式的实现,还可以进行插槽。
正常大屏
分辨率变小
可见出现了更多筛选的按钮,可以点击下拉
插槽
代码:
<template> <li :class="['colla-wrap']" ref="filter"> <li class="colla-box" ref="filterCont" :style="maxWidth ? 'max-width:' + maxWidth: ''"> <slot></slot> </li> <li class="ctrl"> <li class="deal-b" > <el-button size="mini" type="primary" icon="el-icon-search" @click="clickSearch">查询</el-button> <el-button size="mini" plain icon="el-icon-refresh-left" @click="clickReset">重置</el-button> <slot name="moreBtns"></slot> <li class="deal-b" @click="showCollapse" v-if="autoExpend.more"> <i class="el-icon-arrow-down turnDown" v-if="!autoExpend.collapseVisible"></i> <i class="el-icon-arrow-up turnUp" v-if="autoExpend.collapseVisible"></i> <li v-if="!autoExpend.collapseVisible" class="more-words">更多筛选项</li> <li v-if="autoExpend.collapseVisible" class="more-words">收起筛选</li> </li> </li> </li> </li> </template> <script> export default={ data(){ return{ collapseData:{ collapseVisible:false }, //自动折叠显示更多筛选项 autoExpend:{ more:false, collapseVisible:false, hasTop:false, hasFilter:false }, } }, props:['maxWidth'], mounted(){ this.watchScrollHeight() window.addEventListener("resize", () => { this.watchScrollHeight() }); }, methods:{ clickSearch(){ this.$emit('clickSearch') }, clickReset(){ this.$emit('clickReset') }, showCollapse(){ this.methods('showCollapse') }, showCollapse(){ this.autoExpend.collapseVisible = !this.autoExpend.collapseVisible this.$refs.filterCont.style.height = this.autoExpend.collapseVisible?'auto':'50px' } //尝试监控这个高度 watchScrollHeight(){ let filter = this.$refs.filter; if(filter){ this.$nextTick(() => { this.autoExpend.more = $(filter).find(".colla-box")[0].scrollHeight > 50; }) } //判断下面有没有元素节点 决定这个插槽是否显示 //判断正常搜索框部位插槽 if(this.$refs.filterCont&&this.$refs.filterCont.childNodes.length){ this.autoExpend.hasFilter = true } } } } </script> <style scoped lang="scss"> .colla-wrap{ width: 100%; .colla-box{ max-width: calc(100% - 400px); float: left; box-sizing: border-box; overflow: hidden; height: 50px; >li,button{ float: left; margin-right: 20px; margin-bottom: 20px; } } .ctrl{ display: flex; align-items: flex-start; justify-content: flex-start; color: #409EFF; button{ margin-right: 20px; } .deal-b{ display: flex; align-items: flex-start; flex-wrap: nowrap; .deal-b{ margin-right: 0; margin-bottom: 0; margin-top: 5px; display: flex; align-items: center; cursor: pointer; color: #409EFF; .more-words{ min-width: 75px; } i{ color: #409EFF; margin-right: 5px; } } } } } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue文件上传进度处理(Vue 大文件上传和断点续传的实现)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- vue路由跳转的方法(Vue路由监听实现同页面动态加载的示例)
- vue渲染数据的过程(Vue前端高效开发之列表渲染指令)
- vue加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- vue 设置头部可以左右滑动(vue实现左右滑动效果实例代码)
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- vue统计代码行数(vue实现计数器简单制作)
- vuetable表格合并(vue-table实现添加和删除)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- 使用vue组件开发项目(Vue记事本实例详解)
- 今年考高会很难吗(今年高考会考试吗)
- 盘古开天地 他创造了世界,谁创造了盘古 盘古是伏羲吗(盘古开天地他创造了世界)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
- 冬天来了手脚冰凉 真不是因为上辈子你是折翼的天使(冬天来了手脚冰凉)
- 0 1 岁婴儿最强作息指南,照着做养出天使宝宝(01岁婴儿最强作息指南)
- 沪上这16所高校 萌新 礼包开箱 哪一款让你心动(沪上这16所高校萌新)
热门推荐
- django详情页面获取用户id(Django项目中添加ldap登陆认证功能的实现)
- dockerservice启动参数(docker.service启动报错的一次排查详解)
- web服务器与应用服务器的区别(web服务器是什么?web服务器有哪些呢?)
- python编程ide工具(这6款Python IDE&代码编辑器,你都用过吗?)
- docker可以快速的创建和删除(Docker 命令自动补全的实现)
- laravel关联查询限制数量(laravel-admin 后台表格筛选设置默认的查询日期方法)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- apache配置说明(深入apache host的配置详解)
- php 会话session实现用户登录功能(PHP cookie,session的使用与用户自动登录功能实现方法分析)
- nginx 怎么避免options请求(详解nginx 的 default_server 定义及匹配规则)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9