一只高扩展性的vue组件库 —— JSMOD


在开发面向用户站点时,UI 通常由 designer 给出,这时需要组件库有丰富的自定义样式能力(同时保留默认提供基础样)

基于这点再看大部分的中后台组件库并不能满足需求,为大家介绍一只高扩展性 UI 组件项目 JSMOD VUE PC

项目相关

  1. 文档|示例

  2. Github

一句装b的目标

提供高自由度(高扩展性)的组件集合,并统一桌面端、移动端的使用方式,是一个面向用户端的组件库

王哲君的自定义之路

一、王哲君接了一个农药管理的项目,在实现需求时使用了JSMOD For Vue 作为其组件库,使用确认对话窗时他可以简单的使用如下代码

<mod-alert v-model="show1" content="请注意!墨子已漏电"></mod-alert>

得到了一个简单的默认样式
一只高扩展性的vue组件库 —— JSMOD

二、L爸爸觉得蓝色的风格他不喜欢,喜欢(河对面的)红色,且有描边的样式

<mod-alert v-model="show1"  content="请注意,墨子已漏电!" 
 :buttonCustomStyle="{background: '#fff', 'borderColor': '#ff5a00', color: '#ff5a00'}"></mod-alert>

通过使用简单的样式对象,王哲君满足了L爸爸的诉求

一只高扩展性的vue组件库 —— JSMOD

三、暴君是整个项目的 Boss,他希望弹窗的布局要走非主流,于是设计如下

一只高扩展性的vue组件库 —— JSMOD

使用如下代码,农药君拿到了他的奖励buff

  <mod-alert v-model="show4" content="墨子漏电!">
    <div class="custom-title" slot="title">
      请注意
    </div>

    <div class="custom-footer" slot="footer">
      <a mod-confirm href="javascript:void(0)">close</a>
    </div>
  </mod-alert>

为自定义元素加入 mod-confirm 标识即可继承点击事件

其他的自定义方式

JSMOD VUE PC 在设计时为开发者提供了丰富的自定义样式(布局)的方式,甚至你可以使用作用域插槽更改组件的 DOM 结构

  • 分页默认提供如下样式:
    一只高扩展性的vue组件库 —— JSMOD

  • 使用作用域插槽你可以简单将样式改为(满足designer):
    一只高扩展性的vue组件库 —— JSMOD

具体使用方式搓JSMOD PAGINATION查看吧 王者君就不细说了

快节奏的开发

JSMOD VUE PC 提供了对图片的丰富扩展,你可以像使用原生标签一样使用,同时得到了如下功能:

  • 内置懒加载功能

  • 等比缩放(再也不用关心产品上传的图片不符合规格导致拉伸)

  • loading 加载中的动画、加载完毕的渐变特效都帮你搞定,且可以自行选择 loading 图片,和是否启用这些功能

  • 加载失败替换图片(甚至可以替换为dom结构),点击下是否重新加载

访问 JSMOD IMAGE 模块看看能不能帮助到你的项目

保持最小集

  • jsmod 目前提供的组件比较少,但每个都是自定义丰富。移除了栅格 字体 图标等功能(用户端产品往往都有自己的UI标准),专注提供可扩展的组件库

  • 40k(gizp)的体积(包括了所有的js,css,icon,svg)打包到单一 js,让你随意使用

王哲君想说的

  1. Mobile 版本正在开发中,目标提供统一的vue组件使用体验

  2. 加入awesome-vue,提供了 Chinese English 文档

  3. 持续更新组件但保持装B的目标不变提供高自由度(高扩展性)的组件集合


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>