先来看最终效果是怎样的:
我们会封装一个像?Element UI 一样的消息提示框组件, 用函数调用的方法来将消息提示框组件显示到页面
this.$message({
message: '恭喜你，这是一条成功消息',
type: 'success'
});大致步骤:
1. 首先需要完成消息提示框组件的基础布局(主要由一个i标签和span标签组成)
2. 通过 css 样式来改变消息提示框组件的颜色和字体图标的样式
3. 我们需要封装一个函数, 主要是将消息提示框组件变成一个虚拟节点; 再将此虚拟节点动态的添加到一个真实的 DOM 对象里面去
4. 我们需要提供两种调用此函数的方式, 第一种是组合式 api 的方法; 第二种是像 Vue2 那样使用 this 来进行调用函数
第一步:
完成消息提示框的基本布局
<template>
<div class="xtx-message">
<i class="iconfont"></i>
<span class="text"></span>
</div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
name: 'XtxMessage',
setup () {
}
}
</script>
<style scoped lang="less">
.xtx-message {
width: 300px;
height: 50px;
position: fixed;
z-index: 9999;
left: 50%;
margin-left: -150px;
top: 25px;
line-height: 50px;
padding: 0 25px;
border: 1px solid #e4e4e4;
background: #f5f5f5;
color: #999;
border-radius: 4px;
i {
margin-right: 4px;
vertical-align: middle;
}
.text {
vertical-align: middle;
}
}
</style>
第二步:
通过 css 样式动态的控制消息提示框组件的颜色和字体图标的样式
实现思路:
1. 我们需要将所有会出现的颜色(css样式), 通过一个对象列举出来
2. 通过父组件传入的数据(type), 拿着 type 数据去我们定义的这个对象里面找; 将对应的样式提取出来
3. 通过 style 属性动态将提取的样式显示在外层的 div 标签上面, 当然 icon 字体图标也需要跟着改变
此组件封装一共提供了三种样式
- 成功 success
- 失败 error
- 警告 warning
<template>
<Transition name="down">
// 因为我们在setup里面定义的style本来就是一个对象
// 所以:style="style[type]"不用加 "{}" 直接使用
<div class="xtx-message" :style="style[type]">
// 动态的添加class类有两种方法, 第一是对象; 第二是数组
// 对象的方法是需要判断的, 为true就添加; 否则不添加
// 数组的方式不需要判断, 直接添加
<i class="iconfont" :class="[style[type].icon]"></i>
<span class="text">{{text}}</span>
</div>
</Transition>
</template>
<script>
export default {
name: 'XtxMessage',
props: {
text: {
type: String,
default: ''
},
type: {
type: String,
// warn 警告 error 错误 success 成功
default: 'warn'
}
},
setup () {
// 定义一个对象，包含三种情况的样式，对象key就是类型字符串
const style = {
warn: {
icon: 'icon-warning',
color: '#E6A23C',
backgroundColor: 'rgb(253, 246, 236)',
borderColor: 'rgb(250, 236, 216)'
},
error: {
icon: 'icon-shanchu',
color: '#F56C6C',
backgroundColor: 'rgb(254, 240, 240)',
borderColor: 'rgb(253, 226, 226)'
},
success: {
icon: 'icon-queren2',
color: '#67C23A',
backgroundColor: 'rgb(240, 249, 235)',
borderColor: 'rgb(225, 243, 216)'
}
}
return { style }
}
}
</script>
<style scoped lang="less">
......
</style>
?
第三步:
我们会封装一个函数(message), 用户可以使用函数一样; 需要时就调用显示消息提示框组件
思路分析:
1. 导入封装好的消息提示框组件
2. 导入创建虚拟节点的方法(createVNode)和 render 函数
3. 创建一个真实的 DOM 对象, 给这个 DOM 对象加上一个 class 类
4. 向外默认导出一个函数, 此函数需要接收消息提示框组件的父组件传入的 props 数据
5. 将导入的消息提示框组件变成虚拟节点
6. 使用 render 函数将虚拟节点插入到真实的 DOM 对象里面
7. 消息提示框组件并不是一直显示在页面, 定义定时器; 在3秒之后将消失提示框组件销毁
8. 给消息提示框组件加上一个过渡效果
// 导入需要变为虚拟节点的组件
import XtxMessage from './xtx-message.vue'
// 导入创建虚拟节点方法和render函数
import { createVNode, render } from 'vue'
// 创建一个真实的DOM节点
const div = document.createElement('div')
// 给这个DOM节点加上一个class类
div.setAttribute('class', 'xtx-message-container')
// 将这个DOM节点插入到body标签中
document.body.appendChild(div)
let timeId = null
// 向外默认导出一个函数
export default (props) => {
// 将消息提示框组件变为一个虚拟节点
// vnode的第一个参数是对应组件, 第二个参数是需要的props属性
const vnode = createVNode(XtxMessage, props)
// 将虚拟节点插入到正式的DOM节点中
render(vnode, div)
if (timeId) {
clearTimeout(timeId)
}
timeId = setTimeout(() => {
// 将div元素里面内容变为null就会销毁
render(null, div)
}, 3000)
}
让 Transition 组件的过渡效果实现, 有两个条件:
1. 组件的创建和效果
2. 组件的显示和隐藏
所以, 我们定义一个变量 show , 在组件被挂载了之后; 就让其显示
这样 Transition 组件的过渡效果就会实现?
<template>
<Transition name="down">
<div class="xtx-message" :style="style[type]" v-show="show">
<i class="iconfont" :class="[style[type].icon]"></i>
<span class="text">{{text}}</span>
</div>
</Transition>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
name: 'XtxMessage',
props: {
......
},
setup () {
......
const show = ref(false)
onMounted(() => {
show.value = true
})
return { style, show }
}
}
</script>
<style scoped lang="less">
.down {
&-enter {
&-from {
transform: translate3d(0,-75px,0);
opacity: 0;
}
&-active {
transition: all 0.5s;
}
&-to {
transform: none;
opacity: 1;
}
}
}
......
</style>
第四步:
提供两种调用方式, 组合式 api 和 this 调用的方式?
思路分析:
1. 组合式 api 也就是 Vue3 的方法, 直接将 message 函数导入; 然后调用即可
2. 将 message 函数追加到 app 的原型里面, 这样可以在 created 里面使用 this 来调用(但是不建议组合式 api 和选项型 api 混合使用)
3. 直接在 setup 里面调用此函数
import Message from '@/components/library/message.js'
export default {
install (app) {
// 将Message函数追加到app的原型上
// key值为$Message
app.config.globalProperties.$Message = Message
}
}?组合式 api 调用方式:
<script>
import Message from '@/components/library/message'
export default {
name: 'LoginForm',
setup () {
Message({ text: '提示信息' })
return { }
}
}
</script>?this 调用方式:
<script>
export default {
name: 'LoginForm',
setup () {
},
created () {
this.$Message({ text: '提示信息' })
}
}
</script>?组合式 api 中使用 "this" :
<script>
import { getCurrentInstance } from 'vue'
export default {
name: 'LoginForm',
setup () {
// 这里的proxy就相当于this
// 可以直接当this来使用
const { proxy } = getCurrentInstance()
proxy.$Message({ text: '提示信息' })
}
}
</script>?