Vue混入功能

1、引子

在Vue项目中，对于公共方法、枚举变量（如0表示未审批，1表示审批通过，2表示审批驳回）等，可以单独写在一个模块（即一个.js文件）里，在需要的组件中import即可。

在一个模块中统一定义，谁用谁导入

//data.js
let StaticData = {
  getLiAnResult() {
    return [
      {id: 1, value: "受理", active: false},
      {id: 2, value: "不予受理", active: false},
    ];
  },
  
  getShangSuResult() {
    return [
      {id: 1, value: "维持，不予立案", active: false},
      {id: 2, value: "指定立案", active: false},
    ];
  },
};

export {StaticData};

//some.vue
<template>
</template>

<script>
  import {StaticData} from '@/utils/data';
</script>

除此之外，还可以使用Vue提供的 “混入” 功能。

2、Vue混入

2.1 全局混入

//globalMixin.js
import Vue from 'vue'

Vue.mixin({
    methods:{
      /*
       * formatMoney(s,type)
       * 功能：金额按千位逗号分割
       * 参数：s，需要格式化的金额数值.
       * 参数：type,判断格式化后的金额是否需要小数位.
       * 返回：返回格式化后的数值字符串.
       */
      formatCurrency(row, column, s, index) {
        if (/[^0-9\.]/.test(s))
          return "0";
        if (s == null || s == "")
          return "0";
        s = s.toString().replace(/^(\d*)$/, "$1.");
        s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");
        s = s.replace(".", ",");
        let re = /(\d)(\d{3},)/;
        while (re.test(s))
          s = s.replace(re, "$1,$2");
        s = s.replace(/,(\d\d)$/, ".$1");
        return s;
      },
    }
})

//main.js
import './module/globalMixin'

在*.vue里可以直接使用formatCurrency()：

<template>
    <el-dialog
        title="单号信息"
        :visible.sync="innnerVisible"
        :close-on-click-modal="false"
        :before-close="closeDialog"
    >
        <el-table :data="gridData">
            <el-table-column property="settAmount" label="结算单金额" :formatter="formatCurrency"></el-table-column>
        </el-table>
    </el-dialog>
</template>

2.2 按需混入

//mixin.js
let mixin = {
    data(){
        return {
            MESSAGES:{
                "relatedStatus" : {
                    0 : "未关联",
                    1 : "已关联"
                }
            }
        }
    },
    created: function () {
    },
    methods:{
    }
};

export default mixin;

<script>
import mixin from "@/module/mixin";

export default {
  mixins: [mixin],
  components: {MyComponent},
  data() {
    ...
  }
}
</script>