vue3实现自定义select下拉框内容之城市区域篇

分享-2023年资深前端进阶:前端登顶之巅-最全面的前端知识点梳理总结

*分享一个使用比较久的🪜

需求分析:
1、实现一个区域下拉选项与现有ui组件库不同,支持多选、单选需求
2、支持选中区域后-全选中当前区域下的所有城市信息
3、只能选中当前一个区域的内的城市其余城市禁用

扩展思路:
1、封装公共组件或者封装在组件库内
2、出入参相关api透明好理解
3、支持单选或者多选,支持只选择当前区域下的城市或者全面区域下的城市
4、在原有的element plus下进行扩展延伸满足需求
5、缺陷:未做maxLength-标签最大展示的api;这个按需自己修改一下就行

1、第一种模式:显示区域信息
在这里插入图片描述
2、第二种模式:只展示城市内容
在这里插入图片描述

1、相关开发代码篇

创建文件:custom-select.vue文件;复制copy当下代码;
使用方式:
1、外部入参例如城市:dataSource=[{ label: 华北,value: '华东', children: [{ label: '山东',value: 'shandong'}]],树形结构
2、标签引用:<custom-select :disabled="true" :multilevel="true" height="32" v-model="checkGroup" :dataSource="cityList"></custom-select>
3、相关api说明文档在文章底部

<template><divtabindex="1"ref="customSelectRef"@click="handleClickDiv"@mouseenter="handelMouseEnter"@mouseleave="handleMouseLeave":style="{ width: modelLabel && modelValue?.length ? '166px' : '100px', height: (height + 'px') || '25px' }":class="['custom-select_contaniner-i', isShowDropdown && 'custom-select_background']"><div><span v-if="modelLabel" class="custom-tag"><span>{{ modelLabel }}</span><iclass="custom_tag_delete"@mouseenter="handelIconMouseEnter"@mouseleave="handleIconMouseLeave"@click.stop="handleDeleteIcon"><svgv-if="!ishShowIconDeleteText"t="1678090923023"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="6709"width="11"height="11"><pathd="M263.802377 224.219482a7.964444 7.964444 0 0 1 11.263425 0l236.934198 236.934198 236.934198-236.934198a7.964444 7.964444 0 0 1 11.263425 0l39.582895 39.582895a7.964444 7.964444 0 0 1 0 11.263425l-236.934198 236.934198 236.934198 236.934198a7.964444 7.964444 0 0 1 0 11.263425l-39.582895 39.582895a7.964444 7.964444 0 0 1-11.263425 0l-236.934198-236.934198-236.934198 236.934198a7.964444 7.964444 0 0 1-11.263425 0l-39.582895-39.582895a7.964444 7.964444 0 0 1 0-11.263425l236.934198-236.934198-236.934198-236.934198a7.964444 7.964444 0 0 1 0-11.263425l39.582895-39.582895z"fill="#8a8a8a"p-id="6710"/></svg><svgv-elset="1678091410677"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="6936"width="22"height="22"><pathd="M479.072 512l-98.72-98.72c-9.152-9.152-9.088-23.84 0-32.928 9.152-9.152 23.84-9.088 32.928 0l98.72 98.72 98.72-98.72c9.152-9.152 23.84-9.088 32.928 0 9.152 9.152 9.088 23.84 0 32.928l-98.72 98.72 98.72 98.72c9.152 9.152 9.088 23.84 0 32.928-9.152 9.152-23.84 9.088-32.928 0l-98.72-98.72-98.72 98.72c-9.152 9.152-23.84 9.088-32.928 0-9.152-9.152-9.088-23.84 0-32.928l98.72-98.72zM512 837.824c179.936 0 325.824-145.888 325.824-325.824s-145.888-325.824-325.824-325.824c-179.936 0-325.824 145.888-325.824 325.824s145.888 325.824 325.824 325.824z"fill="#B7B8B9"p-id="6937"/></svg></i></span><span v-if="modelLabel && modelValue?.length > 1" class="custom-tag">+ {{ modelValue.length - 1 }}</span><span v-if="!modelLabel" class="cus_placeholder">{{ placeholder }}</span></div><i class="arrow-top-icon" v-if="!isShowIconRemove || !modelLabel" :class="[!isShowDropdown && 'arrow-top-icon-active']"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><pathfill="currentColor"d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"/></svg></i><i class="remove-icon" v-if="isShowIconRemove && modelLabel" @click.stop="handleRemove"><svgt="1678084213981"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="4480"width="11"height="11"><pathd="M512 32c265.097 0 480 214.903 480 480S777.097 992 512 992 32 777.097 32 512 246.903 32 512 32z m0 64C282.25 96 96 282.25 96 512s186.25 416 416 416 416-186.25 416-416S741.75 96 512 96z m169.706 246.294c12.496 12.497 12.496 32.758 0 45.255L557.256 512l124.45 124.452c12.496 12.497 12.496 32.758 0 45.255-12.497 12.496-32.758 12.496-45.255 0L512 557.254 387.549 681.706c-12.497 12.496-32.758 12.496-45.255 0-12.496-12.497-12.496-32.758 0-45.255l124.452-124.452-124.452-124.45c-12.496-12.497-12.496-32.758 0-45.255 12.497-12.496 32.758-12.496 45.255 0l124.452 124.45 124.45-124.45c12.497-12.496 32.758-12.496 45.255 0z"fill="#8a8a8a"p-id="4481"/></svg></i></div><transition><divv-if="isShowDropdown"ref="cusSelectDropdown"class="cus_select_background":style="{ minWidth: popperOffestWidth + 'px', zIndex: 99999 }"><div v-if="multilevel" style="padding: 5px 20px;"><div :key="key" v-for="(opt, key) in cusDataListChecked" class="multilevel_box"><el-checkboxstyle="width: 60px;"v-model="opt.checkAll"@change="handleCheckAllChange($event, opt)":indeterminate="opt.isIndeterminate":disabled="disabled && checkList.length ? !opt.checkList.length : false">{{ opt.label }}</el-checkbox><el-checkbox-group v-model="opt.checkList"v-if="opt.children"@change="handleCheckedCitiesChange($event, opt)"style="display: inline-block; padding-left: 20px" ><el-checkbox :label="item.value" style="width: 60px":key="index + Math.random()" v-for="(item, index) in opt.children" :disabled="disabled && checkList.length ? !opt.checkList.length : false">{{ item.label }}</el-checkbox></el-checkbox-group></div></div><div class="cus_select_contaniner" v-else><div class="cus_select_left">中国</div><div class="cus_select_right"><el-checkbox-group v-model="checkList" @change="handelCheckGroup"style="display: inline-block; padding-left: 20px" ><el-checkbox :key="index" :label="item.value" style="width: 60px"v-for="(item, index) in dataSource" >{{ item.label }}</el-checkbox></el-checkbox-group></div></div><span class="el-popper__arrow" data-popper-arrow="" style="position: absolute; left: 140px;"></span></div></transition>
</template>
<script setup lang="ts">
import { createPopper } from '@popperjs/core'
import { ref, onMounted, nextTick, watch, onUnmounted, toRaw, onBeforeMount, computed } from 'vue'const props = withDefaults(defineProps<{height?: string | numberdataSource: anymodelValue?: anyplaceholder?: stringmultilevel?: booleandisabled?: boolean}>(),{height: 25,disabled: false,multilevel: false,dataSource: [],modelValue: [],placeholder: '请选择'}
)const emit = defineEmits(['update:modelValue'])const customSelectRef = ref()const cusSelectDropdown = ref()const cusDataListChecked = ref<any[]>([])const checkList = ref<string[]>([])const popperOffestWidth = ref<number>(0)const isShowDropdown = ref<boolean>(false)const modelLabel = ref<string>('')const isShowIconRemove = ref<boolean>(false)const ishShowIconDeleteText = ref<boolean>(false)const handleClickDiv = () => {isShowDropdown.value = !isShowDropdown.value
}const handelCheckGroup = (value) => {const obj = props.dataSource.filter((item) => item.value === value[0])[0]modelLabel.value = obj?.labelemit('update:modelValue', value)
}const handelMouseEnter = () => {isShowIconRemove.value = true
}const handleMouseLeave = () => {isShowIconRemove.value = false
}const handleRemove = () => {modelLabel.value = ''checkList.value = []if (isShowDropdown.value) {isShowDropdown.value = false}if (props.multilevel) {cusDataListChecked.value = addCheckProperties(props.dataSource)}emit('update:modelValue', [])
}const handleDeleteIcon = () => {isShowDropdown.value = falsecheckList.value.splice(0, 1)if (props.multilevel) return cusDataListChecked.value = findTreeChecked(cusDataListChecked.value)const info = toRaw(checkList.value)[0]const obj = props.dataSource.filter((item) => item.value === info)[0]modelLabel.value = obj?.label || ''
}const handelIconMouseEnter = () => {ishShowIconDeleteText.value = true
}const handleIconMouseLeave = () => {ishShowIconDeleteText.value = false
}// 点击某个DOM元素之外的方法
const handlerDocClick = (event) => {const isSelf = customSelectRef.value?.contains(event.target) || cusSelectDropdown.value?.contains(event.target)if (!isSelf) {isShowDropdown.value = false}
}/*** 展示区域省份的逻辑* */ 
const handleCheckAllChange = (bool: any, option) => {const allCity = option.children ? option.children.map(item => item.value) : [option.value]bool ? option.checkList = allCity : option.checkList = []option.isIndeterminate = falsecheckList.value = option.checkListconst newLabelArr = option.children ? option.children.filter(item => checkList.value.includes(item.value)) : checkList.value?.length ? [{ label: '默认' }] : []modelLabel.value = newLabelArr?.[0]?.label || ''emit('update:modelValue', checkList.value)
}const handleCheckedCitiesChange = (value: any[], option) => {const checkedCount = value.lengthconst allCity = option.children ? option.children.map(item => item.value) : [option.value]option.checkAll = checkedCount === allCity.lengthoption.isIndeterminate = checkedCount > 0 && checkedCount < allCity.lengthcheckList.value = option.checkListconst newLabelArr = option.children ? option.children.filter(item => checkList.value.includes(item.value)) : checkList.value?.length ? [{ label: '默认' }] : []modelLabel.value = newLabelArr?.[0]?.label || ''emit('update:modelValue', checkList.value)
}const addCheckProperties = (treeData) => {let result = []result = JSON.parse(JSON.stringify(treeData))result.forEach(node => {const child = node.children;node.checkAll = false;node.isIndeterminate = false;node.checkList = [];if (child && child.length > 0) {addCheckProperties(child);}});return result
}const findTreeChecked = (treeData) => {let newLabelconst val = toRaw(checkList.value)const defaultBool = val.some(item => item.includes('default'))treeData.forEach(node => {if (node.children?.length) {const child = node.children;const bool = child.some(opt => val.includes(opt.value))!newLabel ? newLabel = child.filter(item => val.includes(item.value))[0] : void nullif (bool) {node.checkAll = val.length === child?.length;node.isIndeterminate = val.length > 0 && val.length < child?.length;node.checkList = val;} else {node.isIndeterminate = false}}})treeData[0].isIndeterminate = false;treeData[0].checkAll = defaultBool ? true : false;treeData[0].checkList = defaultBool ? ['default'] : [];modelLabel.value = defaultBool ? '默认' : newLabel?.label || ''return treeData
}watch([customSelectRef, cusSelectDropdown],() => {if (customSelectRef.value && cusSelectDropdown.value) {createPopper(customSelectRef.value, cusSelectDropdown.value, {placement: 'bottom',modifiers: [{name: 'offset',options: {offset: [80, 8]}}]})}},{deep: true,immediate: true}
)watch(props.modelValue,(newval) => {if (!newval || !newval.length) returncheckList.value = props.modelValueif (props.multilevel) returnconst obj = props.dataSource.filter((item) => item.value === newval[0])[0]modelLabel.value = obj?.label},{deep: true,immediate: true}
)onBeforeMount(() => {if (props.multilevel) {cusDataListChecked.value = addCheckProperties(props.dataSource)}
})onMounted(async () => {await nextTick()popperOffestWidth.value = customSelectRef.value.offsetWidthdocument.addEventListener('click', handlerDocClick, true)if (props.multilevel && props.modelValue.length) { cusDataListChecked.value = findTreeChecked(cusDataListChecked.value)}
})onUnmounted(() => {document.removeEventListener('click', handlerDocClick, true)
})
</script><script lang="ts">
export default { name: 'CustomSelect' }
</script><style lang="scss" scoped>
.v-enter-active,
.v-leave-active {transition: opacity 0.5s ease;
}.v-enter-from,
.v-leave-to {opacity: 0;
}.custom-select_contaniner-i {width: 100%;height: 25px;padding: 7px 9px;padding-left: 5px;border-radius: 4px;line-height: 1;cursor: pointer;position: relative;user-select: none;word-wrap: break-word;word-break: break-all;font-size: 13px;flex-grow: 1;display: inline-flex;align-items: center;box-sizing: border-box;justify-content: space-between;color: var(--el-input-text-color, var(--el-text-color-regular));background-color: var(--el-input-bg-color, var(--el-fill-color-blank));box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
}.custom-tag {color: var(--el-color-info);display: inline-flex;justify-content: center;align-items: center;height: 18px;padding: 0 9px;line-height: 1;border-radius: 4px;white-space: nowrap;font-size: 12px;background-color: var(--el-fill-color);
}.custom_tag_delete {width: 18px;margin-left: 5px;font-size: 0px;border-radius: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer;color: var(--el-color-info);
}.custom-tag:first-child {margin-right: 6px;padding-right: 4px;
}.arrow-top-icon {width: 14px;transform: rotateX(-180deg);color: var(--el-text-color-placeholder);
}.remove-icon {margin-top: 2px;color: var(--el-text-color-placeholder);
}.arrow-top-icon-active {transform: rotateX(0deg);
}.custom-select:hover {box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
}.custom-select:focus {outline: none;box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}.custom-select_background {box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}::-webkit-scrollbar {width: 4px;height: 4px;background-color: transparent;
}/*滚动条的轨道*/
::-webkit-scrollbar-track {background-color: transparent;
}/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {border-radius: 8px;background-color: rgba(0, 0, 0, 0.1);box-shadow: inset 0 0 2px rgba(#000000, 0.04);
}/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {height: 0;background-color: transparent;
}.cus_select_contaniner {padding: 5px 10px;display: flex;
}.cus_select_left {width: 60px;margin-top: 5px;
}.cus_select_right {flex: 1;width: 480px;
}.cus_select_background {min-height: 200px;box-sizing: border-box;border-radius: 4px;font-size: var(--el-font-size-base);color: var(--el-text-color-regular);background: var(--el-bg-color-overlay);border: 1px solid var(--el-border-color-light);.multilevel_box {display: flex; padding: 5px; border-bottom: 1px solid #e4e7ed;}.multilevel_box:last-child {border-bottom: none;}
}.cus_placeholder {color: var(--el-text-color-placeholder);
}.el-popper__arrow {top: -5px;
}.el-popper__arrow {position: absolute;width: 10px;height: 10px;z-index: -1;
}.el-popper__arrow::before {border: 1px solid var(--el-border-color-light);background: var(--el-bg-color-overlay);right: 0;border-bottom-color: transparent!important;border-right-color: transparent!important;
}
</style>
2、组件-相关api说明
参数说明类型默认值必填项
height输入框的高度String/Number25
dataSource[{}]-label,value;树形结构Array[][]
modelValue当前选中项内容Array[]
placeholder输入框内容String请输入
multilevel是否开启跨层级模式Booleanfalse
disabled是否开启跨层级禁用Booleanfalse

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/82351.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

项目实战 — 消息队列(5){统一硬盘操作}

前面已经使用数据库管理了交换机、绑定、队列&#xff0c;然后又使用了数据文件管理了消息。 那么&#xff0c;这里就创建一个类&#xff0c;讲之前的两个部分整合起来&#xff0c;对上层提供统一的一套接口&#xff0c;表示硬盘上存储的所有的类的信息。 /* * 用这个类来管理…

企业计算机服务器中了locked勒索病毒怎么办,如何预防勒索病毒攻击

计算机服务器是企业的关键信息基础设备&#xff0c;随着计算机技术的不断发展&#xff0c;企业的计算机服务器也成为了众多勒索者的攻击目标&#xff0c;勒索病毒成为当下计算机服务器的主要攻击目标。近期&#xff0c;我们收到很多企业的求助&#xff0c;企业的服务器被locked…

Unico-GUI软件关于ST传感器机器学习(MLC)基本操作步骤

准备工作 UNICO-GUI软件用于意法半导体产品组合&#xff08;加速度计、陀螺仪、磁力计和环境传感器&#xff09;中所有MEMS传感器的评估板。它可用于Linux&#xff08;基于Debian&#xff09; / Mac OS X / Windows平台。 Unico-GUI - MEMS evaluation kit software package …

优维低代码实践:对接数据

优维低代码技术专栏&#xff0c;是一个全新的、技术为主的专栏&#xff0c;由优维技术委员会成员执笔&#xff0c;基于优维7年低代码技术研发及运维成果&#xff0c;主要介绍低代码相关的技术原理及架构逻辑&#xff0c;目的是给广大运维人提供一个技术交流与学习的平台。 优维…

工厂方法模式-java实现

介绍 工厂方法模式&#xff0c;通过把工厂抽象为一个接口&#xff0c;这样当我们新增具体产品的时候&#xff0c;就只需要实现一个新的具体工厂类即可。一个具体工厂类&#xff0c;对应着一个产品。 请注意&#xff1a;在工厂方法模式中&#xff0c;一个具体工厂类只对应生产…

Android 数据库之GreenDAO

GreenDAO 是一款开源的面向 Android 的轻便、快捷的 ORM 框架&#xff0c;将 Java 对象映射到 SQLite 数据库中&#xff0c;我们操作数据库的时候&#xff0c;不再需要编写复杂的 SQL语句&#xff0c; 在性能方面&#xff0c;greenDAO 针对 Android 进行了高度优化&#xff0c;…

四、web应用程序技术——HTTP

文章目录 1 HTTP请求2 HTTP响应3 HTTP方法4 URL5 HTTP消息头5.1 常用消息头5.2 请求消息头5.3 响应消息头 6 cookie7 状态码8 HTTP代理9 HTTP身份验证 HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是访问万维网使用的核心通信协议&…

Sentieon | 每周文献-Multi-omics(多组学)-第九期

多组学系列文章-1 标题&#xff08;英文&#xff09;&#xff1a; Prediction of axillary lymph node metastasis in triple-negative breast cancer by multi-omics analysis and an integrated model标题&#xff08;中文&#xff09;&#xff1a; 基于多组学分析和综合模型…

Spark Catalog详解

前言 旁边的实习生说:我想要用spark代码中对hive库中的内部表和外部表进行批量删除(包括数据),咋感觉网上搜了一圈都找不到解决方案啊,spark这么鸡肋吗? 我:你应该静下心来好好把spark基础知识进行全面学习。 实习生:难道spark有这功能,而我没有学习过?咋弄啊? 我:…

STM32基础入门学习笔记:开发板 电路原理与驱动编程

文章目录&#xff1a; 一&#xff1a;触摸按键 1.触摸按键驱动程序&#xff08;点击&#xff09; touch_key.h touch_key.c main.c 2.按键双击和长按程序 touch_key.h touch_key.c main.c 3.触摸按键滑动程序 main.c 二&#xff1a;数码管显示 1.数码管RTC时钟LE…

JAVA电商平台免费搭建 B2B2C商城系统 多用户商城系统 直播带货 新零售商城 o2o商城 电子商务 拼团商城 分销商城 bbc

​ 1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前…

如何使用Pycharm 快速搭建 Django 项目 (分享详细图文教程)

1. 准备工作 在开始创建Django项目之前&#xff0c;需要先确保已经安装了Python和Pycharm。并且python中已经安装好了Django依赖。 1安装python&#xff08;这里我安装使用的是python3.11.4稳定版本&#xff09; 官网下载太慢了这里直接贴网盘下载连接了&#xff0c;一起贴出py…

使用Python和wxPython将图片转换为草图

导语: 将照片转换为艺术风格的草图是一种有趣的方式&#xff0c;可以为您的图像添加独特的效果。在本文中&#xff0c;我们将介绍如何使用Python编程语言和wxPython图形用户界面库来实现这一目标。我们将探讨如何使用OpenCV库将图像转换为草图&#xff0c;并使用wxPython创建一…

AI和ChatGPT:人工智能的奇迹

AI和ChatGPT&#xff1a;人工智能的奇迹 引言什么是人工智能&#xff1f;ChatGPT&#xff1a;AI的语言之王ChatGPT的工作原理ChatGPT的优势和挑战AI和ChatGPT的未来展望结论 引言 人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;是一项令人兴奋的…

不看后悔一辈子!不看错过50K!历尽心血总结Redis全局命令

前言&#xff1a; &#x1f4d5;作者简介&#xff1a;热爱编程的敖云岚&#xff0c;致力于C、Java、Python等多编程语言&#xff0c;热爱编程和长板的运动少年&#xff01; &#x1f4d8;相关专栏&#xff1a;Java基础语法&#xff0c;JavaEE初阶&#xff0c;数据库&#xff0c…

【用于全变分去噪的分裂布雷格曼方法】实施拆分布雷格曼方法进行总变异去噪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

流量分析日志查看

一流量分析 buuctf wireshark 从题目出发&#xff0c;既然是上传登录信息&#xff0c;就直接过滤post请求&#xff0c;即搜索 http.request.methodPOST&#xff0c;因为上传用户登录信息使用的一定是http里的post方法 模式过滤 http.request.method “GET” http.request.…

Vantage透明屏的工作原理是什么?应用、展示、显示

Vantage透明屏是一种新型的显示技术&#xff0c;它能够将图像和视频直接投影到透明的屏幕上&#xff0c;使得观众可以同时看到屏幕上的内容和背后的实物。 这种技术在广告、展览、零售和娱乐等领域有着广泛的应用前景。 Vantage透明屏的工作原理是利用透明的显示面板和背后的…

Spring Bean 生命周期的执行流程

问题描述 Spring 生命周期全过程大致分为五个阶段&#xff1a; 1、创建前准备阶段 2、创建实例阶段 3、依赖注入阶段 4、 容器缓存阶段 5、销毁实例阶段 下图是 Spring Bean 生命周期完整流程图&#xff0c;其中对每个阶段的具体操作做了详细介绍&#xff1a; 一、创建前准备阶…

Qt实现可伸缩的侧边工具栏(鼠标悬浮控制伸缩栏)

Qt实现可伸缩的侧边工具栏 一直在网上找&#xff0c;发现大多的实现方案都是用一个按钮&#xff0c;按下控制侧边栏的伸缩&#xff0c;但是我想要实现鼠标悬浮在侧边栏的时候就伸出&#xff0c;移开就收缩的功能&#xff0c;也没找到好的参考&#xff0c;所以决定自己实现一个…