Vue中使用JS類的封裝及應用

2021-10-02 17:28:43 字數 884 閱讀 3432

在vue中使用類的封裝可以創造出多個具有相同屬性或方法的例項。例項們具有統一的屬性和方法,能夠保證資料的一致性。**更加簡潔,只需要將引數物件傳入即可。

例如現在有如下需求(1、2):

類a,需要包含編號id,名稱name,種類type,url。

export default class a 

}

向a類新增乙個方法,可根據id非同步獲取例項的其他資訊getinfo()。

export default class a 

getinfo() ).then((res) => ).catch((err) => )

}}

當需要處理資料時,就向外部暴露乙個方法createa(params)用於建立a類的例項,引數params是未整理的資料的物件。寫好createa後,之後建立a的例項就通過createa函式建立。

如果不需要處理資料,則直接使用new a(params)

export function createa(params) `

})}

使用方法:通過_normalizelist(list)序列化整個列表。或者當功能並不複雜時,可以直接使用createa(item)建立例項。

_normalizelist (list) 

})return ret

}

console.log(a.info) // ''

this.a.getlyric()

console.log(a.info) //data

記錄了更多優秀外掛程式的使用方法。有時間的同學請看我的置頂部落格,可太感謝啦。

Vue中使用原生js拖動

本文參考了 基於vue實現拖拽效果 最終實現,按原文中 實現,發現有bug,在滑鼠按下,拖動時,難以正常拖動。貼出原文 directives document.onmouseup e 原文 是有問題的,在滑鼠按下,拖動時,難以正常拖動,並且提前觸發了mouseup事件,導致mousemove並未解綁...

vue專案中使用element ui封裝選單樹

一.效果圖 底層使用el menu選單元件,專案中要求動態獲取選單樹,並且層級不固定。所以就在el menu元件基礎上封裝了一下。二.實現 sidebar.vue 檔案 width 200px style background color f3f6f9 background color menubg...

html中使用js將axios請求封裝

1 新建 httprequest.js 檔案,定義如下方法 axios封裝post請求 function axiospostrequst url,data return ret header then resp catch error return result get請求 function axi...