pointer-events: none;理解：你可以看的到某个元素，但是你无法摸的着，点击不到，点击会穿透触发到下层的元素
display：none; 是你摸不着，但是你也看不见。

最简单的使用场景是：给某个box1盒子设置样式和内容，然后定位遮住在另一个box2上，点击box1会触发点击box2的事件。

例如下方将蓝色盒子放在select的位置展示某值，选择所有时候展示颜色盒子。点击颜色区域需要打开下拉框。既可以用到pointer-events: none;

以下代码可以直接复制：

<!--* @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能
-->
<template><div style="padding: 300px 100px;"><el-select v-model="menus" multiple collapse-tags @change="changeSelectMenu" placeholder="请选择菜单" clearable><el-checkbox v-model="checkedAll" @change="selectAll">全选</el-checkbox><el-option v-for="item in menuList" :key="item.id" :label="item.menuName" :value="item.id"></el-option></el-select><span v-if="checkedAll" class="pointer_box">点此会渗透到 点击select</span></div>
</template>
<script>
export default {data () {return {checkedAll: false,menus: [],menuList: [{ id: '01', menuName: '菜单一' },{ id: '02', menuName: '菜单二' },{ id: '03', menuName: '菜单三' },{ id: '04', menuName: '菜单四' },{ id: '05', menuName: '菜单五' },{ id: '06', menuName: '菜单六' },]}},mounted () {},methods: {// 点击下拉列表选项时触发changeSelectMenu (val) {if (val.length === this.menuList.length) {this.checkedAll = true} else {this.checkedAll = false}},// 点击“全选”按钮时触发selectAll () {this.menus = []if (this.checkedAll) {this.menuList.map(item => {this.menus.push(item.id)})} else {this.menus = []}}}
}
</script>
<style lang='less'>
.el-select-dropdown {.el-checkbox {display: inline-block;margin-left: 20px;padding: 8px 0;}
}.pointer_box {pointer-events: none;position: relative;display: inline-block;z-index: 999;left: -180px;top: 10px;width: 120px;background-color: #1fff;
}
</style>