介绍
本篇文章为大家展示了使用vue 2.0怎么对模型组件进行封装,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强>单文件组件
使用单文件组件封装模型的模板,逻辑和样式,之后就可以在页面中调用此通用组件。
<强>需求
模型有两个使用场景:
1,备注/修改密码(简易):
在屏幕中垂直居中
2,添加/修改/展示信息(复杂):
距离屏幕顶部200 px,内容过长时可滚动。
3,常规要求(共同点):
标题,关闭图标
点击确定/关闭/遮罩,隐藏模型组件
分析上述需求点,得到如下图:
<李>
包装:负责遮盖屏幕
<李>
内部:负责垂直居中/距顶部200 px
<李>
标题:可变化标题
<李>
内容:可变化的内容区域
<强>方案
1,道具传参
标题(标题),显示(隐藏/显示),宽度(宽度)、类型(居中/顶部)
2,自定义事件
关闭模型
3,槽分发
内容区域可自定义
4,滚动穿透
<强>具体实现
模板, & lt; div 类=癿odel-mask", v-show=皊how"比;
& lt;才能div :类=癧type ===, & # 39;顶部# 39;,?,& # 39;model-wrapper-top& # 39;,:, & # 39; model-wrapper& # 39;]“, @click=癱lose"比;
,,& lt; div :类=癧type ===, & # 39;顶部# 39;,?,& # 39;model-container-top& # 39;,:, & # 39; model-container& # 39;]“;
,,,:在
,,,& lt; div 类=癿odel-header"比;
,,,,& lt; span>{{标题}}& lt;/span>
,,,,& lt;小姐:类=癱lose-empty", @click=癱lose"比;
,,,,,& lt;图标
,,,,,,类型=癷vu-icon ivu-icon-ios-close-empty"
,,,,,,大??5“,/比;
,,,,& lt;/i>
,,,& lt;/div>
,,,& lt; div 类=癿odel-body"比;
,,,,& lt; slot> & lt;/slot>
,,,& lt;/div>
,,& lt;/div>
& lt;才能/div>
,& lt;/div>脚本
, export default {
,名字:& # 39;MyModel& # 39;
,道具:
,{
标题:才能,字符串,
,,表明:布尔,
宽度:才能,号码,
,,类型:字符串
},
,data (), {
return {才能
,,,scrollTop: & # 39; & # 39;
,,}
},
,看:{
,,表明:function (val, oldVal), {
,,function getScrollTop (), {
,,,return document.body.scrollTop | |, document.documentElement.scrollTop
,,}
,,if (val), {
,,,//,在弹出层显示之前,记录当前的滚动位置
,,,this.scrollTop =, getScrollTop ()
,,,let body =, document.querySelector(& # 39;身体# 39;)
,,,body.className =, & # 39; not-scroll& # 39;
,,,//,把脱离文档流的身体拉上去!否则页面会回到顶部!
,,,document.body.style.top =, -this.scrollTop +, & # 39; px # 39;
,,}
,,}
},
,方法:{
,,关闭:function (e), {
,,function 用(scrollTop), {
,,,document.body.scrollTop =, document.documentElement.scrollTop =scrollTop
,,}
,,let target =, e.srcElement | |, e。target
,,if (target.className ===, & # 39; model-wrapper& # 39;, | |
,,,,target.className.indexOf (& # 39; ivu-icon-ios-close-empty& # 39;),祝辞,1,| |
,,,,target.className ===, & # 39; model-wrapper-top& # 39;), {
,,,这个。美元发出(& # 39;关闭# 39;)
,,,let body =, document.querySelector(& # 39;身体# 39;)
,,,body.className =, & # 39; & # 39;
,,,//,滚回到老地方!
,,,(this.scrollTop)
,,}
,,}
,}
风格}
, & lt; style scoped lang=皊css"比;
.model-mask {
,高度:100%;
位置:大敌;固定;
,上图:0;
,底部:0;
,左:0;
,右:0;
,z - index: 1000;
背景:大敌;rgba (0, 0, 0, 0。5);
}/* *
,*垂直居中
,*/.model-wrapper {
,高度:100%;
,text-align:中心;
}
.model-wrapper: before {
,内容:““;
,显示:inline-block;
,高度:100%;
,vertical-align:中间;
}
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
