vue 2.0封装model组件的方法

vue 2.0封装model组件的方法

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

单文件组件

使用单文件组件封装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

:style="{width:width + 'px'}">

type="ivu-icon ivu-icon-ios-close-empty"

size="25" />

type="ivu-icon ivu-icon-ios-close-empty"

size="25" />

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-Niwzlscroll'

// 把脱离文档流的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

引用

戳我呀

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，可滚动

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。