Vue设置漂亮的alert、confirm、自定义提示

最新推荐文章于 2025-10-09 19:42:16 发布
原创 最新推荐文章于 2025-10-09 19:42:16 发布 · 3.4k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#npm #html #vue.js

无标题

如果你想学习如何使用Vue创造出漂亮的Alert, 可以仔细阅读这篇文章，了解一下。该效果参考链接: 原官网。
这个样式还是蛮不错的，而且可以根据源代码自定义效果，国内相关的使用的文章和项目很少，但有两点主要问题：该效果为英文显示，像如何修改Alert中“OK”、“Cancel”变成“好的”、“取消”这种的没有解释，一是使用的人真的不多，原Github上使用的才几百+。第二点是官网样例都是Typescript的，使用Vue框架的一般都是用Javascript等等，博主也是搞了几个小时才弄懂应该怎么修改代码使该效果可以应用到自己的项目中。

参考流程图

Created with Raphaël 2.3.0
最低0.47元/天 解锁文章
梁栋沉
关注
Vue封装弹框组件(定义在原型上)
weixin_45237990的博客
03-04 1257
Vue封装弹框组件(定义在原型上) 如果需要设置 全局弹框，在main.js中，Vue实例化的代码里添加。 防止污染全局作用域,可以通过在原型上定义它们使其在每个Vue页面中可被调用。 下面是组件效果图 1.我们在components文件夹下创建/qaconfirm/qaconfirm.vue <template> <div class="mack" v-if="isShow"> <div class="tipbox"> <div class="tit
好看好用的alert提示框
09-01
组件名称：ymPrompt消息提示组件 2.0 =============================================================================== 组件说明：在web开发中，对于浏览器默认的消息提示框（如alert,confirm等）外观无法控制，为了实现更好的界面效果，于是模拟系统的消息提示框实现了该组件。在外观上可以通过css进行完全的控制。 =============================================================================== 组件功能介绍： 1、调用方式简单，直接使用ymPrompt.alert()的方式调用，传入相应的参数即可。 2、兼容IE6.0+、FF1.5+、Opear9+（在Opear下显示有一个小缺陷），兼容HTML4/XHTML1.0页面渲染模式。 3、完全的CSS皮肤定制功能，所有外观包括显示图标/关闭按钮等都可以通过css设置。目前提供了五种皮肤，Vista、QQ、dmm-green、ExtBlue和BlackColl。有兴趣可以修改样式表文件定义新的皮肤。 4、提供四种消息类型。分别为消息提示、成功信息、错误信息、询问信息。 5、弹出消息框时屏蔽页面其它元素的操作，自动隐藏页面select及iframe下select（无限级select隐藏），并遮罩iframe等元素。 6、页面select控件状态还原时保持原状态，即如果原来select就是隐藏的，则消息框弹出并关闭后该select仍保持隐藏状态，而只显示原本显示的select。 7、消息组件弹出时屏蔽除Tab和回车外的几乎所有键盘操作（包括F5），“消息确认框”支持“tab键/左右方向键”切换确定/取消焦点。 8、可以页面加载的任意时间调用，如页面初始化时调用，页面加载完成后调用。 9、支持通过JSON和传统的参数传入方式。如ymprompt.alert('消息内容',300,200,'消息标题',handler)和ymprompt.alert({message:'消息内容',width:300,height:200,title:'消息标题',handler:handler})，这两种写法是等价的。 10、只需要一个回调函数，可捕获确定、取消及关键按钮的点击事件。函数改变了1.0版需要对确定和取消按钮分别写回调函数及不支持关闭事件的缺陷， 11、完全的封装，对外只暴露一个ymPrompt变量，有效防止与使用者程序变量的冲突。 12、程序(js)与样式(css)的完全分离，取消了1.0中自动加载css的功能，用户可根据需要加载对应css样式表单，降低了对样式配置的复杂度。
vue小知识点：删除前的提示（confirm的使用）
最新发布
2201_75691491的博客
10-09 198
vue删除某条数据前的提示确认
完美的alert美化
热门推荐
windy1001的专栏
09-13 2万+
默认的alert总是在好看的样式下显得格格不入，所以在网上搜寻良久，终于找到了一个完美的美化方案。体验请点我 一、引入js和css文件 二、js调用替代alert 一、引入js和css文件 1、直接在head引入 &lt;link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetaler...
vue弹窗消息组件练习2
章鱼no丸子
05-24 1460
本来打算写一个那种提示完了自动消失的弹窗的，但是没有想好淡入淡出的效果。所以暂时算是半成品。练习代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ys-alert-component</title> <style> input { bor
Vue3警告提示（Alert）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
07-18 5969
警告提示，展现需要关注的信息，支持：五种类型；无边框；可关闭；辅助性文字介绍；辅助图标；自定义图标；自定义关闭文字；自定义操作项；自定义主题色等；总之，功能丰富，简单易用，总能满足你的想象😁😁
vue弹出alert_Vue实现移动端 message-box 与 alert 弹框@郝晨光
weixin_42327743的博客
01-30 1841
GIF.gif前言最近在做移动端的项目，需要制作移动端的alert弹框和message-box提示信息；之前使用Vue框架的element-ui时，就记得element-ui的弹框，今天深入的研究了一下源码，然后简单制作了一点小demo用到的知识点Vue组件的定义，Vue的extendVue.extend(options)options参数是一个对象，一个Vue组件配置项的对象，例如// 创建一个...
Vue封装一个自己的组件(Alert信息提示框)
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-02 5026
前言： 在项目中经常遇到提示信息组件，我们·一般会用ui库来做。但是当ui库无法满足自己的需求（比如自定样式，ui库的样式很难改变）。下面就是简单封装一个自己的Alert信息提示框。 一、实现思路 1.我们要做得是alert组件所以要预设几个字段 title -标题 message -提示信息 duration -显示时间 2.给出创建组件的方法 3.挂载到全局vue实例 4.调用 二、实现过程 1.创建一个ui组件（Alert） <template> &lt...
js写的一个好看的Alert
lipingqingqing的专栏
08-11 3803
Code: html>   head>      title>       title>      style type="text/css">          *{               margin:0;padding:0;           }       .STYLE1 {c
SweetAlert Vue非常精美的提示,对话框 值得收藏
09-20 486
一, 安装依赖 npm install --save sweetalert 二, main.js 全局引入 import swal from 'sweetalert'; 三, 使用组件 swal({ title: "Good job!", text: "You clicked the button!", icon: "success", ...
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
10-18
在本例中，涉及到开发自定义组件 Alert、Confirm、Toast和Prompt。 2. 移动端弹窗组件介绍： - Alert：通常用于向用户显示一些紧急或重要的提示信息。用户在看到提示之后只有一种操作，即关闭对话框。 - Confirm...
超漂亮的弹出框,alert,confirm,AJAX弹出层有一套自己的统一风格
12-17
超漂亮的弹出框,alert,confirm,AJAX弹出层有一套自己的统一风格
vue.extend实现alert模态框弹窗组件
08-27
主要为大家详细介绍了vue.extend实现alert模态框弹窗组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue组件之Alert的实现代码
12-29
前言 本文主要Alert 组件的大致框架， 提供少量可配置选项。 旨在大致提供思路 Alert 用于页面中展示重要的提示信息。 templat模板结构 <template> <div v-show=visible class=Alert> <i v-show=closable class=iconhandle click=close></i> <slot></slot> </div> </template> 大致结构 alert框，icon图标， slot插值 （其他样式颜色选项…） 如果需要动画 可以在外层包上Vue内置组件trans
【JavaScript源代码】vue自定义弹框效果(确认框、提示框).docx
12-29
本实例展示了如何在Vue项目中实现一个自定义的弹框组件，该组件可以根据传入的`type`参数来区分是确认框还是提示框。 首先，我们看到组件的模板部分，使用了Vue的`<template>`标签来定义组件的结构。在这个模板中，...
14-alert\confirm\prompt\自定义弹窗
学习&记录
05-29 1028
由于alert弹窗不美观，现在大多数网站都会使用自定义弹窗，使用selenium自带的方法无法处理，此时就需要通过JS代码来处理了。。上图中的这种蓝色弹窗就是现在主流的表现形式，处理这种弹窗可以利用JS代码进行处理，这种元素对象有一个display属性，可以设置元素是否显示。
封装confirm（Vue3+Ts）
HBR666_的博客
12-15 1211
通过showConfirm函数 传递过来参数，在调用时通过createApp挂载组件，并传递过去参数，组件进行接收和渲染，当点击确定和取消时卸载该组件，.then 和.catch执行相关确定取消的逻辑。该期末考试了，也该复习复习知识点了不然包挂科的，然后下周还有一次面试，Vue也该复习复习了，虽然写过一个项目了，但是感觉对Vue的一些用法还是不太熟悉。首先要进行调用函数进行传参的操作，而且组件还要接收，那怎么才能只在调用函数的情况，没有父组件子组件这种关系进行支撑的情况下对一个组件进行传参？
VUE3（二十四）自定义alert弹窗组件
camellia的博客
04-19 3832
我这里自定义了几个alert弹窗组件： 1：带有确定取消的alert弹窗组件：效果如下图所示 代码： /** * 自定义公共函数 */ const utils = { /** * @name: 自定义alert(确定，取消) * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-23 * @param: data string 显示的文字 * @par
推荐使用：Vue Simple Alert - 让你的Vue应用交互更添优雅！
gitblog_00967的博客
08-16 1009
推荐使用：Vue Simple Alert - 让你的Vue应用交互更添优雅！ 在开发Vue应用程序时，处理用户交互和通知常常是必不可少的一环。今天，我们来挖掘一个简洁而强大的工具——Vue Simple Alert，它为Vue.js应用带来了一套轻量级的提示解决方案，让警报、确认和输入对话框的实现变得前所未有的简单。 项目介绍 Vue Simple Alert是一个基于SweetAlert2构建...
Vue实现自定义Confirm模态框组件详解
本文主要介绍了如何在Vue项目中实现一个自定义的confirm模态框组件，以满足项目中对不同类型的提示对话框需求，如alert与confirm的差异化设计。组件的结构被精心设计，以提供清晰的用户体验。 1. **组件结构**： -...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值