HeyUI组件库支持Vue3.0版本 🎉

vvpvvp
3,220 阅读4分钟

image.png

为什么现在才更新？

这两年入职蚂蚁，一直在忙碌自己的工作，只能闲暇之余一个一个组件升级，独立开发者总是速度比较缓慢。

这两年工作中的一些思考

在写 HeyUI 组件库的时候，是在一家创业公司，我们的前端项目有10多个，不过大多数都是PC端项目，然后都是vue，所以在写组件库的时候，有比较大的封闭性，更多的是强调易用性。

在入职蚂蚁过后，因为场景变化，更多的是接触移动端项目，所以慢慢的HeyUI也没有了更多的需求场景，那一直就只是维护修改bug之类的。

慢慢的在蚂蚁接手了大量的项目，技术跨越小程序、vue、react，从以前只写vue，到学习react、小程序，写PC端项目，移动端项目，小程序项目。使用的框架或者脚手架也多种多样，比如说bigfish，antd，kylin，sherry，smallfish，herbjs，minifish....。

技术的迭代是不停的，业务的需求也是不断的，新的技术也会慢慢变成历史，变成技术债，而在这些变化当中，对于我们来说，到底哪些是比较重要的？

一、代码规范化
eslint+aci配置，让代码的格式最起码是规范的。 这一点蚂蚁做的很好，几乎90%的项目，都配置了eslint。 不过在代码的细节规范上，还是有很多问题，比如说变量命名，文件定义等等。

二、代码可维护性
不管是vue，还是react、小程序，我接手了相当多的业务代码。
但是在这些代码中，存在着大量的可维护性问题，其中比较突出的是这几种：

1、代码过度封装：过度封装的代码，会导致你后期变更逻辑的时候，容易影响其他的逻辑，所以不要过度强调代码的封装，有时候，虽然原生代码看起来比较原始，但是真的很好维护。

2、代码引用不清晰：一些框架有一些全局配置，这就导致接手代码的时候，你再去看这个方法调用，你都不知道这个方法是哪里的，又有哪些相关配置。尤其是我们很多时候，都是空手直接上，并不会提前了解当前代码框架的很多信息，太多特殊配置形态，会导致代码逻辑很难理解。

3、代码架构不清晰：代码结构逻辑混乱，架构和实际逻辑不相符，导致代码可读性很差。

三、框架可维护性
我们维护的代码中，有一些框架都停止更新了，这就导致我们的代码维护起来，小心翼翼。
遇到的很多问题，都没有办法去解决，也找不到相应的解决方案。
所以，选择一个能长期维护的框架，是非常重要的。

这些总结，只是工作中遇到的一部分，但是在这一次组件库升级中，也给了我一些方向。

版本升级中有哪些重要变化？

全局方法的引用方式

在heyui1.0中，全局方法是使用prototype的方式定义的，使用this即可调用。
而在heyui2.0中，全局方式都需要通过引用的方式调用。

// 1.0

this.$Message('这是一个普通的提醒');

// 2.0

import { message} from 'heyui';
message('这是一个普通的提醒');

input、textarea从原生DOM改成组件调用

在vue2.0中默认情况下，传递给带有 v-on 的组件的事件监听器只能通过 this.$emit 触发。要将原生DOM监听器添加到子组件的根元素中，需要使用 .native 修饰符。

所以使用原生的DOM，不需要把很多事件重新定义成方法，以免造成很多事件的丢失。这样的定义有一定的好处，但是也有一定的坏处。由于全局直接修改了input和textarea的样式，就导致引入其他外部组件的时候，input样式会存在问题。

在vue3.0中，对于子组件中未被定义为组件触发的所有事件监听器，Vue 现在将把它们作为原生事件监听器添加到子组件的根元素中，这样就可以完美解决事件监听的问题了。

// 1.0

<input type="text" v-model="value"/>
<textarea v-model="value"></textarea>

// 2.0
<Input type="text" v-model="value" />
<Textarea v-model="value2"></Textarea>

组件事件命名规范化

基于上面的影响，所有click事件都重新命名成clickItem，避免原生的click事件被覆盖。

部分的input事件改成change事件，更容易被理解。

// 1.0
<Menu :datas="data" @click="triggerClick" ></Menu>

// 2.0
<Menu :datas="data" @clickItem="triggerClick" ></Menu>

Confirm方法变化

1.0中，参考elementUI，使用的是Promise方式调用，但是如果对于取消不做处理的话，会导致catch未处理报错，而title的参数定义也不清晰，所以整体做了优化。
以elementUI为例，如果catch不做处理的话，会有error。

image.png

// 1.0
this.$Confirm('确定删除？', '自定义title').then(() => {
  this.$Message.success('确定删除！');
}).catch(() => {
  this.$Message.error('取消');
});

// 2.0
import { confirm} from 'heyui';
confirm({
  title: '标题',
  content: '确定删除？',
  onConfirm: () => {
    message.success('确定删除！');
  },
  onCancel: () => {
    message.error('取消');
  }
});

Modal组件化

在heyui1.0中，组件库提供了方法调用vue组件的方式，这样modal就可以在js代码中重复使用。
在heyui2.0中，已经废弃了该方法，modal方法依旧可以使用，但是只能简单传递content来调用。 其他复杂的场景，建议使用组件的方式。

// 1.0
this.$Modal({
  component: {
    vue: ModalComponent,
    datas: { fruit: this.value } // 子组件直接使用 props 即可使用
  },
  events: {
    success: (modal, data) => {
      console.log(data)
    }
  }
});


<!-- 2.0 -->
<Modal v-model="openModal" title="标题">
  <ModalComponent
    :fruit="value"
    @close="openModal = false"
    @success="success"
  />
</Modal>

Table样式优化

在1.0中，table样式比较简陋，在2.0中，对table样式彻底做了优化。

1.0版本样式 image.png

image.png 2.0版本样式 image.png

image.png

当然，组件库还有更多的细节升级，这里就不慢慢细说了。

欢迎使用

我们新的2.0版本官网地址：v2.heyui.top

以及针对2.0更新的HeyUI Admin：admin.heyui.top

avatar
文章
阅读
粉丝