初衷：

圖一中的紅框中的部分，作為用戶自定義的背景圖，如果用戶沒有上傳也會為其自動設(shè)置一張背景圖，當用戶點擊時則會出現(xiàn)圖二中的選項 ，點擊取消則選項消失，點擊從相冊選擇則會跳轉(zhuǎn)本機的相冊，選擇照片后會切換背景圖片，如圖三

實現(xiàn)原理：

1.在頁面中添加用于圖片上傳的插件，并不希望他顯示，所以為他設(shè)置隱藏，當我們點擊大盒子時觸發(fā)changeBg事件（也就是當我們點擊上面圖一時要觸發(fā)的事件）

2.當chageBg事件觸發(fā)時會彈出上面介紹的圖二中的選項框，藍色框中是當我們點擊‘從相冊中選擇’時會用代碼觸發(fā)圖片上傳插件中的單擊事件（事件觸發(fā)后悔彈出選擇圖片對話框，可以選擇自己喜歡的圖片進行上傳）

3.選擇后圖片會自動進行上傳，上傳成功后會執(zhí)行下面的代碼，在這個方法中我們調(diào)用了一個函數(shù)，同時我們將ret作為參數(shù)傳遞過去，ret中就是上傳成功后返回圖片新的地址等信息（因為實在weui組件中的this不是指的Vue實例，所以我們將指向Vue實例的this賦值給self）

4.（1）submit事件中首先更新數(shù)據(jù)庫中的背景圖像，調(diào)用接口，將圖片的id以及圖片新的地址傳遞過去成功后執(zhí)行本地背景圖更新

4.（2）submit事件中更新本地的背景圖像，調(diào)用store中的方法并且傳值，值是一個對象通過對象的展開運算符（…）將對象的屬性和值完全的復(fù)制一份給本對象，但浙江對象中的bgurl屬性值換成行的圖片路徑

5.上面調(diào)用了store中的srtUser方法，此方法有調(diào)用mutations中的setUser方法將傳遞過來的對象重新賦值，當state中的值變化后又會重新渲染DOM

6.在盒子中的背景圖是動態(tài)屬性，但是動態(tài)屬性一旦發(fā)生變化，圖片也會發(fā)生變化進而實現(xiàn)了背景圖的自定義上傳

總結(jié)

以上是生活随笔為你收集整理的微信动态中的背景图更换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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