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>

相关推荐

  1. vuesetup调用哪些生命周期

    2023-12-13 18:52:06       49 阅读
  2. Vue3封装可拖拽

    2023-12-13 18:52:06       50 阅读
  3. vue3 绑定form方式

    2023-12-13 18:52:06       37 阅读
  4. Vue 3 ,defineExpose 在<script setup使用

    2023-12-13 18:52:06       31 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-13 18:52:06       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-13 18:52:06       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-13 18:52:06       82 阅读
  4. Python语言-面向对象

    2023-12-13 18:52:06       91 阅读

热门阅读

  1. anaconda3 升级python版本

    2023-12-13 18:52:06       59 阅读
  2. SQL查询语句

    2023-12-13 18:52:06       52 阅读
  3. 什么是nginx

    2023-12-13 18:52:06       62 阅读
  4. PyQt5程序的打包和发布

    2023-12-13 18:52:06       54 阅读
  5. HSRP热备份路由协议

    2023-12-13 18:52:06       61 阅读
  6. Python实现软件中英文对照表功能

    2023-12-13 18:52:06       54 阅读