[自定义 Vue 组件] 小尾巴 Logo 组件 TailLogo

文字归档于:https://www.yuque.com/u27599042/coding_star/apt6y731ybmxgu5g

组件效果

image.png
image.png

组件依赖

自定义字符串工具函数 stringIsNull

https://www.yuque.com/u27599042/coding_star/slncupw7un3ce7cb

import {stringIsNull} from "@/utils/string_utils.js"
/*** 判断是否为字符串类型* @param str 需要判断的变量* @returns {boolean} true:字符串类型;false:非字符串类型*/
export function isString(str) {return !(str === null) && !(str === undefined) && typeof(str) === 'string'
}/*** 判断一个字符串是否为空。* 当传入的参数为 null 或 undefined 或 不为字符串 或 字符串的长度小于等于0,则该字符串为空;* 否则,字符串不为空* @param str 需要进行判断的字符串* @returns {boolean} true:空;false:非空*/
export function stringIsNull(str) {return !(isString(str)) || str.length <= 0
}

项目环境变量

项目根目录/.env.dev,此依赖非必要,如果环境文件中无相应的配置项,则在使用 TailDropDown 组件时,就必须传递 logoImageUrl、logoText

/*** 获取环境变量* @type {ImportMetaEnv}*/
const env = import.meta.env
const LOGO_IMAGE_URL = env?.VITE_LOGO_IMAGE_URL // logo 图片 url
const LOGO_TEXT = env?.VITE_LOGO_TEXT // logo text

CSS 变量

src/styles/theme_styles/dark.csssrc/styles/theme_styles/light.css,本组件提供了两种主题(暗色与亮色)的 CSS 变量

:root[class*='dark'] {/** 小尾巴 logo 组件样式变量*//* 小尾巴 logo 组件背景颜色 */--tail-logo-bgc: #454545;/* 小尾巴 logo 组件 logo 文字字体 */--tail-logo-text-font-family: RJTHFH, serif;/* 小尾巴 logo 组件 logo 文字颜色 */--tail-logo-text-font-color: #efefef;
}
:root[class*='light'] {/** 小尾巴 logo 组件样式变量*//* 小尾巴 logo 组件背景颜色 */--tail-logo-bgc: #efefef66;/* 小尾巴 logo 组件 logo 文字字体 */--tail-logo-text-font-family: RJTHFH, serif;/* 小尾巴 logo 组件 logo 文字颜色 */--tail-logo-text-font-color: #333333;
}

组件属性参数

const props = defineProps({// logo 组件点击事件处理函数logoClickHandler: {type: Function, default: () => {}},// 是否开启展示 logo 图片enableLogoImage: {type: Boolean, default: true},// logo 图片大小logoImageSize: {type: String, default: '3rem'},// logo 图片 urllogoImageUrl: {type: String, default: ''},// 是否开启展示 logo 文本enableLogoText: {type: Boolean, default: true},// logo 文本logoText: {type: String, default: ''},
})

组件使用示例

<TailLogo:enable-logo-image="true":logo-image-url="'/images/logo.png'":logo-text="'小尾巴书城'"
></TailLogo>

image.png
image.png

组件源码

