VUE 弹出层

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

20180103152344816.png

这是一个组件 layer.vue

20180103154153918.png

代码：

  
  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
})

3. 在任何地方 想要隐藏弹出框 请调用

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

二.提示

20180103171252592.png

  默认值 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
  })

三.提示信息

20180103171342059.png

默认值 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()  // 重新打开其他窗口
  } 
})

四.询问框

20180103172007442.png

默认值 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

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