zoukankan      html  css  js  c++  java
  • 注册全局方法,全局过滤器和全局组件

    1.注册全局方法

    1.1 过滤器的公共类

    //全局过滤器配置
    import {dateFormat} from './base/dateUtil'
    
    export default {
        normalDateFormat : function(date,fmt){
            return dateFormat.normalFormat(date,fmt);
        },
        textDateFormat : function(text,fmt){
            return dateFormat.textDateFormat(text,fmt);
        }
    }

    1.2 main.js引入

    import filters from '../util/com-filter';//通用filter

    1.3全局过滤器注册

    //全局filter注册
    Object.keys(filters).forEach(key => {
        Vue.filter(key, filters[key])
    })

    2.通过新键插件,引入全局公共方法

    2.1 新建插件文件

    import Vue from 'vue'
    /**定义全局通用方法 */
    let commonUtil = {};
    
    commonUtil.install = function(Vue,options){
        Vue.prototype.formatJSON = function(obj){
            return format.formatJSON(obj);
        }
        Vue.prototype.isJSON = function(str){
            return format.isJSON(str);
        }
    
    }
    Vue.use(commonUtil);
    export default  commonUtil ;

    2.2 main.js引入插件文件

    import '../util/base/commonUtil';
    

      

    3.全局组件的配置

    1.获取全局组件

    import Vue from 'vue'
    import upperFirst from 'lodash/upperFirst'
    import camelCase from 'lodash/camelCase'
    
    const requireComponent = require.context(
      // 其组件目录的相对路径
      '../components/common/',
      // 是否查询其子目录
      false,
      // 匹配基础组件文件名的正则表达式
      /[A-Z]w+.(vue|js)$/
    )

    2.组件格式化

    requireComponent.keys().forEach(fileName => {
      // 获取组件配置
      const componentConfig = requireComponent(fileName)
    
      // 获取组件的 PascalCase 命名
      const componentName = upperFirst(
        camelCase(
          // 获取和目录深度无关的文件名
          fileName
            .split('/')
            .pop()
            .replace(/.w+$/, '')
        )
      )

    3.组件绑定vue

    requireComponent.keys().forEach(fileName => {
      // 获取组件配置
      const componentConfig = requireComponent(fileName)
    
      // 获取组件的 PascalCase 命名
      const componentName = upperFirst(
        camelCase(
          // 获取和目录深度无关的文件名
          fileName
            .split('/')
            .pop()
            .replace(/.w+$/, '')
        )
      )

    以上就是绑定全局方法,过滤器,和组件的方法;

  • 相关阅读:
    Valid Palindrome
    Linux经常使用命令(十七)
    JavaSE入门学习8:Java基础语法之方法
    Eclipse导入Maven项目出现错误:Unsupported IClasspathEntry kind=4
    HTTP ERROR 503
    演示账号激活的过程:注冊——>向指定邮箱发送邮件——>用户登录邮箱,激活账号
    Oracle update+with的使用场景
    代理模式(静态代理+动态代理)——JAVA
    BZOJ1611: [Usaco2008 Feb]Meteor Shower流星雨
    BZOJ1724: [Usaco2006 Nov]Fence Repair 切割木板
  • 原文地址:https://www.cnblogs.com/perferect/p/12876105.html
Copyright © 2011-2022 走看看