本文档用于记录vue相关PC端遇到的一些问题记录,方面团队成员共享
一、element-ui踩坑记录:
1、el-carousel
使用el-carousel幻灯片时,动态设置轮播时间interval。需要同步动态绑定autoplay的值。否则会出现轮播卡顿或者延迟的问题。与源码中定时器有关。需要关闭定时器再重新赋值
2、el-table sortable表格排序
只需要用的升降排序,在<el-table-column>中绑定:sort-orders=['ascending', 'descending']。同时必须将sortable值设置为true,不绑定或为custom均无效。
二、项目踩坑记录
1、三级路由
需要设置三级路由,router第二级路由要加上父级路由的名称。删除AppMain.vue文件<router-view>中的:key。
与侧边栏的绑定暂未。。需要分析源码。
三级路由index.js文件示例:
{
path: '/test',
component: Layout,
redirect: '/test/router/test1',
name: '路由',
meta: {
title: '路由测试'
},
children: [{
path: '/test/router',
redirect: '/test/router/test1',
component: () => import('@/views/routerTest/index'),
meta: {
title: '路由测试',
noCache: true
},
children: [{
path: 'test1',
meta: { title: 'test1' },
component: () => import('@/views/routerTest/page/test1')
},
{
path: 'test2',
meta: { title: 'test2' },
component: () => import('@/views/routerTest/page/test2')
}]
}]
},
2、window.addEventListener
使用window.addEventListener('scroll', this.handleScroll)不能监听绑定滚动事件。需要写成这样:window.addEventListener('scroll', this.handleScroll,true)。若得到的值始终为0,则需要使用元素的滚动。document.querySelector('.el-main').scrollTop。有的浏览器不能监听到页面滚动到底部。试一试在判断表达式中+1
3、点击按钮触发刷新页面
在<el-form>中,使用<button>绑定点击事件,有可能会触发表单默认提交事件。使用@click.prevent阻止默认事件