在html页面中引入的element-plusMessage 消息提示用法

步骤 1: 引入Element Plus的CSS和JS

你需要从CDN或者其他来源获取Element Plus的CSS和JS文件的链接,并将它们添加到你的HTML文件中。以CDN为例:

复制代码
<!-- 引入Element Plus CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<!-- 引入Vue -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入Element Plus JS库 -->
<script src="https://unpkg.com/element-plus"></script>

请注意,这里的URL可能随着Element Plus和Vue的版本更新而改变,所以请根据需要查找最新的链接。

步骤 2: 使用Element Plus组件

接下来,在你的HTML文件中,你可以开始使用Element Plus的组件了。但是,由于你是在直接通过<script>标签引入Vue和Element Plus,你需要以全局变量的方式来使用它们。

以下是一个简单的示例,展示如何使用ElMessage来显示一个消息提示:

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Element Plus Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<body>
    <div id="app">
        <button @click="openMessage">显示消息提示</button>
    </div>

    <!-- 引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- 引入Element Plus JS库 -->
    <script src="https://unpkg.com/element-plus"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({
            methods: {
                openMessage() {
                    ElementPlus.ElMessage.success('成功!');
                    ElementPlus.ElMessage.warning('警告!');
                    ElementPlus.ElMessage.message('提示!');
                    ElementPlus.ElMessage.error('错啦!');
                }
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

当点击按钮时,会调用openMessage方法,该方法进而调用ElementPlus.ElMessage.success来显示一个成功的消息提示。

请注意,由于在这种情况下Element Plus是作为全局对象ElementPlus引入的,所以你需要通过ElementPlus这个全局变量来访问所有的Element Plus组件和方法。

相关推荐
水冗水孚10 分钟前
React中使用map+area标签实现img图片特定区域标记功能(可用Photoshop精准拾取对应点位)
react.js·html·photoshop
井柏然18 分钟前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
昔冰_G1 小时前
Vue内置组件KeepAlive——缓存组件实例
vue.js·缓存·vue3·vue2·keep-alive·vue组件缓存·vue内置组件
IT_陈寒1 小时前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
aklry1 小时前
elpis之动态组件机制
javascript·vue.js·架构
井柏然1 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊2 小时前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang2 小时前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..2 小时前
通过git拉取前端项目
java·前端·git·vscode·拉取代码
智能化咨询2 小时前
玩转ClaudeCode:通过Chrome DevTools MCP实现高级调试与反反爬策略
前端·chrome·chrome devtools