电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue3 可拖動的左右面板分割組件實現

瀏覽:34日期:2022-09-29 09:35:15
目錄分解組件左側面板右側面板入參分解propsslots具體實現如何拖動呢?事件監聽寬度處理優化buggit地址

最近在使用vue的時候,遇到一個需求,實現左右div可通過中間部分拖拽調整寬度,本文就整理一下,分享給大家,具體如下:

效果圖

vue3 可拖動的左右面板分割組件實現

分解組件

整體使用flex布局

左側面板 面板的具體內容通過slot具名插槽傳入。 title通過prop傳入 可拖動,為了保證內容樣式不會被拖動所破壞,對面板的寬度設定最大值/最小值右側面板 右側面板寬度隨著左側面板的寬度變化而變化,此處需注意,內容的寬度使用flex-auto自動適應。 需要做移動端的自適應。 自適應使用tailwind的媒體查詢

vue3 可拖動的左右面板分割組件實現

入參分解props @param {Number} maxWidth 最大寬度 @param {Number} minWidth 最小寬度 @param {String} leftTitle 左標題 @param {String} rightTitle 右標題? @param {Boolean} sotoreage 是否存儲與localstoregeslots left-content {Element} 左側內容 right-content {Element} 右側內容具體實現如何拖動呢?

在左側面板與右側面板之間添加一個隱藏的盒子,我將這個盒子隱藏在box-shadow之中。具體事件放在這個div中實現

<div class='w-2 cursor-move hidden md4:block'onMousedown={hnadleMouseDown}></div>事件監聽

const hnadleMouseDown = (evt: MouseEvent) => { /* 獲取起始點位,并存儲 */ let { pageX, pageY } = evt; basePosition.pageX = pageX; basePosition.pageY = pageY; /* 監聽鼠標的移動事件 */ document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }; const handleMouseMove = evt => { /* 阻止瀏覽器默認事件,防止觸發瀏覽器的手勢功能 */ evt.preventDefault(); /* 設置定時器,防止dom多次回流 */ clearTimeout(timer.value); timer.value = setTimeout(() => {let { pageX } = evt;const baseDiv = document.querySelector('.right-border-shadow');/* 處理寬度,是否處于最大值/最小值之間 */let baseWidth: Number | undefined = Number(baseDiv?.clientWidth) + (pageX - basePosition.pageX);baseWidth = baseWidth > Number(props?.maxWidth) ? props.maxWidth : baseWidth;baseWidth = Number(baseWidth) < Number(props?.minWidth) ? props.minWidth : baseWidth;baseDiv?.setAttribute('style', `width:${baseWidth}px`);/* emit寬度改變的事件 */ctx.emit('drugend');/* 存儲到store */setStore(baseWidth); }, 50); }; const handleMouseUp = evt => { /* 結束拖動之后,取消事件監聽,并emit出最終寬度 */ const width = document.querySelector('.right-border-shadow')?.clientWidth; document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); ctx.emit('drugend', width); };寬度處理

style={`width:${ store.get('split-width') ? store.get('split-width') : props.minWidth ? props.minWidth : 384 }px`}優化

手動改變瀏覽器視窗寬度

