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

时间 2019-12-29

标签 vue 正在进行中繁體版

原文原文链接

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

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

获取dom位置须要在动画完成以后，不然可能由于动画中transform属性影响dom元素的【offsetParent】值。vue

<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时，开始累加时间戳，留给足够的时间去渲染进度条组件。最后触发长按事件最终的操做，并还原数据。
　　若是中途鼠标抬起，或者离开组件，则一样删除定时函数，还原进度条。react

// 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 并不能知足需求，而渲染函数能够提供更强的编程能力。element-ui

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

<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>  
                        )  
                    }  
                }  
        }  
    }
},