一、圖片的預覽效果
本次實現是在vue-cli中實現的路由來實現圖片的預覽效果
第一步定義兩個組件命名為HelloWorld.vue和Layer.vue
第二步需要配置兩個組件的前端路由
代碼如下：
第三步在HelloWorld的組件中完成需要預覽的小圖片如圖
此實現比較簡單css布局不做過多說明，使用router-link把參數傳遞到layer組件
HelloWorld組件中代碼如下，
Layer組件中的代碼如下，通過定位和margin將圖片實現上下和左右同時居中，并通過router-link返回到HelloWorld頁面
以上是通過vue路由實現。愛掏網 - it200.com
另外可以通過第三地方的api（釘釘api）來實現圖片的預覽功能
即 給小圖片添加點擊事件，來調用釘釘的api預覽圖片
代碼實現如下：
調用的maxImg方法:
二、圖片的模糊效果
先看效果對比
代碼設置
項目中的應用
描述：背景是一張模糊的圖片，同時有一個半透明蒙層
實現方法
html部分代碼：
header是最外層的盒子，樣式為
然后設置背景圖的樣式
當不給header添加overflow:hidden屬性的時候，由于我們給背景圖片使用了filter屬性會導致背景圖的陰影溢出，如下圖
所以需要給header添加overflow:hidden屬性
以上是自己在項目實踐中的實現方法，大家有其他的方法實現的歡迎來討論，指導！
聲明：所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益，可聯系我們進行處理。