vue界面消息提示弹窗
时间: 2023-09-08 19:16:23 浏览: 178
在Vue中,你可以使用一些库来实现消息提示弹窗。其中比较流行的是`ElementUI`和`Vue-SweetAlert2`。
使用`ElementUI`:
1. 安装ElementUI:`npm i element-ui -S`
2. 在Vue项目的入口文件`main.js`中引入ElementUI:
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
3. 在需要使用消息提示弹窗的组件中,使用`this.$message`方法调用:
```javascript
this.$message({
message: '提示信息',
type: 'success'
});
```
使用`Vue-SweetAlert2`:
1. 安装Vue-SweetAlert2:`npm install vue-sweetalert2 --save`
2. 在Vue项目的入口文件`main.js`中引入Vue-SweetAlert2:
```javascript
import Vue from 'vue'
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
Vue.use(VueSweetalert2);
```
3. 在需要使用消息提示弹窗的组件中,使用`this.$swal`方法调用:
```javascript
this.$swal('提示信息');
```
以上两种方式都可以实现消息提示弹窗的效果,你可以根据自己的需求选择其中一种。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)