其他分享
首页 > 其他分享> > 记录一个Vue封装公共函数方法的步骤

记录一个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显得是个杂物间一样,什么代码都放在里面,单独分出一个公共类也很快,也方便整理和后期维护。

标签:Vue,封装,步骤,utils,js,clientWidth,GetsPpageWidth,screenWidth
来源: https://blog.csdn.net/BadBoyT/article/details/114883953