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 相关文章推荐
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
js 获取时间间隔实现代码
May 12 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
简单的vuex 的使用案例笔记
Apr 13 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
js实现数字跳动到指定数字
Aug 25 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实现小型站点广告管理
2006/10/09 PHP
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
js中的json对象详细介绍
2014/10/29 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
vue实现底部菜单功能
2018/07/24 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
实例Python处理XML文件的方法
2015/08/31 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
法院信息化建设方案
2014/05/21 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
初中差生评语
2014/12/29 职场文书
春秋淹城导游词
2015/02/11 职场文书
遗失证明范文
2015/06/19 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers