HC-Basic介绍和使用指南（组件库系列二）

已于 2023-05-22 20:07:46 修改
阅读量424 收藏 14
点赞数 19
分类专栏： 私有组件库 文章标签： vue.js javascript 前端 elementui 前端框架
于 2023-05-18 11:50:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40719409/article/details/130736869
版权

前言

基于VUE + Element UI搭建的basic npm 包， 降低项目搭建、开发成本；对element UI内组件进行二次封装，降低组件使用难度； 数组、对象、存储、日期等项目开发常用函数集合，并且所有方法已挂载到 VUE 原型上；公共基础样式封装，主题配置等功能

讲组件库的使用不是推荐各位使用我的私有组件库，而且从先从使用层出发才能更好的了解我对整个组件库封装的思路

功能介绍

  • 公共组件
    • 二次封装和继承elementUI的部分组件，如form-item、table、dialog、pager等
    • 抽离页面多次使用的页面结构或组件形式。增加页面编辑速度，提高开发效率
    • 建立后台系统基本公用组件如hc-icon（svg图标）、hc-frame（后台页面架构menu+tabs联动）
  • 公共样式
    • 将开发页面的公共样式进行抽离，减少页面私有样式的编写，保持css代码统一性和高维护性
    • 内部包含了 block 和 Text 两个模块内容
      • Block
        - Border 边框
        - Cursor 光标类型
        - Display 显示方式
        - flex 弹性盒子布局
        - Float 浮动
        - Position 位置
        - Space 边距
        - Shadow 阴影
      • Text
        - Typography 文字
        - Background 背景
  • 公共内容
    • 全局过滤器 - 全局指令 - 项目常用正则 - 数组方法集合 - 对象方法集合 - 日期方法集合
    • 公共正则（手机号、邮箱、身份证等常用正则）
    • 自定义指令（防抖指令、图片错误指令、复制指令等）
    • 常用函数方法，如repeatObjEle：数组中对象元素去重，第一个参数为数组，第二个为去重对象的key

使用指南

npm 包安装方法

npm i hc-basic -S

在vue项目入口文件中

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

样式引入有两种方式（*必须引入）

自定义主题引入

该方式引入可以达到通过改动scss变量，更改全局主题样式。可对部分既定sass样式进行配置重定义

  1. 在项目scss入口文件中新增一个名为hcConfig.scss文件，并将该文件引入到入口scss文件中
// index.scss 文件
@import 'hcConfig'; // hc-basic 样式重置

2.将以下内容复制到hcConfig.scss文件中即可

$--color-default-hc: #ffffff; // 主题默认色
$--color-primary-hc: #1b86ee; // 主题色
$--color-success-hc: #40c073; // 主题成功色
$--color-info-hc: #8c8c8c; // 主题信息色
$--color-warning-hc: #faad14; // 主题警告色
$--color-danger-hc: #f5222d; // 主题错误色

$--color-text-primary-hc: #161d25; // 默认主题文本颜色
$--color-text-regular-hc: #454f5b; //
$--color-text-secondary-hc: #8c8c8c;
$--color-text-placeholder-hc: #bfbfbf; // 输入框内提示文本颜色
/*
* 边框颜色不同亮度
*/
$--border-color-base-hc: #dcdfe6; //
$--border-color-light-hc: #e4e7ed;
$--border-color-lighter-hc: #ebeef5;
$--border-color-extra-light-hc: #f2f6fc;
// 边距基数
$sideBasic: 4; // padding、margin边距的基数值
$spaceMax: 21; // 边距基数的最大倍数
$--border-radius-base-hc: 4px; // 边框圆角基础值
$--background-color-base-hc: #f5f7fa; // 背景基础颜色值

$colMax: 24; // 24珊格col布局

// 文本字体大小和lineHeight的配合设置
$textList: (
 (
   size: 12,
   line: 20
 ),
 (
   size: 14,
   line: 20
 ),
 (
   size: 16,
   line: 22
 ),
 (
   size: 18,
   line: 24
 ),
 (
   size: 20,
   line: 26
 ),
 (
   size: 28,
   line: 40
 ),
 (
   size: 36,
   line: 50
 )
);
@import '~hc-basic/scss/default/index.scss';
$--font-path: '../../../node_modules/element-ui/lib/theme-chalk/fonts';
@import '~element-ui/packages/theme-chalk/src/index';
自定义主题切换引入

自定义主题切换引入主要针对项目中需要进行主题切换，可以通过配置一个固定参数来达到动态配置主题的方法

  1. 在项目scss入口文件中新增一个名为hcConfig.scss文件，并将该文件引入到入口scss文件中
