【VUE3.0】动手做一套像素风的前端UI组件库---Message

于 2024-09-24 23:19:44 发布
阅读量1.3k 收藏 22
点赞数 16
分类专栏： vue3.0 文章标签： 前端 ui 像素风 自定义UI组件库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44666711/article/details/142484971
版权

目录

引言

本教程基于前端UI样式库 NES.css 的UI设计，自行研究复现。欢迎大家交流优化实现方法~

此次组件库开发基于vue3框架，框架基础搭建过程以及基础素材准备参考：【VUE3.0】动手做一套像素风的前端UI组件库—先导篇

本篇完成的组件为Message，日常项目中较为常见的组件，主要涉及到的内容有：

  • 这次没得 抄 借鉴了，NES.css没有提供这个组件的样式模板。
  • 参考按钮的高光和阴影设计一个具有特色的信息弹窗。
  • 利用vue的transition组件给弹窗一些动画效果。
  • 采用单例模式将信息弹窗放置在全局避免重复。
  • 参考组件库Element Plus的设计使用方式，采用js的方式调用组件并传参。

自己整一个UI设计稿

结合以前玩的一款掌机游戏的提示框

  • 我希望这里的message提示框可以像横幅一样打在公屏上，样式要夸张一些。
  • 提示框在消失的时候可以有一个渐变放大透明的效果，视觉上比较有张力。

大概长这样：
在这里插入图片描述
功能上我需要：

  • 支持传入字符串或对象去调用信息弹窗。
  • 支持success， error，warning，info四个子方法去调用信息弹窗。

代码编写

1. 设计信息窗口基础样式

  • 利用box-shadow的内部阴影，结合hsl颜色模型增加背景色20%的亮度来凸显高光部分的样式。
  • 利用vue的transition组件给弹窗设置渐变放大透明度为0的过度效果。
  • 利用hsl颜色模型和vue的css变量，根据传入type类型转换组件颜色的色相、饱和度、亮度，为弹窗的背景绑定参数。

编写vue文件，设置基础的组件布局、颜色以及过度效果：

<template>
  <transition name="scale">
    <div v-show="state.showMessage" class="pMessage">
      {{ state.content }}
    </div>
  </transition>
</template>
<script setup>
import { reactive, ref } from "vue";
const state = reactive({
  content: "这是一个 message",
  duration: 1500,
  type: "primary",
  showMessage: false,
});
let hue = ref("");
let saturation = ref("");
let light = ref("");
const handleColor = (type) => {
  switch (type) {
    case "primary":
      hue.value = "204";
      saturation.value = "86%";
      light.value = "53%";
      break;
    case "success":
      hue.value = "85";
      saturation.value = "58%";
      light.value = "53%";
      break;
    case "error":
      hue.value = "10";
      saturation.value = "75%";
      light.value = "62%";
      break;
    case "warning":
      hue.value = "51";
      saturation.value = "93%";
      light.value = "54%";
      break;
    case "info":
      hue.value = "0";
      saturation.value = "0%";
      light.value = "83%";
      break;
  }
};
</script>
<style scoped>
.pMessage {
  --base_hue: v-bind(hue);
  --base_saturation: v-bind(saturation);
  --base_light: v-bind(light);
  color: #f3f3f3;
  font-size: 40px;
  font-weight: bold;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 35%;
  z-index: 999;
  background: hsl(var(--base_hue), var(--base_saturation), var(--base_light));
  box-shadow: inset 0px -30px hsl(var(--base_hue), var(--base_saturation), calc(var(
            --base_light
          ) + 20%));
}
.scale-enter-active,
.scale-leave-active {
  transition: 0.2s ease-out;
}
.scale-enter,
.scale-leave-to {
  transform: scale(2);
  opacity: 0;
}
</style>

2. 设置打开和关闭的方法

  • 因为是通过js方法去调用组件渲染，那么肯定要对外暴露一个open方法。
  • 为了代码的健壮性，也需要提供一个关闭方法。
  • 信息弹窗打开后需要通过定时器是延时关闭，需要操作好定时器，做一个简易的防抖，保证多次触发弹窗时，只在最后一次触发的延时时间后关闭弹窗。
  • 最后记得将写好的方法以及组件内部的state对象暴露出去，这样在外部js代码中实例化这个组件后，才可以读取到这个方法。

补充第一步vue文件的js内容：

