vuePC專案踩坑記錄

sevenberry發表於2019-05-20
Vue

本文件用於記錄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阻止預設事件

相關文章