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

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

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

瀏覽:33日期: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
相關文章:
主站蜘蛛池模板: 江苏全风,高压风机,全风环保风机,全风环形高压风机,防爆高压风机厂家-江苏全风环保科技有限公司(官网) | 旗杆生产厂家_不锈钢锥形旗杆价格_铝合金电动旗杆-上海锥升金属科技有限公司 | 长沙中央空调维修,中央空调清洗维保,空气能热水工程,价格,公司就找维小保-湖南维小保环保科技有限公司 | 会议会展活动拍摄_年会庆典演出跟拍_摄影摄像直播-艾木传媒 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 淘剧影院_海量最新电视剧,免费高清电影随心观看 | 桑茶-七彩贝壳桑叶茶 长寿茶| 自动化生产线-自动化装配线-直流电机自动化生产线-东莞市慧百自动化有限公司 | 硅胶管挤出机厂家_硅胶挤出机生产线_硅胶条挤出机_臣泽智能装备 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 北京发电机出租_发电机租赁_北京发电机维修 - 河北腾伦发电机出租 | 工业PH计|工业ph酸度计|在线PH计价格-合肥卓尔仪器仪表有限公司 济南画室培训-美术高考培训-山东艺霖艺术培训画室 | 集菌仪厂家_全封闭_封闭式_智能智能集菌仪厂家-上海郓曹 | 自动化生产线-自动化装配线-直流电机自动化生产线-东莞市慧百自动化有限公司 | 拉力机-拉力试验机-万能试验机-电子拉力机-拉伸试验机-剥离强度试验机-苏州皖仪实验仪器有限公司 | crm客户关系管理系统,销售管理系统,crm系统,在线crm,移动crm系统 - 爱客crm | 事迹材料_个人事迹名人励志故事| 橡胶弹簧|复合弹簧|橡胶球|振动筛配件-新乡市永鑫橡胶厂 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 | 电渗析,废酸回收,双极膜-山东天维膜技术有限公司 | 磨煤机配件-高铬辊套-高铬衬板-立磨辊套-盐山县宏润电力设备有限公司 | 全自动五线打端沾锡机,全自动裁线剥皮双头沾锡机,全自动尼龙扎带机-东莞市海文能机械设备有限公司 | 不锈钢散热器,冷却翅片管散热器厂家-无锡市烨晟化工装备科技有限公司 | 西安展台设计搭建_西安活动策划公司_西安会议会场布置_西安展厅设计西安旭阳展览展示 | 查分易-成绩发送平台官网| LHH药品稳定性试验箱-BPS系列恒温恒湿箱-意大利超低温冰箱-上海一恒科学仪器有限公司 | 华夏医界网_民营医疗产业信息平台_民营医院营销管理培训 | 球磨机,节能球磨机价格,水泥球磨机厂家,粉煤灰球磨机-吉宏机械制造有限公司 | 升降机-高空作业车租赁-蜘蛛车-曲臂式伸缩臂剪叉式液压升降平台-脚手架-【普雷斯特公司厂家】 | 石家庄网站建设|石家庄网站制作|石家庄小程序开发|石家庄微信开发|网站建设公司|网站制作公司|微信小程序开发|手机APP开发|软件开发 | 直流电能表-充电桩电能表-导轨式电能表-智能电能表-浙江科为电气有限公司 | 上海办公室装修,办公楼装修设计,办公空间设计,企业展厅设计_写艺装饰公司 | 智能监控-安防监控-监控系统安装-弱电工程公司_成都万全电子 | 铁素体测量仪/检测仪/铁素体含量测试仪-苏州圣光仪器有限公司 | 杰恒蠕动泵-蠕动泵专业厂家-19年专注蠕动泵 | 东莞螺丝|东莞螺丝厂|东莞不锈钢螺丝|东莞组合螺丝|东莞精密螺丝厂家-东莞利浩五金专业紧固件厂家 | 手持式浮游菌采样器-全排二级生物安全柜-浙江孚夏医疗科技有限公司 | 润滑脂-高温润滑脂-轴承润滑脂-食品级润滑油-索科润滑油脂厂家 | 书法培训-高考书法艺考培训班-山东艺霖书法培训凭实力挺进央美 | 透平油真空滤油机-变压器油板框滤油机-滤油车-华之源过滤设备 | 高压无油空压机_无油水润滑空压机_水润滑无油螺杆空压机_无油空压机厂家-科普柯超滤(广东)节能科技有限公司 | 水稻烘干机,小麦烘干机,大豆烘干机,玉米烘干机,粮食烘干机_巩义市锦华粮食烘干机械制造有限公司 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 |