vue如何封装全局方法

Vue可以通过Vue.prototype对象来封装全局方法。具体步骤如下：

1. 在src目录下新建一个utils文件夹，用于存放全局方法的封装文件。

2. 在utils文件夹下新建一个index.js文件，用于封装全局方法。

3. 在index.js文件中定义全局方法，例如：

   export const myGlobalMethod = function () {
     // 方法逻辑
   }

4. 在main.js文件中引入index.js文件，并通过Vue.prototype对象将方法挂载到Vue实例上，例如：

   import Vue from 'vue'
   import App from './App.vue'
   import { myGlobalMethod } from './utils'

   Vue.config.productionTip = false

   Vue.prototype.$myGlobalMethod = myGlobalMethod

   new Vue({
     render: h => h(App),
   }).$mount('#app')

5. 在组件中可以通过this.$myGlobalMethod()来调用全局方法。

注意：封装全局方法时需要注意方法的命名，避免与其它全局方法或Vue内置方法名称冲突。

相关问题

vue封装全局方法，数字大于1000小于10000，显示千

可以在 Vue 的 `prototype` 对象上添加一个方法，将数字转换为千位数，代码如下：

Vue.prototype.formatNumber = function(num) {
  if (num >= 1000 && num < 10000) {
    return (num / 1000).toFixed(1) + '千';
  } else {
    return num;
  }
}

然后在组件中就可以使用这个全局方法了：

<template>
  <div>{{ formatNumber(2500) }}</div>
</template>

<script>
export default {
  methods: {
    formatNumber(num) {
      return this.$root.formatNumber(num);
    }
  }
}
</script>

这样就可以把 `2500` 转换为 `2.5千`。

vue封装全局loading指令

可以通过 Vue 自定义指令来实现全局 loading 指令，具体实现步骤如下：

1. 在 Vue 实例中注册全局指令

Vue.directive('loading', {
  // 指令选项
})

2. 在指令中定义 bind 和 unbind 钩子函数

Vue.directive('loading', {
  bind: function (el, binding, vnode) {
    // 绑定指令时执行的操作
  },
  unbind: function (el, binding, vnode) {
    // 解绑指令时执行的操作
  }
})

3. 在 bind 钩子函数中创建 loading 元素，并将其添加到页面中

Vue.directive('loading', {
  bind: function (el, binding, vnode) {
    // 创建 loading 元素
    const mask = document.createElement('div')
    mask.classList.add('loading-mask')
    const spinner = document.createElement('div')
    spinner.classList.add('loading-spinner')
    mask.appendChild(spinner)

    // 将 loading 元素添加到页面中
    el.appendChild(mask)
  },
  unbind: function (el, binding, vnode) {
    // 解绑指令时执行的操作
  }
})

4. 在 bind 钩子函数中根据指令参数 show 控制 loading 元素的显示和隐藏

Vue.directive('loading', {
  bind: function (el, binding, vnode) {
    // 创建 loading 元素
    const mask = document.createElement('div')
    mask.classList.add('loading-mask')
    const spinner = document.createElement('div')
    spinner.classList.add('loading-spinner')
    mask.appendChild(spinner)

    // 将 loading 元素添加到页面中
    el.appendChild(mask)

    // 根据指令参数 show 控制 loading 元素的显示和隐藏
    if (binding.value) {
      mask.style.display = 'block'
    } else {
      mask.style.display = 'none'
    }
  },
  update: function (el, binding, vnode, oldVnode) {
    if (binding.oldValue !== binding.value) {
      if (binding.value) {
        el.querySelector('.loading-mask').style.display = 'block'
      } else {
        el.querySelector('.loading-mask').style.display = 'none'
      }
    }
  },
  unbind: function (el, binding, vnode) {
    // 解绑指令时执行的操作
  }
})

5. 在 CSS 中定义 loading 元素的样式

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #333;
  animation: loading-spinner 1s linear infinite;
}

@keyframes loading-spinner {
  to {
    transform: rotate(360deg);
  }
}

最后，就可以在组件中使用 v-loading 指令来控制全局 loading 的显示和隐藏了。

<template>
  <div v-loading="isLoading">
    <!-- 页面内容 -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isLoading: false
      }
    },
    mounted() {
      // 模拟请求数据
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 2000)
    }
  }
</script>