频道导航

vue 2.0封装model组件的方法

2019-01-07 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了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

script

-1 || target.className === 'model-wrapper-top') { this.$emit('close') let body = document.querySelector('body') body.className = '' // 滚回到老地方！ to(this.scrollTop) } } } }

style

Box-shadow: 0 5px 14px 0 rgba(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.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 } } }

引用一

标题" :width="400" :show="show" v-on:close="closeModel">

this is content area。

引用二

标题" :width="400" :show="show" v-on:close="closeModel">

demo

垂直居中