思路是:新建监听事件,根据事件判断是否在抓取远程图片or已完成抓取,再返回事件到父组件

首先我们阅读源码,可以看到有个”开启本插件时所有不符合本地域名的图片都将被抓取成为本地服务器上的图片“。里面有catchRemoteImage,catchremotesuccess,catchremoteerror三个事件

 那么我们只要在组件中新增三个监听事件就OK了,首先在data中定义一个数组,然后在methods里新增方法

editorReady(ueditor){
      const that = this
      ueditor.addListener('catchRemoteImage',function(){
        that.waitCatch.push(1)
      })
      ueditor.addListener('catchremotesuccess',function(){
        that.waitCatch.splice(0,1)
      })
      ueditor.addListener('catchremoteerror',function(){
        that.waitCatch.splice(0,1)
      })
    },

我们在监听到开始抓取远程图片时,往数组里增加东西,当成功后就删减掉已区分状态。

  <vue-ueditor-wrap v-model="contents" :config="defConfig" @ready="editorReady"></vue-ueditor-wrap>

在标签中使用@ready绑定方法,在watch中新增

waitCatch:{
      handler(v){
          this.$emit('catchLen', v.length)
      },
      immediate:false,
      deep:true
    },

将监听到的数组长度返回给父组件。

<Editor v-model="goodsChangeform.artContent" @catchLen="test"></Editor>
//test携带一个参数,任意名字,是子组件中返回的数组长度

那么在方法中判断数组长度是否为0便可以知道是否抓取完图片了,因为在ueditor中粘贴会触发抓取,那么粘贴文本的时候也会触发,在源码中加上一个else就可解决粘贴文本的抓取问题