前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >弹窗组件及其回调函数

弹窗组件及其回调函数

原创
作者头像
Krry
修改2020-02-11 11:16:43
修改2020-02-11 11:16:43
9170
举报
文章被收录于专栏:Krryblog

博客地址:https://ainyi.com/83

常见的 Element 组件的 MessageBox 弹窗组件,调用方法:

代码语言:txt
复制
this.$confirm('xxx') 

还可以增加其回调方法:

代码语言:txt
复制
this.$confirm('这是一条信息').then(() => {
  console.log('确定了')
}).catch(() => {
  console.log('关闭了')
})

实现方法

首先在 packages 文件夹下新建 confirm 文件夹,往里面新建 src 目录,存放源代码

src 下新建 Confirm.vue 文件写好相关弹窗的 html、js 代码

应用时有相关的回调函数,相应的实现方法就是使用==Promise==实现

代码语言:txt
复制
<template>
  <div>
    ...
  </div>
</template>
<script>
export default {
  name: 'confirm',
  data() {
    return {
      promptMessage: '',
      modelOperate: '确认',
      confirmVisible: false,
      resolve: '', // promise,类型 function
      reject: '' // promise,类型 function
    }
  },
  watch: {},
  computed: {
    showClass() {
      return this.confirmVisible ? 'view' : ''
    }
  },
  mounted() {},
  created() {},
  filters: {},
  methods: {
    close() {
      this.reject() // catch 获取
      this.confirmVisible = false
    },
    confirm() {
      this.resolve() // then 获取
      this.confirmVisible = false
    }
  }
}
</script>

在 Confirm.vue 同级目录下新建 main.js

代码语言:txt
复制
import Main from './Confirm.vue'
import Vue from 'vue'

let ConfirmConstructor = Vue.extend(Main)
let instance, params

const Confirm = function(options) {
  return new Promise((resolve, reject) => { // eslint-disable-line
    if (typeof options === 'string') {
      params = {
        promptMessage: options,
        resolve: resolve, // 将 resolve、reject 传到组件内调用
        reject: reject
      }
    } else {
      params = {
        ...options,
        resolve: resolve,
        reject: reject
      }
    }
    showConfirm()
  })
}

const showConfirm = () => {
  let options = params || {}
  instance = new ConfirmConstructor({
    data: options
  })
  instance.$mount() // 挂载
  document.body.appendChild(instance.$el)
  instance.confirmVisible = true
}

export default Confirm

然后在上级目录(Confirm 文件夹)下新建 index.js 文件导出

代码语言:txt
复制
import Confirm from './src/main'
export default Confirm

然后再最外层的 index.js 整合

代码语言:txt
复制
import Confirm from './confirm'

const install = function(Vue, opts = {}) {
  Vue.prototype.$confirm = Confirm
}

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  Confirm,
  install
}

最后就可以通过文章最顶部的调用方式愉快地玩耍了

博客地址:https://ainyi.com/83

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 实现方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档