当前位置: 首页 > news >正文

html 中vue3 的setup里调用element plus的弹窗 提示

 引入Elementplus之后,在setup()方法外面导入ElMessageBox

const {ElMessageBox} = ElementPlus

源码 :

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- import Vue before Element --><script src="../js/vue3.3.8/vue.global.js"></script><link rel="stylesheet" href="../js/elementPlus/index.css"><script src="../js/elementPlus/index.full.js"></script><title></title></head>
<body>
<div id="app"><!-- 双大括号语法,可以直接拿到下面data中return 里面的数据 -->{{ message }}<el-button type="success" @click="showModal('吃了吗?')">成功按钮</el-button>
</div>
</body><script>const {createApp, ref} = Vueconst {ElMessageBox} = ElementPlusconst app = createApp({setup() {const message = ref('Hello vue!')const showModal = (message) => {ElMessageBox.alert(message,'提示',{confirmButtonText: '确认',callback: (res) => {console.log('点击了', res)}})}return {message,showModal}}})app.use(ElementPlus)app.mount('#app')</script>
</html>

相关

在vue3项目嵌套 导入老项目 jQuery项目,减少重复开发-CSDN博客 

相关文章:

html 中vue3 的setup里调用element plus的弹窗 提示

引入Elementplus之后&#xff0c;在setup&#xff08;&#xff09;方法外面导入ElMessageBox const {ElMessageBox} ElementPlus 源码 &#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><!-- import Vue before Elemen…...

对话系统之解码策略(Top-k Top-p Temperature)

一、案例分析 在自然语言任务中&#xff0c;我们通常使用一个预训练的大模型&#xff08;比如GPT&#xff09;来根据给定的输入文本&#xff08;比如一个开头或一个问题&#xff09;生成输出文本&#xff08;比如一个答案或一个结尾&#xff09;。为了生成输出文本&#xff0c…...

《面向机器学习的数据标注规程》摘录

说明&#xff1a;本文使用的标准是2019年的团体标准&#xff0c;最新的国家标准已在2023年发布。 3 术语和定义 3.2 标签 label 标识数据的特征、类别和属性等。 3.4 数据标注员 data labeler 对待标注数据进行整理、纠错、标记和批注等操作的工作人员。 【批注】按照定义…...

VGG(pytorch)

VGG:达到了传统串型结构深度的极限 学习VGG原理要了解CNN感受野的基础知识 model.py import torch.nn as nn import torch# official pretrain weights model_urls {vgg11: https://download.pytorch.org/models/vgg11-bbd30ac9.pth,vgg13: https://download.pytorch.org/mo…...

celery/schedules.py源码精读

BaseSchedule类 基础调度类&#xff0c;它定义了一些调度任务的基本属性和方法。以下是该类的主要部分的解释&#xff1a; __init__(self, nowfun: Callable | None None, app: Celery | None None)&#xff1a;初始化方法&#xff0c;接受两个可选参数&#xff0c;nowfun表…...

