vue自己封装组件 vue项目中,vue中如何封装组件
众所周知组件（组件)是vue。j最强大的功能之一，它可以实现功能的复用，以及对其他逻辑的解耦，下面这篇文章主要给大家介绍了关于某视频剪辑软件项目中封装组件的相关资料，需要的朋友可以参考下
目录
前言
如何封装一个烤组件
使用案例
具体实现
总结
前言
随着业务的发展功能性开发已经无法满足我们对于前端的需求，这一篇主要带大家体验一下如何开发一套属于自己的组件库
使用场景：公司内部组件库的开发，个人组件库的开发，与项目解耦，多项目中使用同一组件，只需维护一套组件库
如何封装一个Toast组件
组件说明：
实现提示功能。
效果展示：
实现的功能：
根据某个判断条件或者点击某个按钮，弹出弹框；
可配置位置，类型，样式名等
使用案例
1.简单使用
虚拟机.$toast(网络异常!)
2.使用选择参数
*消息提示信息内容
*持续时间停留时间，单位为毫秒
*位置显示位置：顶部、中部、底部
*类名样式名称
虚拟机.$toast({
消息： 网络异常!,
持续时间：2000年，
位置："中间",
类名："大"
})
3.错误提示
虚拟机.$toast({
消息： 验证码错误!,
持续时间：2000年，
类型："错误"
})
具体实现
首先toast.vue
模板
过渡名称=干杯
div v-show= visible class= toast :class= custom class @ click= handle close
span class= text“{ message } }/span
/div
/过渡
/模板
脚本
导出默认值{
名称："吐司",
道具：{
消息：字符串，//提示信息内容
类名：{ //样式名
类型：字符串，
默认值：""
},
位置：{ //位置：顶部、中部、底部
类型：字符串，
默认值："中间"
},
类型：{ //提示类型：正常、错误
类型：字符串，
默认设置："正常"
}
},
data () {
返回{
//是否显示
可见：假
}
},
计算值：{
//获取样式
customClass () {
let classes=[]
班级。推(吐司-这个。类型)
开关（这个位置){
案例"顶部":
classes.push(is-placetop )
破裂
案例"底部":
classes.push(is-placebottom )
破裂
默认值：
classes.push(is-placemiddle )
}
这个。类名class。推(这个。类名)
返回类
}
},
方法：{
handleClose () {
这个发出(关闭)
}
}
}
/脚本
style lang= scss scoped px 2 rem= false 。烤面包片
位置：固定；
框大小：边框-框；
最小宽度：200像素；
最大宽度：50%;
最大高度：85%;
边距-顶部：0;
填充：18像素30像素
边框半径：10px
背景：rgba(0，0，0，0.7)；
颜色：# fff
文本对齐：居中；
溢出-y:自动；
z指数：2000;文本{
显示：块；
字体大小：16px
行高：1.5;
文本对齐：居中；
自动换行：断字；
}
}。is-placetop {
顶配：50px
左：50%;
transform: translate(-50%，0)；
}。is-placemiddle {
top:50%；
左：50%;
transform: translate(-50%，-50%)；
}。is-placebottom {
底部：50px
左：50%;
transform: translate(-50%，0)；
}。is-place top。toast-pop-enter-active，1000 .is-place top。烤面包-爆米花-叶子-活跃。is-放置中间。toast-pop-enter-active，1000 .is-放置中间。toast-pop-leaf-active {
过渡：不透明度。3s线性，页边距-顶部。3s缓和；
}。is-placetop.toast-pop-enter .is-placetop.toast-pop-leave-to。is-placemiddle.toast-pop-enter .is-放置中间。toast-pop-leaf-to
边距-顶部：30px
不透明度：0;
}。是-放置底部。toast-pop-enter-active，1000 .是-放置底部。toast-pop-leaf-active {
过渡：不透明度。3s线性，边距-底部。3s缓和；
}。is-placebottom.toast-pop-enter .是-放置底部。toast-pop-leaf-to
边距-底部：-30px；
不透明度：0;
}。吐司-错误{
背景：rgba(255，102，104，9);
}
/风格
toastPlugin.js
从“vue”导入某视频剪辑软件
从导入吐司 toast.vue
//吐司构造函数
const toast构造函数=vue。扩展({
扩展：吐司
})
//吐司实例池
let toastPool=[]
/** 获取烤实例（实例池中有从池中取，没有则新建) */
让getInstance=()={
//console.log(toastPool:，toastPool)
if (toastPool.length 0) {
return toastPool.shift()
}
返回新的ToastConstructor({
el: document.createElement(div )
})
}
/** 归还实例到实例池*/
让returnInstance=instance={
如果(实例){
toastPool.push(实例)
//console.log(归还实例：，instance，toastPool)
}
}
/** 文档中移除烤的数字正射影像图节点*/
函数removeDom(事件){
if (event.target.parentNode) {
事件。目标。父节点。移除子事件。目标)
}
}
//关闭
toast构造函数。原型。close=function(){
this.visible=false //不可见
this.closed=true //关闭状态
这个100美元。addevent侦听器( transition end ，removeDom) //动画完成后移除数字正射影像图节点
returnInstance(this) //实例对象归还到实例池，实例可以重复利用
}
//显示烤提示信息
导出默认函数(options={}) {
//显示时间，默认3秒
假设期限=期权。持续时间 3000
let instance=getInstance()
//console.log(instance=，instance)
//显示类型
实例。类型=选项。键入 normal
//显示内容
实例。message=选项类型=== string ？选项：选项。消息
//显示位置：顶部、中部、底部
实例。位置=选项。位置 中间
实例。类名=选项。类名
//移除动画完成事件
实例100美元。removeeventlistener( transitionend ，removeDom)
实例. on(close ，()={
instance.close()
})
//console.log(instance .$el=，实例100万美元)
//将节点添加到文档
document.body.appendChild(实例100万美元)
instance.visible=true
instance.closed=false
//清除定时器
实例.计时器清除超时(实例.计时器)
//设置定时器，关闭烤
instance.timer=setTimeout(()={
//console.log(关闭实例)
！实例. closed实例。关闭()
instance.timer=null
},持续时间)
}
主页。射流研究…
从导入toast插件./plugins/toastPlugin.js
//吐司提示信息插件
Vue.use(ToastPlugin)
总结
到此这篇关于某视频剪辑软件项目中封装组件的文章就介绍到这了，更多相关某视频剪辑软件项目封装组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。