JS与Vue的情感传递

摘要

开发新项目时,部件经过3D渲染后,需要自定义拖动命令。为了实现客户需求,我们必须解决拖动、放缩等逻辑问题。本文分享了如何通过JS向Vue传值,解决了这个棘手问题。

正文

前面实际操作实例丨怎样完成JS向Vue传值

引言:新项目开发设计全过程中,部件根据render()涵数3D渲染转化成,并在部件內部界定了自定拖动命令。自定拖动命令要求了依据客户能够开展原素拖动、放缩等一系列逻辑性解决的姿势。

文中共享自华为云服务小区《【Vue棘手问题解决】项目实现JS向Vue传值》,全文创作者:SHQ5785 。

序言

新项目开发设计全过程中,部件根据render()涵数3D渲染转化成,并在部件內部界定了自定拖动命令。自定拖动命令要求了依据客户能够开展原素拖动、放缩等一系列逻辑性解决的姿势。

另一个逻辑性解决网页页面由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
      },
}

实际效果

拓展阅读-异步请求Promise造成网页页面数据信息3D渲染不正确解决问题对策

情景叙述

在Vue新项目提升全过程中,网页页面一部分运用JS启用promise回到的多线程数据信息,造成网页页面一部分自始至终没法载入后台管理回到的数据信息值。根据开启别的DOM实际操作(比如伸缩栏位的实际操作),后台数据能够一切正常3D渲染展现。解决逻辑性大概以下:

<template>
    <div v-for="(items, index) in results" :key="items.itemsID">
        <span v-for="(item, index) in items.appendItems" :key="item.itemID">
            <el-button type="text" @click="handlerClick(item)">
                {{item.itemName}}
            </el-button>
        </span>
    </div>
</template>
<script>
    results.foreach((result, index, results) => {
        results[index].appendItems = []
        aysnMethods(inputParams).then(res => {
            results[index].appendItems = res.returnResults
        })
    })
</script>

问题分析

历经网页页面数据信息輸出及debugger断点调试,发觉在网页页面3D渲染完毕前,多线程数据信息仍未交通事故结案,造成网页页面数据信息3D渲染难题。

当vue实例转化成后,再度给目标取值时,并不会自动升级到主视图上来; 在我们去看看vue文档的情况下,会发觉有那么一句话:假如在案例建立以后加上新的特性到案例上,它不容易开启主视图升级。

受 ES5 限定,Vue.js 不可以检验到目标特性的加上或删掉,即Vue未保证脏数据查验。由于 Vue.js 在复位案例时将特性变为 getter/setter,因此特性务必在 data 目标上才可以让 Vue.js 变换它,才可以让它是回应的。

处理对策

根据之上问题分析,可根据v-if操纵网页页面3D渲染、消毁逻辑性,在多线程方式 要求前消毁相对应数据信息段,多线程方式 要求取得成功后新创建相对应数据信息段。
编码以下:

<template>
    <div v-if="showForm">
        <div v-for="(items, index) in results" :key="items.itemsID">
            <span v-for="(item, index) in items.appendItems" :key="item.itemID">
                <el-button type="text" @click="handlerClick(item)">
                    {{item.itemName}}
                </el-button>
            </span>
        </div>
    </div>
</template>
<script>
    data(): {
        return {
            showForm: false
        }
    }
    results.foreach((result, index, results) => {
        results[index].appendItems = []
        vm.showForm = false
        aysnMethods(inputParams).then(res => {
            results[index].appendItems = res.returnResults
            vm.showForm = false
        })
    })
</script>

 

加关注,第一时间掌握华为云服务新鮮技术性~

关注不迷路

扫码下方二维码,关注宇凡盒子公众号,免费获取最新技术内幕!

温馨提示:如果您访问和下载本站资源,表示您已同意只将下载文件用于研究、学习而非其他用途。
文章版权声明 1、本网站名称:宇凡盒子
2、本站文章未经许可,禁止转载!
3、如果文章内容介绍中无特别注明,本网站压缩包解压需要密码统一是:yufanbox.com
4、本站仅供资源信息交流学习,不保证资源的可用及完整性,不提供安装使用及技术服务。点此了解
5、如果您发现本站分享的资源侵犯了您的权益,请及时通知我们,我们会在接到通知后及时处理!提交入口
0

评论0

请先

站点公告

🚀 【宇凡盒子】全网资源库转储中心

👉 注册即送VIP权限👈

👻 全站资源免费下载✅,欢迎注册!

记得 【收藏】+【关注】 谢谢!~~~

立即注册
没有账号?注册  忘记密码?

社交账号快速登录