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 相关文章推荐
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
Vue.js对象转换实例
Jun 07 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
微信小程序自定义组件
Aug 16 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 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 checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
解决layer.prompt无效的问题
2019/09/24 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python 忽略文件名编码的方法
2020/08/01 Python
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
初三物理教学反思
2014/01/21 职场文书
校运会广播稿100字
2014/01/27 职场文书
人事专员职责
2014/02/22 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
三严三实心得体会范文
2014/10/13 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android