单片机上位机(串口通讯C#)

一、简介 用C#编写了几个单片机上位机模板。可定制&#xff01;&#xff01;&#xff01; 二、效果图...

初识Flask

摆上中文版官方文档网站&#xff1a;https://flask.github.net.cn/quickstart.html 开启实验之路~~~~~~~~~~~~~ from flask import Flaskapp Flask(__name__) # 使用修饰器告诉flask触发函数的URL&#xff0c;绑定URL&#xff0c;后面的函数用于返回用户在浏览器上看到的内容…...

JeecgBoot jmreport/queryFieldBySql RCE漏洞复现

0x01 产品简介 Jeecg Boot(或者称为 Jeecg-Boot)是一款基于代码生成器的开源企业级快速开发平台,专注于开发后台管理系统、企业信息管理系统(MIS)等应用。它提供了一系列工具和模板,帮助开发者快速构建和部署现代化的 Web 应用程序。 0x02 漏洞概述 Jeecg Boot jmrepo…...

机器学习---模型评估

1、混淆矩阵 对以上混淆矩阵的解释&#xff1a; P&#xff1a;样本数据中的正例数。 N&#xff1a;样本数据中的负例数。 Y&#xff1a;通过模型预测出来的正例数。 N&#xff1a;通过模型预测出来的负例数。 True Positives:真阳性&#xff0c;表示实际是正样本预测成正样…...

【机器学习】应用KNN实现鸢尾花种类预测

目录 前言 一、K最近邻&#xff08;KNN&#xff09;介绍 二、鸢尾花数据集介绍 三、鸢尾花数据集可视化 四、鸢尾花数据分析 总结 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Fil…...

ACL和NAT

目录 一.ACL 1.概念 2.原理 3.应用 4.种类 5.通配符 1.命令 2.区别 3.例题 4.应用原则 6.实验 1.实验目的 2.实验拓扑 3.实验步骤 7.实验拓展 1.实验目的 2.实验步骤 3.测试 二.NAT 1.基本理论 2.作用 3.分类 静态nat 动态nat NATPT NAT Sever Easy-IP…...

MX6ULL学习笔记(十二)Linux 自带的 LED 灯

前言 前面我们都是自己编写 LED 灯驱动&#xff0c;其实像 LED 灯这样非常基础的设备驱动&#xff0c;Linux 内 核已经集成了。Linux 内核的 LED 灯驱动采用 platform 框架&#xff0c;因此我们只需要按照要求在设备 树文件中添加相应的 LED 节点即可&#xff0c;本章我们就来学…...

Qt容器QToolBox工具箱

# QToolBox QToolBox是Qt框架中的一个窗口容器类,常用的几个函数有: ​setCurrentIndex(int index):设置当前显示的页面索引。可以通过调用该函数,将指定索引的页面设置为当前显示的页面。 addItem(QWidget * widget, const QString & text):向QToolBox中添加一个页面…...

华为实训课笔记

华为实训 12/1312/14 12/13 ping 基于ICMP协议&#xff0c;用来进行可达性测试 ping 目的IP地址/设备域名&#xff08;主机名&#xff09; 如果能收到 reply 回复&#xff0c;则表示双方可以正常通信 <Huawei> 用户视图&#xff0c;只能做查询和一些简单的资源调用&…...

基于java 的经济开发区管理系统设计与实现(源码+调试)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。今天给大家介绍一篇基于java 的经济开发区管…...

外包干了3个月,技术退步明显。。。

先说一下自己的情况&#xff0c;本科生生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测…...

详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第一节

关于使用Vue开发鸿蒙应用的教程,我这篇之前的博客还不够完整和详细。那么这次我会尝试写一个更加完整和逐步的指南,从环境准备,到目录结构,再到关键代码讲解,以及调试和发布等,希望可以让大家详实地掌握这个过程。 一、准备工作 下载安装 DevEco Studio 下载地址&#xff1a;…...

R语言对医学中的自然语言(NLP)进行机器学习处理(1)

什么是自然语言(NLP)&#xff0c;就是网络中的一些书面文本。对于医疗方面&#xff0c;例如医疗记录、病人反馈、医生业绩评估和社交媒体评论,可以成为帮助临床决策和提高质量的丰富数据来源。如互联网上有基于文本的数据(例如,对医疗保健提供者的社交媒体评论),这些数据我们可…...

什么是CI/CD?如何在PHP项目中实施CI/CD?

CI/CD&#xff08;持续集成/持续交付或持续部署&#xff09;是一种软件开发和交付方法&#xff0c;它旨在通过自动化和持续集成来提高开发速度和交付质量。以下是CI/CD的基本概念和如何在PHP项目中实施它的一般步骤&#xff1a; 持续集成&#xff08;Continuous Integration -…...

玩转Docker(四):容器指令、生命周期、资源限制、容器化支持、常用命令

文章目录 一、容器指令1.运行2.启动/停止/重启3.暂停/恢复4.删除 二、生命周期三、资源限制1.内存限额2.CPU限额3.磁盘读写带宽限额 四、cgroup和namespace五、常用命令 一、容器指令 1.运行 按用途容器大致可分为两类&#xff1a;服务类容器和工具类的容器。 服务类容器&am…...

小型电动助力播种机【设计说明书+CAD图纸+solidworks三维+STEP+IGS】

小型电动助力播种机是针对传统播种作业效率低、劳动强度大的问题设计的农业机械装置&#xff0c;其核心作用在于通过电动助力系统优化播种流程&#xff0c;实现均匀播种与精准控制。该装置采用模块化设计理念&#xff0c;将动力传输、播种控制与行走机构集成于一体&#xff0c;…...

大数据运维 | 项目一:大数据分布式集群搭建全攻略

版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 前言 作为一名大数据运维工程师&#xff0c;你是否遇到过这样的问题&#xff1a; 问题场景描述1机器A可正常上网&#xff0c;但机器B无法连接网…...

零基础入门:用eNSP搭建USG5500防火墙IPsec虚拟专用网实验环境

从零构建企业级安全隧道&#xff1a;eNSP模拟USG5500防火墙IPsec实战指南 当你第一次听说"IPsec"这个词时&#xff0c;可能会联想到那些科技电影中黑客们建立的加密通道。实际上&#xff0c;IPsec技术离我们并不遥远——它正默默保护着每天数以亿计的企业数据传输。本…...

OpenClaw 的对话系统是否支持对话流程的可视化编辑?如何定义状态机?

关于OpenClaw对话系统是否支持对话流程的可视化编辑&#xff0c;目前公开的技术文档和社区讨论中并没有明确提及这一功能。从技术实现的角度来看&#xff0c;这类系统通常更侧重于底层对话状态管理和自然语言理解引擎的构建&#xff0c;而非面向产品经理或非技术人员的可视化编…...

深入解析FOC电机控制:从理论到实践的无传感器实现

1. 无传感器FOC控制的核心原理 磁场定向控制&#xff08;FOC&#xff09;本质上是在模拟直流电机的控制方式。想象一下小时候玩的四驱车——直流电机通过改变电压就能直接控制转速&#xff0c;简单粗暴。但三相交流电机就像个傲娇的艺术家&#xff0c;需要我们把三相电流"…...

SemanticKITTI数据集评测:DarkNet53Seg、PointNet++等模型谁更强?附复现代码

SemanticKITTI点云语义分割实战&#xff1a;模型选型与性能优化指南 点云语义分割技术正在重塑自动驾驶、机器人导航和三维场景理解等领域的研究范式。作为该领域最具挑战性的基准之一&#xff0c;SemanticKITTI数据集凭借其大规模、高密度标注和真实场景多样性&#xff0c;已成…...

Web地图开发避坑指南:墨卡托和UTM坐标系到底怎么选?

Web地图开发坐标系选择指南&#xff1a;墨卡托与UTM的深度对比 当我们打开手机地图应用查看附近餐厅时&#xff0c;很少有人会思考背后复杂的坐标系转换过程。作为一名长期从事WebGIS开发的工程师&#xff0c;我见过太多项目因为坐标系选择不当而导致定位偏移、性能下降甚至数据…...

LangGPT结构化提示词框架:重新定义AI交互的核心方法

LangGPT结构化提示词框架&#xff1a;重新定义AI交互的核心方法 【免费下载链接】LangGPT LangGPT: Empowering everyone to become a prompt expert!&#x1f680; Structured Prompt&#xff0c;Language of GPT, 结构化提示词&#xff0c;结构化Prompt 项目地址: https://…...

SDMatte镜像结构详解:/opt/sdmatte-web目录布局与模型路径规范说明

SDMatte镜像结构详解&#xff1a;/opt/sdmatte-web目录布局与模型路径规范说明 1. 镜像概述 SDMatte 是一款面向高质量图像抠图场景的AI模型&#xff0c;特别适合处理以下任务&#xff1a; 商品图主体分离透明物体提取&#xff08;如玻璃器皿、薄纱等&#xff09;复杂边缘精…...

ANPC逆变器下垂控制的“阻抗相消术

ANPC-下垂功率均分-两台ANPC三电平逆变器在不同阻感性线路阻抗下实现有功均分与无功均分&#xff0c;采用积分改进法&#xff08;阻抗相消法&#xff09;&#xff0c;电压电流双闭环控制&#xff0c;中点电位平衡控制&#xff0c;SPWM调制。 1.下垂&#xff0c;电压电流双闭环控…...