网站开发 外包 哪家,网页欣赏,什么网站可下载可做海报的图片,什么程序做教育网站好前言 在Web开发中#xff0c;用户体验至关重要。有效的信息提示和错误消息对于确保用户更好地理解和操作至关重要。在这个背景下#xff0c;全局弹框提示组件成为了一个非常有用的工具。Vue.js#xff0c;作为当前最受欢迎的前端框架之一#xff0c;为创建灵活、可复用的弹…前言 在Web开发中用户体验至关重要。有效的信息提示和错误消息对于确保用户更好地理解和操作至关重要。在这个背景下全局弹框提示组件成为了一个非常有用的工具。Vue.js作为当前最受欢迎的前端框架之一为创建灵活、可复用的弹框组件提供了强大的支持。本文将介绍一个简单而强大的全局弹框提示组件并探讨它是如何实现的。 组件示例
代码展示
Message.vue
首先让我们看看这个全局弹框提示组件的Vue文件。
// Message.vue
templatediv classmessage v-ifvisibleimg :srcimgSrc /span classtext{{ text }}/span/div
/template
script setup langtsimport { onMounted, PropType, ref } from vue;const props defineProps({text: {type: String,default: ,},type: {type: String as PropTypewarn | error | success,default: warn,},});const visible ref(false);const imgSrc ref(/assets/img/warn.svg);onMounted(() {switch (props.type) {case warn:imgSrc.value require(/assets/img/warn.svg);break;case error:imgSrc.value require(/assets/img/error.svg);break;case success:imgSrc.value require(/assets/img/success.svg);break;default:break;}console.log(imgSrc.value);visible.value true;});
/script
style.message {position: fixed;z-index: 88888;top: 0;color: black;left: 50%;height: 40px;line-height: 40px;top: 80px;transform: translate(-50%);padding: 12px;background-color: white;border: 1px solid rgba(0, 0, 0, 0.1);display: flex;align-items: center;animation: downed 100ms ease;border-radius: 4px;box-sizing: border-box;}keyframes downed {0% {top: 60px;}100% {top: 80px;}}.text {margin-left: 5px;max-width: 400px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
/style整个组件的作用是根据传入的 text 和 type 显示一个带有图片和文本的弹框。其中 type 有三个可能的值warn、error 和 success分别表示警告、错误和成功。根据 type 的值弹框的图片和文本也会有所不同。组件使用了 Vue.js 的响应式系统使 visible、text 和 imgSrc 成为响应式引用从而方便地与父组件共享数据。
config.ts
有两种配置方式根据个人爱好选择即可
第一种
// 实现使用函数调用message组件的逻辑
// 引入 创建虚拟节点 和渲染方法
import { createVNode, render } from vue;
// 引入信息提示组件
import message from ./Message.vue;// 准备dom容器
const div document.createElement(div);
// 添加类名
div.setAttribute(class, message-container);
// 添加到body上
document.body.appendChild(div);// 定时器标识
let timer null;export default ({ type, text }) {const divs: any document.getElementsByClassName(message);if (divs.length 0) {clearTimeout(timer);render(null, div);}// 创建虚拟节点 第一个参数为要创建的虚拟节点 第二个参数为props的参数const vNode createVNode(message, { type, text });// 把虚拟节点渲染DOM容器中render(vNode, div);// 开启定时器移出DOM容器内容clearTimeout(timer);timer setTimeout(() {render(null, div);}, 3000);
};第二种
// 实现使用函数调用message组件的逻辑
// 引入 创建虚拟节点 和渲染方法
import { createVNode, render } from vue;
// 引入信息提示组件
import message from ./Message.vue;// 准备dom容器
const div document.createElement(div);
// 添加类名
div.setAttribute(class, message-container);
// 添加到body上
document.body.appendChild(div);// 定时器标识
let timer null;function sendInfo(type, text) {const divs: any document.getElementsByClassName(message);if (divs.length 0) {clearTimeout(timer);render(null, div);}// 创建虚拟节点 第一个参数为要创建的虚拟节点 第二个参数为props的参数const vNode createVNode(message, { type, text });// 把虚拟节点渲染DOM容器中render(vNode, div);// 开启定时器移出DOM容器内容clearTimeout(timer);timer setTimeout(() {render(null, div);}, 3000);
}
export default {success(text) {sendInfo(success, text);},warn(text) {sendInfo(warn, text);},error(text) {sendInfo(error, text);},
};第一种方法我们创建了一个函数message该函数接受type和text两个参数。我们使用createVNode和render函数从创建一个Message组件的虚拟节点并将其渲染到div元素中。我们还使用了一个定时器来在3秒后移除弹框。
第二种最大的改变是省去了传入的type用户调用时直接传入text即可。
使用
最后我们可以通过调用message函数来显示弹框。例如
第一种
message({ type: error, text: 测试弹框fun });第二种
message.error(测试弹框fun)图片
error.svg
svg xmlnshttp://www.w3.org/2000/svg width1em height1em viewBox0 0 20 20path fillred dM2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zM11.4 10l2.83-2.83l-1.41-1.41L10 8.59L7.17 5.76L5.76 7.17L8.59 10l-2.83 2.83l1.41 1.41L10 11.41l2.83 2.83l1.41-1.41L11.41 10z//svgwarn.svg
svg xmlnshttp://www.w3.org/2000/svg width1em height1em viewBox0 0 20 20path fill#faad14 dM2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zM9 5v6h2V5H9zm0 8v2h2v-2H9z//svgsuccess.svg
svg xmlnshttp://www.w3.org/2000/svg width1em height1em viewBox0 0 48 48path fill#52c41a fill-ruleevenodd dM24 44c11.046 0 20-8.954 20-20S35.046 4 24 4S4 12.954 4 24s8.954 20 20 20Zm10.742-26.33a1 1 0 1 0-1.483-1.34L21.28 29.567l-6.59-6.291a1 1 0 0 0-1.382 1.446l7.334 7l.743.71l.689-.762l12.667-14Z clip-ruleevenodd//svg总结
虽然这个组件的实现原理很简单但是它在用户体验和功能上却非常强大。它使用了Vue.js的响应式系统和动画效果使得弹框在显示和隐藏时都能给用户带来良好的视觉体验。
完整附件点此下载
