vue项目，通过列表编辑动态实时配置项目名称、项目图标？

超级无敌小小小白

已于 2023-09-18 15:13:41 修改

阅读量723

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-07-05 14:43:12 首次发布

本文链接：https://blog.csdn.net/SM_Cute/article/details/131554101

版权

Vue 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

目标：浏览器项目名、项目图标动态配置；项目左上角名称、图标动态配置

示例：

说明：我的实现方法是，编写一个列表数据，通过修改列表数据中的配置，实现实时更新浏览器项目名、项目图标和左上角项目名、项目图标。用到的存储数据方法是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>

以上就是关于动态实时配置项目名称、项目图标的代码编写，仅供参考~

前端小白积累经验篇~