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

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

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

项目相关

1. 文档|示例

2. Github

一句装b的目标

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

王哲君的自定义之路

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

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

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

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

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

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

3、暴君是整个项目的 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的目标不变提供高自由度（高扩展性）的组件集合