Vue中解决js获取不到未初始化的控件对象的方法

Vue中解决js获取不到未初始化的控件对象的方法

问题描述

• 在使用Vue发编写页面时，并不是所有的页面中的控件在初始化的时候都会进行加载
• 这个时候，当js中调用该控件的事件时，就会无法找到该控件导致调用是事件的失败

问题原因

• 当页面初始化时，该页面默认显示的控件都会进行加载
• 但是有一些页面中的控件如dialog，页面初始化时，它大部分情况下是隐藏的，所以依附在它上面的控件并不是一开始就加载的
• 当这些控件显示出来的时候，调用其方法时，会存在找不到相应的对象的情况，从而导致调用相关方法的失败

解决办法

//调用方法内部中
setTimeout(() => {
    //判断控件对象是否存在
        //初始化页面未初始化的控件对象
}, 0);

实例

• 控件

  <el-dialog
    :title="控件延迟加载"
    :visible.sync="addFaceDialogVisible">
    <el-button type="primary" id="add_pic_btn">添加</el-button>
  </el-dialog>
  

• 数据

  addFaceDialogVisible:false,
  plUploader:null,
  add_face_pic:nukk,
  add_face_pic_key:null,
  

• 事件

  initUpload: function () {
      let self = this;
      this.add_face_pic = null;
      this.add_face_pic_key = null;
      let randomStr = Math.random().toString(36).substr(2);
      this.plUploader = new plupload.Uploader({
        runtimes: 'html5,flash,silverlight,html4',
        url: '/upload?session_id=' + randomStr,
        browse_button: 'add_pic_btn',
        multi_selection: false,
        max_file_size: '10mb',
        chunk_size: '1mb',
        filters: {
          mime_types: [
            {
              title: 'Image files',
              extensions: 'jpg,gif,png,bmp'
            }
          ],
        },
        init: {
          FilesAdded: function (up, files) {
            up.start()
          },
          FileUploaded: function (up, file, info) {
            let obj = JSON.parse(info.response);
            let key = obj.model.name;
            self.add_face_pic_key = key;
            self.add_face_pic = '/image?image=' + key;
          },
        }
      });
      this.plUploader.init();
    },
  

• 在上述实例中，存在问题
  • 当dialog创建时，单击按钮（add_pic_btn）时，并不会进行图片上传的操作，没有任何的反馈
• 解决办法
  1. 页面初始化的时候在挂载方法中进行初始化dialog，然后在进行隐藏，之后调用时判断plUploader对象是否存在，存在时不创建 -- 弊端:整个页面初始化时控件加载会闪一下，体验不友好
  2. 在dialog弹出时，setTimeout加载控件

     if (this.plUploader == null) {
       setTimeout(() => {
         this.initUpload();
       }, 0);
     }
     

可能会出现的问题

• 当在同一页面多次调用控件的方法时，会出现连续弹出框的时候，应该是控件连续被创建，注意控件是否为null的判断，当控件不为null再进行创建，否则直接用已经存在的对象