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(() => {
      //          
    });
Element-ui vue.js
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

Previous: How do I separate the editing area of Markdown from toolbar using vue-simplemde?

Next: Vue v-for dynamically generated single-selection, multi-check boxes, how to write v-model so that the values will not change together?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3edd6-2c43c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3edd6-2c43c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?