最近專案中有些業務場景需要用到粘性布局，元件庫使用的是element，檢視了文件發現element元件庫並沒有粘性布局的元件，又不能引入其他庫，網上找了許多，只發現一篇vue affix元件不過使用之後並不能達到我需要的效果，所以做了修改。
思路就是利用css的position:fixed。當元素位置移除對應視窗時則為元素新增position:fixed，回到視窗內時取消fixed。
有幾個需要注意的地方
在元件掛載時啟動對元素位置的監聽，以及scroll滾輪的監聽
window.
addeventlistener
("scroll"
,this
.handlescroll,
true);
// 監聽滾動條
window.
addeventlistener
("resize"
,this
.handlescroll,
true);
// 監聽視窗大小
2.在頁面關閉時也需要解除安裝對應的監聽
beforedestroy()
,
可以自行修改，當前也只是粗糙版本，只能提供吸頂。
"affixfather"
:style=
"wrapstyle"
>
class=""
:style=
"styles"
>
<
/slot>
<
/div>
<
/div>
<
/template>
export
default
, onaffix:,}
, boundary:,}
,data()
, affixedclientheight:0,
fatherwidth:"",
fatherdomoffsettop:'',
boundaryoffsettop:'',
wrapstyle:};
},methods:
offset`];
const method =
`scroll$`
;if(typeof ret !==
"number")}
return ret;},
getoffset
(element);}
,handlescroll()
px`,
left:`$
px`,
width:`$
px`,
zindex:1,
};// 固釘事件觸發傳遞
_that.
onaffix
(_that.affixed);}
else
if(_that.affixed && eloffsettop > isaffixtop)
_that.
onaffix
(_that.affixed);}
}else
if(_that.boundary)
px`,
left:`$
px`,
width:`$
px`,
zindex:1,
};// 固釘事件觸發傳遞
_that.
onaffix
(_that.affixed);}
else
if(_that.affixed && eloffsettop > _that.boundaryoffsettop)
// 固釘事件觸發傳遞
_that.
onaffix
(_that.affixed);}
}},getwidth()
px`;},
},computed:
return
this
.offsettop;},
},mounted()
window.
addeventlistener
("scroll"
,this
.handlescroll,
true);
// 監聽滾動條
window.
addeventlistener
("resize"
,this
.handlescroll,
true);
window.
onresize=(
)=>)(
);};
},beforedestroy()
,};<
/script>
.fixed
<
/style>
Vue 瀑布流布局（封裝元件）
1.樣式展示 如下圖所示，每個盒子寬高不同，且能夠自適應螢幕變化的布局 2.原理分析 利用定位，在最短的一列下面進行排列，如下圖所示 容器寬度固定，高度根據自適應 定寬不定高 一行不能排列時候，換行依次從左往右排列 來自 來自 1.效果圖 可以實現滾動 不加說明文字 加上說明文字 2.元件 wate...
vue 封裝元件
一 通過install 封裝 1 建立元件資料夾包含 vue檔案和對應的.js檔案 如圖 2 完成元件模板 這是乙個公共元件內容 3 在相應的js內註冊元件 list.js檔案 import mylist from list.vue const list export default list 匯入...
Vue封裝分頁元件
使用vue做雙向繫結的時候，可能經常會用到分頁功能 接下來我們來封裝乙個分頁元件 先定義樣式檔案 pagination.css ul,li page bar page button disabled page bar li page bar li first child a page bar a p...