1.點(diǎn)擊組件外的其他位置或者其他組件，當(dāng)前打開的彈窗關(guān)閉

? 這個問題發(fā)生的情境是這樣：在父組件中引用了很多子組件（有單個的組件，還有由孫組件循環(huán)生成的子組件），子組件會有點(diǎn)擊出現(xiàn)的菜單欄。如果點(diǎn)擊其中一個子/孫組件，使其出現(xiàn)下拉菜單，那么其他已打開的下拉菜單自動收起；點(diǎn)擊非出現(xiàn)下拉菜單的位置，已展開的菜單也要自動收起。

解決方案：在父組件的包裹元素上加一個函數(shù)，引用子組件的時候記得起名字（ref），子組件可以利用這個函數(shù)給父組件通信，告訴父組件點(diǎn)我的時候關(guān)閉其他。代碼示意如下：

子組件：

<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. 監(jiān)聽器剛打開是不會觸發(fā)的，需要執(zhí)行這個事件

? 我們監(jiān)聽dom事件記得 最開始只是生成了這個監(jiān)聽事件，但是并沒有觸發(fā)，直到出現(xiàn)監(jiān)聽的事件（resize）才回去執(zhí)行這個函數(shù)，所以想要一開始就執(zhí)行一次的話，就直接執(zhí)行就好了。當(dāng)時不知道為什么腦子卡住了，試了很多 包括load、pageshow，都不行，剛進(jìn)入頁面沒有執(zhí)行，還多開了一個監(jiān)聽器，后面前輩告訴我 監(jiān)聽只是開了 要觸發(fā)這個事件才執(zhí)行，想一開始就用直接執(zhí)行一次就好了。我當(dāng)時就在想，我在干什么 好蠢。。。怎么腦子就不轉(zhuǎn)了

? 還有一定要記得關(guān)監(jiān)聽器哦?。?！

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

3. 父組件掛載傳給子組件的數(shù)據(jù)子組件掛載的時候未獲取到

? 情境：同樣是上面的問題，我想在父組件掛載的時候獲取到尺寸，然后平分給子組件，設(shè)置子組件的寬高。但是 我在父組件打印確實(shí)是獲取到了，在子組件打印是個空值。

? 解決：父組件引用子組件的時候用v-if判斷，不要用v-show，獲取到的數(shù)據(jù)是否存在，存在才渲染，就可以了。

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定位的元素

? 情境：頁面有個導(dǎo)航欄是絕對定位的，導(dǎo)航欄下邊有個粘性定位的元素展示當(dāng)前所處的位置，當(dāng)頁面向下滾動時，粘性定位的元素?fù)踝×私^對定位的元素

原因：sticky屬性僅在以下幾個條件都滿足時有效:

• 父元素不能overflow:hidden或者overflow:auto屬性，或者body height:100%
• 必須指定top/bottom/left/right4個值之一，否則只會處于相對定位
• 父元素的高度不能低于sticky元素的高度

解決：我就是設(shè)置了overflow:hidden; 去掉就好了。這個父元素是指的所有直系父元素！所以不能光看父親，還要看爺及以上

6. 過濾器的使用

好久沒用過過濾器，再次用到filter都忘光了。寫了兩種用法

1. 渲染使用

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

//使用，上述內(nèi)容寫在了filter.js文件里，所以要引入，然后直接在渲染的時候使用
import "../utils/filter";

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

2. 函數(shù)內(nèi)使用

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

7. 輸入框input光標(biāo)距離輸入框左邊間距設(shè)置

text-indent:10px

還有就是input輸入框改focus樣式，border變色不生效，是因?yàn)楦腻e了，要改outline屬性才對。

8. 數(shù)組過濾，獲取兩數(shù)組中 共有的 和 不包含的項(xiàng)

//數(shù)組A
let arrA = ['1111','2222','333','4444','5555']
// 數(shù)組B
let arrB= ['aaa','bbb','4444','5555','dddd','eeee','ffff','yyyy','mmmm']
過濾B數(shù)組中不包含A數(shù)組的項(xiàng)
let differentArr = arrB.filter(item => arrA.indexOf(item) > -1)
// differentArr =['aaa','bbb','dddd','eeee','ffff','yyyy','mmmm']
過濾B數(shù)組中包含A數(shù)組的項(xiàng)
let commonArr = arrB.filter(item => arrA.indexOf(item) != -1)
// commonArr =['4444','5555']

應(yīng)用：找出B數(shù)組中id等于A數(shù)組的項(xiàng)

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