vue 彈出層

這些都是我做移動端經常用到的的彈出層，四種彈出層，分別預設值type 0 1 2

這是一個元件 layer.vue

程式碼：

<layer ref="layer"></layer>
import layer from '@/components/layer/layer'

1、載入中

1. 載入中 預設

open() 中沒有引數 預設 type: 0

// type 0
let layer = this.$refs.layer
layer.open()  

2. 載入中 點選空白區域 隱藏彈出框

let layer = this.$refs.layer
layer.open({
    type: 0,
    shadeClose: true, // 點選空白區域是否隱藏此彈出框  預設是false
})

3. 在任何地方 想要隱藏彈出框 請呼叫

let layer = this.$refs.layer
layer.close()

2、提示

預設值 type: 1

1. 提示

let layer = this.$refs.layer
layer.open({
    type: 1
})

2. 引數

let layer = this.
 
$refs.layer
layer.open({
      type: 1, 
      content: '已收藏',  // 內容
      imgurl: 'success.png', // 圖片名稱
      time: 1, // 1秒後自動關閉 預設 2
      callback () {  // 1秒後自動關閉 回掉  
        console.log('已經消失')
      },
      shadeClose: true // 點選空白區域是否隱藏此彈出框  預設是false
    })

3、提示資訊

預設值 type: 2

1. 提示

let
 
 layer = this.$refs.layer
layer.open({
    type: 2
})

2. 引數

let layer = this.$refs.layer
layer.open({
 type: 2,
    content: '現在我又餓了。。。',  // 內容
    shadeClose: true, // 點選空白區域是否隱藏此彈出框  預設是false
    button: ['確定'], // 按鈕內容 預設 知道了
    no () {          // 點選確認回撥
      console.log('取消')
      layer.open()  // 重新開啟其他視窗
    } 
  })

4、詢問框

預設值 type: 2

1. 詢問框

let layer = this.$refs.layer
layer.open({
    type: 2
})

2. 引數

let layer = this.$refs.layer
layer.open({
 type: 2,
    content: '你吃飯了嗎',  // 內容
    button: ['確定', '取消'], // 按鈕內容 預設 知道了
    yes () {  // 點選確認回撥
     console.log('確定')
     },
     no () { // 點選取消回撥
       console.log('取消')
       layer.open()
     }
  })

關閉彈出層通用

this.$refs.layer.close()

總結：
引數可自定義，1.載入中，2.提示，3.提示資訊，4.詢問

layer.vue

