目标:浏览器项目名、项目图标动态配置;项目左上角名称、图标动态配置
示例:
说明:我的实现方法是,编写一个列表数据 ,通过修改列表数据中的配置,实现实时更新浏览器项目名、项目图标和左上角项目名、项目图标。用到的存储数据方法是vuex。
实现:
store/index.js
import custom from './modules/custom'
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
custom
},
getters,
});
export default store;
store/modules/custom.js
//url是图标回显接口地址
const custom = {
namespaced: true,
state: {
logoInfo: {}
},
mutations: {
SET_LOGOINFO: (state, data) => {
if(data){
//如果修改了列表配置,则更换为配置好的名称、图标
state.logoInfo = data
sessionStorage.setItem('titleName',data.configName)
sessionStorage.setItem('titleImg',url + data.icon)
}else{
//如果没有配置图标及名称,则默认展示以下静态数据
state.logoInfo = {configName: '超级无敌小小小白'}
sessionStorage.setItem('titleName','超级无敌小小小白')
sessionStorage.setItem('titleImg','./favicon.ico')
}
}
}
}
export default custom
以上为vuex的存储数据配置,下面需要做的就是在每次更改列表数据是将更改后的数据存储在vuex中,即调用getLogoInfo()函数:
//getTitle为获取配置对象的后端接口
// 获取logo信息
getLogoInfo(){
getTitle().then(res => {
this.$store.commit('custom/SET_LOGOINFO', res.data)
}).catch(() => {
console.log('出错了')
})
},
列表配置处修改完后,要想实现左上角项目名称、项目图标的动态配置还需要编写的是Navbar的逻辑:
//在html中直接通过以下方式展示图标的名称
//url为项目中回显图片的接口地址
//名称:{{logoInfo.configName}}
//图标:<img v-if="logoInfo.icon" :src="url + `${logoInfo.icon}`" class="logo" />
//在created中调用getLogoInfo()
created() {
this.getLogoInfo()
},
//getTitle为获取配置对象的后端接口
methods: {
// 获取logo信息
getLogoInfo(){
getTitle().then(res => {
this.$store.commit('custom/SET_LOGOINFO', res.data)
}).catch(() => {
console.log('出错了')
})
},
}
这样就能实现左上角名称和图标的实时切换,现在还需要做的是浏览器的项目名称和图标实时切换,代码如下:
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 此处省略每个项目中的其他配置,只展示以下两项需要使用到的标签 -->
<link id="titleImg" rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<title id="title"></title>
</head>
<body>
</body>
<script>
getDetail()
setInterval(() => {
getDetail()
}, 500);
window.onload = function(){
getDetail()
}
function getDetail() {
//url为项目中回显图片的接口地址
let title = sessionStorage.getItem('titleName')
let titleImg = sessionStorage.getItem('titleImg')
document.getElementsByTagName('title')[0].innerText = title
document.getElementById('titleImg').href = url + titleImg
}
</script>
</html>
以上就是关于动态实时配置项目名称、项目图标的代码编写,仅供参考~
前端小白积累经验篇~