本文由TinyVue组件库核心成员郑志超分享，向咱们介绍了如何在OpenTiny Vue组件库中进行UX标准的定制批改。学会应用该办法后，开发者能够更精准地管制或批改用户体验标准的范畴，进步开发效率，同时升高保护老本和代码复杂度。

什么是前端组件库主题标准自定义

前端组件库主题标准自定义是指在组件库中定义一套主题标准，包含色彩、字体、间距等款式属性，并提供一种自定义形式，使用户能够依据本人的需要批改主题标准，从而实现自定义主题的成果。

如何实现主题标准自定义

在理论我的项目中，往往须要依据不同的品牌、格调、场景等需要来定制不同的主题，而组件库的主题标准往往是固定的，无奈满足这种需要。因而，提供主题标准自定义的性能，能够让用户依据本人的需要来定制主题，从而更好地满足我的项目需要。

那么，如何实现主题标准自定义呢？一般来说，能够通过以下几个步骤来实现：

1. 定义主题标准： 首先须要定义一套主题标准，包含色彩、字体、间距等款式属性，以及对应的变量名。

2. 提供自定义形式： 在组件库中提供一种自定义形式，让用户能够依据本人的需要来批改主题标准。一般来说，能够提供一个配置文件或者一个可视化的界面来进行主题标准的批改。

3. 利用主题标准： 在组件库中应用定义好的主题标准，通过变量名来援用对应的款式属性，从而实现主题标准的利用。

接下来让咱们一起来看看如何在 OpenTiny Vue 组件库中实现主题配置和UX交互标准自定义吧~

实操演练

演示代码仓：

https://github.com/opentiny/cross-framework-component.git

第一步 自定义主题

首先，通过主题配置零碎定义所需的主题标准，并按流程公布主题包。能够在现网环境地址（https://www.opentiny.design/designtheme/home**）
实现这一步骤。

1、公布主题

配置完主题后点击公布，将用户的配置转换成代码。一键式主题公布以及版本治理，让治理更简略；装置后即可应用，让开发者更专一。

2、装置应用主题

公布胜利后，须要在vue3子工程中引入该依赖。如下图所示：

3、而后从新在我的项目根目录下载依赖

pnpm i
4、在我的项目中应用

在vue3子工程的main.js文件中导入主题款式文件

import '@opentiny/vue-zzc-theme/index.css'

5、启动工程查看

运行命令如下命令启动vue3自工程：

pnpm dev:vue3
展现成果如下：

二、自定义交互标准

1、自定义组件交互标准

首先须要提供一份自定义的标准配置，这里自定义了button组件的点击事件行为，能够看到renderless函数返回的办法或者属性会笼罩本来组件的办法或者属性；

其次renderless函数的参数会将组件外部的状态包含：props、hoos、api、utils、extendOptions 传递进去，方便使用或者设置组件的外部状态或者调用组件的其余办法。

{      /**       *       * @param {object} props 传递给组件的属性       * @param {object} hooks vue或者composition-api的hooks       * @param {object} utils OpenTiny封装的工具对象       * @param {object} api 组件的状态state和办法的汇合       * @param {object} extendOptions 额定参数       */      renderless: (props, hooks, { emit }, api, { framework }) => {        return {          // 自定义笼罩button组件的点击事件行为          handleClick(event) {            console.log(              console.log(`${framework}框架代码已触发！！！！！！！！！`)            )            alert('自定义交互逻辑')            emit('click', event)          }        }      }    }

2、通过ConfigProvider组件向外部所有组件传递自定义标准（能够实现部分组件的交互标准批改）

具体代码在vue3子工程的App.vue文件,如下图所示：

成果如下：

总结

总体来说，通过实现主题标准自定义，能够达到以下几个成果：

1. 进步组件库的可定制性： 用户能够依据本人的需要来定制主题，从而更好地满足我的项目需要。

2. 进步组件库的可复用性： 通过定义一套主题标准，能够使组件库中的款式属性更加对立，从而进步组件库的可复用性。

3. 进步组件库的可维护性： 通过定义一套主题标准，能够使组件库中的款式属性更加清晰明了，从而进步组件库的可维护性。

当然TinyVue组件库不仅实现了UX主题标准自定义，同时是通过笼罩单个函数的形式，这样更加有利于进步用户体验标准的定制化水平，满足特定的业务需要和用户需要，同时进步开发效率和用户满意度，同时进步代码的可维护性。从而进步前端开发的效率和品质。

以上就是郑志超同学的分享，如果你也有更多前端技术想与咱们交换，欢送投稿。除此之外，也欢送你参加到 OpenTiny 开源中来，一起共建我的项目，研究前端技术。

对于 OpenTiny

OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 挪动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，领有主题配置零碎 / 中后盾模板 / CLI 命令行等效率晋升工具，可帮忙开发者高效开发 Web 利用。

外围亮点：

  1. 跨端跨框架：应用 Renderless 无渲染组件设计架构，实现了一套代码同时反对 Vue2 / Vue3，PC / Mobile 端，并反对函数级别的逻辑定制和全模板替换，灵活性好、二次开发能力强。
  2. 组件丰盛：PC 端有80+组件，挪动端有30+组件，蕴含高频组件 Table、Tree、Select 等，内置虚构滚动，保障大数据场景下的晦涩体验，除了业界常见组件之外，咱们还提供了一些独有的特色组件，如：Split 面板分割器、IpAddress IP地址输入框、Calendar 日历、Crop 图片裁切等
  3. 配置式组件：组件反对模板式和配置式两种应用形式，适宜低代码平台，目前团队曾经将 OpenTiny 集成到外部的低代码平台，针对低码平台做了大量优化
  4. 周边生态齐全：提供了基于 Angular + TypeScript 的 TinyNG 组件库，提供蕴含 10+ 实用功能、20+ 典型页面的 TinyPro 中后盾模板，提供笼罩前端开发全流程的 TinyCLI 工程化工具，提供弱小的在线主题配置平台 TinyTheme

分割咱们：

  • 官网公众号：OpenTiny
  • OpenTiny 官网：https://opentiny.design/
  • OpenTiny 代码仓库：https://github.com/opentiny/
  • Vue 组件库：https://github.com/opentiny/tiny-vue （欢送 Star）
  • Angluar组件库：https://github.com/opentiny/ng （欢送 Star）
  • CLI工具：https://github.com/opentiny/tiny-cli （欢送 Star）

更多视频内容也能够关注OpenTiny社区，B站/抖音/小红书/视频号。