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 相关文章推荐
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
微信小程序自定义弹出层效果
May 26 Javascript
如何在selenium中使用js实现定位
Aug 18 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
php foreach循环中使用引用的问题
2013/11/06 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
电大毕业生自我鉴定
2013/11/10 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
MyBatis 动态SQL全面详解
2021/10/05 MySQL
nginx中proxy_pass各种用法详解
2021/11/07 Servers
nginx配置指令之server_name的具体使用
2022/08/14 Servers