欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue--使用全局混入

程序员文章站 2022-06-28 19:08:50
Vue–使用全局混入main.jsnew 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/** * 全...

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日

本文地址:https://blog.csdn.net/yys190418/article/details/109238321

相关标签: Vue学习