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

组件效果

组件依赖

自定义字符串工具函数 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.css、src/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>

组件源码

<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>