1.sweetalert提示框效果
layui-layer提示框效果
2.安装sweetalert或layui-layer
npm install --save sweetalert
npm install layui-layer --save-dev
3.使用
在main.js里面引入这两个库
// swal提示框
import swal from 'sweetalert';
// layer提示框
import layer from "layui-layer";
注意:layui-layer需要引入jquery,可以在index.HTML中引入
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
在具体组件中使用sweetalert
axios.post('/api/user/save',data)
.then(response =>{
if (response.data === 1){
swal({
title: "保存成功!",
text: "当前用户已更新保存!",
icon: "success",
button: "确定",
});
}else {
swal({
title: "保存失败!",
text: "请重新输入或检查网络环境!",
icon: "error",
button: "确定",
});
}
})
在具体组件中使用layui-layer
在你需要的用这个提示框的标签中加上对应的id
<div id="tips"></div>
js文件中
surePwd() {
if (this.register.password !== this.pwd) {
this.able = '0'
layer.tips('两次密码不一致!', '#tips', {
tips: [1, '#F56C6C'],
time: 4000
});
}else {
this.able = '1'
}
}
提示框显示的位置tips: 1(上),2(右),3(下),4(左)