企业官网建设流程全解析

官网：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>