在这篇博文中，我们将学习如何使用sweetalert框架在vuejs应用程序中创建一个弹出窗口。
VueJS Alert组件
Alert是一个简单的弹出式对话框，用于向用户提供有用的信息。
Vuejs是一个流行的渐进式JavaScript框架，用于创建单页应用程序。
Sweetalert是一个香草式的开源轻量级javascript，用于在javascript应用程序中创建一个弹出式通知。这些应用程序可以是Jquery、普通Javascript或基于NPM的应用程序，如ANGular、Vuejs和Reactjs。
使用sweetheart，我们可以实现以下警报通知
- 提供成功、警告、错误和信息消息的警报通知
- 弹出窗口，提示用户输入信息
- 确认提示
- 响应性
有很多的Vuejs插件包装器用于提供sweetalert
在这篇博文中，我们将把vue-sweetalert2集成到基于vuejs的应用程序中。
这篇博文包括两个部分
- 使用vue cli工具创建Vuejs应用程序
- 在Vuejs应用程序中整合Sweetalert的例子
Vue框架提供了vue-cli工具，使用vue create命令从头开始创建vue应用程序。
B:\>vue create vuesweetalertdemo
Vue CLI v3.0.0-rc.8
? Please pick a preset: default (babel, eslint)
Vue CLI v3.0.0-rc.8
✨ Creating project in B:\Workspace\blog\vuesweetalertdemo.
⚙ Installing CLI plugins. This might take a while...
> yorkie@2.0.0 install B:\Workspace\blog\vuesweetalertdemo\node_modules\yorkie
> node bin/install.js
setting up Git hooks
can't find .git directory, skipping Git hooks installation
added 1281 packages in 278.557s
� Invoking generators...
� Installing additional dependencies...
added 3 packages in 18.413s
⚓ Running completion hooks...
� Generating README.md...
� Successfully created project vuesweetalertdemo.
� Get started with the following commands:
$ cd vuesweetalertdemo
$ npm run serve
这将有vuesweetalertdemo应用程序创建与预定义的vue文件夹结构与初始配置。进入应用程序文件夹，运行npm run serve命令来启动vue js应用程序。
安装并保存应用程序的依赖性
要在VueApplicaiton中集成SweetalertJS，进入应用程序根文件夹，可以使用npm或yarn或bower安装vue-sweetalert2包。
npm install -save vue-sweetalert2
or
bower install vue-sweetalert2
or
yarn add vue-sweetalert2
这个命令将做以下事情
- 在你的应用程序中安装vue-sweetalert2，并在应用程序根文件夹中创建node_modules/vue-sweetalert2文件夹
- 在package.json中添加以下条目
"dependencies": {
-----
"vue-sweetalert2": "^1.5.5"
},
为了利用第三方npm包的功能，首先，你需要在main.js中导入VueSweetalert2模块。一旦导入，应用程序就能访问sweetalert对象和它的方法。
main.js
import Vue from 'vue'
import App from './App.vue'
import VueSweetalert2 from 'vue-sweetalert2';
Vue.use(VueSweetalert2);
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
这个例子的应用程序有一个按钮，当点击按钮时，它显示一个带有简单的确定按钮的警报框。App.vue
<template>
<div id="app">
<div> <img alt="Vue logo" src="./assets/logo.png"></div>
<button v-on:click="displaySimplePopup">Click Me</button>
</div>
</template>
<script>
export default {
data() {
return {
msg:''
};
},
methods: {
displaySimplePopup(){
// Use Sweetalert
this.$swal('Welcome to Vuejs Application using Sweetalert');
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
上述代码的输出是
Vuejs中的Sweetalert模态示例
下面这个演示涵盖了以下内容
- 如何显示一个成功的对话窗口？
- 如何显示信息对话窗口？
- 如何显示错误对话窗口？
- 提示用户输入的模态窗口
- 提醒显示位置的改变
- 删除弹出式通知
<template>
<div id="app">
<div> <img alt="Vue logo" src="./assets/logo.png"></div>
<button v-on:click="displaySimplePopup">Click Me</button>
<button v-on:click="infoAlert">Info Popup</button>
<button v-on:click="successAlert">Success Popup</button>
<button v-on:click="errorAlert">Error Popup</button>
<button v-on:click="AlertPassingData">Prompt Popup</button>
<button v-on:click="positionPopup">Custom Position Popup</button>
<button v-on:click="deletePopup">Delete Popup</button>
</div>
</template>
<script>
export default {
data() {
return {
msg:''
};
},
methods: {
displaySimplePopup(){
// Use Sweetalert
this.$swal('Welcome to Vuejs Application using Sweetalert');
},
infoAlert() {
this.$swal({
type: 'info',
title: 'Title Info',
text: 'This is an informational message
});
},
successAlert() {
this.$swal({
type: 'success',
title: 'Title Success',
text: 'This is a successful message'
});
},
errorAlert() {
this.$swal({
type: 'error',
title: 'Error Title ...',
text: 'Error Occurred!',
footer: '<a href>Please click this for more about this error</a>'
});
},
positionPopup() {
this.$swal({
position: 'top-end',
type: 'success',
title: 'Data is saved in Database',
showConfirmButton: false,
timer: 1000
});
},
deletePopup() {
this.$swal({
title: "Do you want to delete this record",
text: "This will be recorded from Database",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#4026e3",
confirmButtonText: "Yes, remove it!"
}).then((result) => { // <--
if (result.value) { // <-- if accepted
del('status-delete/' + id);
}
});
},
AlertPassingData() {
this.$swal({
title: 'Please enter String?',
input: 'text',
inputPlaceholder: 'Enter String here',
showCloseButton: true,
});
},
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
输出是
警报对话框还可以提供静态内容和动态内容。动态内容可以使用$swal函数的HTML属性来放置。也可以包含HTML自定义表单来接受用户的输入 这里是对话框窗口中HTML内容的一个例子
Html contentPopup
htmlContentAlert {
this.$swal({
title: "This is title",
html: "This is html text: bold italic",
confirmButtonText: "V Yes",
});;
},
Ajax演示用法
这是一个异步处理请求的Ajax的例子。这显示了在加载ajax请求处理时的图标图像。
Ajax Popup
ajaxAlert() {
this.$swal({
title: "Asynchronus example",
text: "Demo application for ajax example",
type: "info",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true
}, function () {
setTimeout(function () {
swal("Completed!");
}, 2000);
});
},
