web 前端实现一个根据域名的判断 来显示不同的logo 和不同的标题

1.需求

有可能我做一个后台 web端 我想实现一套代码的逻辑 显示不同的公司主题logo以及内容,但是实际上 业务逻辑一样 

2.实现

建一个store oem.ts 这个名为是 oem系统

oem.ts

import { defineStore } from 'pinia';import { store } from '@/store';const oemDataList = [{domain: ['www.xxxx.com'],logoUrl: '/oem/xxx/logo1.jpg',name: 'xxx管理平台',companyName: '河北xxxx有限公司',},{domain: ['www.xxxx.com'],logoUrl: '/oem/xxx/logo1.jpg',name: 'xxx管理平台',companyName: '河北xxxx有限公司',},
];const currentOemData = () => {// 根据当前域名匹配oem数据const currentDomain = window.location.hostname;const oemData = oemDataList.find((item) => {return item.domain.includes(currentDomain);});console.log(currentDomain, 'currentDomain');console.log(oemData, 'oemData');return oemData || oemDataList[0];
};export const useOemStore = defineStore('oem', {state: () => ({logoUrl: currentOemData().logoUrl,name: currentOemData().name,companyName: currentOemData().companyName,}),getters: {},actions: {},persist: true,
});export function getOemStore() {return useOemStore(store);
}

3.说明

这样这些字段就成为了一个全局的变量 显示在页面上就可以了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/674146.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue中v-on 可以监听多个方法吗

当然可以!Vue.js是一款非常强大的JavaScript库,它提供了很多方便的方法和指令,使我们可以更容易地构建交互式的Web应用程序。其中,v-on指令是Vue.js中一个非常重要也非常常用的指令,它用于监听DOM事件,并在…

质数基础筛法

文章目录 埃氏筛线性筛 埃氏筛 埃氏筛是一种筛素数的方法&#xff0c;埃氏筛的思想很重要&#xff0c;主要是时间复杂度 朴素的埃氏筛的时间复杂度是 O ( n l o g n ) O(nlogn) O(nlogn) 这个复杂度是调和级数 vector<int>p; int vis[N];void solve() {rep(i,2,n){if(…

07-Java桥接模式 ( Bridge Pattern )

Java桥接模式 摘要实现范例 桥接模式&#xff08;Bridge Pattern&#xff09;是用于把抽象化与实现化解耦&#xff0c;使得二者可以独立变化 桥接模式涉及到一个作为桥接的接口&#xff0c;使得实体类的功能独立于接口实现类&#xff0c;这两种类型的类可被结构化改变而互不影…

【知识整理】管理即服务,识人、识己

1. 背景 一个人的力量是有限的&#xff0c;如何规模化生产&#xff0c;人员的规模化组织&#xff0c;如何提升合作的规模和效率。 管理的本质&#xff1a; 1、服务他人&#xff1f; 2、激发主动性&#xff1f; 3、氛围宽松&#xff1f; 上面是理念&#xff0c; 1、那如何…

计划任务功能优化,应用商店上架软件超过100款,1Panel开源面板v1.9.6发布

2024年2月7日&#xff0c;现代化、开源的Linux服务器运维管理面板1Panel正式发布v1.9.6版本。 在v1.9.5和v1.9.6这两个小版本中&#xff0c;1Panel针对计划任务等功能进行了多项优化和Bug修复。此外&#xff0c;1Panel应用商店新增了3款应用&#xff0c;上架精选软件应用超过1…

Python解决SSL不可用问题

参考&#xff1a;https://blog.csdn.net/weixin_44894162/article/details/126342591 一、问题描述&#xff1a; 报错概述&#xff1a; WARNING: pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available. ## 警告:pip配…

酷开科技AIGC技术:重塑多媒体内容与交互体验

在当今数字媒体时代&#xff0c;酷开科技以其智能的AIGC技术&#xff0c;正在引领一场多媒体内容与交互体验的革新。AIGC&#xff0c;即人工智能、物联网、云计算和大数据的结合&#xff0c;是酷开科技的核心技术&#xff0c;为各类终端设备提供了强大的智能化支持。 酷开科技…

编码技巧——在项目中使用Alibaba Cloud Toolkit远程部署

背景 在新公司项目开发&#xff0c;当前项目为自建项目&#xff0c;意思是从开发到运维都需要自己负责&#xff0c;远程的服务器也是自己搭建的win操作系统&#xff1b; 之前在大厂工作时&#xff0c;一般提交代码之后&#xff0c;CICD流水线会自动的执行最新代码的拉取、构建打…

【Java多线程案例】单例模式

