vue sweetalert提示框和layui-layer提示框

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(左)