Vue--使用全局混入

Vue–使用全局混入

main.js

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
// 全局混入
import { common } from '@/mixins'
Vue.mixin(common)

@/minix/index.js

// 全局公共方法
import common from './common'

export {
  common
}

@/minix/common.js

/**
 * 全局混入
 */
export default {
  /**
   * 全局过滤器
   */
  filters: {
    capitalize(value) {
      if (value) return '全局过滤器'
      return '也是全局过滤器'
    }
  },
  /**
   * 全局方法
   */
  methods: {
    /**
     * 跳转页面(通过name)
     * @param name 路由name
     * @param data 参数(默认空)
     */
    toPage(name, data = {}) {
      const query = Object.assign({}, data, {
        t: +new Date()
      })
      this.$router.push({
        name: name,
        query: query
      })
    },
    /**
     * 页面跳转(返回上一页面)
     */
    backPage() {
      this.$router.back(-1)
    },
    /**
     * 获得随机颜色
     * @param diaphaneity 透明度
     * @returns {string} 颜色
     */
    getRandomColor(diaphaneity = 0.6) {
      const r = parseInt(Math.random() * 256)
      const g = parseInt(Math.random() * 256)
      const b = parseInt(Math.random() * 256)
      return `rgba(${r},${g},${b},${diaphaneity})`
    },
    /**
     * 获取时间戳 并返回字符串
     * @param prefix 前缀(默认为空)
     * @returns {string}
     */
    getTimestamp(prefix = '') {
      const timestamp = new Date().getTime().toString()
      if (prefix) {
        return prefix + timestamp
      } else {
        return timestamp
      }
    }
  }
}

2020年10月23日