获取element-ui的dialog中元素为null的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wn1245343496/article/details/86628990

在打开弹窗的时候操作DOM,发现获取DOM为null

问题

在这里插入图片描述
如上图所示,在打开弹窗的时候,需要给按钮添加监听事件,上传文件
代码如下

 getFileMD5() {
      const el = document.getElementById("upload-file");
      const bmf = new BMF();
      el.addEventListener(
        "change",
        e => {
          const file = e.target.files[0];
          this.fileInfo.name = file.name;
          this.fileInfo.size = file.size;
          bmf.md5(
            file,
            (err, md5) => {
              this.fileInfo.MD5 = md5;
              console.log(this.fileInfo);
              //上传
              this.postFileHttp(this.fileInfo)
                .then(() => {
                  this.$refs.upload.submit();
                })
                .catch(err => {
                  alert("上传失败" + err.message);
                });
            },
            () => {}
          );
        },
        false
      );
    },

一开始是把控制dialog的变量isFirmwareAddShow放到watch中,只要isFirmwareAddShowtrue的时候,执行getFileMD5函数,结果第一次获取upload-file为空

原因

isFirmwareAddShowtrue的时候,DOM并没有渲染完成

解决方法

el-dialog中增加@opened="getFileMD5"事件
官网说明:

事件名称 说明 回调参数
open Dialog 打开的回调
opened Dialog 打开动画结束时的回调
close Dialog 关闭的回调
closed Dialog 关闭动画结束时的回调
<el-dialog
      title="添加固件"
      :visible.sync="isFirmwareAddShow"
      width="30%"
      :before-close="closeForm"
      @opened="getFileMD5"
    >
    ...
 </el-dialog>
展开阅读全文

获取NULL

03-27

