vue 2.0封装model组件

单文件组件

使用单文件组件封装model的模板、逻辑和样式，之后就可以在页面中调用此通用组件。

model-1.png

需求

model有两个使用场景：

1. 备注/修改密码(简易)：
   在屏幕中垂直居中
2. 添加/修改/展示信息(复杂)：
   距离屏幕顶部200px，内容过长时可滚动。
3. 常规要求(共同点)：
   标题，关闭icon
   点击确定/关闭/遮罩，隐藏model组件

分析上述需求点，得到如下图：

model-2.png

• wrapper
  负责遮盖屏幕
• inner
  负责垂直居中/距顶部200px
• title
  可变化标题
• content
  可变化的内容区域

方案

• Prop传参
  title(标题)、show(隐藏/显示)、width(宽度)、type(居中/顶部)
• 自定义事件
  关闭model
• slot分发
  内容区域可自定义
• 滚动穿透

具体实现

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

• 垂直居中

model-3.png

• 距顶部200px，可滚动

model-4.png

参考

• vue制作弹出对话框组件
• vue组件的三种调用方式
• vue弹窗组件的一些感想
• 滚动穿透
• 滚动穿透google