【前端样式】Sweetalert2简单用法

news2024/12/24 11:34:57

1、先安装sweetalert2库：

npm install sweetalert2

2、引用SweetAlert2 库：

import Swal from 'sweetalert2' ；

3、代码拷过去直接去测试，vue代码

<template>
  <div>
   
    <el-button style="color: #C03639" @click="test">测试Swal文本框弹窗</el-button>
    <el-button style="color: #C03639" @click="test2">测试Swal确认操作</el-button>
    <el-button style="color: #C03639" @click="test3">测试Swal 弹窗定时关闭操作</el-button>
    <el-button style="color: #C03639" @click="test4">测试Swal 警告操作</el-button>
    <el-button style="color: #C03639" @click="test5">测试Swal 信息提示操作</el-button>
    <el-button style="color: #C03639" @click="test6">测试Swal 错误提示操作</el-button>
    <el-button style="color: #C03639" @click="test7">测试Swal 多个按钮操作</el-button>
    <el-button style="color: #C03639" @click="test8">测试Swal 自定义操作</el-button>

 </div>

</template>

<script>
import Swal from 'sweetalert2' /
export default {
    name: 'index',
   
    methods: {

         //测试Swal 文本框弹窗
    test(){
      Swal.fire({
        title: '请输入您的名字',
        input: 'text',
        inputPlaceholder: '姓名',
        showCancelButton: true,
      }).then((result) => {
        if (result.isConfirmed) {
          Swal.fire(`你好, ${result.value}!`);
        }
      });
    },
    //测试Swal 确认弹框操作
    test2(){
      Swal.fire({
        title: '确认保存?',
        text: "请确认您要保存这些更改。",
        icon: 'info',
        showCancelButton: true,
        confirmButtonText: '保存',
        cancelButtonText: '取消'
      }).then((result) => {
        if (result.isConfirmed) {
          // 执行保存操作
        }
      });

    },
    //测试Swal 弹框定时取消操作
    test3(){
      Swal.fire({
        title: '操作成功!',
        text: '数据已保存。',
        icon: 'success',
        timer: 2000,
        timerProgressBar: true,
        willClose: () => {
          console.log('弹窗将关闭');
        }
      });

    },
    //测试Swal 警告操作
    test4(){
      Swal.fire({
        title: '警告!',
        text: '您即将离开此页面，未保存的数据将丢失。',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: '继续',
        cancelButtonText: '取消'
      }).then((result) => {
        if (result.isConfirmed) {
          // 执行某个操作
        }
      });

    },
    test5(){
      Swal.fire({
        title: '操作成功!',
        text: '您的数据已成功保存。',
        icon: 'success',
        confirmButtonText: '确定'
      });


    },
    test6(){
      Swal.fire({
        title: '出错了!',
        text: '发生了一些问题，请稍后再试。',
        icon: 'error',
        confirmButtonText: '好的'
      });

    },
    test7(){
      Swal.fire({
        title: '选择一个选项',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: '选项 A',
        cancelButtonText: '选项 B',
      }).then((result) => {
        if (result.isConfirmed) {
          // 处理选项 A
        } else {
          // 处理选项 B
        }
      });

    },
    test8(){
      Swal.fire({
        title: '<strong>你说不会在爱情里犯错</strong>',
        icon: 'info',
        html: '<b>也说过会一直的爱我!</b>',
        showCloseButton: true,
        focusConfirm: false,
        confirmButtonText: '明白了',
      });

    },

    //进入页面 选择性别！
    openBox() {
      Swal.fire({
        title: '选择您的性别',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: '我是男生',
        cancelButtonText: '我是女生',
      }).then((result) => {
        if (result.isConfirmed) {
          // 处理选项 男
          Swal.fire({
            title: '哇靠，你是彭于晏！',
            imageUrl: '/images/pyy.jpg',
            confirmButtonText: '嘿嘿，别夸'
          });
        } else {
          // 处理选项 女
          Swal.fire({
            title: '哇靠，你是刘亦菲！',
            imageUrl: '/images/lyf.jpg',
            confirmButtonText: '这都被你发现啦'
          });
        }
      });
    },

   },

   
</script>