vue-cropper icon indicating copy to clipboard operation
vue-cropper copied to clipboard

vue3 createApp 用法报错,vue2 是好的

Open xu455255849 opened this issue 3 years ago • 12 comments

// main.vue image

image

// crop.ts

import { createApp } from 'vue'; import Crop from './main.vue'; import { IFileType } from './typings/interface';

class CropService { private static instance: any;

init({ file, toBlob, fixedNumber, tips }: IFileType) { return new Promise((resolve) => { // 创建一个挂载容器 const parentNode = document.createElement('div'); const mountNode = document.createElement('div'); parentNode.appendChild(mountNode);

  CropService.instance = createApp(Crop, {
    file,
    tips,
    toBlob: toBlob || false,
    fixedNumber: fixedNumber || [16, 9],
    onConfirm: (data: any) => {
      resolve(data);
      this.destroy(parentNode);
    },
    onCancel: () => {
      this.destroy(parentNode);
    },
  });

  // 挂载组件
  document.body.appendChild(parentNode);
  CropService.instance.mount(mountNode);
});

}

destroy(parentNode: Node) { CropService.instance.unmount(); document.body.removeChild(parentNode); } }

export default new CropService();

//package.json

"dependencies": { "vue-cropper": "^1.0.2" }

``

xu455255849 avatar Feb 21 '22 09:02 xu455255849

可以看看文档,有 vue3 的例子

xyxiao001 avatar Feb 21 '22 09:02 xyxiao001

可以看看文档,有 vue3 的例子

image

文档 我看了,我写法有点不一样,封装了一下 上面这个是报错 ,感觉是底层的问题

xu455255849 avatar Feb 21 '22 09:02 xu455255849

image

xu455255849 avatar Feb 21 '22 09:02 xu455255849

vue 和vite 版本降级到和vue-cropper 一样,顺利解决问题, 适配下最新的vue3 版本? image

image

xu455255849 avatar Feb 21 '22 12:02 xu455255849

ok 这个我查看最新的 vue 和 vite 版本,发布下新版的包

xyxiao001 avatar Feb 22 '22 13:02 xyxiao001

请问什么时候能发布新包解决这个问题呀?

JoyceZouZou avatar Mar 22 '22 02:03 JoyceZouZou

不好意思,我今天发布解决下

xyxiao001 avatar Mar 22 '22 02:03 xyxiao001

1.03版本发布了,测试最新版本 vue 和 vite 是可以的

xyxiao001 avatar Mar 22 '22 13:03 xyxiao001

请问什么时候能发布新包解决这个问题呀?

可以否分享下antd 的cropper 封装demo 思路

ziyingjie avatar Jun 07 '22 10:06 ziyingjie

请问什么时候能发布新包解决这个问题呀?

可以否分享下antd 的cropper 封装demo 思路

已经发布了,你更新看看

xyxiao001 avatar Jun 07 '22 14:06 xyxiao001

请问什么时候能发布新包解决这个问题呀?

可以否分享下antd 的cropper 封装demo 思路

正常思路 写一个vue组件封装裁剪组件,然后写一个ts 用createApp 挂载VNode,就可以用js 随时调用裁剪

xu455255849 avatar Jun 21 '22 02:06 xu455255849

请问什么时候能发布新包解决这个问题呀?

可以否分享下antd 的cropper 封装demo 思路

已经发布了,你更新看看 image image image image 还是会出现上述的问题,我需要降低一下vue和vite版本嘛

2209407652 avatar Jul 22 '22 02:07 2209407652