zoukankan      html  css  js  c++  java
  • vuePC项目踩坑记录

    本文档用于记录vue相关PC端遇到的一些问题记录,方面团队成员共享

    一、element-ui踩坑记录:

    使用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阻止默认事件
  • 相关阅读:
    27. Remove Element
    列表变成字典
    1. Two Sum
    CVPR2019:What and How Well You Performed? A Multitask Learning Approach to Action Quality Assessment
    959. Regions Cut By Slashes
    118. Pascal's Triangle
    loj3117 IOI2017 接线 wiring 题解
    题解 NOI2019 序列
    题解 省选联考2020 组合数问题
    题解 Educational Codeforces Round 90 (Rated for Div. 2) (CF1373)
  • 原文地址:https://www.cnblogs.com/sevenbreey/p/10895177.html
Copyright © 2011-2022 走看看