使用vue2.0怎么对model组件进行封装
本篇文章为大家展示了使用vue 2.0怎么对model组件进行封装，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联建站-云计算及IDC服务提供商，涵盖公有云、IDC机房租用、成都服务器托管、等保安全、私有云建设等企业级互联网基础服务，电话联系：13518219792
单文件组件
使用单文件组件封装model的模板、逻辑和样式，之后就可以在页面中调用此通用组件。
需求
model有两个使用场景：
1、备注/修改密码(简易)：
在屏幕中垂直居中
2、添加/修改/展示信息(复杂)：
距离屏幕顶部200px，内容过长时可滚动。
3、常规要求(共同点)：
标题，关闭icon
点击确定/关闭/遮罩，隐藏model组件
分析上述需求点，得到如下图：
wrapper：负责遮盖屏幕
inner：负责垂直居中/距顶部200px
title：可变化标题
content：可变化的内容区域
方案
1、Prop传参
title(标题)、show(隐藏/显示)、width(宽度)、type(居中/顶部)
2、自定义事件
关闭model
3、slot分发
内容区域可自定义
4、滚动穿透
具体实现
template
{{title}}
script
export default {
name: 'MyModel',
props:
{
title: String,
show: Boolean,
width: Number,
type: String
},
data () {
return {
scrollTop: ''
}
},
watch: {
show: function (val, oldVal) {
function getScrollTop () {
return document.body.scrollTop || document.documentElement.scrollTop
}
if (val) {
// 在弹出层显示之前，记录当前的滚动位置
this.scrollTop = getScrollTop()
let body = document.querySelector('body')
body.className = 'not-scroll'
// 把脱离文档流的body拉上去！否则页面会回到顶部！
document.body.style.top = -this.scrollTop + 'px'
}
}
},
methods: {
close: function (e) {
function to (scrollTop) {
document.body.scrollTop = document.documentElement.scrollTop = scrollTop
}
let target = e.srcElement || e.target
if (target.className === 'model-wrapper' ||
target.className.indexOf('ivu-icon-ios-close-empty') > -1 ||
target.className === 'model-wrapper-top') {
this.$emit('close')
let body = document.querySelector('body')
body.className = ''
// 滚回到老地方！
to(this.scrollTop)
}
}
}
}style
.model-mask {
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(0, 0, 0, .5);
}
/**
* 垂直居中
*/
.model-wrapper {
height: 100%;
text-align: center;
}
.model-wrapper:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.model-container {
position: relative;
display: inline-block;
vertical-align: middle;
background-color: white;
text-align: left;
box-shadow: 0 5px 14px 0 rgba(0,0,0,0.15);
border-radius: 6px;
overflow: hidden;
z-index: 1050;
}
/**
* 距离顶部100px，可滚动
*/
.model-wrapper-top {
position: relative;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
.model-container-top {
margin: 100px auto;
background-color: white;
text-align: left;
box-shadow: 0 5px 14px 0 rgba(0,0,0,0.15);
border-radius: 6px;
overflow: hidden;
}
.close-empty {
position: absolute;
right: 16px;
top: 10px;
overflow: hidden;
cursor: pointer;
z-index: 1100;
}
.model-header {
position: relative;
height: 45px;
line-height: 45px;
padding: 0 20px;
font-size: 14px;
color: #999;
border-bottom: 1px solid #eee;
}
引用
戳我呀
import MyModel from '../componets/model.vue'
export default {
name: 'test',
components: {
MyModel
},
data () {
return {
show: false
}
},
methods: {
/**
* 打开model
*/
closeModel: function () {
this.show = false
},
/**
* 关闭model
*/
showModel: function () {
this.show = true
}
}
}
引用一
this is content area。
引用二
this is content area。
demo
垂直居中
距顶部200px，可滚动
上述内容就是使用vue 2.0怎么对model组件进行封装，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
网页标题：使用vue2.0怎么对model组件进行封装
分享路径：http://cdxtjz.com/article/joiosi.html
