在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组件和方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/800125.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

P8749 [蓝桥杯 2021 省 B] 杨辉三角形

[蓝桥杯 2021 省 B] 杨辉三角形 题目描述 下面的图形是著名的杨辉三角形: 如果我们按从上到下、从左到右的顺序把所有数排成一列&#xff0c;可以得到如下数列&#xff1a; 1 , 1 , 1 , 1 , 2 , 1 , 1 , 3 , 3 , 1 , 1 , 4 , 6 , 4 , 1 , … 1,1,1,1,2,1,1,3,3,1,1,4,6,4,1, …

Python | Leetcode Python题解之第14题最长公共前缀

题目&#xff1a; 题解&#xff1a; class Solution:def longestCommonPrefix(self, strs: List[str]) -> str:def isCommonPrefix(length):str0, count strs[0][:length], len(strs)return all(strs[i][:length] str0 for i in range(1, count))if not strs:return &quo…

IP网络对讲广播系统审计

前言 这个系统是前两年在一个内网遇到的&#xff0c;当时顺手试了一个admin登陆之后再没有然后了&#xff0c;最近发现有大佬分享关于这个系统的漏洞&#xff0c;于是就把自己当初看的几个漏洞分享一下&#xff0c;系统比较简单&#xff0c;漏洞点很多&#xff0c;不要做坏事哦…

大商创多用户商城系统 多处SQL注入漏洞复现

0x01 产品简介 大商创多用户商城系统是一个功能强大、灵活多变的新零售电商系统服务商。该系统支持平台自营和商家入驻,实现多元化经营模式,能够全面整合供应商、生产商、经销商和消费者等产业链资源,提高产品多样性,加快资金流动速度,并有助于减少不必要的成本输出。 0…

SAP ABAP CDS-01 ABAP CDS概述

ABAP CDS概述 ABAP核心数据服务(ABAP CDS)是AS ABAP(Application Server ABAP 的缩写,即 ABAP 应用服务器)通用CDS概念的平台独立实现。ABAP CDS使得在标准AS ABAP数据库上定义语义数据模型成为可能。与特定于SAP HANA的变体HANA CDS不同&#xff0c;ABAP CDS独立于数据…

【二分查找】Leetcode 山脉数组的峰顶索引

题目解析 852. 山脉数组的峰顶索引 这到题使用暴力枚举的查找方法发现这段数组是有二段性的&#xff0c;峰顶左边的一段区间是一段递增区间&#xff0c;右边的一段区间是一段递减区间 算法讲解 class Solution { public:int peakIndexInMountainArray(vector<int>&am…

循序表实战——基于循序表的通讯录

前言&#xff1a;本篇文章主要是利用顺序表作为底层&#xff0c; 实现一个通讯录。偏向于应用&#xff0c; 对于已经学习过c的友友们可能没有难度了已经。没有学习过c的友友&#xff0c; 如果顺序表不会写&#xff0c; 或者说没有自己实现过&#xff0c; 请移步学习顺序表相关内…

多线程重点知识(个人整理笔记)

目录 1. java 多线程 1.1. 什么是进程?什么是线程? 1.1.1. 进程 1.1.2. 线程 1.1.3. 多线程 2. 并行和并发有什么区别&#xff1f; 3. 守护线程是什么&#xff1f; 4. 创建线程有哪几种方式&#xff1f; 4.1. 线程的常见成员方法 5. 线程安全问题 5.1. synchronize…

深度探索Sketch:功能、历程、替代软件及技巧一览

Sketch 它是一个适合所有设计师的矢量绘图应用程序。矢量绘图也是设计网页、图标和界面的最佳方式。但除了矢量编辑的功能外&#xff0c;我们还增加了一些基本的位图工具&#xff0c;如模糊和颜色校正。 为什么选择Sketch Sketch 它是为图标设计和界面设计而生的。它是一个优…

LangChain - 文档转换

