Vue component encapsulation problem

1, there is a function in the project to delete, click a pop-up window to display text, delete and cancel buttons, a lot of pages need to be used, so I encapsulated the page into a component, the need to use the page to introduce the component.
2. I use prop to pass the text that needs to be displayed into the component, and call emit in the component to return the clicked result to the parent component, so there will be a problem. When I click on the parent component, the event that triggers the component and the event that returns the result are not together, and sometimes the data is not easy to handle. I want to make the component a combination of element-ui trigger events and return results, so the data will be much easier to handle. I would like to ask you if you have any good ideas to achieve this.

    element
    
    this.$confirm(", ?", "", {
      confirmButtonText: "",
      cancelButtonText: "",
      type: "warning"
    }).then(() => {
      //
    }).catch(() => {
      //          
    });
Dec.29,2021

write this component in the root component App.vue , expose the global method in the mounted hook and hang the global method on 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
  },
};

so that the whole project can simply call this component method through this.$_confirm ({}) .


you can use vue install with extend

clipboard.png

can be written as a vue plug-in. There is a usage of plugin on the document


.
/*
1vuethis2{}restrue
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)
    })
  })
}

this is encapsulated by me based on element's $prompt, mainly dealing with parameter names (bold), and finally using promise to resolve a tag to refresh the list

Menu