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

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

梁栋沉

3161人浏览 · 2021-11-27 17:41:35

梁栋沉 · 2021-11-27 17:41:35 发布

无标题

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

参考流程图

部分Demo

在这里插入图片描述

第一部分Githhub代码：https://github.com/Finedl/Vue-Alert/
第一部分
参考第二部分，Github代码：https://github.com/Finedl/vue-simple-alert
第二部分

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^