VUE踩坑——正在進行中……

1.VUE中CSS動畫及其可能對dom元素位置產生的影響

在處理頁面切換時，用到了VUE中的CSS動畫，當刷新頁面時能夠得到正確的offsetTop與offsetLeft。而經過連接進入頁面，就會取到意料以外的值。
經過檢查代碼，重構CSS佈局代碼，儘可能減小position: absolute等絕對定位的使用。一是爲了CSS代碼的整潔，二是對減小HTMLElement.offsetParent的影響。避免以後獲取如 HTMLElement.offsetLeft等值更爲繁瑣。

獲取dom位置須要在動畫完成以後，不然可能由於動畫中transform屬性影響dom元素的【offsetParent】值。

<transition name="rotateFall">
    <router-view/>
</transition>

mounted() {
    setTimeout(() => {
        this.snapArrays = this.$refs.analyzes.map(item => {
            item.center = {
                x: item.offsetLeft + item.offsetWidth / 2, 
                y: item.offsetTop + item.offsetHeight / 2
            }
            return item
        })
    }, 350)
    //  獲取dom位置須要在動畫完成以後，不然可能由於動畫中transform屬性影響獲取錯誤的值 
}

.rotateFall-leave-active {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0% 0%;
  animation: rotateFall .5s both ease-in;
  z-index: 1
}
.rotateFall-enter-active {
  animation: scaleUp .25s ease both;
}
@keyframes rotateFall {
  0% { transform: translateY(0%) rotateZ(0deg); }
  20% { transform: translateY(0%) rotateZ(10deg); animation-timing-function: ease-out; }
  40% { transform: rotateZ(17deg); }
  60% { transform: rotateZ(16deg); }
  100% { transform: translateY(100%) rotateZ(17deg); }
}

2.回調傳入默認值及自定義參數

<el-input ref="relationship"
      class="relationship"
      :style="relationshipStyle"
      size="small"
      v-model="relationship"
      placeholder="請輸入"
      suffix-icon="el-icon-edit"
      @change="relationshipChange($event,1)"
      @input="relationshipChange($event,0)"></el-input>
// 原生事件可使用$event來傳入
// 利用閉包傳遞自定義參數
      <el-table-column label="狀態" 
      width="90" 
      align="center" 
      prop="status" 
      :filter-method="(value, row, column) => {filterMethod(value, row, column, '自定義參數')}"></el-table-column>

3.element-ui 進度條實現長按事件

　　使用.native在el-menu-item組件上監聽原生事件，鼠標按下觸發mousedown事件。開啓定時函數setInterval改變進度條的值，當進度條百分比達到100時，開始累加時間戳，留給足夠的時間去渲染進度條組件。最後觸發長按事件最終的操做，並還原數據。
　　若是中途鼠標擡起，或者離開組件，則一樣刪除定時函數，還原進度條。

// template
<el-tooltip class="item" effect="dark" content="長按清除緩存" placement="bottom" :enterable="false" :hide-after="800">
    <el-menu-item index="5" @mousedown.native="longPressDown" @click.native="longPressCancle" @mouseleave.native="longPressCancle">
        按下按鈕
        <el-progress class="clear-progress" :show-text="false" :stroke-width="2" :percentage="percentage"></el-progress>
    </el-menu-item>
</el-tooltip>

// script
data(){
    return {
        percentage: 0
    }
},
methods: {
    longPressDown(){
        this.timestamp = 0
        this.timer = setInterval(() => {
            this.percentage += 30
            if (this.percentage > 100) {
                this.percentage = 100
                this.timestamp ++
            }
            if (this.timestamp >= 5){
                this.$message({
                    message: '清除緩存成功！',
                    type: 'success'
                })
                clearInterval(this.timer)
                this.percentage = 0
            }
        }, 200)
    },
    longPressCancle(){
        if (this.timer){
            clearInterval(this.timer)
            this.percentage = 0
        }
    }
},

4.element-ui el-table組件列名label換行

el-table組件中label只能接收字符串，因此只添加換行符並不能實現效果:label = "'文字\n換行'"，還要根據CSS中white-space屬性，設置爲pre-line，「遇到換行符或者<br>標籤會換行，連續的空白符被合併」實現效果。

<el-table-column :label="'label\n換行'"/>
.el-table .cell {
    white-space: pre-line;
}

5. vue jsx深度處理文本渲染

vue提供的一系列指令，極大地方便、簡化了咱們渲染頁面的代碼。可是對於某些場景，僅僅是一些v-for 或是 v-if 並不能知足需求，而渲染函數能夠提供更強的編程能力。

文本渲染時，有時不單單是將每一個段落循環那麼簡單。當遇到某類文字須要特殊的樣式，須要一些特殊的展現或屬性，就要給這幾個文字單獨增長標籤。

<render-dom :sentences="sentences"></render-dom>
// 在components定義子組件編程
components: {  
    'render-dom': {
        // props屬性從父組件接收參數
        props:{  
            sentences: {  
                type: Object,  
            }  
        },  
        data(){  
            return {  
                style: {  
                    color: 'red'  
                },  
            }  
        },  
        render: function(h) {  
            // 在render函數中接收定義變量，以拱在jsx中使用
            const {sentId, nersTagList, startPosPreList, endPosPreList} = this.sentences  
            const posArr = []  
            for (let i in nersTagList){  
                if (startPosPreList[i]){  
                    const arr = [startPosPreList[i], endPosPreList[i]]  
                    arr.tags = nersTagList[i]  
                    posArr.push(arr)  
                }  
            }  
            const word = this.word  
            const style = this.style
            // {} 表示js變量或者代碼， 通常使用map函數執行循環
            // react中使用className="sentence"表示css類名
            return (  
                        <span class="sentence" data-id={sentId}>  
                        {content.split('').map( (item, index) =>  
                                <i-word char={item} index={index} posArr={posArr}/>  
            )}  
                </span>  
            )  
        },  
        components: {  
                'i-word': {  
                    props:{ 
                        // 在props中定義來自父組件render-dom的參數
                        // ...
                    },  
                    render: function (h) { 
                        // 在render函數中接收定義變量，以拱在jsx中使用
                        // ....
                        return (  
                            <i data-index={dataIndex} class={className}>{ char }{sub}</i>  
                        )  
                    }  
                }  
        }  
    }
},

這樣對文字添加如點擊事件時，判斷事件源及事件源dom的屬性，從而肯定是哪一個文字觸發了事件。

6. element-ui中el-table組件的增長刪除動畫效果