页面加载5秒后隐藏pop-up-chat div功能失效，请求排查原因

嘿，我一眼就发现问题所在啦——你用document.getElementsByClassName()获取元素的时候，它返回的可不是单个DOM元素，而是一个HTMLCollection（元素集合）。你直接给这个集合用.style.visibility = 'hidden'，就相当于对着一堆元素的“打包袋”直接操作，当然不会生效啦，甚至打开浏览器控制台应该能看到相关的报错提示~

方案1：修正原生DOM操作写法 #

既然返回的是集合，那咱们取集合里的第一个元素就好（毕竟你的页面里应该只有这一个弹窗对吧）：

export default {
 name: 'PopUpMsg',
 mounted() {
 this.msgShow();
 },
 methods: {
 msgShow() {
 // 取集合的第一个元素，加个索引[0]
 const msg = document.getElementsByClassName('pop-up-chat')[0];
 setTimeout(() => {
 // 加个判断，避免元素不存在时报错
 if (msg) {
 msg.style.visibility = 'hidden';
 }
 }, 5000);
 },
 }
}

方案2：用Vue的ref（更推荐！） #

在Vue里直接操作原生DOM其实不是最优做法，咱们可以用Vue提供的ref来更优雅地获取元素，这也符合Vue的设计逻辑：
首先给你的弹窗元素加个ref属性：

<div ref="popUpChat" class="pop-up-chat"> 
 <div id="div1"> 
 <div class="pop-up-msg regular-text">Hi, How may I help you?</div> 
 <div class="triangle-down"></div> 
 </div> 
</div>

然后在脚本里通过this.$refs获取这个元素：

export default {
 name: 'PopUpMsg',
 mounted() {
 this.msgShow();
 },
 methods: {
 msgShow() {
 const msg = this.$refs.popUpChat;
 setTimeout(() => {
 if (msg) {
 msg.style.visibility = 'hidden';
 // 要是想让弹窗完全不占页面空间，可以换成下面这句
 // msg.style.display = 'none';
 }
 }, 5000);
 },
 }
}

小提醒：visibility: hidden只是让元素看不见，但它还会占据原来的页面位置；如果想让弹窗彻底“消失”不占空间，换成display: none就好~

内容的提问来源于stack exchange，提问作者Siddharth Gope