本周遇到的一些问题整理，有些未完全解决，留在下周写

1.点击组件外的其他位置或者其他组件，当前打开的弹窗关闭

​ 这个问题发生的情境是这样：在父组件中引用了很多子组件（有单个的组件，还有由孙组件循环生成的子组件），子组件会有点击出现的菜单栏。如果点击其中一个子/孙组件，使其出现下拉菜单，那么其他已打开的下拉菜单自动收起；点击非出现下拉菜单的位置，已展开的菜单也要自动收起。

解决方案：在父组件的包裹元素上加一个函数，引用子组件的时候记得起名字（ref），子组件可以利用这个函数给父组件通信，告诉父组件点我的时候关闭其他。代码示意如下：

子组件：

<sonA
    ref="sonA"
    @closeOtherMenu = "closeOtherMenu($event)">
</sonA>

closeOtherMenu(value) {
	this.$emit('closeOtherMenu', value);
},

父组件：

<template>
    <div class="father" @click="closeMenu">
    	<sonA ref='firstSon'></sonA>
    	<sonB ref='secondSon'></sonB>
    </div>
</template>

closeMenu() {
    if (this.$refs.firstSon) {
    	this.$refs.firstSon.closeMenu();
    }
    if (this.$refs.secondSon) {
    	this.$refs.secondSon.closeMenu();
    }
},

2. 监听器刚打开是不会触发的，需要执行这个事件

​ 我们监听dom事件记得 最开始只是生成了这个监听事件，但是并没有触发，直到出现监听的事件（resize）才回去执行这个函数，所以想要一开始就执行一次的话，就直接执行就好了。当时不知道为什么脑子卡住了，试了很多 包括load、pageshow，都不行，刚进入页面没有执行，还多开了一个监听器，后面前辈告诉我 监听只是开了 要触发这个事件才执行，想一开始就用直接执行一次就好了。我当时就在想，我在干什么 好蠢。。。怎么脑子就不转了

​ 还有一定要记得关监听器哦！！！

mounted() {
	this.getSize();
	window.addEventListener('resize', this.getSize, true)
},
destroyed() {
	window.removeEventListener('resize', this.getSize, true)
}

3. 父组件挂载传给子组件的数据子组件挂载的时候未获取到

​ 情境：同样是上面的问题，我想在父组件挂载的时候获取到尺寸，然后平分给子组件，设置子组件的宽高。但是 我在父组件打印确实是获取到了，在子组件打印是个空值。

​ 解决：父组件引用子组件的时候用v-if判断，不要用v-show，获取到的数据是否存在，存在才渲染，就可以了。

4. el-tooltip提示文字，变量和字符串一起使用

​ 只有字符串

<el-tooltip effect="dark" content="more" placement="top">
     <div class="more-button" @click.stop="showButtonMenu(index)"></div>
</el-tooltip>

​ 字符串和变量，用插槽 slot=‘content’

<el-tooltip class="trans-item" effect="dark" placement="bottom" :open-delay="500">
     <div slot="content">{{restTime}} minutes later</div>
</el-tooltip>

5. sticky定位的元素可以遮盖fixed定位的元素

​ 情境：页面有个导航栏是绝对定位的，导航栏下边有个粘性定位的元素展示当前所处的位置，当页面向下滚动时，粘性定位的元素挡住了绝对定位的元素

原因：sticky属性仅在以下几个条件都满足时有效:

• 父元素不能overflow:hidden或者overflow:auto属性，或者body height:100%
• 必须指定top/bottom/left/right4个值之一，否则只会处于相对定位
• 父元素的高度不能低于sticky元素的高度

解决：我就是设置了overflow:hidden; 去掉就好了。这个父元素是指的所有直系父元素！所以不能光看父亲，还要看爷及以上

6. 过滤器的使用

好久没用过过滤器，再次用到filter都忘光了。写了两种用法

1. 渲染使用

import Vue from 'vue'
Vue.filter('filterName', function (value) {
    return ;
});

//使用，上述内容写在了filter.js文件里，所以要引入，然后直接在渲染的时候使用
import "../utils/filter";

<div>{{item.data | filterName}}</div>

2. 函数内使用

useFilter(){
	this.currentData = (this.$options.filters['filterName'](data);
},

7. 输入框input光标距离输入框左边间距设置

text-indent:10px

还有就是input输入框改focus样式，border变色不生效，是因为改错了，要改outline属性才对。

8. 数组过滤，获取两数组中 共有的 和 不包含的项

//数组A
let arrA = ['1111','2222','333','4444','5555']
// 数组B
let arrB= ['aaa','bbb','4444','5555','dddd','eeee','ffff','yyyy','mmmm']
过滤B数组中不包含A数组的项
let differentArr = arrB.filter(item => arrA.indexOf(item) > -1)
// differentArr =['aaa','bbb','dddd','eeee','ffff','yyyy','mmmm']
过滤B数组中包含A数组的项
let commonArr = arrB.filter(item => arrA.indexOf(item) != -1)
// commonArr =['4444','5555']

应用：找出B数组中id等于A数组的项

this.containArr = arrB.filter(item => this.arrA.indexOf(item.id) !== -1)