項(xiàng)目–看板外化

2021-3-20 15:13:32

分類專欄：vue antd vue

看板外化演示

項(xiàng)目描述：新建需求全景模塊，將各個(gè)業(yè)務(wù)老師給產(chǎn)研提的需求進(jìn)行外化。
技術(shù)棧：vue、ant design vue
項(xiàng)目反思與總結(jié)：

嵌套路由：<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 修改數(shù)組中對(duì)象可更新視圖

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

補(bǔ)充：offsetTop獲取元素到頂部的距離(累加)： 為什么要累加？
　　 因?yàn)閛ffsetTop返回的是當(dāng)前對(duì)象距離上一層父級(jí)節(jié)點(diǎn)(offsetParent)的距離；
　　 如果元素有多個(gè)父級(jí)，則必須要累加
* offsetParent：距離元素最近的一個(gè)具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合條件，offsetParent為body。

封裝函數(shù)：

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

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

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

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

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

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

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

取消雙擊選中文本CSS設(shè)置

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

如何讓外層div寬度由內(nèi)層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;

動(dòng)態(tài)設(shè)置img 地址src 方法一：導(dǎo)入地址 :src=“home” import home from '../static/icon/home.png' 方法二:拼接字符串

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

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

父組件通過ref選擇子組件 通過調(diào)用子組件內(nèi)的函數(shù)控制顯隱

POST 參數(shù)data: params GET 參數(shù) params : params

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。