<script setup>
import {stringIsNull} from "@/utils/string_utils.js"/*** 获取环境变量* @type {ImportMetaEnv}*/
const env = import.meta.env
const LOGO_IMAGE_URL = env?.VITE_LOGO_IMAGE_URL // logo 图片 url
const LOGO_TEXT = env?.VITE_LOGO_TEXT // logo text/*** 接收组件传递参数*/
const props = defineProps({// logo 组件点击事件处理函数logoClickHandler: {type: Function, default: () => {}},// 是否开启展示 logo 图片enableLogoImage: {type: Boolean, default: true},// logo 图片大小logoImageSize: {type: String, default: '3rem'},// logo 图片 urllogoImageUrl: {type: String, default: ''},// 是否开启展示 logo 文本enableLogoText: {type: Boolean, default: true},// logo 文本logoText: {type: String, default: ''},
})
</script><template><!-- 小尾巴 Logo 组件 --><div class="tail-logo-box" @click="logoClickHandler"><!-- logoImageUrl 不为空则使用 logoImageUrl,否则使用 LOGO_IMAGE_URL(环境变量) --><imgv-if="enableLogoImage":src="stringIsNull(logoImageUrl) ? LOGO_IMAGE_URL : logoImageUrl"alt="logo":style="{height: logoImageSize}"/><!-- logoText 不为空则显示,否则显示 LOGO_TEXT(环境变量) --><span v-if="enableLogoText">{{ stringIsNull(logoText) ? LOGO_TEXT : logoText }}</span></div>
</template><style scoped lang="scss">
/** 小尾巴 logo 组件*/
.tail-logo-box {background-color: var(--tail-logo-bgc);cursor: pointer;display: flex;justify-content: center;align-items: center;/** logo 图片*/img {margin-right: 0.5rem;}/** logo 文本*/span {font-family: var(--tail-logo-text-font-family); // 锐字太空混元像素简繁-闪 超黑 字体font-size: 2rem;white-space: nowrap;color: var(--tail-logo-text-font-color);}
}
</style>

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

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

相关文章

HTTP协议中的\r\n

在HTTP协议中&#xff0c;\r\n 是用来表示行的结束的。具体来说&#xff1a; \r 是回车符 (Carriage Return, ASCII code 13)\n 是换行符 (Line Feed, ASCII code 10) HTTP协议头部的每一个字段结束都是通过\r\n来表示的。例如&#xff1a; GET /index.html HTTP/1.1\r\n Ho…

Hadoop3教程(三十二):(生产调优篇)NameNode故障恢复与集群的安全模式

文章目录 &#xff08;159&#xff09;NameNode故障处理&#xff08;160&#xff09;集群安全模式&磁盘修复集群安全模式磁盘修复等待安全模式 参考文献 &#xff08;159&#xff09;NameNode故障处理 如果NameNode进程挂了并且存储的数据也丢失了&#xff0c;如何恢复Nam…

PCA降维可视化

二维 import pandas as pd import warnings warnings.filterwarnings("ignore")df pd.read_csv(data/data.csv).dropna() features df.columns[:-1] X, y df[features], df[label]from sklearn.preprocessing import MinMaxScaler # 创建MinMaxScaler对象 scaler…

单目3D目标检测论文汇总

基于语义和几何约束的方法 1. Deep3DBox 3D Bounding Box Estimation Using Deep Learning and Geometry [CVPR2017] https://arxiv.org/pdf/1612.00496.pdfhttps://zhuanlan.zhihu.com/p/414275118 核心思想&#xff1a;通过利用2D bounding box与3D bounding box之间的几何约…

C语言、C++操作符优先级

说明&#xff1a; 同一优先级的运算符&#xff0c;运算次序由结合方向所决定。 一、C语言操作符优先级&#xff1a; 优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右 ----- () 圆括号 &#xff08;表达式&#xff09…

基于yolov5的目标检测和双目测距

目录 一.简介 1.双目视觉 2 YOLOv5 二.双目准备 1双目矫正 2.测距部分代码和函数 三.yolov5部分代码代码展示 效果展示 一.简介 1.双目视觉 双目视觉是通过两个摄像机同时拍摄同一场景&#xff0c;通过计算两幅图像的差异来获取深度信息的一种计算机视觉技术。在双目视…

博客系统中的加盐算法

目录 一、为什么要对密码进行加盐加密&#xff1f; 1、明文 2、传统的 MD5 二、加盐加密 1、加盐算法实现思路 2、加盐算法解密思路 3、加盐算法代码实现 三、使用 Spring Security 加盐 1、引入 Spring Security 框架 2、排除 Spring Security 的自动加载 3、调用 S…

CSS常见的预处理器有哪些?

CSS常见的预处理器有以下几种&#xff1a; 1&#xff1a;Sass&#xff08;Syntactically Awesome Style Sheets&#xff09;&#xff1a;Sass是一种成熟且广泛使用的CSS预处理器。它提供了许多功能&#xff0c;如变量、嵌套规则、混合&#xff08;Mixins&#xff09;、继承&am…

EF执行迁移时提示provider: SSL Provider, error: 0 - 证书链是由不受信任的颁发机构颁发的

ef在执行时提示provider: SSL Provider, error: 0 - 证书链是由不受信任的颁发机构颁发的。 只需要在数据库链接字符串后增加EncryptTrue;TrustServerCertificateTrue;即可 再次执行

Qt第六十六章:展示数据的标签

目录 一、效果图 二、qtDesigner ①拖出一个frame作为组容器并贴上背景样式 ②拖出主要的三个控件&#xff1a;frame、line、frame、label*2 ③固定大小并设置字体、布局一下 ④拷贝三份并水平布局一下 ⑤设置样式 ⑥调整布局 三、ui文件 四、代码 一、效果图 二、qtD…

【Java 进阶篇】深入了解 Bootstrap 全局 CSS 样式

Bootstrap 是一个流行的前端框架&#xff0c;以其强大的全局 CSS 样式而闻名。这些样式能够帮助开发者快速创建漂亮的、响应式的网页&#xff0c;而无需从头编写复杂的 CSS。在本文中&#xff0c;我们将深入探讨 Bootstrap 的全局 CSS 样式&#xff0c;适合初学者&#xff0c;帮…

C#通过Entity Framework实体对数据表增删改查

目录 一、创建实体数据模型 1.建立数据库连接 2.建立EF实体模型 二.设计窗体和EF应用 1.窗体设计 2.应用程序设计 3.源码 4.生成效果 &#xff08;1&#xff09;查询 &#xff08;2&#xff09;修改 &#xff08;3&#xff09;删除 &#xff08;4&#xff09;增加 …

标准盒子模型,与怪异盒子模型详解

目录 简介&#xff1a; 1. 标准盒子模型 2. 怪异盒子模型 3. 标准盒子模型与怪异盒子模型的差异 4. 如何设置盒子模型 5. 怪异盒子模型在实际开发中的应用 6. 总结 简介&#xff1a; 盒子模型是前端开发中的一个基本概念&#xff0c;它定义了Web页面上的每个元素&#…

Unigui中获取手机特征码

在Delphi Unigui中&#xff0c;您可以使用TUniDeviceInfo类来读取设备的一些基本信息&#xff0c;例如设备的操作系统版本、设备名称和分辨率等。但是&#xff0c;TUniDeviceInfo类并不提供设备的特征码信息。 如果您想要获取设备的特征码信息&#xff0c;您可以使用JavaScrip…

关于 XSS 漏洞的测试

XSS 的简介 XSS(Cross-Site Scripting)跨站脚本攻击&#xff0c;是一种常见的网络安全漏洞&#xff0c;指攻击者将恶意脚本注入到网页中&#xff0c;然后这些脚本在用户的浏览器中执行。这种攻击通常发生在基于 Web 的应用程序中&#xff0c;如网站和 web 应用程序&#xff0c…

sqlmap防御以及文件读写

一.防御 过滤 1.使用过滤函数 $email filter_var($_POST[email], FILTER_VALIDATE_EMAIL); if ($email) { // input is a valid email address } else { // input is not a valid email address 使用 filter_var() 函数和 FILTER_VALIDATE_EMAIL 过滤器来验证用户输…

[AUTOSAR][诊断管理][$11] 复位服务

文章目录 一、简介(1) 应用场景&#xff08;2&#xff09; 请求格式&#xff08;3&#xff09; 重启类型 二、示例代码(1) 11_ecu_reset.c 一、简介 ECU复位服务就是可以此诊断指令来命令ECU执行自复位&#xff0c;复位有多种形式&#xff0c;依据子功能参数来区分&#xff08…

Excel函数中单元格的引用方式

如下图在D列第一行输入sum(A1:C1)&#xff1b; 回车之后结果如下&#xff1b;先要输入等号&#xff0c;然后输入sum&#xff0c;以及左括号&#xff0c;这是调用了sum求和函数&#xff1b; A1表示A列第一行&#xff0c;C1表示C列第一行&#xff1b; A1:C1&#xff0c;中间是冒号…

数字图像处理实验记录五(图像的空间域增强-锐化处理)

前言&#xff1a; 文章目录 一、基础知识1&#xff0c;什么是锐化&#xff1f;2&#xff0c;为什么要锐化&#xff1f;3&#xff0c;怎么进行锐化&#xff1f; 二、实验要求任务1&#xff1a;任务2&#xff1a;任务3&#xff1a; 三、实验记录&#xff1a;任务1&#xff1a;任…

一步一步分析ChatGPT,1 粘性,2 传染性, 3 双边网络效应

请按照以下三个维度一步一步分析ChatGPT&#xff0c;1 粘性&#xff0c;2 传染性&#xff0c; 3 双边网络效应&#xff0c;比如亚马逊的买家和商家的关系 ChatGPT的分析 1.1. 粘性 (Stickiness) 定义&#xff1a; 粘性是指产品或服务对用户的吸引力&#xff0c;即用户在使用…