1. 单例模式概念 设计模式&#xff1a;谈到单例模式&#xff0c;我们首先需要知道什么是设计模式&#xff0c;设计模式是软件工程中的一大重要概念&#xff0c;是被广泛认可并使用于解决特定实际问题的代码设计经验&#xff0c;校招中常考的设计模式有单例模式、工厂模式 等&a…

asp.net core 依赖注入 实例化对象实例

在面向对象编程中&#xff0c;推荐使用面向接口编程&#xff0c;这样我们的代码就依赖于服务接口&#xff0c;而不是依赖于实现类&#xff0c;可以实现代码解耦。 名称解释&#xff1a; 我们把负责提供对象的注册和 获取功能的框架叫作“容器”&#xff0c; 注册到容器中的对象…

CMS 检测神器:CMSeek 保姆级教程(附链接)

一、介绍 CMSeek&#xff08;Content Management System Exploitation and Enumeration Toolkit&#xff09;是一款用于检测和利用网站上可能存在的内容管理系统&#xff08;CMS&#xff09;漏洞的开源工具。它旨在帮助安全研究人员和渗透测试人员识别目标网站所使用的CMS&…

服务器安装Docker (centOS)

1. 卸载旧版本的Docker&#xff08;如果有&#xff09; 首先&#xff0c;如果您的系统上安装了旧版本的Docker&#xff0c;需要将其卸载。Docker的旧版本称为docker或docker-engine。使用以下命令来卸载旧版本&#xff1a; sudo yum remove docker \ docker-client \ docker-…

2024牛客寒假算法基础集训营2部分题解

Tokitsukaze and Bracelet 链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 题目描述 《绯染天空》是一款由 key 社与飞机社共同开发的角色扮演游戏&#xff0c;剧情内容由著名的剧本作家麻枝准编写。它是一款氪金手游&#xff0c;但也有 st…

成为CSDN博客优质创作者或者博客专家吧

成为CSDN博客优质创作者或者博客专家吧 文章目录 成为CSDN博客优质创作者或者博客专家吧一、前言二、如何成为CSDN的博客专家1、2009年的要求和申请方式2、最新的CSDN博客专家要求和申请方式3、创作者身份认证4、CSDN所有认证的介绍 三、写博客的好处1、比较官方的说法&#xf…

Nacos1.X源码解读(待完善)

目录 下载源码 注册服务 客户端注册流程 注册接口API 服务端处理注册请求 设计亮点 服务端流程图 下载源码 1. 克隆git地址到本地 # 下载nacos源码 git clone https://github.com/alibaba/nacos.git 2. 切换分支到1.4.7, maven编译(3.5.1) 3. 找到启动类com.alibaba.na…

波卡 2023 四季度报告:开发者数量位列加密生态前三,五项新技术将于今年发布

作者&#xff1a;Nicholas Garcia&#xff5c;Messari 研究分析师 编译&#xff1a;OneBlock 原文&#xff1a;https://messari.io/report/state-of-polkadot-q4-2023?utm_mediumorganic_social&utm_sourcetwitter_messari&utm_campaignstate_of_polkadot_q4_2023 …

RabbitMQ的延迟队列实现[死信队列](笔记二)

上一篇已经讲述了实现死信队列的rabbitMQ服务配置&#xff0c;可以点击: RabbitMQ的延迟队列实现(笔记一) 目录 搭建一个新的springboot项目模仿订单延迟支付过期操作启动项目进行测试 搭建一个新的springboot项目 1.相关核心依赖如下 <dependency><groupId>org.…

13. UE5 RPG限制Attribute的值的范围以及生成结构体

前面几章&#xff0c;我们实现了通过GameplayEffect对Attribute值的修改&#xff0c;比如血量和蓝量&#xff0c;我们都是有一个最大血量和最大蓝量去限制它的最大值&#xff0c;而且血量和蓝量最小值不会小于零。之前我们是没有实现相关限制的&#xff0c;接下来&#xff0c;我…

小白水平理解面试经典题目LeetCode 71. Simplify Path【Stack类】

71. 简化路径 小白渣翻译 给定一个字符串 path &#xff0c;它是 Unix 风格文件系统中文件或目录的绝对路径&#xff08;以斜杠 ‘/’ 开头&#xff09;&#xff0c;将其转换为简化的规范路径。 在 Unix 风格的文件系统中&#xff0c;句点 ‘.’ 指的是当前目录&#xff0c;…

flutter监听app进入前后台状态的实现

在开发app的过程中&#xff0c;我们经常需要根据app的前后台的状态&#xff0c;做一些事情&#xff0c;那么我们在flutter中是如何实现这一监听的&#xff1f; flutter给我们提供了WidgetsBindingObserver来进行一些状态的判断&#xff0c;但是判断前后台的状态只是该API种其中…