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

最新推荐文章于 2024-09-30 11:04:57 发布

未觉雨声

最新推荐文章于 2024-09-30 11:04:57 发布

阅读量288

点赞数

文章标签： ui vue.js 前端 javascript scss

本文链接：https://blog.csdn.net/CloudSound/article/details/126070651

版权

VexipUI2.0已发布多个Beta版本，带来了诸多改进，包括样式重构为CSS变量，支持动态主题切换，组件属性配置，虚拟滚动，国际化，按需引入等。新增组件如Grid, Layout, Cascader等，并优化了表单组件的易用性。文档也进行了全面升级，提供Playground功能。未来计划侧重单元测试和表单功能增强。

摘要由CSDN通过智能技术生成

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

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

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

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

请添加图片描述

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

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

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

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

举个例子，按钮组件的 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 这个字段拆分成两部分 firstName 和 lastName 然后分别用两个 Input 来输入，那你需要在表单的 model 里使用 firstName 和 lastName 字段分别关联到两个 FormItem 中，提交的时候再自行合并成 fullName 字段。