先上一张效果图:
普通的封装方式
- 我们第一步先要封装这么一个(Toast)组件
这里我把它封装在了src/components/common/toast/Toast.vue
在需要调用的地方引入Toast.vue组件
//Toast.vue
<template>
<div class="toast" v-show="show">
{
{
message}}
</div>
</template>
<script>
export default {
name: "Toast",
props: {
message: {
type: String,
default: ''
},
show:{
type: Boolean,
default: false
}
}
}
</script>
<style scoped>
.toast {
position: fixed;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0,