记录一个Vue封装公共函数方法的步骤

记录一个Vue封装公共函数方法的步骤

这边要记录的是两种方法

一. 在main.js 中直接封装

我们以上一篇关于获取页面宽度的问题来做封装

/*main.js*/
Vue.prototype.GetsPpageWidth= function(){
    let screenWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
    return screenWidth;
}

使用

/*某个页面的js*/
<script>
export default {
  data() {
    return {
      screenWidth: 0, //屏幕尺寸
    };
  },
  mounted() {
    this.screenWidth = this.GetsPpageWidth();
    window.onresize = () => {
      this.screenWidth = this.GetsPpageWidth();
    };
  },
  beforeUpdate() {
    this.screenWidth = this.GetsPpageWidth();
  },
};
</script>

二. 新建一个公共js封装

创建好后在main.js中引用一下

/* 引入公共工具类 */
import utils from "./lib/util.js";
Vue.prototype.$utils = utils;

把我们的方法写在新建的文件里面

/* util.js */
export default {
 /*获取页面宽度 用于组件高度计算和宽度分配*/
  GetsPpageWidth(){
    let screenWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
    return screenWidth;
  }
}

使用

/*某个页面的js*/
<script>
export default {
  data() {
    return {
      screenWidth: 0, //屏幕尺寸
    };
  },
  mounted() {
    this.screenWidth = this.$utils.GetsPpageWidth();
    window.onresize = () => {
      this.screenWidth = this.$utils.GetsPpageWidth();
    };
  },
  beforeUpdate() {
    this.screenWidth = this.$utils.GetsPpageWidth();
  },
};
</script>

结尾

推荐使用第二种方法，因为第二种方法不会让main.js显得是个杂物间一样，什么代码都放在里面，单独分出一个公共类也很快，也方便整理和后期维护。