1. 一般我们在vue 项目使用 过滤器(filter)和(自定指令)directive一般会怎么做呢？

全局：

1. 定义

// main.js
....import Vue from 'vue'import moment from 'moment'//这里使用 moment 做一个 时间过滤// 过滤器Vue.filter('filterName',(value)=>{moment(value).format('YYYY-MM-DD HH:mm:ss')
})// 自定义指令
Vue.directive('directiveName',{// 页面初次加载 触发此事件inserted(dom,options){// dom 使用 指令的当前元素// 自己传递参数 比如图片的路径，简单来说就是一个替换参数dom.onerror = function(){dom.src= options.value}//  没有图片的情况dom.src = dom.src || options.value}// 当页面节点更新时，触发此事件// 这种情况多出现在表格的渲染，因为表格的渲染会进行排序后在进行渲染update(dom,options){dom.src = dom.src || options.value}
})

2. 使用

// index.vue

局部

 1. 定义

// index.vue

 2. 使用

        （同上）

3. 一次注册多个filter和directive,以及一次性注册component

 1.代码如下

        filter:

//  filter/index.jsimport moment from 'moment'//  自定义时间过滤器
export const formatterTime = value => {if (value) {return moment(value).format('YYYY-MM-DD')}return '2021-09-10'
}export const formatterDetailTime = value => {if (value) {return moment(value).format('YYYY-MM-DD HH:mm:ss')}return '2021-09-10'
}

        directive:

//  自定义图片的指令
export const imageError = {inserted(dom, options) {// 当图片出错的使用使用默认的图片dom.onerror = function() {//  使用默认的图片dom.src = options.value}//  没有图片的情况dom.src = dom.src || options.value},componentUpdated(dom, options) {dom.src = dom.src || options.value}
}

        component:

// 新建  components/index.jsimport PageTools from './PageTools/'
import UploadExcel from './UploadExcel/'
import ImageUpload from './ImageUpload'
import LangCom from './lang'
import ScreenFull from './ScreenFull'// 注册全部共用的组件export default {install(Vue) {Vue.component('PageTools', PageTools)Vue.component('UploadExcel', UploadExcel)Vue.component('ImageUpload', ImageUpload)Vue.component('LangCom', LangCom)Vue.component('ScreenFull', ScreenFull)}
}

2.使用 ：

import Vue from 'vue'....// 全局注册指令
import * as directives from '@/directives'
Object.keys(directives).forEach(item => {Vue.directive(item, directives[item])
})// 全局注册过滤器
import * as filters from '@/filters'
Object.keys(filters).forEach(item => {Vue.filter(item, filters[item])
})// 注册 全局的自定义组件
import Components from '@/components/'
Vue.use(Components)....

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！