let messageTimer = null;
const open = () => {
  if (messageTimer) {
    clearTimeout(messageTimer);
    messageTimer = null;
  }
  handleColor(state.type);
  state.showMessage = true;
  messageTimer = setTimeout(() => {
    state.showMessage = false;
  }, state.duration);
};
const close = () => {
  if (messageTimer) {
    clearTimeout(messageTimer);
    messageTimer = null;
  }
  state.showMessage = false;
};
// 导出这state、open、close，保证外部js可以读取到组件内部方法，这很重要！
defineExpose({ state, open, close });

3. 编写实例化组件的js文件

在vue文件的同级目录下创建对应的js文件。

  • 这里需要使用vue的createApp方法创建一个组件，并挂接在一个新建的dom上，然后将dom挂载在body中。
  • 为了避免多次触发信息弹窗，导致产生dom过多造成卡顿。我们采用单例模式去更新唯一的那个组件实例，而不是一直创建新的组件。
  • 通过initInstance 方法初始化组件。
  • 对外导出pMessage方法，用于更新信息弹窗实例的内容及状态。
  • 在pMessage方法中校验传入的信息：
    • 纯字符串就按默认的参数去渲染。
    • 对象则按照传入的信息结合默认参数去渲染。
    • 最后通过open方法去打开信息弹窗，展示dom。

以下是js内容：

import { createApp } from "vue";
import Message from "./index.vue";

let instance;

const initInstance = () => {
  const messageInstance = createApp(Message);
  // 需要一个容器
  const container = document.createElement("div");
  // 再进行挂载 - 挂载之后返回实例上下文
  instance = messageInstance.mount(container);
  document.body.appendChild(container);
};

function pMessage(option) {
  if (!instance) initInstance();
  if (!option) {
    option = {};
  }
  option = typeof option === "string" ? { content: option } : option;

  instance.state.content = option.content || "这是一个 message";
  instance.state.duration = option.duration || 1500;
  instance.state.type = option.type || "primary";
  instance.open();
}

export default pMessage;

补充success， error，warning，info四个子方法去调用信息弹窗

在js文件中继续补充代码

// 抽象公共逻辑
const createMessageType = (type) => {
  return function (content, duration) {
    return pMessage({
      content,
      duration,
      type,
    });
  };
};

// 自动生成不同类型的消息方法
["success", "error", "warning", "info"].forEach((type) => {
  pMessage[type] = createMessageType(type);
});

补充信息弹窗组件的关闭方法

在js文件中继续补充代码

pMessage.close = function () {
  if (instance && instance.close) {
    instance.close();
  }
};

4. 看下最终效果

在这里插入图片描述

5. 组件完整代码

index.vue

<template>
  <transition name="scale">
    <div v-show="state.showMessage" class="pMessage">
      {{ state.content }}
    </div>
  </transition>
</template>

<script setup>
import { reactive, ref } from "vue";

const state = reactive({
  content: "这是一个 message",
  duration: 1500,
  type: "primary",
  showMessage: false,
});
let messageTimer = null;
const open = () => {
  if (messageTimer) {
    clearTimeout(messageTimer);
    messageTimer = null;
  }
  handleColor(state.type);
  state.showMessage = true;
  messageTimer = setTimeout(() => {
    state.showMessage = false;
  }, state.duration);
};
const close = () => {
  if (messageTimer) {
    clearTimeout(messageTimer);
    messageTimer = null;
  }
  state.showMessage = false;
};
let hue = ref("");
let saturation = ref("");
let light = ref("");
const handleColor = (type) => {
  switch (type) {
    case "primary":
      hue.value = "204";
      saturation.value = "86%";
      light.value = "53%";
      break;
    case "success":
      hue.value = "85";
      saturation.value = "58%";
      light.value = "53%";
      break;
    case "error":
      hue.value = "10";
      saturation.value = "75%";
      light.value = "62%";
      break;
    case "warning":
      hue.value = "51";
      saturation.value = "93%";
      light.value = "54%";
      break;
    case "info":
      hue.value = "0";
      saturation.value = "0%";
      light.value = "83%";
      break;
  }
};
defineExpose({ state, open, close });
</script>

<style scoped>
.pMessage {
  --base_hue: v-bind(hue);
  --base_saturation: v-bind(saturation);
  --base_light: v-bind(light);
  color: #f3f3f3;
  font-size: 40px;
  font-weight: bold;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 35%;
  z-index: 999;
  background: hsl(var(--base_hue), var(--base_saturation), var(--base_light));
  box-shadow: inset 0px -30px hsl(var(--base_hue), var(--base_saturation), calc(var(
            --base_light
          ) + 20%));
}

.scale-enter-active,
.scale-leave-active {
  transition: 0.2s ease-out;
}

.scale-enter,
.scale-leave-to {
  transform: scale(2);
  opacity: 0;
}
</style>

index.js

import { createApp } from "vue";
import Message from "./index.vue";

