Element Plus CDN方式引入组件的问题

cqwcns 发表于 2022-10-3 09:59

使用NPM方式时，调用Element Plus的一些高级组件时，例如消息提示（ElMessage），一般是按需引入，例如这样import { ElMessage } from 'element-plus'。
我有个问题，就是如果使用CDN方式引入，如何能够使用这些组件，因为CDN方式时我们无法直接写import { ElMessage } from 'element-plus'。

请各位大佬指教，我希望在CDN方式引入时使用消息提示（ElMessage），感谢。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<head>
   
   <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
   
   <script src="//unpkg.com/vue@3"></script>
   
   <script src="//unpkg.com/element-plus"></script>
</head>
</head>

<body>
<div id="app">
   <el-button type="primary" @click="open">{{btnText}}</el-button>
</div>
<script>
   App = {
         data() {
            return {
               btnText: '显示信息'
            }
         },
         mounted() { },
         methods: {
            open() {
               ElMessage('this is a message.')
            }
         }

   }
   const app = Vue.createApp(App);
   app.use(ElementPlus);
   app.mount("#app");
</script>
</body>
</html>

Takitooru 发表于 2022-10-3 10:12

参考
https://blog.csdn.net/qq_36759972/article/details/126787241

森岛帆高 发表于 2022-10-3 10:14

本帖最后由森岛帆高于 2022-10-3 10:16 编辑

如图

和vue2基本差不多的

cqwcns 发表于 2022-10-3 12:15

森岛帆高发表于 2022-10-3 10:14
如图

正解。感谢。

dreamrise 发表于 2022-10-3 16:56

{:1_927:} 学到了。

页: [1]

吾爱破解 - 52pojie.cn's Archiver

Element Plus CDN方式引入组件的问题