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 页面标签中使用。