<template>
  <div class="mask" v-if="layershow">
    <div class="layermbox">
      <div class="laymshade" :class="{'laymshadeBgNo': type >= 2 ? false : shade}" @click="laymshadeClose"></div>
      <div class="layermmain" :class="layermmain[type]">
        <template v-if="type == 0">
          <transition name="fade">
            <div class="layermchild">
              <div class="logBox" v-if="layershow">
                <img class="img1" :src="logImg1" alt="" />
                <img class="img2" :src="logImg2" alt="" />
              </div>
            </div>
          </transition>
        </template>
        <template v-if="type == 1">
          <div class="section">
            <transition name="fade">
              <div class="layermchild layermPrompts" v-if="layershow">
                <section class="layermcont">
                  <img class="img" :src="imgurl"/>
                  <p class="text">{{content}}</p>
                </section>
              </div>
            </transition>
          </div>
        </template>
        <template v-if="type == 2">
          <div class="section">
            <transition name="fade">
              <div class="layermchild" v-if="layershow">
                <section class="layermcont">
                  <p>{{content}}</p>
                </section>
                <div class="layermbtn">
                  <span class="layermspan" v-for="(item, index) in button" @click="sure(index)">{{ item }}</span>
                </div>
              </div>
            </transition>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        layershow: false, // 是否顯示彈出框
        type: 0, // 顯示型別
        shade: true, // 蒙層
        shadeClose: false, // 蒙層是否點選隱藏
        imgurl: require('@/common/image/error.png'), // 預設型別是1的 圖示
        content: '全力載入中',  // 預設內容
        button: ['確定'], // 預設按鈕
        logImg1: require('./logo1.png'),  // type為1時-載入圖示
        logImg2: require('./logo2.png'),  // type為1時-載入圖示
        time: 20, // 倒計時隱藏時間
        callback: '', // 是否回撥-type大於1
        no: '', // 點選確認按鈕回撥
        yes: '' // 點選取消按鈕回撥
      }
    },
    created () {
      this.layermmain = ['layermmain0', 'layermmain1', 'layermmain2']
      this.imgurl_ = ['error', 'success', 'collection']
    },
    methods: {
      open (opt) {
        this.close()
        if (opt) {
          console.log(opt)
          let cloneObj = JSON.parse(JSON.stringify(this.$data))
          for (var key in opt) {
            this.$data[key] = opt[key]
          }
          if (opt.imgurl) {
            this.$data['imgurl'] = require('@/common/image/' + opt.imgurl)
          }
          this.layershow = true
          if (this.time && this.type === 1) {
            setTimeout(() => {
              this.close()
              this.callback && this.callback()
            }, this.time * 1000)
            return false
          }
        }
        this.callback && this.callback()
      },
      sure (index) {
        if (this.button.length > 1) {
          if (index === 0) {
            this.yes && this.yes()
          } else {
            this.no && this.no()
          }
          return false
        }
        this.no && this.no()
        this.close()
      },
      close () {
        this.layershow = false
        this.type = 0
        this.shade = true
        this.shadeClose = false
        this.imgurl = require('@/common/image/error.png')
        this.content = '全力載入中'
        this.button = ['確定']
      },
      laymshadeClose () {
        this.shadeClose && this.close()
      }
    },
    computed: {
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .layermbox
    position:fixed
    left: 0
    top: 0
    z-index:19891014
    right: 0
    bottom: 0
    .laymshade,.layermmain
      position: fixed
      left: 0
      top: 0
      width: 100%
      height: 100%
      z-index:19891014
      &.laymshadeBgNo
        background: none
    .laymshade
      background: rgba(0,0,0,0.3)
    .layermmain
      display: table
      pointer-events: none
      .section
        display: table-cell
        vertical-align: middle
        text-align: center
        .layermchild
          width: 14rem
          height: 7.5rem
          position: relative
          display: inline-block
          text-align: center
          background-color: #fff
          border-radius: 6px
          box-shadow: 0 0 15px rgba(0,0,0,.1)
          pointer-events: auto
          color: #4a4a4a
          overflow: hidden
          box-sizing: border-box
          &.layermPrompts
            background: rgba(0,0,0,.7)
            width: auto
            height: auto
            min-width: 7rem
            min-height: 6rem
            max-width: 14rem
            color: #fff
            padding: 0 0.8rem
          &.fade-enter-active, &.fade-leave-active
            transition: all 0.3s
          &.fade-enter, &.fade-leave-active        
            opacity: 0
            transform: scale(0)
          .layermcont
            font-size: 0.85rem
            display: block
            padding: 0.8rem 0.8rem 0.4rem
            line-height: 1rem
            display:flex
            align-items:center
            justify-content: center
            flex-direction: column
            min-height: 5rem
            box-sizing: border-box
            .img
              display: block
              width: 2.2rem
              height: 2.2rem
              margin: 0.2rem auto .8rem
          .layermbtn
            width: 100%
            display: flex
            height: 2.4rem
            line-height: 2.4rem
            border-top: 1px solid #ebebeb
            font-size: 0.9rem
            .layermspan
              display: block
              flex: 1
              &:first-child
                border-right: 1px solid #ebebeb
                color: #4a4a4a
              &:last-child
                border: none
                color: #e60012
      &.layermmain0
        display:flex
        align-items:center
        justify-content: center
        .layermchild
          background: none
          .logBox
            position: relative
            width: 1.5rem
            height: 1.5rem
            text-align: center
            .img1
              position: absolute
              left: 0
              top: 0
              width: 100%
              height: 100%
              animation: bounce-in 2s linear infinite
            @keyframes bounce-in
              0%
                transform: rotate(0)
              100%
                transform: rotate(360deg)
            .img2
              width: 0.5rem
              margin-top: 0.3rem
      &.layermmain1
        .layermchild
          background: rgba(0,0,0,0.6)
      &.layermmain2
        .section
          .layermchild
              height: auto
</style>

如有錯誤請指教，謝謝 近期會寫一個demo，請關注