let instance;

const initInstance = () => {
  const messageInstance = createApp(Message);
  // 需要一个容器
  const container = document.createElement("div");
  // 再进行挂载 - 挂载之后返回实例上下文
  instance = messageInstance.mount(container);
  document.body.appendChild(container);
};

function pMessage(option) {
  if (!instance) initInstance();
  if (!option) {
    option = {};
  }
  option = typeof option === "string" ? { content: option } : option;

  instance.state.content = option.content || "这是一个 message";
  instance.state.duration = option.duration || 1500;
  instance.state.type = option.type || "primary";
  instance.open();
}

// 抽象公共逻辑
const createMessageType = (type) => {
  return function (content, duration) {
    return pMessage({
      content,
      duration,
      type,
    });
  };
};

// 自动生成不同类型的消息方法
["success", "error", "warning", "info"].forEach((type) => {
  pMessage[type] = createMessageType(type);
});

pMessage.close = function () {
  if (instance && instance.close) {
    instance.close();
  }
};

export default pMessage;

6. 组件调用方式

<template>
    <div class="message">
      <p-button type="success" @click="openMessageSuccess"> 成功提示 </p-button>
      <p-button type="error" @click="openMessageError"> 失败提示 </p-button>
      <p-button @click="openMessage1"> 普通提示不传参 </p-button>
      <p-button @click="openMessage2"> 普通提示传参 </p-button>
    </div>
</template>
<script setup>
import pMessage from "@/components/message/index.js";
const openMessageSuccess = () => {
  pMessage.success("成功！");
};
const openMessageError = () => {
  pMessage.error("失败！");
};
const openMessage1 = () => {
  pMessage("普通提示不传参");
};
const openMessage2 = () => {
  pMessage({
    content: "普通提示传参",
    duration: 300,
    type: "primary",
  });
};
</script>

总结

至此一个完整的像素风信息弹窗组件Message就开发完成了。
本篇主要强化理解了几个点：

  • vue的transition组件的使用方法。
  • js的简易防抖实现逻辑。
  • js设计模式中的单例模式应用。
  • js调用组件封装逻辑。

再接再厉~

