vue3实现响应式切换地址栏favicon.ico图标

利用响应式来进行图标的动态更新

  • 思路:编写一个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>
上一篇:网站常用的favicon.ico文件


下一篇:vue 五星评分组件封装