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

这篇具有很好参考价值的文章主要介绍了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} = Vue
  const {ElMessageBox} = ElementPlus
  const 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>

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

相关

在vue3项目嵌套 导入老项目 jQuery项目,减少重复开发-CSDN博客 文章来源地址https://www.toymoban.com/news/detail-759002.html

到了这里,关于html 中vue3 的setup里调用element plus的弹窗 提示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序的弹窗提示

     第一种:弹出提示框,用户可以选择确定或者取消,且都带有回调。  第二种直接弹出成功的 用户无法选择确定与取消   第三种:等待中...   第四种:无任何图标仅仅只是展示    第五种:弹窗提示选项

    2024年02月11日
    浏览(68)
  • 如何实现”系统可能不会保存您所做的更改”的弹窗提示

    在本文框输入内容,关闭页面或者刷新页面时会弹出提示“系统可能不会保存您所做的更改”: 谷歌浏览器效果: Safari浏览器效果:

    2024年02月07日
    浏览(48)
  • 【微信小程序】显示自带的弹窗,包括加载中,成功,错误,提示,警告

    在微信小程序中,可以使用以下方法来显示自带的弹窗: 显示加载中的弹窗: 显示成功的弹窗: 显示错误的弹窗: 显示提示的弹窗: 显示警告的弹窗: 在上述示例中, wx.showLoading() 方法用于显示加载中的弹窗, wx.showToast() 方法用于显示成功、错误、提示和警告的弹窗。这

    2024年02月15日
    浏览(36)
  • vue3自定义dialog createApp setup语法组件使用element

    目录  index.vue mapDialog.js

    2024年02月14日
    浏览(44)
  • 基于element-ui el-dialog组件封装,可缩放+可移动的弹窗组件

    源码下载 改组件继承el-dialog组件百分之95属性,可直接对el-dialog进行替换。在项目中我的命名为: vue代码 :搞成组件,路径随意,推荐统一放在组件目录下 拖动及缩放操作js代码: 将skdialog.js注册为指令: 目录: 指令使用:(v-指令名称(SkDialogDrag)) 效果图: 注:吃水

    2024年02月03日
    浏览(59)
  • 在uniapp vue3 setup语法糖中调用onLoad、onShow等生命周期

    从 @dcloudio/uni-app 导出 可导出项:

    2024年02月16日
    浏览(45)
  • vue3和element plus踩坑

    1.有说vue版本有两个,但检查之后发现只有一个,且为vue3的版本 2.也有说是因为命名的问题,组件名和页面名一致 最后发现是因为 在main.js里面引入element plus 使用这种use方式会报错,虽然也不知道为什么 改为以下这种写法之后就没有报错了 但改为这种写法却引入失败 使用组

    2024年02月11日
    浏览(34)
  • 【vue3项目初始化配置】vue3 + element plus

    项目初始化是开发过程中很重要的一个环节,本篇博客带大家从零开始创建并初始化一个vue3项目,文章详细介绍了每个步骤,希望能帮助刚接触开发的小伙伴。 目录 一.创建项目 二.安装插件  ​编辑 ​编辑三.安装依赖 ​编辑 ​编辑四.配置项目 配置vu.config.js文件  配置

    2024年01月18日
    浏览(71)
  • Vue3 - Element Plus 去除下拉菜单周围出现黑色边框轮廓,当用鼠标移入和点击聚焦时就会出现 “黑边“ 的情况,无论里面是什么 HTML 元素和组件都会由此问题(完美解决方案)

    在 Element Plus 组件库中,使用 dropdown 下拉菜单时鼠标点击或移入时周围出现黑色边框问题。 本文 实现了 vue3+element plus 项目开发中,隐藏下拉菜单 el-dropdown-menu / el-dropdown-item 周围的边框, 如下图所示,当鼠标移入(hover)和点击时就会围绕一圈黑色边框,但通过本文的方案

    2024年02月09日
    浏览(84)
  • vue3使用element-plus

    element-ui 是配合 vue2 使用,element-plus 是配置 vue3 使用的 1. 包管理器的方式 如果是使用 webpack 或者 vite 打包工具新建的项目 2. 浏览器直接导入 直接通过浏览器的 HTML 标签导入 Element Plus,然后就可以使用全局变量 ElementPlus 1. 导入全部组件且注册所有的图标 声明使用 ElementPl

    2024年02月08日
    浏览(73)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包