nextTick(() => {ctx.emit('load', ctx);MutationObserver = window.MutationObserver;if (MutationObserver) { /* 監聽瀏覽器的窗口變化,在部分情況下需要這個api */ mo = new MutationObserver(function() { const __wm = document.querySelector('#rezie-id'); // 只在__wm元素變動才重新調用 __canvasWM if (!__wm) { // 避免一直觸發 mo.disconnect(); mo = null; ctx.emit('resize'); } }); mo.observe(document.querySelector('#rezie-id'), { attributes: true, subtree: true, childList: true, });} });

未生效,求指點

bug

父組件的onMounted鉤子中獲取子元素的slot元素節點報錯,為null。目前的解決辦法是在子組件的onMounted鉤子中拋出一個load事件,父組件使用onLoad去處理接下來的邏輯。

git地址

倉庫地址預覽地址

到此這篇關于vue3 可拖動的左右面板分割組件實現的文章就介紹到這了,更多相關vue3 可拖動左右分割面板內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 南京PVC快速门厂家南京快速卷帘门_南京pvc快速门_世界500强企业国内供应商_南京美高门业 | 物流公司电话|附近物流公司电话上门取货 | 酶联免疫分析仪-多管旋涡混合仪|混合器-莱普特科学仪器(北京)有限公司 | 字典-新华字典-在线字典查字-字典趣| 等离子表面处理机-等离子表面活化机-真空等离子清洗机-深圳市东信高科自动化设备有限公司 | 奇酷教育-Python培训|UI培训|WEB大前端培训|Unity3D培训|HTML5培训|人工智能培训|JAVA开发的教育品牌 | 上海单片机培训|重庆曙海培训分支机构—CortexM3+uC/OS培训班,北京linux培训,Windows驱动开发培训|上海IC版图设计,西安linux培训,北京汽车电子EMC培训,ARM培训,MTK培训,Android培训 | 山东PE给水管厂家,山东双壁波纹管,山东钢带增强波纹管,山东PE穿线管,山东PE农田灌溉管,山东MPP电力保护套管-山东德诺塑业有限公司 | 口信网(kousing.com) - 行业资讯_行业展会_行业培训_行业资料 | LZ-373测厚仪-华瑞VOC气体检测仪-个人有毒气体检测仪-厂家-深圳市深博瑞仪器仪表有限公司 | 上海三信|ph计|酸度计|电导率仪-艾科仪器 | 户外环保不锈钢垃圾桶_标识标牌制作_园林公园椅厂家_花箱定制-北京汇众环艺 | 广州中央空调回收,二手中央空调回收,旧空调回收,制冷设备回收,冷气机组回收公司-广州益夫制冷设备回收公司 | 贵州成人高考网_贵州成考网| 钢丝绳探伤仪-钢丝绳检测仪-钢丝绳探伤设备-洛阳泰斯特探伤技术有限公司 | PVC快速门-硬质快速门-洁净室快速门品牌厂家-苏州西朗门业 | 报警器_家用防盗报警器_烟雾报警器_燃气报警器_防盗报警系统厂家-深圳市刻锐智能科技有限公司 | 搅拌磨|搅拌球磨机|循环磨|循环球磨机-无锡市少宏粉体科技有限公司 | 河南砖机首页-全自动液压免烧砖机,小型砌块水泥砖机厂家[十年老厂] | 间苯二酚,间苯二酚厂家-淄博双和化工| 酒吧霸屏软件_酒吧霸屏系统,酒吧微上墙,夜场霸屏软件,酒吧点歌软件,酒吧互动游戏,酒吧大屏幕软件系统下载 | 铸钢件厂家-铸钢齿轮-减速机厂家-淄博凯振机械有限公司 | 合肥白癜风医院_合肥治疗白癜风医院_合肥看白癜风医院哪家好_合肥华研白癜风医院 | 派克防爆伺服电机品牌|国产防爆伺服电机|高低温伺服电机|杭州摩森机电科技有限公司 | 合肥汽车充电桩_安徽充电桩_电动交流充电桩厂家_安徽科帝新能源科技有限公司 | 重庆监控_电子围栏设备安装公司_门禁停车场管理系统-劲浪科技公司 | TPE_TPE热塑性弹性体_TPE原料价格_TPE材料厂家-惠州市中塑王塑胶制品公司- 中塑王塑胶制品有限公司 | 广州展台特装搭建商|特装展位设计搭建|展会特装搭建|特装展台制作设计|展览特装公司 | 生产加气砖设备厂家很多,杜甫机械加气砖设备价格公道 | 直流大电流电源,燃料电池检漏设备-上海政飞 | 河南凯邦机械制造有限公司| 深圳APP开发公司_软件APP定制开发/外包制作-红匣子科技 | 杭州中央空调维修_冷却塔/新风机柜/热水器/锅炉除垢清洗_除垢剂_风机盘管_冷凝器清洗-杭州亿诺能源有限公司 | 四川实木门_成都实木门 - 蓬溪聚成门业有限公司 | 深圳希玛林顺潮眼科医院(官网)│深圳眼科医院│医保定点│香港希玛林顺潮眼科中心连锁品牌 | 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 中国品牌门窗网_中国十大门窗品牌_著名门窗品牌 | 蒜肠网-动漫,二次元,COSPLAY,漫展以及收藏型模型,手办,玩具的新媒体.(原变形金刚变迷TF圈) | 全自动过滤器_反冲洗过滤器_自清洗过滤器_量子除垢环_量子环除垢_量子除垢 - 安士睿(北京)过滤设备有限公司 | 合肥升降机-合肥升降货梯-安徽升降平台「厂家直销」-安徽鼎升自动化科技有限公司 |