vue 集成 sweetalert2 提示组件

文章目录

一、项目集成
- 1. 引入方式
- 2. 确认框封装
- 3. 提示框封装
- 4. 确认框使用
- 5. 消息提示框使用
- 6.项目效果

一、项目集成

官网链接：https://sweetalert2.github.io

案例

1. 引入方式

CDN引入方式：

在index.html中全局引入

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

位置：
npm安装方式：

npm install sweetalert2

2. 确认框封装

Confirm = {show: function (message, callback) {Swal.fire({title: '确认 ?',text: message,icon: 'warning',showCancelButton: true,confirmButtonColor: '#3085d6',cancelButtonColor: '#d33',confirmButtonText: '是的, 已确认!'}).then((result) => {if (result.isConfirmed) {if (callback) {callback()}}})}
}

3. 提示框封装

Toast = {success: function (message) {Swal.fire({position: 'top-end',icon: 'success',title: message,showConfirmButton: false,timer: 3000})},error: function (message) {Swal.fire({position: 'top-end',icon: 'error',title: message,showConfirmButton: false,timer: 3000})},warning: function (message) {Swal.fire({position: 'top-end',icon: 'warning',title: message,showConfirmButton: false,timer: 3000})}
};

4. 确认框使用

/*** 点击【删除】*/del(id) {let _this = thisConfirm.show("删除后不可恢复, 确认删除 !", function () {Loading.show()_this.$api.delete('http://127.0.0.1:9000/business/admin/chapter/delete/' + id).then((res) => {Loading.hide()console.log("删除大章列表结果:", res)let resp = res.dataif (resp.success) {_this.list(1)Swal.fire('删除成功!','删除成功！','success')}})})

5. 消息提示框使用

 /*** 点击【保存】*/save() {let _this = thisLoading.show()_this.$api.post('http://127.0.0.1:9000/business/admin/chapter/save', _this.chapter).then((res) => {Loading.hide()console.log("保存大章列表结果:", res)let resp = res.dataif (resp.success) {$("#form-modal").modal("hide")_this.list(1)Toast.success("保存成功！")} else {Toast.warning(resp.message)}})}

6.项目效果

vue 集成 sweetalert2 提示组件相关推荐

如何使用Vue集成其它UI组件？如何阅读UI官网？移动端组件Vant实例教程（熬夜干货）
如何使用Vue集成其它UI组件前言一.Vant是什么? 二.基础环境准备 1.1 了解是根本 1.2 安装 1.3 引入组件 3.1 步骤一 3.2 步骤二 3.3 步骤三二.事件绑定 2.1 ...
vue 集成 sweetalert2 前端校验
文章目录 1. 集成 sweetalert2 2. 校验工具类抽象 3. 校验工具类 4. 使用 5. 效果图 6. 后端集成 1. 集成 sweetalert2 官网:https://sweetal ...
最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评
本文完整版:<最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评> Vue 实时消息提示通知 Vue-notification - 专注实 ...
VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...
前端学习（2687）：重读vue电商网站8之设置弹框提示组件
首先,在 element.js 中导入弹框提示组件,但是它的配置与其它组件不一样,它需要进行全局挂载. 全局导入后,我们就可以在我们的登录组件 login.vue 中通过 this来访问弹框提示组件了 ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
Vue Tooltip封装全局问号提示组件
前言我们经常在网站看到一个小问号鼠标放上去会出现一段文字,移开文字消失.起到一个提示功能. 它其实是Tooltip + icon 实现的,但是有一个小问题,就是修改背景颜色和文字颜色不生效. 其实是 ...
Vue集成百度的Ueditor的前后端实现
找了很多写过的文章,也具体试验过都写的不太完整,这款编辑器借用Vue提供的语法糖实现了数据的双向绑定,不用你自己去getContent或setContent. 对比其他的富文本编辑器,Ueditor的 ...
Vue (十五) --------- UI 组件库
目录一.移动端常用 UI 组件库 1. Vant 2. Vux 3. Cube UI 4. Mint UI 二.PC 端常用 UI 组件库 1. Element UI 2. IView UI 3. ...

vue 集成 sweetalert2 提示组件

文章目录

一、项目集成

1. 引入方式

2. 确认框封装

3. 提示框封装

4. 确认框使用

5. 消息提示框使用

6.项目效果

vue 集成 sweetalert2 提示组件相关推荐

最新文章

热门文章