当前位置: 主页 > 常州发布 > 周汤豪李佳颖:京东风格的移动端Vue组件库NutUI,支持服务器端渲染

周汤豪李佳颖:京东风格的移动端Vue组件库NutUI,支持服务器端渲染

发布时间:2019-06-09内容来源:未知 点击:

介绍

NutUI是一套京东风格的移动端Vue组件库,开发和服务于移动Web界面的企业级前中后台产品。支持服务器端渲染(SSR)。

京东风格的移动端Vue组件库NutUI,支持服务器端渲染

相关地址

github:https://github.com/jdf2e/nutui

官网: https://nutui.jd.com/#/index

具备特性(来自官方文档)

  • 跨平台,自动转微信小程序组件(稍后上线,敬请期待)
  • 30+ 京东移动端项目正在使用
  • 基于京东APP 7.0 视觉规范支持按需加载
  • 详尽的文档和示例
  • 支持定制主题
  • 支持多语言(国际化)
  • 支持 TypeScript
  • 支持服务端渲染(Vue SSR)
  • 单元测试加持
  • 配套有基于Webpack的构建工具,可快速创建已内置本组件库的Vue工程

支持的环境

  • Android 4.0+
  • iOS 8.0+
  • 支持服务端渲染

版本选择

构建版本

  • UMD版nutui.js
  • UMD压缩版nutui.min.js

AMD 环境、Webpack 等构建工具环境、服务端建议使用 UMD 版,非模块化环境(如通过 <script> 标签直接引用)建议使用 UMD 压缩版。

部分组件预览

  • Flex布局组件
<nut-row>
<nut-col :span="12">
<div class="flex-content">span:12</div>
</nut-col>
<nut-col :span="12">
<div class="flex-content flex-content-light">span:12</div>
</nut-col>
</nut-row>
<nut-row>
<nut-col :span="8">
<div class="flex-content">span:8</div>
</nut-col>
<nut-col :span="8">
<div class="flex-content flex-content-light">span:8</div>
</nut-col>
<nut-col :span="8">
<div class="flex-content">span:8</div>
</nut-col>
</nut-row>
<nut-row>
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content flex-content-light">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content">span:6</div>
</nut-col>
<nut-col :span="6">
<div class="flex-content flex-content-light">span:6</div>
</nut-col>
</nut-row>
<nut-row>
<nut-col :span="4">
<div class="flex-content">span:4</div>
</nut-col>
<nut-col :span="4">
<div class="flex-content flex-content-light">span:4</div>
</nut-col>
<nut-col :span="4">
<div class="flex-content">span:4</div>
</nut-col>
<nut-col :span="4">
<div class="flex-content flex-content-light">span:4</div>
</nut-col>
<nut-col :span="4">
<div class="flex-content">span:4</div>
</nut-col>
<nut-col :span="4">
<div class="flex-content flex-content-light">span:4</div>
</nut-col>
</nut-row>
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 对话框组件
this.$dialog({
title: "确定删除此订单?",
content: "删除后将从你的记录里消失,无法找回"
});
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 动作面板
<nut-actionsheet :is-visible="isVisible" 
@close="switchActionSheet('isVisible')"
:menu-items="menuItems"
@choose="chooseItem"
></nut-actionsheet>
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 进度条
<nut-progress 
percentage="30"
>
</nut-progress>
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 回到顶部
<nut-backtop 
:distance="400"
>
</nut-backtop>
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 图标
<nut-icon 
type="top"
>
</nut-icon>
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 按钮
<nut-button 
@click="clickHandler"
>
去结算
</nut-button>
<nut-button
disabled
>
去结算(disabled)
</nut-button>
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 上传组件
<nut-uploader
name="uploader-demo"
:url="url"
:isPreview="true"
:acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
@start="onStart"
@success="onSuccess"
@fail="onFail"
@progress="onProgress"
@preview="onPreview"
@showMsg="showMsgFn"
typeError="对不起,不支持上传该类型文件!"
limitError="对不起,文件大小超过限制!"
>
上传
</nut-uploader>
javascript

京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 选项卡
<nut-tab @tab-switch="tabSwitch">
<nut-tab-panel tabTitle="页签1">页签1</nut-tab-panel>
<nut-tab-panel tabTitle="页签2">页签2</nut-tab-panel>
<nut-tab-panel tabTitle="页签3">页签3</nut-tab-panel>
</nut-tab>
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 标签栏
<nut-navbar 
@on-click-back="back"
@on-click-title="title"
@on-click-more="more"
:leftShow="false"
:rightShow="false"
>title</nut-navbar>
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 日历组件
<nut-calendar 
:is-visible="isVisible"
:default-value="date"
@close="switchPicker('isVisible')"
@choose="setChooseValue"
:start-date="`2018-10-11`"
:end-date="`2020-11-11`"
>
</nut-calendar>
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 日期组件
<nut-datepicker 
:is-visible="isVisible"
type="date"
title="请选择日期"
:is-show-chinese="false"
@close="switchPicker('isVisible')"
@choose="setChooseValue"
>
</nut-datepicker>
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 搜索栏
<nut-searchbar
placeText="请输入自定义文案"
></nut-searchbar>
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

  • 步骤条
<nut-steps 
:current="current"
>
<nut-step
title="已完成"
content="这里是该步骤的描述信息"
>
</nut-step>
<nut-step
title="已完成"
content="这里是该步骤的描述信息"
>
</nut-step>
<nut-step
title="进行中"
content="这里是该步骤的描述信息"
>
</nut-step>
<nut-step
title="待进行"
content="这里是该步骤的描述信息"
>
</nut-step>
<nut-step
title="待进行"
content="这里是该步骤的描述信息"
>
</nut-step>
</nut-steps>
京东风格的移动端Vue组件库NutUI,支持服务器端渲染

组件比较多就不一一展示,以下是组件的分类,常用的组件都包含了

京东风格的移动端Vue组件库NutUI,支持服务器端渲染

主题定制

如果你的项目不适合原有风格,还可以在一定程度上定制主题,以满足不同的业务需求

京东风格的移动端Vue组件库NutUI,支持服务器端渲染

总结

NutUI是一个Vue的移动端组件库,具备京东的风格,支持服务器端渲染是比较不错的,而且在未来提供自动转微信小程序组件,非常的强大,希望对你有所帮助,有什么好的推荐或建议也欢迎到评论区留言分享!

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
Here Is AD 250*250 !