vue2封装一个this.$message组件
在 Vue2 中，我们可以创建一个名为 `Message.vue` 的组件文件，然后在该文件中封装一个名为 `this.$message` 的方法。以下是一个简单的示例：
1. 首先，创建一个名为 `Message.vue` 的文件：
```html
<template>
<div class="message" v-if="visible">
{{ message }}
</div>
</template>
<script>
export default {
props: {
message: String,
type: {
type: String,
default: 'success',
validator: function (value) {
return ['success', 'warning', 'info', 'error'].indexOf(value) !== -1;
},
},
},
data() {
return {
visible: true,
};
},
};
</script>
<style scoped>
.message {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
}
</style>
```
2. 然后，在需要使用该组件的页面中，引入并注册 `Message.vue`,并使用 `this.$message` 方法显示消息：
```html
<template>
<div id="app">
<button @click="showMessage">显示消息</button>
</div>
</template>
<script>
import Message from './components/Message.vue';
export default {
components: {
'message': Message,
},
methods: {
showMessage() {
const messageInstance = this.$message({ message: '这是一条消息', type: 'success' });
const closeButton = document.createElement('button');
closeButton.innerText = '关闭';
closeButton.addEventListener('click', function handleClose() {
messageInstance.close();
});
const container = document.createElement('div');
container.appendChild(closeButton);
container.classList.add('message-container');
document.body.appendChild(container);
},
},
};
</script>
```
这样，当用户点击 "显示消息" 按钮时，就会弹出一个包含消息内容的消息框。点击 "关闭" 标签或右上角的关闭按钮可以关闭消息框。
免责声明：
以上内容除特别注明外均来源于网友提问，创作工场回答，未经许可，严谨转载。