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

1.VUE中CSS动画及其可能对dom元素位置产生的影响

在处理页面切换时，用到了VUE中的CSS动画，当刷新页面时可以获得正确的offsetTop与offsetLeft。而通过链接进入页面，就会取到意料之外的值。
通过检查代码，重构CSS布局代码，尽量减少position: absolute等绝对定位的使用。一是为了CSS代码的整洁，二是对减少HTMLElement.offsetParent的影响。避免之后获取如 HTMLElement.offsetLeft等值更为繁琐。

获取dom位置需要在动画完成之后，否则可能因为动画中transform属性影响dom元素的【offsetParent】值。


    


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.回调传入默认值及自定义参数


// 原生事件可以使用$event来传入
// 利用闭包传递自定义参数

3.element-ui 进度条实现长按事件

　　使用.native在el-menu-item组件上监听原生事件，鼠标按下触发mousedown事件。开启定时函数setInterval改变进度条的值，当进度条百分比达到100时，开始累加时间戳，留给足够的时间去渲染进度条组件。最后触发长按事件最终的操作，并还原数据。
　　如果中途鼠标抬起，或者离开组件，则同样删除定时函数，还原进度条。

// template

    
        按下按钮
        
    


// 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，“遇到换行符或者标签会换行，连续的空白符被合并”实现效果。


.el-table .cell {
    white-space: pre-line;
}

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

vue提供的一系列指令，极大地方便、简化了我们渲染页面的代码。但是对于某些场景，仅仅是一些v-for 或是 v-if 并不能满足需求，而渲染函数可以提供更强的编程能力。

文本渲染时，有时不仅仅是将每个段落循环那么简单。当遇到某类文字需要特殊的样式，需要一些特殊的展示或属性，就要给这几个文字单独增加标签。


// 在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 (  
                          
                        {content.split('').map( (item, index) =>  
                                  
            )}  
                  
            )  
        },  
        components: {  
                'i-word': {  
                    props:{ 
                        // 在props中定义来自父组件render-dom的参数
                        // ...
                    },  
                    render: function (h) { 
                        // 在render函数中接收定义变量，以拱在jsx中使用
                        // ....
                        return (  
                            { char }{sub}  
                        )  
                    }  
                }  
        }  
    }
},

这样对文字添加如点击事件时，判断事件源及事件源dom的属性，从而确定是哪个文字触发了事件。

6. element-ui中el-table组件的增加删除动画效果

// 新增动画效果： 首先隐藏新增行，将其高度缩放至0倍，然后在视图更新后将其高度缩放恢复。
this.tableData.splice(0, 0, {})  
this.$nextTick( _ => {  
        document.querySelector(`.el-table__row:nth-child(1)`).style.cssText = 'transform: scale3d(1, 0, 1);'  
  setTimeout( () => {  
            document.querySelector(`.el-table__row:nth-child(1)`).style.cssText = 'transform: scale3d(1, 1, 1); transition: transform 0.25s ease-in-out; transform-origin: top'  
  }, 0)  
    }  
)