vue2.6.0版本開始,提供了一種自定義圖標的方法:使用icon事件。在使用這種方法之前,我們需要先注冊一個icon對象,然后在需要使用圖標的地方監聽icon事件,實現動態的圖標展示。
// 注冊icon對象 Vue.prototype.$icon = { play: '', pause: '' } // 監聽icon事件// 定義handleIcon函數 methods: { handleIcon(iconName) { // 根據iconName在$icon對象中查找圖標字符串,并賦值給icon變量 let icon = this.$icon[iconName] // 將icon變量插入到DOM,并展示圖標 this.$el.querySelector('.icon-container').innerHTML = icon } }
使用icon事件的好處在于,可以根據狀態動態展示不同的圖標,從而提高用戶體驗。例如,在音樂播放器中,根據音樂的當前狀態展示不同的播放圖標和暫停圖標。
除了自定義icon事件,vue還提供了一些內置的事件,如click、input、change等。這些事件可以很方便地與組件進行交互,從而實現更多的功能。