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>
相关推荐
Spider_Man10 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
小高00710 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
EveryPossible10 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua10 小时前
setup函数相关【3】
前端·javascript·vue.js
neon120411 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy11 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
Bling_Bling_112 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子12 小时前
JS实现丝滑文字滚动
前端·javascript·面试
写不出来就跑路12 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html
叫我阿柒啊13 小时前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3