vue组件封装问题

Question

1、项目中有个功能是删除，点击弹出一个窗口，显示文字，有删除和取消按钮，很多页面需要用到，所以我将该页面封装成了一个组件，需要用到的页面就引入该组件。
2、我用prop将需要显示的文字传入组件，在该组件中调用emit来返回点击的结果给父组件，这样会有个问题，我在父组件点击触发该组件的事件和返回结果的事件不在一起，有时候数据不是很好处理，我想将组件做成element-ui那种触发事件和返回结果在一起的，这样数据会好处理很多。请教各位要实现这样有什么好的思路。

    element代码
    
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      //点确定回调
    }).catch(() => {
      //取消回调          
    });

Answer 1

把这个组件写好放在根组件里App.vue，在mounted钩子里暴露全局方法挂在Vue.prototype上

import Vue from 'vue';

export default {
  name: 'MyConfirm',
  methods: {
    open(option){
      return this.$confirm(option.content, option.title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: option.type || 'warning'
      })
    }
  },
  mounted() {
    Vue.prototype.$_confirm = this.open
  },
};

这样整个项目都能通过this.$_confirm({})简单调用这个组件方法了

Answer 2

可以运用vue install 配合extend使用

完整例子

Answer 3

写成vue插件就好了 文档上有plugin的用法

Answer 4

/*
带提交的弹窗，接受两个参数，1、vue实例（this），2、配置对象（{}）。回调用来刷新列表，修改成功res为true
ex：submitBox(that, {
        url: editUrl,
        editParams: {
          name: '',
          id: id
        },
        title: '编辑权限名称',
        inputValue: preName
      }).then(res=>{

      }).catch(err => {
        console.log(err)
      })
*/
export default function submitBox (that, obj = {}) {
  return new Promise((resolve, reject) => {
    that.$prompt(obj.title || '', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputType: obj.type ? obj.type : 'text',
      inputValue: obj.inputValue || ''
      // inputPattern: /[]/,
      // inputErrorMessage: '邮箱格式不正确'
    }).then(({ value }) => {
      if (value && value !== obj.inputValue) {
        let params = {}
        **for (var key in obj.editParams) {
          params[key] = obj.editParams[key] || value
        }**
        that.$post(obj.url, params).then((res) => {
          if (res.data.success) {
            resolve(true)
          } else {
            resolve(false)
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        that.$message({
          type: 'warning',
          message: '请输入要更改的内容'
        })
        resolve(false)
      }
    }).catch((err) => {
      reject(err)
    })
  })
}

这是我基于element的$prompt封装的，主要是处理参数名（加粗部分），最后用promise来resolve出一个标示用来刷新列表