# 升级到1.5.x | tmagic-editor
页面可视化平台

Skip to content

# 升级到1.5.x ​

## ui npm包的变化 ​

ui中包含的组件被移除，这些组件由单独的npm包提供。1.5.0以后ui包将变得不重要，只是为了兼容而保留，后续将变废弃。

建议将runtime中的tmagic.config中的packages配置的ui包改成：

js

    {
      packages: [
        { button: '@tmagic/vue-button',
        { container: '@tmagic/vue-container' },
        { img: '@tmagic/vue-img' },
        { 'iterator-container': '@tmagic/vue-iterator-container' },
        { page: '@tmagic/vue-page' },
        { 'page-fragment': '@tmagic/vue-page-fragment' },
        { 'page-fragment-container': '@tmagic/vue-page-fragment-container' },
        { text: '@tmagic/vue-text' },
        { overlay: '@tmagic/vue-overlay' },
        { qrcode: '@tmagic/vue-qrcode' },
      ],
    }

TIP

react的也是类似上面的修改

TIP

上述这些组件中只有container是最重要的，不可缺少的，其他都可以换成自己实现的版本。 iterator-container/page/page-fragment/page-fragment-container这几个组件编辑中是有做特殊识别的，所以如果希望有完整的功能，也尽量保留

## 对编辑画布中组件的识别 ​

1.5.0之前是通过识别dom中是否拥有id属性是判断该dom是不是组件的根节点，之后默认会变成识别是否拥有data-tmagic-id

TIP

此变化是通过container组件来实现的，之前vue是`@tmagic/ui`或者`tmagic/ui-vue2`中的Component组件来实现，`tmagic/ui-react`则是各个组件自己实现，之后vue是由`@tmagic/vue-container`实现，react依然由各个组件自己实现。

如果希望依然保留对id属性的识别，我们也提供方法

ts

    import { setDslDomRelateConfig } from '@tmagic/editor';

    setDslDomRelateConfig('getIdFromEl', (el?: HTMLElement | SVGElement | null) => el?.id);
    setDslDomRelateConfig(
      'getElById',
      (doc?: Document, id?: string | number) => doc?.querySelector(`[id="${id}"]`) as HTMLElement,
    );
    setDslDomRelateConfig('setIdToEl', (el: HTMLElement | SVGElement, id: string | number) => {
      el.id = `${id}`;
    });

TIP

与此相关的`m-editor`组件的canSelect/isContainer这里配置

## 组件对迭代器容器的支持 ​

迭代器容器是通过绑定一个数据源的数组字段，然后会去迭代这个数组来渲染容器中的内容，这个是同一个配置的组件将会被渲染多次，这个时候组件配置的事件或者代码块中将无法准确获取中组件，所以需要将迭代的信息提供出来。

已vue组件为例，需要添加iteratorIndex和iteratorContainerId两个prop

ts

    {
      props: {
        // other props
        iteratorIndex: Array as PropType<number[]>,
        iteratorContainerId: Array as PropType<Id[]>,
      }
    }

然后传个useApp

ts

    useApp({
      // other args
      iteratorContainerId: props.iteratorContainerId,
      iteratorIndex: props.iteratorIndex,
    })

TIP

如果对迭代器容器没有需求的，可以不用