vue消息框,vue3.0组件通信
在大多数web产品中，全局消息组件占据了大量的使用场景。本文主要介绍在Vue3中实现消息组件的例子。需要的朋友可以和边肖一起学习。
目录
组件设计定义最终组件API定义组件结构模板和样式模板消息图标样式组件脚本创建组件实例1，创建包容器，设置外层的Class属性2，创建实例并挂载到body3，其中定义了卸载和重置top值的方法，实现渲染实例API。在大多数web产品中，全局消息组件占据了很大的使用场景，它经常出现在对用户的反馈、信息提示以及与系统的对话场景中。如果使用传统的组件编写方式，需要引入组件并在组件中注册，然后到模板中以标签的形式调用，通过emit传入自定义道具属性并触发事件。这种部件通常具有以下缺点：
需要经常介绍和注册。
组件需要在模板中用作标签。
需要附加参数来控制组件的属性和状态。
您不能友好地自定义组件的安装位置，这将受到其他组件的影响。
所以对于Message之类的组件，我们希望可以在JavaScript中调用，可以传入自定义参数来控制组件的状态，调用时不需要手动将组件挂载到体尾。如果你用过主流的第三方库，比如ElementUI plus或者Ant Design for Vue，那么你一定很熟悉他们的消息组件API。接下来，让我们用Vue3实现一个全局消息组件。
组件的最终实现效果
组件设计
定义最终的组件 API
实现一个简单的消息组件，包含文本、成功和错误的API类型，也就是说支持直接输入一段文本，还支持自定义消息内容、关闭延时、通过组件的特定选项配置显示关闭按钮等功能。
//消息类型：文本、成功、失败
[文本，成功，错误]
//消息选项(选项)
[字符串]:消息内容
[对象]:消息配置
//选项配置
Text [String] 消息内容
持续时间[数字] 0自动关闭的延迟是毫秒，0不自动关闭。
Close [Boolean] false是否显示关闭按钮。
//呼叫模式
消息[类型](选项)；
调用示例
Message.text(这是消息提示)；
消息.错误({
文本：“网络错误，请稍后再试”，
时长：3000，
关闭：正确
});
定义组件结构
建立消息文件夹的整体结构来存储组件，其中src包含组件的模板、样式和实例文件。在同一层面上，建立index.js，将整个组件公开，从而引入到项目和业务组件中。
-消息
- src
-message . vue//组件模板
-message . less//提供组件样式支持。
-message . js//读取配置并呈现组件实例
-instance . js//组件实例
-index . js//公开组件
模板和样式
模板 Template
模板相对简单。外层由动画组件包裹，消息的显示和关闭由v-show控制。内容部分包括图标、消息文本和可配置的手动关闭按钮。
模板
！-消息列表-
过渡名称=slide-fade
div class= message-container v-show= visibled
！-内容-
div class=消息内容
！-消息类型图标，由消息类型决定，没有为文本类型配置图标-
div class= message-icon v-if= config . icon
i :class=config.icon/i
/div
！-消息文本-
span v-text= config . content /span
！-手动关闭消息-
选项 v-if=！配置.关闭
I class= ri-close-fill @ click= on close /I
/div
/div
/div
/过渡
/模板
消息图标
需要注意的是，图标是由调用应用程序接口中的类型确定，在创建实例的时候确定图标类型，这里引用的是开源图标库混音图标，具体的引用方法这里不多赘述，地址：remixicon.cn/
样式
在无消息中定义样式和动画。
@ radius:4px；
@正常身高：34px。消息{
位置：固定；
top:0；
左：0;
宽度：100%;
文本对齐：居中；
框大小：边框-框；
z指数：9999;
transform:平移z(9999 px)；
填充顶部：28px
过渡：最高0.4秒。消息容器{
边距-底部：14px。消息图标{
显示：内嵌-块；
我{
字体大小：18px
字体粗细：400;
margin-top:-3px；
右边距：6px
显示：内嵌-块；
框大小：边框-框；
垂直对齐：居中；
}。里-复选框-圆圈-填充{
颜色：# 58c05b
}。里-闭合-圆形-填充{
颜色：# FD 4 f 4d
}。消息内容{
显示：内嵌-块；
填充：4px 18px
身高：@ normalHeight
文本对齐：左对齐；
line-height:@正常高度；
字体大小：14px
字体粗细：400;
border-radius:@ radius；
颜色：# 595959;
方框阴影：0 4px 12px rgba(0，0，0，15);
背景：# ffffff。选项{
显示：内嵌-块；
指针事件：全部；
左边距：18px
我{
字体大小：18px
字体粗细：400;
margin-top:-3px；
显示：内嵌-块；
框大小：边框-框；
垂直对齐：居中；
光标：指针；
颜色：# d9d9d9
过渡：颜色0.2秒缓和；
：悬停{
颜色：# ff7c75
过渡：颜色0.2秒缓和；
}
}
}
}
}。滑动-淡入-激活{
过渡：所有。2s缓出；
}。滑动-淡入淡出-保持活动状态{
过渡：所有. 2s放松
}。滑动-淡入-离开，滑动-淡入淡出-向左{
transform:平移y(-20px)；
不透明度：0;
}
}
组件脚本
组件中通过获取传入的配置配置和移动实现渲染和取消挂载，通过奥诺彭和事件方法控制消息打开和手动关闭，具体代码如下：
脚本
从“vue”导入{ reactive，tore fs }；
导出默认值{
道具：{
配置：{ type: Object，default: ()={} }，//消息配置项
移除：{ type: Function，default: ()={} }，//取消挂载回调
},
设置（道具){
恒定状态=反应({
visibled:错误，
})
//打开消息
const onOpen=(config)={
setTimeout(()={
state.visibled=true
}, 10)
//指定时间后移除消息
if (config.duration！==0) {
setTimeout(()={
onClose()；
}，配置。持续时间)；
}
}
onOpen(props.config)
//消息关闭
const onClose=()={
state.visibled=false
setTimeout(()={
道具。移除()
}, 200)
};
返回{
.toRefs(州),
onOpen，
onClose，
};
},
};
/脚本
创建组件实例
接下来将在Instance.js中编写组件调用时创建、挂载、销毁组件等API，头部引入某视频剪辑软件的创建实例方法和上面写好的组件模板：
从“vue”导入{ createApp }
从导入邮件 Message.vue
声明实例操作方法，接受一个消息配置参数稳频发电机（发生器)(恒定频率发生器的缩写)
/**
*消息实例操作
* @param {Object} cfg实例配置
*/
const createInstance=cfg={
const config=cfg {}
//1、创建包裹容器，并设置外层的班级属性、消息计数
//2、创建实例并挂载到身体
//3、实现取消挂载方法，和取消挂载后重新计数
}
导出默认创建一个副本重置记录
1、创建包裹容器，并设置外层的 Class 属性
创建一个差异作为外层容器包裹组件，并设置对应班级属性
让消息节点=文档。createelement( div )
设attr=document。创建属性(“类”)
属性值=消息
消息节点。setattributenode(属性)
消息计数，我们定义一个消息弹框的高度为54 px，在多个消息排队打开的时候，通过设置顶端值使各组件错开。
常数高度=54 //单个消息框高度
const消息列表=文档。getelementsbyclassname( message )
消息节点。风格。top=` ${邮件列表。长度*高度} px ` 1
2、创建实例并挂载到 body
const app=createApp(消息，{
配置，
移除(){
handleRemove()//移除元素，消息关闭后从师上取消挂载并移除
}
})
//挂载实例并追加到身体结尾
app.vm=app.mount(messageNode)
文档。身体。appendchild(消息节点)
app.close=()={
handleRemove()
}
返回应用程序
3、其中定义取消挂载和重新设置 top 值的方法
const handleRemove=()={
app.unmount(messageNode)
文档。身体。移除子节点(消息节点)
resetMsgTop()
}
const resetMsgTop=()={
对于(设I=0；i messageList.lengthi ) {
邮件列表[I]。风格。top=` $ { I * height } px ` 1
}
}
实现渲染实例 API
通过Message.js去读取配置并渲染。
从导入创建实例./Instance.js
/**
* 读取配置并渲染消息
* @param {Object} typeCfg类型配置
* @param {Object/String} cfg自定义配置
*/
函数renderMsg(typeCfg={}，cfg=) {
//允许直接传入消息内容，因此要判断传入的稳频发电机（发生器)(恒定频率发生器的缩写)类型
const是内容=CFG的类型=== string
//整合自定义配置
cfg=isContent？{
内容：cfg
} : cfg
const config=Object.assign({}，typeCfg，cfg) //合并配置
常数{
type=text ，//消息类型
内容= ,//消息内容
持续时间=3000,//自动关闭延迟时间
close=false //是否显示关闭按钮
}=配置
//创建实例
返回createInstance({
类型，
内容，
持续时间，
关闭
})
}
暴露文本、成功、错误等API。
导出默认值{
//纯文本消息
文本(cfg=) {
const textCfg={
类型："文本",
图标：""
}
返回renderMsg(textCfg，CFG)；
},
//成功提示
成功(cfg=) {
常量成功Cfg={
类型："成功",
图标：“ri-复选框-圆形-填充"
}
返回renderMsg(successCfg，CFG)；
},
//错误提示
错误(cfg=) {
常量错误Cfg={
类型："错误",
图标：“ri-闭合-圆形-填充"
}
返回renderMsg(errorCfg，CFG)；
},
}
最后，在最外层的索引。射流研究…中开放这个组件以供调用。
从导入邮件. src/message。js’；
导出默认邮件；
到此这篇关于Vue3实现消息消息组件示例的文章就介绍到这了，更多相关Vue3消息消息组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。