vue 2.0封装model组件的方法


Posted in Javascript onAugust 03, 2017

本文介绍了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 相关文章推荐
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
Angular短信模板校验代码
Sep 23 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 #jQuery
详解基于vue的移动web app页面缓存解决方案
Aug 03 #Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 #Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 #Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 #Javascript
webpack开发跨域问题解决办法
Aug 03 #Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 #Javascript
You might like
杏林同学录(三)
2006/10/09 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
js常用代码段整理
2011/11/30 Javascript
详解JS函数重载
2014/12/04 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
老生常谈js数据类型
2017/08/03 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
vue组件添加事件@click.native操作
2020/10/30 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
Django框架中方法的访问和查找
2015/07/15 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
在python中bool函数的取值方法
2018/11/01 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
python线程join方法原理解析
2020/02/11 Python
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
试述DBMS的主要功能
2016/11/13 面试题
explicit和implicit的含义
2012/11/15 面试题
abstract是什么意思
2012/02/12 面试题
求职信模版
2013/11/30 职场文书
最美护士演讲稿
2014/08/27 职场文书
医院消毒隔离制度
2015/08/05 职场文书