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

 

  

   

    

     {{title}}
     
      
     
    
    

     
    
   
  
 

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

引用

 戳我呀
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
  }
 }
}

引用一

 
   
   

     
this is content area。
   
  

引用二

 
   
   

     
this is content area。
   
  

demo

垂直居中

距顶部200px，可滚动

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。