vue 项目中,动态修改浏览器标签页的图标
vue 项目中,动态修改浏览器标签页的图标需求:项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标实现:1.找到项目中的app.vue 文件,动态创建link标签,调用后端接口,获取返回的图片,我的项目中,后端返回的图片格式为base64格式<template><div id="app"><router-view /></div>
·
vue 项目中,动态修改浏览器标签页的图标
需求:
项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标
实现:
1.找到项目中的app.vue 文件,动态创建link标签,调用后端接口,获取返回的图片,我的项目中,后端返回的图片格式为base64格式
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
import { getCompanyInfo } from '@/api/vone/base/index'
export default {
name: 'App',
data() {
return {
logoImage: ''
}
},
async created() {
await this.getInfo()
var link = document.querySelector("link[rel*='icon']") || document.createElement('link')
link.type = 'image/x-icon'
link.rel = 'shortcut icon'
link.href = this.logoImage
document.getElementsByTagName('head')[0].appendChild(link)
},
methods: {
async getInfo() {
const res = await getCompanyInfo(
'cloudbooster'
)
if (!res.isSuccess) {
this.$message.warning(res.msg)
return
}
if (res.data && res.data.value) {
this.logoImage = res.data.value
} else {
this.logoImage = ''
}
}
}
}
</script>
在编辑企业设置的对话框,保存时,使路由直接跳转到登录页,并使用location.reload() 强制刷新页面
async saveInfo() {
try {
await this.$refs.companyForm.validate()
} catch (e) {
return
}
// const userInfo = storage.get('user')
try {
this.saveLoading = true
const { isSuccess, msg } = await apiBaseCompanySetting(
{ ...this.companyForm }
)
this.saveLoading = false
if (!isSuccess) {
return this.$message.error(msg)
}
this.$message.success('保存成功')
this.onClose()
this.$emit('success')
await this.$store.dispatch('user/logout')
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
location.reload()
} catch (e) {
this.saveLoading = false
}
},
更多推荐
已为社区贡献3条内容
所有评论(0)