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

140 阅读 0 评论 93 点赞

我是靠谱客的博主不安宝马，这篇文章主要介绍Vue中解决js获取不到未初始化的控件对象的方法Vue中解决js获取不到未初始化的控件对象的方法，现在分享给大家，希望可以做个参考。

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

问题描述

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

问题原因

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

解决办法

复制代码

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

实例

控件
复制代码<el-dialog :title="控件延迟加载" :visible.sync="addFaceDialogVisible"> <el-button type="primary" id="add_pic_btn">添加</el-button> </el-dialog>
```
1
2
3
4
5
6
<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,
```
1
2
3
4
5
addFaceDialogVisible:false,
plUploader:null,
add_face_pic:nukk,
add_face_pic_key:null,
```

事件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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); }
```
1
2
3
4
5
6
if (this.plUploader == null) {
setTimeout(() => {
this.initUpload();
}, 0);
}
```