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

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

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

项目相关

1. 文档|示例

2. Github

一句装b的目标

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

王哲君的自定义之路

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

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

得到了一个简单的默认样式

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

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

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

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

使用如下代码，农药君拿到了他的奖励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 结构

• 分页默认提供如下样式：
  

• 使用作用域插槽你可以简单将样式改为（满足designer）：
  

具体使用方式搓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的目标不变提供高自由度（高扩展性）的组件集合