CDN方式使用ElementUI的Message组件
ElementUI的Message组件用于在网页中显示消息提示，如成功、警告或错误信息，以下是通过CDN方式引入并使用该组件的方法：
1. 引入Element UI和Vue
需要在HTML文件中引入Element UI的CSS和JS文件，以及Vue的库，可以通过CDN方式引入这些资源：
<!-引入Element Plus CSS --> <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"> <!-引入Vue --> <script src="https://unpkg.com/vue@next"></script> <!-引入Element Plus JS库 --> <script src="https://unpkg.com/element-plus"></script>
确保URL是最新的，以便能够正确加载资源。
2. 创建Vue实例并使用Message组件
创建一个Vue实例并在其中使用Element UI的Message组件，以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Element Plus Demo</title>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<body>
<div id="app">
<button @click="openMessage">显示消息提示</button>
</div>
<!-引入Vue -->
<script src="https://unpkg.com/vue@next"></script>
<!-引入Element Plus JS库 -->
<script src="https://unpkg.com/element-plus"></script>
<script>
const { createApp } = Vue;
const app = createApp({
methods: {
openMessage() {
// 使用ElementPlus全局变量来调用ElMessage组件
ELEMENT.Message.success('成功！');
ELEMENT.Message.warning('警告！');
ELEMENT.Message.info('提示！');
ELEMENT.Message.error('错啦！');
}
}
});
app.mount('#app');
</script>
</body>
</html> 在这个示例中，当用户点击按钮时，会调用openMessage方法，该方法使用ELEMENT.Message来显示不同类型的消息提示。
3. 参数配置
ElMessage接受一个对象作为参数，可以配置消息的各种属性，
message
type：消息类型（如success、warning、info、error）
duration：显示时间（以毫秒为单位）
ELEMENT.Message({
message: '这是一个成功的消息',
type: 'success',
duration: 2000 // 显示2秒后自动消失
}); 4. 注意事项
确保引入的Element UI和Vue版本兼容。
如果遇到样式丢失的问题，检查是否因为手动和自动引入冲突导致的，确保你的引入方式一致，并遵循你所使用的工具或框架的最佳实践。
确保你已经正确引入了Element Plus的样式文件（element-plus/lib/theme-chalk/index.css）。
通过以上步骤，你可以在HTML页面中使用CDN方式引入并使用Element UI的Message组件来显示各种类型的消息提示。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1272863.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复