qbbmnnnnnn
关注
专栏目录
基于md的UI组件文档库研究
禅思院
03-15 896
写在前面的话 自过年以来，由于时间的原因，一直没有更新博客，年前规划的事情，一直没有推动，一直想写个基于vue3的禅思UI库，迟迟为动手，各个方面的原因都有吧，一边工作，一边要忙着考试，心有余力而不足啊！ 前端组件化是我们前端圈子里最流行的一段话，也是我们前端在开发过程中面临的挑战。所以我们面临的问题很多，学习的有限，所以一边的学习，一边的去研究，把已有的消化为自己的，这才是技术人员的成长之道。我为了后面我自己的禅思UI库做准备，所以我根据已有的，慢慢去琢磨，看看别人的思想和设计，来完成属于禅思的组件
VUE3 插件的开发和使用
m0_49515138的博客
02-07 5570
传统的 Webpack 可以用来构建 npm 包文件，但按照目前更主流的技术选项，编译结果更干净更迷的当属 Rollup ，但 Rollup 需要配置很多插件功能，这对于刚接触包开发的开发者来说学习成本比较高，而 Vite 的出现则解决了这个难题，因为 Vite 的底层是基于 Rollup 来完成构建，上层则简化了很多配置上的问题，因此接下来将使用 Vite 来带领开发者入门 npm 包的开发。的新声明 (.d.ts) 文件 ts(7016)
vue3 组件篇 Message
秋来九月八
03-23 3786
Message组件用以消息提示，用户在前端完成某些交互时，在页面弹出的某种反馈。该组件一共有四种类型，info、success、warning、error。与一般的组件不同，该组件调用后，持续一段时间会消失，并且采用函数式调用。函数式调用组件，一般适用于，组件自身相对于屏幕定位，比如Dialog、Message、Pop等。
vue写一个全局Message组件——插件知识
weixin_42565137的博客
08-14 1991
不知道大家在用一些UI框架，比如Element-ui的时候，有没有觉得一些全局组件。this.$message(),this.Toast()等，用起来很爽。他们不像其他的组件，需要去导入，去注册。麻烦的很。 看了Element的源码，自己也撸了一个。其中包括了以前没有接触过的插件知识，哎，感觉自己对Vue的理解还是不够，只停留在了使用的这阶段。需要更多的往深层次的地方去钻。不说废话了，直接上代码。...
【vue3组件封装】Message消息组件
aaaaapipi的博客
10-25 2406
message组件
前端框架Vue3
tainqiuer123的博客
04-09 2330
1、vue介绍 2、vue基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue3.js"></script> </head> <body> <div id="app"> <!-.
手把手从零搭建一个 vue3 组件库 (五)：封装 Message 组件
weixin_43960320的博客
02-07 1204
可以看到抛开ts类型代码还是挺简单的，主要还是理解Transition、createVNode、render的基本使用上面消息框使用Icon组件，vangle中使用了一种便利的方式封装Icon，可直接参考源码完整代码请参考github 地址gitee 地址记得点个星星噢(●’◡’●)
【vue3】命令式组件封装，message封装示例；（函数式组件？）
从今年开始写写博客~~
02-29 1396
仅做代码示例；当然改进的地方还是不少的，仅作为该类组件封装方式的初步启发；理想大成肯定是想要像 `饿了么` 这些组件库一样。
Vue.js 框架源码与进阶 - 封装 Vue.js 组件库
时光海的博客
03-05 377
封装 Vue.js 组件库组件化开发基础概念处理组件的边界情况$attrs / $listeners 组件化开发 基础概念 CDD CDD（Component-Driven Development） 自上而下 从组件级别开始，到页面级别结束 先从相对完的的设计中抽象出来组件，先隔离开发组件然后再开发页面 CDD的好处 组件在最大程度被重用 并行开发 对单个组件的开发使用CDD可以让以页面级开发无法实现的方式在不同团队之间共享任务：开发相对隔离的组件 可视化测试 通过一些工具可以直接
Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
热门推荐
CRPER
11-07 1万+
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理取闹的键盘侠” – 国际新闻版块欢迎你去 “有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,走吧,这里
vue入门，从启动项目开始，做完得物App的用户登录（前端！）
sebeefe的博客
07-31 456
本次项目通过实现得物APP的用户登录/注册，商品列表，商品详情页，商品的下单和支付功能、最后将项目打包后，完成一次完整的项目开发。新用户进入APP可以选择初始页面中的“用户注册”按钮进行注册页面，使用手机号进行注册老用户进入APP后，点击“用户登录”—>登录页面—>输入账号密码即可登录成功之后即可进入商品列表的页面去浏览商品点击商品列表中的商品，进入商品详情页查看商品详情支付后会跳转到支付成功和支付失败页面。...
12个主流Vue3前端框架
烈焰大火龙的博客
10-24 7534
谷歌风格的前端UI，是Vuetify的平替(毕竟Vuetify自动Vue以后就没有官方中文文档了用着还是很不方便)一个老牌的谷歌风格的UI库，Vue2时代是我的最爱，但是3版本还没有更新中文 Sad T^T ~Vant4一个特别好用的移动端UI框架，主打的就是一个按需引用、轻量级，快！一个仅支持Vue3的全新前端UI库，但组件相对其他库更精致齐全。腾讯推出的一套UI框架，包含桌面和移动端等，风格比较统一。一个风格简洁的移动端UI库，看起来好像很不错捏。前端的主流框架很多公司都在用，不多作介绍。
Vue3常用方法和组件
小阮的笔记本
07-10 860
VUE3+TS 在编程时遇到问题的解决办法以及常用组件方法封装
uniapp+vue3+ts开发小程序或者app架构时候的UI框架选型
05-20 3037
很高兴uv-ui是最终的幸运儿。为此我特意去uv-ui官网里面捐赠了一杯咖啡钱给作者，开源不易，要支持一下。
Vue3最佳实践 第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)
zhtbs的博客
09-07 1498
现在常用的前台UI 分别是以下几种，我们将从中间选择介绍几个主流的UI的用于后台的系统搭建与开发。
Vue3框架下的顶尖UI组件库大盘点
Handsome_gir的博客
04-03 3955
推荐几款适合vue3框架的ui组件库，包括适用后台管理及移动端。
9 个值得推荐的 VUE3 UI 框架
Z__7Gk的博客
06-29 5084
本文推荐几个比较流行的 VUE3 UI 框架，同时提供出色的开发人员体验，合理利用，又或者学习借鉴都是不错的选择，排名不分先后。
【VUE3.0】动手做一套像素风的前端UI组件库---Radio
最新发布
qbbmnnnnnn的博客
09-22 1221
本篇复现的组件为radio，日常项目中较为常见的组件，主要涉及到的内容有： 参考NES.css进行基础样式构建，使用css模拟箭头指示器。 点击动效设计，利用animation的animation-timing-function属性模拟指示器闪动效果。 参考组件库Element Plus的设计使用方式，利用vue的slot插槽复现组件调用方式。 设置禁用模式和change事件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qbbmnnnnnn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值