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再進行創建，否則直接用已經存在的對象