vue3 封装消息提示组件
时间: 2023-07-12 13:24:49 浏览: 65
好的,针对您的问题,我可以为您提供一个简单的 Vue3 消息提示组件的封装示例。
首先,我们可以创建一个单独的 Message 组件用于显示消息提示,如下所示:
```vue
<template>
<div class="message" :class="type">
<div class="message-content">{{ message }}</div>
<div class="close" @click="close">x</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
props: {
type: {
type: String,
default: 'info'
},
message: {
type: String,
required: true
}
},
setup(props) {
const visible = ref(true);
const close = () => {
visible.value = false;
};
return {
visible,
close
};
}
};
</script>
<style scoped>
.message {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
border-radius: 4px;
color: #fff;
font-size: 14px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s, height 0.3s;
opacity: 1;
}
.message.info {
background-color: #1890ff;
}
.message.success {
background-color: #52c41a;
}
.message.warning {
background-color: #faad14;
}
.message.error {
background-color: #f5222d;
}
.message-content {
display: inline-block;
margin-right: 10px;
}
.close {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
</style>
```
接着,我们可以在我们的 Vue3 项目中创建一个全局的消息提示插件,用于方便地调用 Message 组件。在该插件中,我们可以定义不同类型的消息提示方法,如 success、info、warning 和 error,分别对应不同的消息提示样式和内容。
```javascript
import { createApp } from 'vue';
import Message from './Message.vue';
const messagePlugin = {
install(app) {
app.config.globalProperties.$message = {
success(message) {
showMessage('success', message);
},
info(message) {
showMessage('info', message);
},
warning(message) {
showMessage('warning', message);
},
error(message) {
showMessage('error', message);
}
};
}
};
function showMessage(type, message) {
const messageInstance = createApp(Message, {
type,
message
});
const mountNode = document.createElement('div');
document.body.appendChild(mountNode);
messageInstance.mount(mountNode);
setTimeout(() => {
messageInstance.unmount();
document.body.removeChild(mountNode);
}, 3000);
}
export default messagePlugin;
```
最后,在我们的 main.js 文件中使用该插件即可:
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import messagePlugin from './messagePlugin';
const app = createApp(App);
app.use(messagePlugin);
app.mount('#app');
```
这样,我们就完成了一个简单的 Vue3 消息提示组件的封装。