// index.scss 文件
@import 'hcConfig'; // hc-basic 样式重置
  1. 将以下内容复制到hcConfig.scss文件中即可
// 边距基数
$sideBasic: 4; // padding、margin边距的基数值
$spaceMax: 21; // 边距基数的最大倍数
$--border-radius-base-hc: 4px; // 边框圆角基础值
$--background-color-base-hc: #f5f7fa; // 背景基础颜色值

$colMax: 24; // 24珊格col布局

// 文本字体大小和lineHeight的配合设置
$textList: (
  (
    size: 12,
    line: 20
  ),
  (
    size: 14,
    line: 20
  ),
  (
    size: 16,
    line: 22
  ),
  (
    size: 18,
    line: 24
  ),
  (
    size: 20,
    line: 26
  ),
  (
    size: 24,
    line: 32
  ),
  (
    size: 28,
    line: 40
  ),
  (
    size: 36,
    line: 50
  )
);
@import '~hc-basic/scss/theme/theme.css';
@import '~hc-basic/scss/theme/index';
@import '~element-ui/lib/theme-chalk/icon.css';
  1. 配置一个存放各个主题变量的js文件，有几个主题就在文件中创建几个key-value
// theme.js
export default {
    default: {
	    // 主题色
        functional: { primary: '#0e927a', success: '#40c073', info: '#8c8c8c', warning: '#ffbe3f', danger: '#e05b5b' },
        // 文本色
        text: { primary: '#202224', regular: '#1A202C', secondary: '#718096', placeholder: '#A6B1BB' },
        // 边框色
        border: { base: '#E1E8EB', light: '#e4e7ed', lighter: '#ebeef5', extraLight: '#f2f6fc' },
        // 阴影颜色
        shadow: '#000000',
        // 其他变量
        other: {},
        // 主题名
        type: 'default'
    },
    blue1: {
        functional: { primary: '#4299A9', success: '#40c073', info: '#8c8c8c', warning: '#ffbe3f', danger: '#e05b5b' },
        text: { primary: '#161d25', regular: '#454f5b', secondary: '#8c8c8c', placeholder: '#bfbfbf' },
        border: { base: '#dcdfe6', light: '#e4e7ed', lighter: '#ebeef5', extraLight: '#f2f6fc' },
        shadow: '#000000',
        other: {},
        type: 'blue1'
    }
};

4.在APP.vue中指定初始化主题

import theme from '@utils/theme.js';
this.$Func.setTheme(theme['default']);

5.通过APP.vue的方法在需要进行主题切换的页面进行主题的切换代码编写

关于刷新之后主题保持选中不变这种小问题就留给各位自行解决了，最简单的就是将当前主题类型保存到store和localstroge里面，每次刷新的时候拿到值重新设置就可以了。相信这些小问题是难不到各位的，所以我就偷个懒不写那么详细了

自定义配置文件引入（可选项）

在使用组件库的过程中，有些时候会因为一个外部的因素导致需要组件库字段的一个适配性。这里我们可以通过加入hcOptions.js配置文件的方式处理这些问题
我们在使用组件库的过程中引入组件库一般都是这样：

Vue.use(hcBasic);
Vue.use(elementUI)

其实Vue.use是支持多参数的，除第一个参数外，后续的参数都会化为插件入参传入到插件内部。通过这样的机制，我们可以让我们的私有组件库变得更加多样性，更好的适配不同的情况

自定义配置文件引入方法
  1. 在项目中main.js（入口文件）同级新增一个hcOptions.js文件，在main.js中引入并使用
// main.js 文件
import hcBasic from 'hc-basic';
import hcOptions from './hcOptions';
Vue.use(hcBasic, hcOptions);
  1. 将以下内容复制到hcOptions.js文件中即可
import store from './store';
// 该文件为整个项目针对axios的二次封装，将请求拦截器和响应拦截器抛出
import { responseCallback } from './util/axios/axiosCommonFunc';

