VUE 弹出层

作者: 关保民 | 来源:发表于2019-01-09 14:19 被阅读0次

    这些都是做移动端经常用到的的弹出层,四种弹出层,分别默认值type 0 1 2


    20180103152344816.png

    这是一个组件 layer.vue

    20180103154153918.png

    代码:

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

    一.加载中


    20180103155137682.png

    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
    })
    
    1. 在任何地方 想要隐藏弹出框 请调用
      let layer = this.$refs.layer
      layer.close()
    

    二.提示


    20180103171252592.png
      默认值 type: 1
    

    1.加载中 默认

     let layer = this.$refs.layer
      layer.open({
        type: 1
      })
    
    1. 参数
     let layer = this.$refs.layer
    layer.open({
        type: 1, 
        content: '已收藏',  // 内容
        imgurl: 'success.png', // 图片名称
        time: 1, // 1秒后自动关闭 默认 2
        callback () {  // 1秒后自动关闭 回掉  
          console.log('已经消失')
        },
        shadeClose: true // 点击空白区域是否隐藏此弹出框  默认是false
      })
    

    三.提示信息


    20180103171342059.png
    默认值 type: 2
    

    1.提示

    let layer = this.$refs.layer
    layer.open({
      type: 2
    })
    
    1. 参数
    let layer = this.$refs.layer
    layer.open({
    type: 2,
      content: '现在我又饿了。。。',  // 内容
      shadeClose: true, // 点击空白区域是否隐藏此弹出框  默认是false
      button: ['确定'], // 按钮内容 默认 知道了
      no () {          // 点击确认回调
        console.log('取消')
        layer.open()  // 重新打开其他窗口
      } 
    })
    

    四.询问框


    20180103172007442.png
    默认值 type: 2
    

    1.询问框

    let layer = this.$refs.layer
    layer.open({
      type: 2
    })
    
    1. 参数
    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>
    

    博客原文地址:https://blog.csdn.net/gh1205/article/details/78963653

    相关文章

      网友评论

        本文标题:VUE 弹出层

        本文链接:https://www.haomeiwen.com/subject/lytgrqtx.html