使用vue2.0怎么对model组件进行封装

本篇文章为大家展示了使用vue 2.0怎么对model组件进行封装，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联建站-云计算及IDC服务提供商，涵盖公有云、IDC机房租用、成都服务器托管、等保安全、私有云建设等企业级互联网基础服务，电话联系：13518219792

单文件组件

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

 
  
   
    
     {{title}}

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) } } } }

.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 } } }

大橙子网站建设，新征程启航

使用vue2.0怎么对model组件进行封装

其他资讯