export default {
	// 对各个组件进行组件库的私有设置
    Components: {
        formItem: {
            labelFontSize: 14, // form项的label字体大小，用来设置label的宽度
            label: 'dictLabel', // 默认select、checkbox、radio的option的label字段
            value: 'dictValue' // 默认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/empty/noData.png') // table数据为空时显示图片内容
        },
        desc: {
            color: {
                label: 'secondary', // 详情组件label字段颜色
                value: 'textPrimary' // 详情组件value字段颜色
            },
            emptyText: '------', // value值为空时显示的内容
            distance: '20' // 每一行之间的间距
        }
    },
    Encrypt: {
        AES: {
            KEY: '1234567812345678', // aes加密-密钥
            IV: '1234567812345678' // aes加密-密钥偏移量
        }
    },
    // 字典值配置
    tCode: {
        path: '/admin/dictDetail/queryList', // tcode请求地址
        key: 'dictCode', // tcode入参字段
        type: 'post', // get post
        cache: true, // 是否缓存处理
        dataType: 'dictType', // ''''
        isNumValue: 0, // '''
        func: res => {
            return res.data;
        }
    },
    // 指令配置
    directives: {
        copy: {},
        errImg: {
            avatarErr: 'https://ocj-erp-frontendonline.oss-cn-shanghai.aliyuncs.com/img/avator.png', // 头像错误图片
            showErr: require('./assets/images/empty/noImage.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: '主标题',
            subTitle: '副标题'
        }
    },
    axios: {
    	// 可不用设置，通过proxy进行拦截代理
        ipUrl: '',
        // axios基础配置
        config: {
            baseURL: '/api/v1', //联调
            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.Authorization = store.getters.getToken;
            config.headers['Content-Type'] = 'application/json';
            return config;
        },
        responseCallback
    }
};

PS:好了，组件库的引入使用就到这里结束了，需要组件库源码和使用文档源码的可通过添加“yweiaimin“获取。（主要是代码放云效了，邀请链接有效期就TMD两天）。在后续的博客里我会详细的讲每一个点的

hc-basic已开源
组件库代码地址：
https://gitee.com/yangxiongasin/hc-basic
组件库文档代码地址：
https://gitee.com/yangxiongasin/hc-docs

对组件库开发有兴趣的可以进QQ群： 617330944大家一起讨论交流

前端杨雄
关注
专栏目录
hc定制平台组件使用
qq_42248955的博客
11-28 440
1、hc组件之slot插槽的使用 需求：page-engineering组件详情页面插入自定义视频，通过getDetailCallback方法回调设置 <page-engineering ref="pageEngineering" @getDetailCallback="getDetailCallback" > <!-- 插槽内容 --> <template #video> ...
java--ml 时间序列_时间序列-快速指南
cunzai1985的博客
09-23 1673
java--ml 时间序列 时间序列-快速指南 (Time Series - Quick Guide) Advertisements 广告 Previous Page 上一页 Next Page 下一页 时间序列-简介 (Time Series - Introduction) A time series is a sequence of observations...
Apache HBase 2015年发展回顾与未来展望
weixin_45583158的博客
01-04 190
编者按：高可用架构推出 2015 年度回顾系列文章，分享在架构领域具有典型意义的年度案例，本文由张虔熙分享。转载请注明来自高可用架构公众号「ArchNotes」。张虔熙，...
在Visual Basic中使用数据库
silent_me的专栏
03-04 3223
数据库是一个以电子化方式存储于文件中的大量信息的有机组织的集合。你可以使用许多数据库产品建立强大的数据库，这些产品包括Microsoft Access、Microsoft FoxPro、Btrieve、Paradox和dBASE等。你还可以使用Open Database Connectivity（ODBC）型客户机／服务器数据库，比如Microsoft SQL Server等。 Visual B
centos7安装OTRS开源工单管理平台
k21325的博客
09-06 9909
系统版本 [root@cdh111 ~]# uname -a Linux cdh111 3.10.0-514.el7.x86_64 #1 SMP Tue Nov 22 16:42:41 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux 安装运行环境(建议单独安装mysql，传送门点这)： [root@cdh111 ~]# yum -y install sendm
项目中自定义配置影响组件库怎么做（组件库系列三）
weixin_40719409的博客
05-18 186
在HC-Basic介绍和使用指南（组件库系列二）中有描述到通过传入自定义参数进行对组件库组件的一个自定义。这样的操作主要是为了增加组件库的扩展性和高适应性，尽可能的满足更多的实际场景。
fedora之rpkg，dist-git介绍个使用
码农崛起
07-02 766
https://clime.github.io/2018/09/18/starting-your-own-distro.html https://pagure.io/rpkg-util http://copr.fedorainfracloud.org/ https://github.com/release-engineering/dist-git 第一部安装DistGit First, install the dist-git package: DistGit（分发Git）是具有附加数据存储的G
鸿蒙HarmonyOS三方库推荐
小北的博客
09-05 1903
第三方库众多，但在此我只精选了一些经典之作，希望能为大家提供帮助。不喜勿喷，整理与总结不易，还请点赞👍并收藏📂。如果您有其他推荐，欢迎留言，我会定期更新，并在推荐中署名感谢您的贡献！
bcprov-jdk15on 简介、中文文档、中英对照文档 下载
热门推荐
寒水馨
12-04 1万+
bcprov-jdk15on 简介、中文文档、中英对照文档 下载；bcprov-jdk15on、org.bouncycastle、中文文档、中英对照文档、下载、包含jar包、原API文档、源代码、Maven依赖信息文件、翻译后的API文档、jdk15on、bouncycastle、bcprov、jar包、java、中英对照文档；bcprov-jdk15on-1.68.jar、bcprov-jdk15on-1.60.jar、bcprov-jdk15on-1.59.jar、bcprov-jdk15on-1.58
基本超声波教程-项目开发
03-30
例如，可能使用了如HC-SR04这样的常见超声波传感器模块，该模块有四个引脚：VCC（电源）、GND（地线）、Trig（触发）和Echo（回波）。代码会使用脉冲宽度调制(PWM)或者数字输入/输出引脚来控制Trig和Echo。 `basic-...
paste.deploy安全实践：强化Web应用安全策略的终极指南
![paste.deploy安全实践：强化Web应用安全策略的终极指南]...它提供了一个分层的配置方式，可以支持多种服务器和中间件组件，使得配置和管理变得简单而强
【Twisted.application安全实践指南】：网络应用防御攻击的终极策略
[【Twisted.application安全实践指南】：网络应用防御攻击的终极策略](https://itshelp.aurora.edu/hc/article_attachments/1500012723422/mceclip1.png) # 1. Twisted.application的安全基础 Twisted.application...
Vue中的常用指令
m0_62388400的博客
11-12 912
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
第四十二章 Vue中使用mutations修改Vuex仓库数据
Calvin的博客
11-11 645
在Vue中，明确vuex同样遵循单向数据流，即组件中不能直接修改仓库的数据，我们可以通过 strict: true 可以开启严格模式，防止在组件中非法修改仓库数据。(错误写法)在Vue中，组件想要修改Vuex的数据，可以通过Vue提供的mutations来实现。本章节我们将通过掌握mutations的操作流程，来修改state数据。(state数据的修改只能通过mutations )1.2. mutations修改数据基本步骤。
前端基础面试题·第四篇——Vue（其三）
2301_76380626的博客
11-09 841
Vue中组件定义式可以为其添加一个name属性，这个属性是组件的别名。当时组件被渲染时，Vue DevTools 会显示组件的名称，方便开发者调试，增强调试体验。当组件需要在内部调用渲染自己本身时，需要通过name属性来指定组件名称，否则Vue会报错。给组件命名后，我们可以通过全局注册，在全应用范围内使用该组件。方便了组件的使用，提高了组件复用性。使用keep-alive包裹动态组件时，可以通过include和exclude属性来指定哪些组件需要缓存，哪些组件不需要缓存。
Vue实际应用之无限滚动、css之&、混合宏和~
最新发布
swj的博客
11-12 498
今天来点实际的，看起来简单但是给我们代码带来更好的效果，一起来看看吧！先来介绍一个三方库。
速盾：vue的cdn是干嘛的？
zhuguowang01的博客
11-08 386
这时就可以使用CDN来加速这些库或者插件的加载。总结一下，Vue的CDN是一种将Vue.js及其相关的库或者插件缓存在全球各个节点的技术，通过就近访问的原则，加速网页加载，减轻服务器负载，并提高网站的稳定性和可靠性。Vue的CDN可以帮助将Vue.js及其相关的库或者插件存储到全球各个节点的服务器中，使得用户可以从最近的服务器上加载这些资源，从而提高加载速度。提高网站的稳定性和可靠性：CDN通过将资源存储在多个服务器上，即使某个节点故障或者不可用，用户仍然可以从其他的节点上获取资源，保证网站的可用性。
vue3组件应用 + 以及组件相关知识应用
m0_51244077的博客
11-08 1024
vue3组件应用 + 以及组件相关知识应用
HC-05蓝牙模块使用指南：连接与通信解析
"这篇文档是关于计算机网络领域中的一种特殊应用——蓝牙模块的使用和配置，特别是HC-05蓝牙2.0串口模块的用户手册。内容涵盖了防伪识别、模块介绍、连接通讯说明以及快速测试和开发利用等多个方面。" 在蓝牙模块的...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端杨雄

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值