利用响应式来进行图标的动态更新
- 思路:编写一个useFavicon的函数,在函数中定义一个更新图标的方法,和一个响应式数据变量,并在内部监听该响应式变量,当发生改变就调用更新的方法。
function useFavicon(newIcon?:string){
const favicon = ref(newIcon)
function update(icon){
//匹配头部关于icon的link
document.head.querySelectorAll('Link[rel*="icon"]')
.forEach(el => el.href = icon)
}
const reset = ()=>favicon.value = '/favicon.ico'
//当响应式变量favicon发生改变时触发更新
watch(favicon,(i)=>{
update(i)
})
//将响应式变量暴露给外部,以便修改
return {favicon,reset}
}
- -关于怎么更新:由外部操作暴露出去的响应式变量,内部监听器就会触发更新
<script setup lang="ts">
import ico from './assets/test.ico'
const {favicon,reset} = useFavicon();
const loading = ()=>favicon.value = ico
</script>
<template>
<div @click="loading">切换icon</div>
</template>