Vue进阶（幺捌零）：JS 向 Vue 传值

迈不过友情╰ 2022-11-12 13:59 143阅读 0赞

### 文章目录 ###

*   *  一、前言
     *  二、思路
     *  三、代码实现
     *  四、效果
     *  五、拓展阅读

--------------------

## 一、前言 ##

项目开发过程中，组件通过`render()`函数渲染生成，并在组件内部定义了自定义拖拽指令。自定义拖拽指令实现了用户可以进行元素拖拽、缩放等一系列逻辑处理的动作。

另一个逻辑处理页面由`Vue`实现，该页面可以实时展示元素相关属性信息（包括`size、width、height`及`left`、`top`等属性）。

## 二、思路 ##

1.  监听器方式实现；
2.  `Vuex state`实现;

## 三、代码实现 ##

**`.js`**

// 鼠标按下事件
    el.onmousedown = function (e) { 
    	...
      document.onmouseup = function (e) { 
    	  document.body.style.cursor = 'pointer';
    	  document.onmousemove = null;
    	  document.onmouseup = null;
    	  isMove = false;
    	  document.body.removeChild(mask);
    	  // 元素样式relative下方位属性
    	  let domStyle = { 
    	    width: data.width,
    	    height: data.height,
    	    left: data.left,
    	    top: data.top
    	  }
    	  el.style.cssText = setStyle(el, domStyle)
    	  // Vuex state实现方式
    	  store.commit('domAzimuth/SET_DOMAZIMUTION', el.style.cssText);
    	  // 监听器实现方式
    	  // window.postMessage({domStyle: domStyle}, '*')
    }
    
    }

**`.vue`**

computed: { 
          ...mapGetters('dragModule', ['editLayer']),
          ...mapGetters('domAzimuth', ['directProps']),
          domStyle () { 
            return this.directProps
          }
        },
        // 监听器方式中，务必在页面销毁前释放掉监听器，否则会造成内存泄漏！
        beforeDestroy () { 
    // window.removeEventListener('message', this.listenerMessage)
        },
        mounted () { 
    // window.addEventListener('message', this.listenerMessage)
        },
        watch: { 
          domStyle (n) { 
            let configs = []
            let model = { }
            for (let name in this.editSoul.model) { 
              let config = this.editSoul.model[name]
              model[name] = ''
              config.name = name
               if ('style' === name) { 
                  config.value = this.directProps
                }
              configs.push(config)
            }
            this.model = model
            this.configs = configs
          },
    }

## 四、效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center]

## 五、拓展阅读 ##

*  《[Vue进阶（幺肆捌）：Vuex辅助函数详解][Vue_Vuex]》
 *  《[Vue进阶（二十七）：Vuex之getters,mapGetters,…mapGetters详解][Vue_Vuex_getters_mapGetters_mapGetters]》
 *  《[Vue进阶（四十三）：Vuex之Mutations详解][Vue_Vuex_Mutations]》

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/f5291b0c92914442a8f3c71a28f6cd29.png
[Vue_Vuex]: https://shq5785.blog.csdn.net/article/details/110957331
[Vue_Vuex_getters_mapGetters_mapGetters]: https://shq5785.blog.csdn.net/article/details/85221092
[Vue_Vuex_Mutations]: https://shq5785.blog.csdn.net/article/details/89138976