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 国际」许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析