Html使用Vue3+ElementPlus(图标 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></title>
    <script src="/static/js/vue.global.js"></script>
    <link rel="stylesheet" href="/static/element-plus@2.3.6/dist/index.css" />
    <script src="/static/element-plus@2.3.6/dist/index.full.js"></script>
    <script src="/static/js/jquery-2.2.4.js"></script>
    <script src="/static/icons-vue@2.1.0/dist/index.iife.min.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <div v-loading.fullscreen.lock="fullscreenLoading"></div>
</div>

<script>
    const { createApp, reactive, toRefs, ref, onMounted } = Vue;
    const app = createApp({
        setup() {
            //弹窗编辑
            const fullscreenLoading = ref(false);
            onMounted(() => {
				//可查看ElementPlus所有方法
                console.log({ElementPlus})
				ElementPlus.ElMessage({
					message: '警告',
					type: 'warning'
				});
            });
            //end
            return {
                fullscreenLoading
            };
        }
    });
	//使用图标
    app.component('Search',ElementPlusIconsVue.Search)
    app.component('Edit',ElementPlusIconsVue.Edit)
    app.component('Promotion',ElementPlusIconsVue.Promotion)
	//引入ElementPlus
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>

作者:douyuanjun

出处:https://www.cnblogs.com/douyuanjun/p/17492214.html

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   窦戈  阅读(828)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示