vue的public 引入ueditor文件过大导致首次加载慢的问题

2 篇文章 0 订阅

新建load.js文件:

export function loadScript(src, callback) {
  var script = document.createElement('script'),
    head = document.getElementsByTagName('head')[0];
  script.type = 'text/javascript';
  script.charset = 'UTF-8';
  script.src = src;
  if (script.addEventListener) {
    script.addEventListener('load', function () {
      callback();
    }, false);
  } else if (script.attachEvent) {
    script.attachEvent('onreadystatechange', function () {
      var target = window.event.srcElement;
      if (target.readyState == 'loaded') {
        callback();
      }
    });
  }
  head.appendChild(script);
}

组件里:

html:

<div>
    <vue-ueditor-wrap v-if="loaing" ref="editor" v-model="val" mode="listener" :config="myConfig"></vue-ueditor-wrap>
    <div v-else>
      <i class="el-icon-loading"></i>加载中...
    </div>
  </div>

js:myConfig等其他数据自己写,主要是mounted里的加载

export default {
    data(){
        return {
            loading:false, 
    },
    mounted() {
    try{
      console.log(UE)
      this.loaing = true
    } catch(e){
      // return
      let that = this
      that.loadFunc('jquery-2.2.3.min.js',()=>{
        setTimeout(()=>{
          that.loadFunc('ueditor.configMin.js',()=>{
            that.loadFunc('ueditor.allMin.js',()=>{
              that.loadFunc('dialogs/xiumi-ue-dialog-v5.js',()=>{
                console.log('dialogs/xiumi-ue-dialog-v5.js');
                that.loaing = true
              })
            })
          })
        },1000)
      })
    }
  },
methods:{
    loadFunc(src,callback){
      loadScript(`${process.env.BASE_URL}static/UE/${src}`,function(){callback()});
    },
  },

}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 下载 UEditor 下载地址:http://ueditor.baidu.com/website/download.html 2. 在 Vue 项目中创建 UEditor 组件 在 src/components 目录下创建 UEditor.vue 文件,然后在里面写入以下代码: <template> <div :id="editorId"></div> </template> <script> export default { props: { value: { type: String, default: '', }, config: { type: Object, default: () => ({}), }, }, data() { return { editorId: `editor_${Date.now()}_${Math.random().toString().substr(2)}`, }; }, mounted() { // 异步加载 UEditor.js const id = this.editorId; const config = this.config; const value = this.value; const _self = this; const ueditorScript = document.createElement('script'); ueditorScript.setAttribute('src', 'http://cdn.staticfile.org/ueditor/1.4.3.3/ueditor.all.js'); document.body.appendChild(ueditorScript); ueditorScript.onload = function () { const editor = window.UE.getEditor(id, config); editor.ready(function () { editor.setContent(value); }); editor.addListener('contentChange', function () { _self.$emit('input', editor.getContent()); }); }; }, beforeDestroy() { // 销毁 UEditor 实例 window.UE.getEditor(this.editorId).destroy(); }, }; </script> 3. 在 Vue 项目中使用 UEditor 组件 在需要使用 UEditor 的页面中引入 UEditor 组件,然后在 template 中使用即可。 <template> <div class="ueditor-container"> <ueditor v-model="content" :config="config" /> </div> </template> <script> import UEditor from '@/components/UEditor.vue'; export default { components: { UEditor, }, data() { return { content: '', config: { initialFrameHeight: 500, autoHeightEnabled: false, autoFloatEnabled: false, toolbars: [ ['source', 'undo', 'redo', 'bold', 'italic', 'underline', 'strikethrough', 'fontfamily', 'fontsize', 'forecolor', 'backcolor', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'insertorderedlist', 'insertunorderedlist', 'blockquote', 'link', 'unlink', 'inserttable', 'deletetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'splittocells', 'removeformat', 'cleardoc', 'preview'], ], }, }; }, }; </script>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值