可复用antd-vue的对话框Mixin
  Lgf4zGV1OSRD 2023年11月02日 29 0

创建一个可重复使用的自定义confirm,利用vue混入方式即可随时使用。

const confirmMixin = {
    methods: {
        showModal(modalData, interfaceData) {
            const _this = this
            const {title, content, okType, okText, icon,cancelText, width} = modalData
            const {params, func, success,error = () => {}, successMsg = '', errorMsg = '', cancelFunc = () => {}, okButtonProps,cancelButtonProps} = interfaceData
            this.$confirm({
              title,
              content,
              okType,
              width,
              okText,
              icon,
              cancelText,
              okButtonProps,
              cancelButtonProps,
              onOk() {
                return new Promise(function (resolve, reject) {
                  setTimeout(async function () {
                    const res = await func(params)
                    if (res.success) {
                      success(res)
                      successMsg ? _this.$message.success(successMsg) : ''
                      resolve()
                    } else {
                      error(res)
                      reject()
                      _this.$message.warning(errorMsg ? errorMsg : res.message)
                    }
                  }, 500)
                }).catch((err) => console.log(err))
              },
              onCancel: cancelFunc ? cancelFunc : '',
            })
          },
    }
}

export {confirmMixin}

然后在模块中使用即可:

import { confirmMixin } from '@/mixins/confirmMixin'
export default {
  name: 'test',
  mixins: [confirmMixin],
  data() {
    return {}
  }
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
Lgf4zGV1OSRD