未加星标

vue 2.0封装model组件的方法

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

本文介绍了vue 2.0封装model组件的方法,分享给大家,希望对大家有所帮助

单文件组件

使用单文件组件封装model的模板、逻辑和样式,之后就可以在页面中调用此通用组件。

vue 2.0封装model组件的方法

需求

model有两个使用场景:

1、备注/修改密码(简易):
在屏幕中垂直居中
2、添加/修改/展示信息(复杂):
距离屏幕顶部200px,内容过长时可滚动。
3、常规要求(共同点):
标题,关闭icon
点击确定/关闭/遮罩,隐藏model组件

分析上述需求点,得到如下图:

vue 2.0封装model组件的方法

wrapper:负责遮盖屏幕
inner:负责垂直居中/距顶部200px
title:可变化标题
content:可变化的内容区域

方案

1、Prop传参
title(标题)、show(隐藏/显示)、width(宽度)、type(居中/顶部)
2、自定义事件
关闭model
3、slot分发
内容区域可自定义
4、滚动穿透

具体实现

template

<div class="model-mask" v-show="show">
<div :class="[type === 'top' ? 'model-wrapper-top' : 'model-wrapper']" @click="close">
<div :class="[type === 'top' ? 'model-container-top' : 'model-container']"
:style="{width:width + 'px'}">
<div class="model-header">
<span>{{title}}</span>
<i class="close-empty" @click="close">
<Icon
type="ivu-icon ivu-icon-ios-close-empty"
size="25" />
</i>
</div>
<div class="model-body">
<slot></slot>
</div>
</div>
</div>
</div>

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

<style scoped lang="scss">
.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;
}
</style>

引用

<button type="button" @click="showModel">戳我呀</button>
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
}
}
}

引用一

<my-model title="标题" :width="400" :show="show" v-on:close="closeModel">
<!-- slot -->
<div class="tips">
<p>this is content area。</p>
</div>
</my-model>

引用二

<my-model type="top" title="标题" :width="400" :show="show" v-on:close="closeModel">
<!-- slot -->
<div class="tips">
<p v-for="i in 50">this is content area。</p>
</div>
</my-model>

demo

垂直居中

vue 2.0封装model组件的方法

距顶部200px,可滚动

vue 2.0封装model组件的方法
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 需求
分页:12
转载请注明
本文标题:vue 2.0封装model组件的方法
本站链接:http://www.codesec.net/view/560326.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(30)