文章目录 一、文档转换器 & 文本拆分器文本拆分器 二、开始使用文本拆分器三、按字符进行拆分四、代码分割 (Split code)1、PythonTextSplitter2、JS3、Markdown4、Latex5、HTML6、Solidity 五、MarkdownHeaderTextSplitter1、动机2、Use case 六、递归按字符分割七、按tok…

2024年C语言最新经典面试题汇总(21-30)

C语言文章更新目录 C语言学习资源汇总&#xff0c;史上最全面总结&#xff0c;没有之一 C/C学习资源&#xff08;百度云盘链接&#xff09; 计算机二级资料&#xff08;过级专用&#xff09; C语言学习路线&#xff08;从入门到实战&#xff09; 编写C语言程序的7个步骤和编程…

Navicat中导出导入txt结合sql语句实现sqlserver转到Postgis空间数据库中

效果 1、sqlserver数据库中导出 sqlserver数据库字段 2、postgis中导入

C++ //练习 11.20 重写11.1节练习(第376页)的单词计数程序,使用insert代替下标操作。你认为哪个程序更容易编写和阅读?解释原因。

C Primer&#xff08;第5版&#xff09; 练习 11.20 练习 11.20 重写11.1节练习&#xff08;第376页&#xff09;的单词计数程序&#xff0c;使用insert代替下标操作。你认为哪个程序更容易编写和阅读&#xff1f;解释原因。 环境&#xff1a;Linux Ubuntu&#xff08;云服务…

Golang | Leetcode Golang题解之第9题回文数

题目&#xff1a; 题解&#xff1a; func isPalindrome(x int) bool {// 特殊情况&#xff1a;// 如上所述&#xff0c;当 x < 0 时&#xff0c;x 不是回文数。// 同样地&#xff0c;如果数字的最后一位是 0&#xff0c;为了使该数字为回文&#xff0c;// 则其第一位数字也…

antd vue table控件的使用(二)

今天就讲讲Ant Design Vue下的控件 ---- table表格&#xff08;选择和操作&#xff09; 结合项目中的需求&#xff0c;看看如何配置table控件&#xff0c;需求&#xff1a; &#xff08;1&#xff09;根据列表中的选项&#xff0c;单选&#xff1b; &#xff08;2&#xff0…

京东API接口采集商品详情数据(测试入口如下)

京东API接口采集商品详情数据 请求示例&#xff0c;API接口接入Anzexi58 在当今数字化时代&#xff0c;电商平台的API接口成为了获取商品详情数据的重要途径之一。作为中国最大的自营式电商企业&#xff0c;京东提供了丰富的API接口供开发者使用&#xff0c;以便获取京东平台上…

【C++】每日一题 58 最后一个单词的长度

给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大 子字符串 #include <iostream> #include <string>int lengthOfLastWord(std::strin…

计算机网络——38报文完整性

报文完整性 数字签名 数字签名类比于手写签名 发送方数字签署了文件&#xff0c;前提是他是文件的拥有者/创建者可验证性&#xff0c;不可伪造性&#xff0c;不可抵赖性 谁签署&#xff0c;接收方可以向他人证明是他&#xff0c;而不是其他人签署了这个文件签署了什么&#…

day02php环境和编译器—我耀学IT

一、环境介绍 1、web 环境 使用 PHP 需要先安装环境&#xff0c;安装环境比较麻烦&#xff0c;需要安装Web服务、PHP应用服务器、MySQL管理系统。 Web服务&#xff1a;apache 和 nginx PHP&#xff1a;多版本 MySQL&#xff1a;多版本 2、环境集成包 因为多环境、多版本、多系…

Java学习笔记23(面向对象三大特征)

1.5 多态 ​ *多态(polymorphic) ​ *方法或对象具有多种形态&#xff0c;是面向对象的第三大特征&#xff0c;多态是建立在封装和继承基础之上的 1.多态的具体体现 1.方法的多态 &#xff08;重写和重载体现了多态&#xff09; 2.对象的多态 ​ 1.一个对象的编译类型和…