vue定义全局方法，全局组件，全局指令，全局过滤器

1.全局方法

1-1.创建全局方法文件

global.js

exports.install = function(Vue, options) {
    
    

  // 当前时间前7天到今天的时间的【全局方法】
  Vue.prototype.$frontDate7 = function() {
    
     // $frontDate7就是这个方法的全局方法名--【下面的方法内容可以忽略】
    let dateFormat = timestamp => {
    
    
      var date = new Date(timestamp)
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      return Y + M + D
    }
    let currentDate = new Date()
    // 此前七天
    let endTime = dateFormat(currentDate.getTime())
    let startTime = dateFormat(currentDate.setDate(currentDate.getDate() - 7))
    return [startTime + '00:00:00', endTime + '23:59:59']
  }


  //当前时间的【全局方法】
  Vue.prototype.$getCurrentTime(){
    
    
  	....
  }
  ...
}

1-2.入口文件引入并注册

main.js

import GlobalFn from '@/utils/global'
Vue.use(GlobalFn);

1-3.组价中使用

methods: {
    
    
    initDate() {
    
    
      [this.form.startTime, this.form.endTime] = this.$frontDate7()
    },
}

2.全局组件

2-1. 新建全局组件

gloabel/list.vue【全局组件】

<template>
  <div>
   我是全局组件
  </div>
</template>

<script>
export default {
    
    
  name: 'list',
  data() {
    
    
  	return {
    
    
  	}
  }
 } 
}
</script>

gloabel/index.js【导出全局组件】

import gloabelList from './list'
export default {
    
    
  install (Vue) {
    
    
    Vue.component('GloabelList', gloabelList)
  }
}

2-2 main.js引入

引入对应的js

import hzList from "./gloabel/index.js"
Vue.use(hzList)

2-3.使用

home.vue

<template>
	<div class="enterprise-filing-list">
		<GloabelList></GloabelList>
	</div>	
</template>	

3.全局指令（自定义指令）

gloabelDirective.js 【定义全局指令】

export default {
    
    
  install(Vue) {
    
    
    Vue.directive('data7', {
    
    
      inserted(el, binding, vnode) {
    
     
        // 当前dom节点 绑定的数据 虚拟节点，vnode可以用来修改组件绑定数据
        // binding.value就是绑定的form对象的值
        console.log(el, binding, vnode, vnode.context.form)
        //将用到了data7指令的组件data下的form的buyerName属性值设置为万达
        vnode.context.form.buyerName = '万达'
      }
    })
  }
}

mian.js引入

import gloabelDirective from './gloabelDirective.js'
Vue.use(gloabelDirective)

使用

<FormItem prop="beginTime">
          <DatePicker
            v-model="appDate"
            ref="appTimePicker"
            placeholder="申报时间"
            type="daterange" v-data7='form'
            @on-change="handleAppTimePickerChange"
          ></DatePicker>
 </FormItem>
....
  data() {
    
    
    return {
    
    
      form: {
    
    }
      }
   }