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

populus

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 进度条实现长按事件

  使用.nativeel-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组件的增加删除动画效果

opera.gif

// 新增动画效果: 首先隐藏新增行,将其高度缩放至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)  
    }  
)

7.element-ui中el-table组件及分页组件的混合

阅读 1.9k

万春园里误春期——前端之路
以前的学习中,总是去网上查看他人的博客或者文章,零零散散也在其他地方写过自己的博客。在此一个专栏...

不断学习、努力工作、热爱技术

291 声望
2 粉丝
0 条评论

不断学习、努力工作、热爱技术

291 声望
2 粉丝
文章目录
宣传栏