想获取输入的字符串,为什么得到的是空的?rn代码如下:rn[code=C/C++]rn// dengluDlg.cpp : implementation filern//rnrn#include "stdafx.h"rn#include "denglu.h"rn#include "dengluDlg.h"rnrn#ifdef _DEBUGrn#define new DEBUG_NEWrn#undef THIS_FILErnstatic char THIS_FILE[] = __FILE__;rn#endifrnrn/////////////////////////////////////////////////////////////////////////////rn// CAboutDlg dialog used for App Aboutrnrnclass CAboutDlg : public CDialogrnrnpublic:rn CAboutDlg();rnrn// Dialog Datarn //AFX_DATA(CAboutDlg)rn enum IDD = IDD_ABOUTBOX ;rn //AFX_DATArnrn // ClassWizard generated virtual function overridesrn //AFX_VIRTUAL(CAboutDlg)rn protected:rn virtual void DoDataExchange(CDataExchange* pDX); // DDX/DDV supportrn //AFX_VIRTUALrnrn// Implementationrnprotected:rn //AFX_MSG(CAboutDlg)rn //AFX_MSGrn DECLARE_MESSAGE_MAP()rn;rnrnCAboutDlg::CAboutDlg() : CDialog(CAboutDlg::IDD)rnrn //AFX_DATA_INIT(CAboutDlg)rn //AFX_DATA_INITrnrnrnvoid CAboutDlg::DoDataExchange(CDataExchange* pDX)rnrn CDialog::DoDataExchange(pDX);rn //AFX_DATA_MAP(CAboutDlg)rn //AFX_DATA_MAPrnrnrnBEGIN_MESSAGE_MAP(CAboutDlg, CDialog)rn //AFX_MSG_MAP(CAboutDlg)rn // No message handlersrn //AFX_MSG_MAPrnEND_MESSAGE_MAP()rnrn/////////////////////////////////////////////////////////////////////////////rn// CDengluDlg dialogrnrnCDengluDlg::CDengluDlg(CWnd* pParent /*=NULL*/)rn : CDialog(CDengluDlg::IDD, pParent)rnrn //AFX_DATA_INIT(CDengluDlg)rn //AFX_DATA_INITrn // Note that LoadIcon does not require a subsequent DestroyIcon in Win32rn m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME);rnrnrnvoid CDengluDlg::DoDataExchange(CDataExchange* pDX)rnrn CDialog::DoDataExchange(pDX);rn //AFX_DATA_MAP(CDengluDlg)rn DDX_Control(pDX, IDC_EDIT_MARK, m_edMark);rn DDX_Control(pDX, IDC_BUTTON_DELETE, m_btDelete);rn DDX_Control(pDX, IDC_LIST_NUM, m_lstNum);rn DDX_Control(pDX, IDC_BUTTON_LOAD, m_btLoad);rn DDX_Control(pDX, IDC_BUTTON_ADD, m_btAdd);rn //AFX_DATA_MAPrnrnrnBEGIN_MESSAGE_MAP(CDengluDlg, CDialog)rn //AFX_MSG_MAP(CDengluDlg)rn ON_WM_SYSCOMMAND()rn ON_WM_PAINT()rn ON_WM_QUERYDRAGICON()rn ON_BN_CLICKED(IDC_BUTTON_ADD, OnButtonAdd)rn ON_EN_CHANGE(IDC_EDIT_MARK, OnChangeEditMark)rn ON_BN_CLICKED(IDC_BUTTON_DELETE, OnButtonDelete)rn //AFX_MSG_MAPrnEND_MESSAGE_MAP()rnrn/////////////////////////////////////////////////////////////////////////////rn// CDengluDlg message handlersrnrnBOOL CDengluDlg::OnInitDialog()rnrn CDialog::OnInitDialog();rnrn // Add "About..." menu item to system menu.rnrn // IDM_ABOUTBOX must be in the system command range.rn ASSERT((IDM_ABOUTBOX & 0xFFF0) == IDM_ABOUTBOX);rn ASSERT(IDM_ABOUTBOX < 0xF000);rnrn CMenu* pSysMenu = GetSystemMenu(FALSE);rn if (pSysMenu != NULL)rn rn CString strAboutMenu;rn strAboutMenu.LoadString(IDS_ABOUTBOX);rn if (!strAboutMenu.IsEmpty())rn rn pSysMenu->AppendMenu(MF_SEPARATOR);rn pSysMenu->AppendMenu(MF_STRING, IDM_ABOUTBOX, strAboutMenu);rn rn rnrn // Set the icon for this dialog. The framework does this automaticallyrn // when the application's main window is not a dialogrn SetIcon(m_hIcon, TRUE); // Set big iconrn SetIcon(m_hIcon, FALSE); // Set small iconrn rn // TODO: Add extra initialization herern rn return TRUE; // return TRUE unless you set the focus to a controlrnrnrnvoid CDengluDlg::OnSysCommand(UINT nID, LPARAM lParam)rnrn if ((nID & 0xFFF0) == IDM_ABOUTBOX)rn rn CAboutDlg dlgAbout;rn dlgAbout.DoModal();rn rn elsern rn CDialog::OnSysCommand(nID, lParam);rn rnrnrn// If you add a minimize button to your dialog, you will need the code belowrn// to draw the icon. For MFC applications using the document/view model,rn// this is automatically done for you by the framework.rnrnvoid CDengluDlg::OnPaint() rnrn if (IsIconic())rn rn CPaintDC dc(this); // device context for paintingrnrn SendMessage(WM_ICONERASEBKGND, (WPARAM) dc.GetSafeHdc(), 0);rnrn // Center icon in client rectanglern int cxIcon = GetSystemMetrics(SM_CXICON);rn int cyIcon = GetSystemMetrics(SM_CYICON);rn CRect rect;rn GetClientRect(&rect);rn int x = (rect.Width() - cxIcon + 1) / 2;rn int y = (rect.Height() - cyIcon + 1) / 2;rnrn // Draw the iconrn dc.DrawIcon(x, y, m_hIcon);rn rn elsern rn CDialog::OnPaint();rn rnrnrn// The system calls this to obtain the cursor to display while the user dragsrn// the minimized window.rnHCURSOR CDengluDlg::OnQueryDragIcon()rnrn return (HCURSOR) m_hIcon;rnrnrnvoid CDengluDlg::OnButtonAdd() rnrn // TODO: Add your control notification handler code herern CString strMark,strNum;rn m_edMark.GetWindowText(strMark);rn rn strNum.Format("姓名:%s",strMark);MessageBox(strNum,NULL,MB_OK);rn m_lstNum.InsertString(0,strNum);rnrnrnvoid CDengluDlg::OnChangeEditMark() rnrn // TODO: If this is a RICHEDIT control, the control will notrn // send this notification unless you override the CDialog::OnInitDialog()rn // function and call CRichEditCtrl().SetEventMask()rn // with the ENM_CHANGE flag ORed into the mask.rn rn // TODO: Add your control notification handler code herern rnrnrnvoid CDengluDlg::OnButtonDelete() rnrn // TODO: Add your control notification handler code herern int index=m_lstNum.GetCurSel();rn m_lstNum.DeleteString(index);rnrnrn[/code] 论坛

没有更多推荐了,返回首页