项目中自定义配置影响组件库怎么做（组件库系列三）

本文链接：https://blog.csdn.net/weixin_40719409/article/details/130744966

前言

在HC-Basic介绍和使用指南（组件库系列二）中有描述到通过传入自定义参数进行对组件库组件的一个自定义。这样的操作主要是为了增加组件库的扩展性和高适应性，尽可能的满足更多的实际场景

使用方法：

基于Vue.use(组件库名，参数)的方法，我们可以在注册组件库插件的时候向组件库插件注入我们自定义的可选参数

import hcBasic from 'hc-basic';
import hcOptions from './hcOptions';
Vue.use(hcBasic, hcOptions);

实现步骤

在我们私有组件库的插件入口函数中，接收可选参数option，并在本地建立一个配置文件options.js

本地建立options.js

引入options.js文件，通过deepmerge库将本地配置文件和传入的配置参数进行对象深度合并，并将合并结果存储到vue的原型上，然后注册组件、指令、过滤器。

// 引入hc-basic包默认配置可被外部传入参数覆盖
import basicOptions from './options.js';
// 引入公共组件、指令、过滤器
import components from './components';
import directives from './directives';
import filters from './filters';
const install = (Vue, option = {}) => {
   // 判断是否安装
   if (install.installed) return;
   const options = deepmerge(basicOptions, option);
   Vue.prototype.$Config = options;
   Vue.use(components);
   Vue.use(directives, options.directives);
   Vue.use(filters);

因为先进行的原型加载，后进行的组件、指令、过滤器注册，在组件、指令、过滤器注册的过程前，我们能在组件、指令、过滤器层拿到我们自定义的组件配置。接下来我们就可以在组件库中进行配置变量的替换了

form-item组件库中的使用
table组件中的使用
* 指令中的使用

附上配置代码

export default {
    Components: {
        formItem: {
            labelFontSize: 14, // form项的label字体大小，用来设置label的宽度
            label: 'label', // 默认select、checkbox、radio的option的label字段
            value: 'value' // 默认select、checkbox、radio的option的value字段
        },
        pager: {
            currentPage: 'pageNo', // 当前页配置字段
            pageSize: 'pageSize', // pager组件page-size字段
            layout: 'total, sizes, prev, pager, next, jumper' // pager组件layout
        },
        table: {
            optionLabel: '操作',
            noData: require('./assets/images/noData.svg')
        },
        desc: {
            color: {
                label: 'secondary',
                value: 'textPrimary'
            },
            emptyText: '------',
            distance: '32'
        }
    },
    Encrypt: {
        AES: {
            KEY: '1234567812345678', // aes加密-密钥
            IV: '1234567812345678' // aes加密-密钥偏移量
        }
    },
    tCode: {
        path: '/dict/data/getDirtDataList', // tcode请求地址
        key: 'dictCode', // tcode入参字段
        type: 'get', // get post
        cache: true, // 是否缓存处理
        dataType: 'dictType', // ''''
        isNumValue: 0, // '''
        func: res => res.data.data
    },
    directives: {
        copy: {},
        errImg: {
            avatarErr: 'https://ocj-erp-frontendonline.oss-cn-shanghai.aliyuncs.com/img/avator.png', // 头像错误图片
            showErr: 'https://ocj-erp-frontendonline.oss-cn-shanghai.aliyuncs.com/img/nofound.png', // 展示错误图片
            upErr: 'https://ocj-erp-frontendonline.oss-cn-shanghai.aliyuncs.com/img/upload-fail.png' // 上传错误图片
        },
        onlyInt: {},
        onlyNumber: {},
        preventShake: {
            time: 800
        },
        watermark: {
            fillStyle: 'rgba(180, 180, 180, 0.2)',
            width: 400,
            height: 200,
            title: (JSON.parse(localStorage.getItem('usermess')) || {}).userCode,
            subTitle: getDate()
        }
    },
    axios: {
        ipUrl: '',
        // axios基础配置
        config: {
            baseURL: '/admin/global', //联调
            timeout: 60000,
            retry: 1, // 超时失败时重连一次
            retryDelay: 1000,
            withCredentials: true, // default
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            }
        },
        // 后端定义返回成功参数code
        successCode: undefined,
        // token参数
        token: '',
        // 请求拦截器
        requestCallback: config => {
            config.headers.token = localStorage.getItem('token');
            config.headers['Content-Type'] = 'application/json';
            return config;
        }
    }
}