vue3+Ts可视化开发的研究，实战拖拽基础，组件动态生成，远程加载组件

海天酱油_htSauce

2020年08月13日 10:31

废话

声明：本项目非常基础，大神请勿喷。大家觉得有用就看看。没用就看过就行了。

项目本身我是遇到一些问题的会进行分享提供，也会问一些问题，希望有大神能解答。

本身项目的设想初衷是为了研究可视化编辑器，

推荐开源项目：

form-generator：gitee.com/mrhj/form-g… install，否则走yarn的话会走别人的私域npm地址

个人copy之后的项目地址：github.com/ht-sauce/fo…

vue3目前到了rc版本，依据我目前的使用是不推荐用jsx，至少ts模式下不推荐，因为官方对于ts的定义还不够完善。并且。ts+vue3+jsx要填的坑太多。

本身vue3其实大家不用composition-api的话和vue2的开发体验其实是非常相似的。但是我个人其实对于企业级项目，我不推荐把vue2升级为3，变化太大。正常来说2和3其实都可以用。并且2后面还有2.7的一个升级。对于一些老项目，本身从cli2到3就是一个非常痛苦的过程。如果还需要更换核心库，变动太大。未来肯定是vue3的，但是2肯定也存在。

正题：关于可视化开发我们要解决什么问题？

先吹一波，我越来越喜欢政采云的堂主了。每次早早聊大会堂主的话语总是那么的简单，又深刻，容易理解。

然后关于为什么有可视化开发的设想，是因为我最早的时候是在时空医药体系下的员工。时空体系下有一套可视化的二开系统，极大的降低了开发成本。并且时空医药就江苏，做到了百分之90以上的市场占用率。所有批发药企都在使用。

之后我转战前端，在掘金看到了政采云的可视化商城布局。最近又看到了上面的项目源码。反复熏陶下，我对可视化的核心存在了一定的判断。

1、组件可拖拽，不论是html5的拖拽还是自定义的位置拖拽都是核心。

2、在如今的前端框架下，你该如何解决组件动态渲染的问题

3、上线之后的产品，你总不可能弄一个基础库上去吧。那么该如何解决页面加载困难的问题

1、关于拖拽

其实拖拽并不难，但是大家核心在于要去做。看着简单，谁知道做起来如何呢？

拖拽方案其实目前就两种

1、html5拖拽draggable

2、自定义元素的style的top，left等值

我这里选择html5的拖拽，主要是因为html的拖拽解决了几个问题

1、拖拽更好看

2、能检测拖拽到哪个元素下面

这里代码非常简单，其实大家稍微实战下就行了。

核心是三个：

draggable="true"，定位拖拽元素

ondrop拖拽到哪里

ondragstart开始拖拽

HTML部分

<template v-for="(item, index) in list">
  <div
    :key="index"
    @dragover.prevent
    @drop.prevent="drop($event, index)"
    draggable="true"
    @dragstart="dragstart($event, index)"
    class="ceshi"
  >
    {{ item }}
  </div>
</template>
复制代码

JS部分

setup(props, ctx) {
    const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).value
    const setArr = (): void => {
      list[0] = 1111
    }
    // 开始移动
    const dragstart = (ev: Event, index: number): void => {
      ev.dataTransfer.setData('text', index)
    }
    // 放到何处
    const drop = (ev: Event, index: number): void => {
      const startIndex: number = Number(ev.dataTransfer.getData('text'))
      const startLi: number = list[startIndex]
      const endLi: number = list[index]
      list.splice(index, 1, startLi) // 放过去
      list.splice(startIndex, 1, endLi) // 反过来
    }

    return {
      drop,
      dragstart,
      list,
      setArr,
    }
复制代码

代码非常简单，不多解释了。这样实际上就解决了拖拽的问题。你元素已经可以初步交换位置了

1.1、拖拽过程中ts初学者的踩坑，感谢微信群：木木大佬解惑

关于ts的基本的变量声明没什么问题，但是大家想过如果是js的原生事件怎么声明类型，你声明了object之后是无法定义下一步操作的。那么这里其实ts官方比较坑，也没有明说。其实ts有一个内置类型，Event

但是event还不够，我在使用的时候，如下面这段代码会报错

ev.dataTransfer.setData('text', index)
复制代码

那么我们其实需要使用到在src目录下定义gobal.d.ts

如下进行重新定义

declare interface Event {
  dataTransfer: {
    setData(...args): void
    getData(...args)
  }
}
复制代码

1.2、vue3框架ts踩坑

我们都知道vue2我们都有this对象指向vue3实例，那么如果迁移到vue3。首先使用composition-api你没有办法使用this。那么你只能使用provide，inject，进行依赖注入。这块大家建议赶紧看起来。

那么我们就真的无法使用this了吗？

其实不是的，composition-api只是你的开发模式的选择。其实vue3保留了原来的生命周期写法。你依旧可以像老代码一样书写。但是vue3的this是vue单独实例化出来放在全局的。为了兼容老代码，我们要使用

app.config.globalProperties
复制代码

代替vue.prototype

但是，vue3在ts模式下有点问题，我在上面代码进行定义的时候，定义没有问题。但是最终我在使用的时候，this.变量是ts报error了。解决方式是

// 解决ts下全局变量定义问题
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    http: number
  }
}
复制代码

具体大家可以在vue-next项目下issue，搜索globalProperties找到

说到这里，其实大家发现了，其实vue3保留了原有的api开发方式。所以请新手别再说破坏性升级了。composition-api实际上是被合并到vue3的一个开发方式而已。

关于ts我也只是新手，大神勿喷，谢谢

2、关于动态组件

这块其实很早的时候vue就有解决方式，并且政采云团队也发过掘金博客。解决方式就是

<component :is="DynamicComponents"></component>
复制代码

is传入的格式需要是你导入的组件的变量名称

实战js部分

setup(props, ctx) {
  console.log({ ...ctx })
  // 动态组件测试
  const dom = ref(-1).value
  console.log(dom)

  const DynamicComponents = ref('DynamicComponents')
  const setDynamicComponents = (): void => {
    DynamicComponents.value = 'DhtTest'
    console.log(DynamicComponents.value)
  }

  return {
    setDynamicComponents,
    DynamicComponents,
  }
复制代码