Vue知识点-ElementPlus-03提示框+询问+通知

官网：Message 消息提示 | Element Plus

官网：MessageBox 消息弹框 | Element Plus

官网：Notification 通知 | Element Plus

//src/main.ts
import {createApp} from 'vue'
import App from './App.vue'
//引入pinia
import {createPinia} from "pinia"

//引入EP
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//导入所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

let app = createApp(App)
//创建pinia
const pinia = createPinia()
//注册所有图标组件
for(const [key, component] of Object.entries(ElementPlusIconsVue)){
    app.component(key, component);
}
//使用pinia
app.use(pinia)
app.use(ElementPlus)
app.mount("#app")

<template>
  <el-button @click="operationSuccess" type="success">
    <el-icon>
      <Edit/>
    </el-icon>
    <span>编辑</span>
  </el-button>

  <el-button @click="operationFailure" type="danger">
    <el-icon>
      <Close/>
    </el-icon>
    <span>删除</span>
  </el-button>
  <hr>

  <el-button type="warning" @click="openConfirm">确认框</el-button>
  <hr>

  <el-button type="primary" @click="openNotify">通知</el-button>
  <el-button type="primary" @click="openNotify2">通知2</el-button>

</template>

<script lang='ts' setup name="App">
import {ElMessage, ElMessageBox, ElNotification} from 'element-plus';

// 消息框
function operationSuccess() {
  ElMessage({
    type: 'success', // success | warning | info | error  消息的类型
    message: '操作成功',
    duration: 2000,//默认3秒
    showClose: true,//是否展示关闭按钮
    onClose: () => {
      console.log('弹窗关闭后的回调函数')
    }
  })
}

function operationFailure() {
  ElMessage({
    type: 'error', // success | warning | info | error  消息的类型
    message: '操作失败',
    duration: 3000,//默认3秒
    showClose: true,//是否展示关闭按钮
    onClose: () => {
      console.log('弹窗关闭后的回调函数')
    }
  })
}


// 确认框
function openConfirm() {
  return ElMessageBox.confirm('确认删除2？', '标题1', {
    type: 'warning',
    cancelButtonText: '取消3',
    confirmButtonText: '确认4'
  }).then(() => {
    // 用户点击确认时走这个分支
    console.log('确认');
  }).catch(() => {
    // 用户点击取消时走这个分支
    console.log('取消');
  });
}

// 通知
function openNotify() {
  ElNotification({
    type:'warning',
    title: "say hello",
    message: 'Welcome to jikeweilai',
    duration: 3000 // 展示时间，单位毫秒
  });
}

// 通知2
function openNotify2() {
    return ElNotification({
        type: 'success', // success | warning | error | info
        title: 'say hello',
        message: 'Welcome to jikeweilai',
        duration: 3000,
        position: 'top-right'
      });
}
</script>