摘要：在项目开发过程中，通过render()函数渲染生成组件，在组件内部定义自定义拖拽指令成分。自定义拖放命令指定了用户可以执行的元素拖拽、缩放等一系列逻辑处理动作。本文分享自华为云社区《【Vue棘手问题解决】项目实现JS向Vue传值》，原作者：SHQ5785。前言在项目开发过程中，通过render()函数渲染生成组件，并在组件内部定义自定义拖拽指令。自定义拖放命令指定了用户可以执行的元素拖拽、缩放等一系列逻辑处理动作。另一个逻辑处理页面是用Vue实现的，可以实时显示元素相关的属性信息（包括尺寸、宽度、高度、左侧、顶部等属性）。想法监听器实现；Vuex状态实现；代码实现。js//鼠标按下事件el.onmousedown=function(e){...document.onmouseup=function(e){document.body.style.cursor='pointer';文档.onmousemove=null;文档.onmouseup=null;isMove=false;document.body.removeChild(面具);//元素样式相对较低位置属性letdomStyle={width:data.width,height:data.height,left:data.left,top:data.top}el.style.cssText=setStyle(el,domStyle)//Vuex状态实现store.commit('domAzimuth/SET_DOMAZIMUTION',el.style.cssText);//监听器实现//window.postMessage({domStyle:domStyle},'*')}}.vuecomputed:{...mapGetters('dragModule',['editLayer']),...mapGetters('domAzimuth',['directProps']),domStyle(){returnthis.directProps}},//在监听器模式下，一定要在页面销毁前释放监听器，否则会造成内存泄漏！beforeDestroy(){//窗口。removeEventListener('消息',this.listenerMessage)},mounted(){//window.addEventListener('message',this.listenerMessage)},watch:{domStyle(n){letconfigs=[]letmodel={}for(letnameinthis.editSoul.model){letconfig=this.editSoul.model[name]model[name]=''config.name=nameif('style'===name){config.value=this.directProps}configs.push(config)}this.model=modelthis.configs=configs},}效果延伸阅读-异步请求Promise导致页面数据渲染错误问题解决方案描述在Vue项目优化过程中，页面部分使用了JS返回的异步数据调用promise，导致页面后台返回的部分数据值一直无法加载。通过触发其他DOM操作（比如折叠列的操作），后台数据可以正常渲染显示。处理逻辑大致如下：
