基于原生JS来操作ElementUI组件总结

1.使用场景 

Vue2+ElementUI，这里使用ElementUI  的Message消息提示组件创建一个消息

type: "warning"    显示为警告框

message     信息文本内容

showClose   显示关闭按钮

duration:0     表示不会自动关闭，不加这个选项时，message会在一定时间内自行关闭

 // 弹出警告消息
        const messageInstance = Message({
          type: "warning",
          message: "警告信息",
          showClose: true,
          duration: 0,
        });

2.执行原生JS操作

2.1 在body里面添加一个容器  来执行dom操作

这一步，在body中创建了子节点  container，后续在container中，来操作我们的组件

const container = document.createElement("div");
       container.className = "container";
        document.body.appendChild(container);

2.2 将警告消息添加到容器中

这里通过messageInstance.$el来对message实例执行dom操作

       container.appendChild(messageInstance.$el);

        // 点击警告消息的关闭按钮时关闭警告消息和遮罩层
        const closeMessage = () => {
          //这里可以执行需要添加的操作 
          //1.可以按上面的appendChild方法操作dom
          //2.传递一下参数作为标识...
          container.removeChild(messageInstance.$el);
        };

2.3 为关闭按钮添加JS原生点击事件

注意这里的   ".el-message__closeBtn"  必须是我们使用的elementUI组件的类名

const closeBtn = messageInstance.$el.querySelector(
          ".el-message__closeBtn"
        );
        closeBtn.addEventListener("click", closeMessage);

通过这种方式  获取到组件的实例以及类名，进行相关的元素dom操作

2.4 补充说明

appendChild ，removeChild  原生JS中操作dom的方法  

appendChild()  向容器内添加子节点

removeChild()   在容器内移除相关子节点

3.总结

重点在于使用原生JS获取到相关元素，然后通过$el 来获取到相关组件的vue实例

通过这种方式也可以实现对ElementUI内部的一些其他组件完成相应的dom操作。