Vue自定義實現(xiàn)一個消息通知組件

更新時間：2024年03月15日 15:36:30 作者：一天只碼五十行

這篇文章主要為大家詳細介紹了如何利用Vue自定義實現(xiàn)一個消息通知組件,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下

一、效果描述

在JS中使用一個Message函數(shù)，彈出一個自定義的消息框。

效果體驗：緩若江海凝清光

二、實現(xiàn)方式

1.新建一個消息組件

2.新建一個js文件，新建一個需要導出函數(shù)

3.在函數(shù)中新建一個Vue實例，并將消息組件掛載上去。

4.在需要使用到的地方導入

三、代碼展示

1.消息組件messageOne

<template>
  <div
    :class="yangshi == 0 ? 'message messageIn' : 'message messageOut'"
    v-show="meShow"
    :style="{
      backgroundColor: tranColor,
      color: getComplementColor(tranColor),
    }"
    @click="handleColse"
  >
    <div class="textBox">{{ message }}</div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
 
const props = defineProps({
  message: String,
  color: String,
});
const message = computed(() => props.message);
const emits = defineEmits(["click"]);
// 傳輸?shù)念伾?
const tranColor = computed(() => props.color);
const meShow = ref(true);
const yangshi = ref(0);
const changeShow = () => {
  setTimeout(() => {
    yangshi.value = 1;
  }, 2500);
  setTimeout(() => {
    meShow.value = false;
  }, 3000);
};
// 判斷顏色格式
const isRgbColor = (color: string) => {
  // RGB格式的正則表達式
  const rgbRegex = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;
  const rgbaRegex =
    /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1}|0\.\d+)\)$/;
  // 檢查RGB或RGBA格式
  if (rgbRegex.test(color) || rgbaRegex.test(color)) {
    return "rgb";
  }
 
  // 十六進制格式的正則表達式
  const hexRegex = /^#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
  // 檢查十六進制格式
  if (hexRegex.test(color)) {
    return "hex";
  }
  // 如果都不是，返回false
  return false;
};
// hex轉rgb
const hexToRgb = (hex: string) => {
  // 去除字符串前面的 '#'
  hex = hex.replace("#", "");
 
  // 如果顏色代碼只有三位（例如：#fff），則轉換為六位（例如：#ffffff）
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
 
  // 將十六進制顏色拆分為RGB三個分量
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
 
  // 返回RGB對象或字符串，根據(jù)需要調整
  // return {
  //     r: r,
  //     g: g,
  //     b: b
  // };
  // 如果需要返回字符串格式，可以使用以下代碼
  return `rgb(${r}, ${g}, $)`;
};
// 獲取補色
const getComplementColor = (rgbString: string | undefined) => {
  if (!rgbString) return;
  let a = isRgbColor(rgbString);
  if (a == "hex") {
    rgbString = hexToRgb(rgbString);
  }
  // 正則表達式用于匹配rgb格式中的數(shù)值
  const rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;
  const result = rgbString.match(rgbRegex);
 
  // 如果沒有匹配到有效的rgb格式，則返回錯誤
  if (!result) {
    throw new Error(
      'Invalid RGB color format. Expected "rgb(R, G, B)" format.'
    );
  }
 
  // 提取紅色、綠色和藍色的數(shù)值
  const r = parseInt(result[1], 10);
  const g = parseInt(result[2], 10);
  const b = parseInt(result[3], 10);
 
  // 計算補色的RGB值
  const complementR = 255 - r;
  const complementG = 255 - g;
  const complementB = 255 - b;
 
  // 格式化補色為"rgb(R, G, B)"字符串
  const complementColor = `rgb(${complementR}, ${complementG}, ${complementB})`;
  return complementColor;
};
const handleColse = () => {
  emits("click");
};
changeShow();
</script>
<style scoped>
.message {
  color: rgb(36, 21, 40);
  min-width: 200px;
  width: auto;
  height: 70px;
  background-color: rgba(17, 153, 20, 0.9);
  position: absolute;
  top: 50px;
  left: 50vw;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 20px;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.messageIn {
  animation: mShow 0.5s;
}
.messageOut {
  animation: mNoShow 0.5s;
  animation-fill-mode: forwards;
}
 
@keyframes mShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes mNoShow {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>

2.TS文件messageOne.ts

import { createApp } from "vue";
import MessageOne from "./messageOne.vue";
export function showMessageOne(message: string, onClick: any, color?: string) {
  const div = document.createElement("div");
  document.body.appendChild(div);
  // 自定義掛載的組件和傳輸?shù)膮?shù)
  const app = createApp(MessageOne, {
    message,
    color,
    onClick() {
      onClick(() => {
        app.unmount();
        div.remove();
      });
    },
  });
  app.mount(div);
}

3.使用

<script setup lang="ts">
import { showMessageOne } from "../../components/messageOne";
const ClickButton = () => {
    showMessageOne(
      "消息通知",
      (close: any) => {
        close();
      },
     '#000'
    );
};
</script>

到此這篇關于Vue自定義實現(xiàn)一個消息通知組件的文章就介紹到這了,更多相關Vue消息通知組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: