使用vue和element实现点击按钮多选同时打开多个页面的效果

<template>
    <div>
        <h1>同时打开多个页面</h1>
		  <el-checkbox-group v-model="checkList">
		    <el-checkbox label="http://www.baidu.com">百度</el-checkbox><br/>
		    <el-checkbox label="http://www.taobao.com">淘宝</el-checkbox><br/>
		    <el-checkbox label="http://www.youdao.com">有道</el-checkbox>
		  </el-checkbox-group>
		  <br/>
		   <el-button @click="poenhtml()">打开网页</el-button>	   
    </div>
</template>

<script>
export default {
    data() {
        return{
			checkList: []
        }
    },
	methods:{
		poenhtml(){
			this.checkList.map((s)=>{
				window.open(s)
			})
		}
	}
}
</script>

思路就是把多选框选择的内容通过v-model动态绑定到一个数组里面，当点击按钮的时候就会遍历数组通过window.open打开数组里面的路径。这样就可以实现同时打开多个页面了。（注意：游览器可能会设置不可以同时打开多个页面，是游览器问题需要解除限制）

效果图：

谷歌游览器如何设置权限：
方法一：运行一下代码，可以看到游览器右上方有拦截提示，这里设置始终允许。

方法二：点击谷歌游览器右上方的三个点-设置-隐私设置和安全性-网站设置-弹窗式窗口和重定向，改成允许。