网络日志

叮~你收到一份 Vexip UI 2.0 开发中期报告

从 Vexip UI 2.0 的第一个 beta 版本发布到现在已经两个月了,当前已经是第 19 个 Beta 版本 2.0.0-beta.18,我觉得有必要写一份中期报告,总结一下到目前为止做的一些功能的开发。

由配置 Sass 变量重构为 CSS 变量

2.0 的第一个改动就是重构样式,将以前通过 Sass 变量配置来修改组件库样式的方式,改为了原生 CSS 变量,这样在样式定制化的时候就脱离了样式预处理器。

官网首页就可以快速切换主题色查看效果。

Gif 被压缩得有点厉害,糊掉了。。。

同时做了内置的暗色主题,结合 CSS 变量可以实现动态切换主题。

支持通过配置修改组件属性的默认值

在所有的组件中,除了 valueoptions 或是这样性质的属性外,其余所有属性的默认值均是可以配置的。

举个例子,按钮组件的 type 默认情况下是 'default',但在使用中可能大部分按钮的 type 都需要是 'primary',那在初始化组件库时则可以传入配置进行修改:

import { createApp } from 'vue'
import { install } from 'vexip-ui'
import App from './App.vue'

createApp(App).use(install, {
  props: {
    button: {
      type: 'primary'
    }
  }
})

这样就能减少大量重复性的属性传入。

曾经有一次,在一个几十个控件的表单里要把大小改成大号,写样式都觉得有点多,于是便有了这个功能。

如果需要局部修改,还可以借助 ConfigProvider 实现:

<template>
  <ConfigProvider :props="providedProps">
    <Button></Button>
  </ConfigProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const providedProps = ref({
  button: {
    type: 'primary'
  }
})
</script>

全面支持虚拟滚动

为了支持海量数据渲染的场景,所有含有列表特性的组件均内置了虚拟滚动,包括:Select、Table、Cascader、Transfer 等等。

同时将虚拟滚动(列表)抽离为单独的组件 VirtualList 提供复用,示例见文档

国际化多语言的支持

目前 Vexip UI 内置了中英两种语言。

同时为了适应多语言,可以在初始化的时候传入自定义的国际化配置:

import { createApp } from 'vue'
import { install } from 'vexip-ui'
import App from './App.vue'

createApp(App).use(install, {
  locale: {
    locale: 'zh-CN', // 可以指定一个内置的语言作为基础
    input: {
      placeholder: '随便输入点什么...'
    }
  }
})

如果需要局部修改,依然可以借助 ConfigProvider 实现:

<template>
  <ConfigProvider :locale="locale">
    <Input></Input>
  </ConfigProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const locale = ref({
  input: {
    placeholder: '随便输入点什么...'
  }
})
</script>
如果有进一步的需求,可能会继续开发 rtl 的特性来支持某些语言的国际化。

可配置的命名空间

对于命名空间,做了两种场景的支持。

第一种是针对类名的命名空间,需要同时配合修改 sass 来修改样式中的命名空间:

createApp(App).use(install, { namespace: 'vxp' })
@use 'vexip-ui/style' with (
  $namespace: 'vxp'
);

第二种是针对组件名的命名空间,因为默认情况下组件名是无前缀的,有时候可能会有冲突:

createApp(App).use(install, { prefix: 'V' })
<template>
  <VButton></VButton>
  <VInput></VInput>
</template>

属性的设计

在组件属性的设计上,Vexip UI 遵循尽可能简洁的原则。

基于这点,对于超过 97.812% 的 Boolean 类型的属性,其设计都遵循默认值为 false,在需要设置为 true 时可以直接以添加属性的方式完成,而不需要再做赋值。

比如模态框 Modal 默认情况下是有 Footer 的,那控制是否出现 Footer 的属性在设计时会使用 no-footer,而不会是 :footer="false"

<Modal no-footer></Modal>

还有一种属性,它只有两种状态,比如控制一个组件是横向的还是纵向的,对于这些属性的设计上,并不会使用以往的 type="horizontal/vertical",而会将其中一种状态作为默认状态(比如在这个示例中更多的是横向为组件的默认状态),另一种状态通过一个 Boolean 属性进行打开(这个示例中属性会是 vertical):

