vue 弹出层组件

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，请关注