11 vue 自定义全局方法

//global.js
// 定义vu
e 全局方

 
// 定义vue 全局方法 建议自定义的全局方法加_ 以示区分
export default {
  install(Vue, options = {}) {
    // 全局方法1
    Vue.prototype._fn1 = function () {
      // console.log('f1')
    }
    // 全局方法2
    Vue.prototype._fn2 = function () {
      // console.log('fn2');


    }
    // 全局方法3 再次封装element.ui的$confirm的方法
    Vue.prototype._confirm = function (cue, tip, handleConfirm) {
      // 当第二个参数是回调函数
      if (typeof tip !== 'string') {
        handleConfirm = tip
        tip = '提示'
      }
      (cue, tip, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(handleConfirm)
        .catch(() => {
          this.$message.info("已取消");
        });
    }
  }
}
 
 
//将then改写为async await模式


 // 全局方法3 封装element.ui的$confirm方法
    Vue.prototype._confirm = async function (cue, tip, handleConfirm) {
      // 当第二个参数是回调函数
      if (typeof tip !== "string") {
        handleConfirm = tip;
        tip = "提示";
      }
      let res = '' //try-catch有作用域范围如果 res定义在里面，等下if判断就拿不到res
      try {
        res = await this.$confirm(cue, tip, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
      } catch (error) {
        this.$message.info('已取消')
      }
      if (res === 'confirm') handleConfirm()

2.main.js文件注入

// 定义全局方法
import global from './utils/global'
Vue.use(global)

3.use

在vue实例对象methods使用。

//例子1

deleteSelected() {

      this._confirm(

        "批量删除数据不可恢复，是否继续?",

        this.deleteSelectedComfirm

      );

    },

    deleteSelectedComfirm() {

      console.log(this.multipleSelection);

    }

 

//例子2 接受原始处理函数的参数

handleDelete(index, row) { 

    this._confirm("删除此条数据不可恢复，是否继续?", () => {

        this.handleDeleteConfirm(index, row);

      });

},

handleDeleteConfirm(index, row) {

    console.log("row: ", row);

    console.log("index: ", index);

 }

2 在vue 页面标签中使用。