<template>
  <CheckboxGroup vertical :options="options"></CheckboxGroup>
</template>

这样在对于这些两面性的属性,一是能保持尽量整洁,二是在开发的过程会更有装配的感觉。

支持直接的按需引入

所有组件支持直接的按需引入,仅会打包用到的组件:

<template>
  <Button>Button</Button>
</template>

<script setup lang="ts">
import 'vexip-ui/css/preset.css'
import 'vexip-ui/css/button.css'

import { Button } from 'vexip-ui'
</script>

不过这样需要手动引入样式,可以借助像是 vite-plugin-style-import 或者 unplugin-vue-components 的插件实现自动引入样式,具体可以查看文档

后续计划会直接在组件库里内置几个主流插件的 Resolver。

组件的可访问性

所有的组件都做了相对完整的可访问性支持。

在 Vexip UI 中,每个交互性的组件,能用鼠标完成的交互,几乎都可以单独使用键盘完成。

不过关于 aria 系列属性,我也是现学现卖的,不敢说做的怎么样~

全新组件

到目前为止,新增了下列组件:

  • Grid 栅格布局(display: grid 实现)
  • Layout 布局
  • Space 间距
  • Cascader 联级选择器
  • Transfer 穿梭框
  • Avatar 头像
  • Viewer 查看器
  • Skeleton 骨架屏
  • ConfigProvider 配置注入
  • Overflow 溢出
  • ResizeObserver 缩放观测
  • VirtualList 虚拟列表

除此之外对大量的组件做了优化、升级,以及 Bug 的修复~

可以在文档查看详情。

表单相关组件易用性改进

针对使用频率最高的表单系列组件,在最近的更新里做了一些特定的优化。

以往我们使用表单组件的时候,在 FormItem 的 prop 绑定了一次属性后,在其下的控件组件还要再使用 v-model 绑定一次。

在 Vexip UI 中,我们约定一个 FormItem 下只有一个表单控件系列的组件(Input、Select 这些),这样 FormItem 会自动将值传递到该组件中,无需再一次的 v-model 绑定。

<template>
  <Form :model="model">
    <FormItem required label="Input" prop="input">
      <Input></Input>
    </FormItem>
    <FormItem required label="Select" prop="select">
      <Select :options="options"></Select>
    </FormItem>
  </Form>
</template>

能够在常规情况下减少一些重复性的代码。

不过也有缺点,比如你希望将 fullName 这个字段拆分成两部分 firstNamelastName 然后分别用两个 Input 来输入,那你需要在表单的 model 里使用 firstNamelastName 字段分别关联到两个 FormItem 中,提交的时候再自行合并成 fullName 字段。

后续计划,除了持续优化易用性,应该会支持表单内置栅格布局功能,以及 JSON Schema 表单。

全新升级的文档

上一个版本的文档是一个单独的项目,在 2.0 中整合至了组件库的 docs 目录下,并做了全方位的升级:

  • 完善了所有组件的文档,每个组件基本覆盖了常规功能使用的用例
  • 全面的英文文档翻译,虽然采用大规模机翻加小规模修正(一个人翻的尽力了,虽然知道你们不看英文的)
  • 移动端阅读体验优化(除了个别示例不支持移动端场景的)
  • 基于 @vue/repl 实现了 Playground,文档中的所有示例均可以在 Playground 中打开游玩

后续的工作计划

目前 Vexip UI 比较重要的还未完成的工作是单元测试,后续的开发工作重心将迁移到单元测试撰写上,在每个组件的基本功能的测试用例都差不多的时候应该会正式发版 2.0.0

然后另一个方面,是当前缺少了一个示例(模版)项目(或者说是 admin 项目?),计划是在 2.0.0 正式发版后开发,或者如果有小伙伴有兴趣来试一试的话,我非常愿意提供帮助~

组件功能方面,应该会继续把表单的易用性的优化和功能增强作为主要的方向。

最后,还是安利一下下 Vexip-UI - GitHub,希望小伙伴们能支持一下,顺便赏一个🌟~