vue 2.0封裝model組件的方法

更新時間：2017年08月03日 14:33:20 作者：回調(diào)的幸福時光

本篇文章主要介紹了vue 2.0封裝model組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了vue 2.0封裝model組件的方法，分享給大家，希望對大家有所幫助

單文件組件

使用單文件組件封裝model的模板、邏輯和樣式，之后就可以在頁面中調(diào)用此通用組件。

需求

model有兩個使用場景：

1、備注/修改密碼(簡易)：

在屏幕中垂直居中
2、添加/修改/展示信息(復(fù)雜)：

距離屏幕頂部200px，內(nèi)容過長時可滾動。

3、常規(guī)要求(共同點)：

標題，關(guān)閉icon

點擊確定/關(guān)閉/遮罩，隱藏model組件

分析上述需求點，得到如下圖：

wrapper：負責(zé)遮蓋屏幕
inner：負責(zé)垂直居中/距頂部200px
title：可變化標題
content：可變化的內(nèi)容區(qū)域

方案

1、Prop傳參
title(標題)、show(隱藏/顯示)、width(寬度)、type(居中/頂部)

2、自定義事件
關(guān)閉model

3、slot分發(fā)
內(nèi)容區(qū)域可自定義

4、滾動穿透

具體實現(xiàn)

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
  },
  /**
   * 關(guān)閉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

垂直居中