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>
相关推荐
一只小风华~9 分钟前
学习笔记:Vue Router 中的嵌套路由详解[特殊字符]概述
前端·javascript·vue.js
一只小风华~21 分钟前
Vue Router 命名路由学习笔记
前端·javascript·vue.js·笔记·学习·ecmascript
对岸住着星星1 小时前
vue3+ts实现拖拽缩放,全屏
前端·javascript
珍宝商店2 小时前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
C++chaofan2 小时前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family2 小时前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
_AaronWong3 小时前
多页面应用登录状态共享:基于弹出窗口的通用解决方案
前端·javascript·vue.js
陈卿然3 小时前
一文通关JavaScript:从基本语法到TypeScript
javascript
小菜全3 小时前
《WebAssembly:前端开发的新可能》
前端·javascript
南风木兮丶4 小时前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js