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

news2024/11/20 23:38:20

文字归档于：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 图片 url
  logoImageUrl: {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 图片 url
  logoImageUrl: {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(环境变量) -->
    <img
        v-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>