項目–看板外化

2021-3-20 15:13:32

分類專欄：vue antd vue

看板外化演示

項目描述：新建需求全景模塊，將各個業務老師給產研提的需求進行外化。
技術棧：vue、ant design vue
項目反思與總結：

嵌套路由：<router-view>
router/index.js

{path: '/demand/',name: 'demand',component: () => import('@c/demand/index.vue'),children: [{path: '',component: () => import('@c/demand/demand.vue')},{path: 'createDemand/',name: 'createDemand',component: () => import('@c/demand/createDemand.vue'),}]}

Demand/idnex.vue

<template><div><router-view></router-view></div> </template><script>export default {} </script><style lang="scss" scoped></style>

使用this.$set 修改數組中對象可更新視圖

tab欄吸頂：類似導航欄置頂 方法：鉤子mounted 時取到tab距離頁面頂部距離（offsetTop） 監聽window滾動事件并實時計算滾動條滾動距離
scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
當scrollTop >= tab距離頁面頂部距離 設置tab position: fixed
注： 1. 當tab置fixed時 tab脫離文檔流 下面元素會擠上來（突然上前）
解決：1. 給tab一個高度 2. 當tab fixed時給下面元素一個大小為tab高度的margin-top
2. 在mounted中使用window.onload增加滾動監聽 在destoryed鉤子中移除監聽 問題：第一次進入時調用了window.onload 再次進入時不調用 導致未監聽 解決：使用this.$nextTick()在下次dom更新循環后執行回調3.問題：使用echarts圖表導致累加的offsetTop變小解決：在this.$nextTick()中綁定滾動事件（dom渲染好之后）
注意：只有元素show（渲染完成）才會計算入offsetTop，若是中間有元素數據需要異步獲取，會導致最終獲取的offsetTop值偏小

補充：offsetTop獲取元素到頂部的距離(累加)： 為什么要累加？
　　 因為offsetTop返回的是當前對象距離上一層父級節點(offsetParent)的距離；
　　 如果元素有多個父級，則必須要累加
* offsetParent：距離元素最近的一個具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合條件，offsetParent為body。

封裝函數：

getElementTop (el) {let actualTop = el.offsetToplet current = el.offsetParentwhile (current !== null) {actualTop += current.offsetTopcurrent = current.offsetParent}return actualTop}

position fixed層級高于relative 但仍未覆蓋relative元素 解決：尋找父元素層級（若relative的父元素層級高 則不會覆蓋）

chorme字體最小限制為12px 解決： 使用css transform 縮小 例9px: font-size:90px; transform: scale(0.1) translate(-930px, -380px); 注：transform: scale 除了縮小 font-size，也會縮小其他一些屬性，例如整個字體的長寬，需要進一步調整它的位置等屬性

css中圖片頂對齊 文字底對齊： 若想讓文字與圖片底對齊 文字樣式：vertical-align : bottom

制作遮罩層 使用opacity及background 問題：遮罩層上的元素背景色也變成透明色了 解決：使用background: rgba() 問題：顯示遮罩層 下面層級還可以滾動 解決：遮罩層顯示時 給body加類名 document.getElementsByTagName("body")[0].className = “hidden” .hidden{ height: 100%; overfloe:hidden; }
(注:.hidden要與body并列編寫)

vue如何使容器內不定高的元素垂直居中 父容器設置display: flex;

justify-content: center;align-items: center;

取消雙擊選中文本CSS設置

-moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit瀏覽器*/ -ms-user-select:none;/*IE10*/ -khtml-user-select:none;/*早期瀏覽器*/ user-select:none;

如何讓外層div寬度由內層div寬度撐開 外層div display:inline-block;

元素水平垂直居中：

方法一：

width: 40px; height: 40px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;

方法二：

display: flex; align-items: center; justify-content: center;

動態設置img 地址src 方法一：導入地址 :src=“home” import home from '../static/icon/home.png' 方法二:拼接字符串

為元素增加class this.$refs.classList.add('className')

設置元素不可見 但保留占有位置 visibility: hidden;

父組件通過ref選擇子組件 通過調用子組件內的函數控制顯隱

POST 參數data: params GET 參數 params : params

總結

以上是生活随笔為你收集整理的看板外化项目总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。