NutUI 3 - 京东风格的轻量级移动端 Vue 组件库 (A Vue.js UI Toolkit for Mobile Web)

Overview

NutUI 3

npm version Build Status Coverage Status license

京东风格的轻量级移动端 Vue3 组件库

NutUI

特性

  • 70+ 高质量组件(3.0 持续开发中)
  • 基于京东APP 9.0 视觉规范
  • 支持按需引用
  • 详尽的文档和示例
  • 支持 TypeScript
  • 支持服务端渲染(测试阶段)
  • 支持定制主题
  • 单元测试覆盖(3.0 开发中)

示例

NutUI

支持环境

  • Android 4.0+
  • iOS 8.0+

构建版本

  • es nutui.es.js
  • umd nutui.umd.js

安装使用

具体安装使用方法请参考 NutUI 官网 https://nutui.jd.com

⌨️ 本地开发

你可以使用 Gitpod 进行在线开发:

Open in Gitpod

或者克隆到本地开发:

$ git clone https://github.com/jdf2e/nutui.git
$ cd nutui
$ npm install
$ npm run dev

开源协议

本项目基于 MIT 协议

Comments
  • [bug]3.2.3 picker不显示

    [bug]3.2.3 picker不显示

    问题描述

    3.2.3 picker不显示

    最小可复现仓库

    请创建最小可复现代码,并上传到你的 GitHub 仓库

    预期的行为和实际行为

    复现步骤,具体代码

    相关环境信息

    • 操作系统
    • Node 版本:14.20.0
    • NutUI 版本: 3.2.3
    • Vue 版本:3.2.37
    • 引用方式: CDN / NPM ?
    opened by skyunBoss 19
  • 来了,老弟~

    来了,老弟~

    :tada::tada:欢迎大家使用NutUI组件库~ :tada::tada:

    如果您在使用过程中遇到什么问题可通过 Issues 或邮件 [email protected] 联系我们。

    目前NutUI已在京东内外众多项目中应用,如果你的项目中也有用到,欢迎留言告诉我们,建议包含以下内容:

    • 产品/项目:
    • 链接:(如果可以)
    • 公司或组织:(如果可以)
    • 截图:(如果可以)
    • Email:(如果可以)

    如果不方便公开,可以通过邮件告诉我们。

    您的支持是我们开发的动力。

    欢迎Star,欢迎PR~

    微信交流群

    enhancement 
    opened by Franslee 19
  • [bug] nut-form与nut-form-item分别在不同组件渲染时,表单验证会失效

    [bug] nut-form与nut-form-item分别在不同组件渲染时,表单验证会失效

    问题描述

    nut-form与nut-form-item分别在不同组件渲染时,表单验证会失效,debug发现findFormItem()返回空数组

    最小可复现仓库

    请创建最小可复现代码,并上传到你的 GitHub 仓库

    https://github.com/xiblying/nutui-test

    opened by xiblying 17
  • [bug]tabs 在微信小程序里面点击没反应

    [bug]tabs 在微信小程序里面点击没反应

    问题描述

    tabs 在微信小程序里面点击没反应

    最小可复现仓库

    请创建最小可复现代码,并上传到你的 GitHub 仓库

    预期的行为和实际行为

    复现步骤,具体代码

    相关环境信息

    Need Reproduce 
    opened by gp5251 17
  • [bug]3.2.1List组件在taro3.2+webpack5下报错

    [bug]3.2.1List组件在taro3.2+webpack5下报错

    问题描述

    [bug]3.2.1List组件在taro3.2+webpack5下报错 ··· List.js?63f4:26

       Uncaught (in promise) TypeError: _tarojs_taro__WEBPACK_IMPORTED_MODULE_2___default(...).getSystemInfoSync is not a function
    at eval (List.js?63f4:26:1)
    at ./node_modules/@nutui/nutui-taro/dist/packages/_es/List.js (src_app_boot_js.js:40:1)
    at __webpack_require__ (runtime.js:36:33)
    at fn (runtime.js:452:21)
    at eval (app.ts:10:97)
    at ./src/app.ts (src_app_boot_js.js:683:1)
    at __webpack_require__ (runtime.js:36:33)
    at fn (runtime.js:452:21)
    at eval (app.boot.js:6:62)
    at ./src/app.boot.js (src_app_boot_js.js:672:1)
    

    ···

    最小可复现仓库

    请创建最小可复现代码,并上传到你的 GitHub 仓库 https://github.com/kongsiyu/nutui_taro35_webpack5.git)

    预期的行为和实际行为

    复现步骤,具体代码

    app.ts

    // 只需要在taro-nutui template项目新增List引用就可重现
    App.use(Button).use(Toast).use(List)
    

    相关环境信息

    • 操作系统
    • Node 版本
    • NutUI 版本: 查看项目package.json 中 @nutui/* 信息
    • Vue 版本
    • 引用方式: NPM
    opened by kongsiyu 14
  • [bug] Collapse 折叠面板 内容如果异步加载,展开高度有问题

    [bug] Collapse 折叠面板 内容如果异步加载,展开高度有问题

    描述: 1,在 nut-collapse-item 里,如果内容是直接 写死的,如上“ 在产品的功能、体验……”,点击展开时,高度没有问题; 2,但是当我的内容是通过 axios 加载到 asyncDiv里,点击展开的时候,组件自己也不知道要展开的高度是多少。因为内容还没有到来,axios 还在从服务端请求中。如果内容较多的时候,只显示出来一部分。即高度不够。 3,希望此组件等我把数据加载到 nut-collapse-item内部后,他自己能调整好高度。

    bug 3.0 
    opened by wy1037 12
  • [bug] input-number 样式丢失

    [bug] input-number 样式丢失

    问题描述

    单独调用inputnumber出现 input 没有样式,如下图: img 如果和其他表单项混合使用,inputnumber 里面的input 高度会变高,如下图: img

    最小可复现仓库

    请创建最小可复现代码,并上传到你的 GitHub 仓库

    预期的行为和实际行为

    复现步骤,具体代码

    直接安装最新版本的taro和nutui,然后复制官方示例模板就可复现。

    相关环境信息

    • 操作系统:MACOS
    • Node 版本:8.5.0
    • Taro 版本:3.5.5
    • NutUI 版本: 3.2.2
    • Vue 版本:3.2.39
    • 引用方式: NPM
    opened by juzijun2020 12
  • [bug]3.1.2版本Tab组件H5不能正常工作

    [bug]3.1.2版本Tab组件H5不能正常工作

    问题描述

    在h5模式下,显示所有的nut-tab-panel内容,控制台打印如下错误Failed to resolve component: scroll-view,另外当tab页签垂直显示的时候,字体变得特别大。

    最小可复现仓库

    请创建最小可复现代码,并上传到你的 GitHub 仓库

    预期的行为和实际行为

    复现步骤,具体代码

    相关环境信息

    • 操作系统:macos big sur
    • Node 版本:16.5
    • NutUI 版本: @nutui/nutui-taro:3.1.2
    • Vue 版本:^3.0.0
    • 引用方式: CDN / NPM ?
    bug 3.0 
    opened by ANDYGE 12
  • uploader组件,自定义上传事件后,如何激发sucess事件? (nutui-taro)

    uploader组件,自定义上传事件后,如何激发sucess事件? (nutui-taro)

    What problem does this feature solve?(这个功能解决的问题)

    根据文档,自定义上传是这样操作的

    const beforeXhrUpload = (xhr: XMLHttpRequest, options: any) => {
                    if (options.formData.realFormData != undefined) {
                        xhr.send(options.formData.realFormData);
                    } else {
                        xhr.send(options.formData);
                        console.log(xhr);
                    }           
            };
    

    这样完成上传后,success事件会被调用。 但是我如果不使用xhr.send方法,而是自己调用其他接口上传文件,比如这样

    const beforeXhrUpload = (xhr: XMLHttpRequest, options: any) => {
    调用接口上传数据
    }
    

    这样操作后,success事件不会被激发调用。 因为要等提交成功后执行返回父页面的操作,没有success事件,就只能不等待直接返回了,体验不好,我还是希望能在success事件里面执行上传成功的后续操作的,请问该如何设置上传成功或者调用事件?

    What does the proposed API look like?(期望的 API)

    提供一个自定义上传事件后,设置上传状态的接口,这样success事件就能被正常调用,完成完整的上传功能。

    question 
    opened by honghuamin 10
  • [bug]nutui中的menu菜单组件,敏感度怎么调整

    [bug]nutui中的menu菜单组件,敏感度怎么调整

    问题描述

    用户群体:老年人 在用户使用菜单组件时反馈选择滚动下面选项时,选项切换太快,导致想选的内容经常一下就跳过去

    最小可复现仓库

    请创建最小可复现代码,并上传到你的 GitHub 仓库

    预期的行为和实际行为

    可通过调整敏感度的值,延长选项切换时长

    复现步骤,具体代码

    相关环境信息

    • 操作系统:微信小程序
    • Node 版本:v14.17.0
    • NutUI 版本:3.4.10
    • Vue 版本:^3.0.0
    • 引用方式: NPM ?
    opened by erica20170818 10
  • [suggest] 这是一个kpi项目吗?

    [suggest] 这是一个kpi项目吗?

    说实话你们做的这个东西真的不想吐槽,文档不够全,所有组件大部分只有表面上看着能用,深入下去跟废了一样! 最最最想吐槽的就是,我拿来开发小程序,你每个组件都很卡顿,我换了taro-ui-vue3的组件顺畅的想哭。你们这个东西除了垃圾就是垃圾,怪不得出来也一段时间了,网上文档基本没有,因为垃圾东西没人用!!!!!!也不知道为啥taro3初始化项目要绑定你们这个ui,因为自己内部的?

    help wanted 
    opened by muzixiaojun 10
  • docs(tabbar): fix format

    docs(tabbar): fix format

    这个 PR 做了什么? (简要描述所做更改)

    Fix format

    这个 PR 是什么类型? (至少选择一个)

    • [ ] 错误修复(Bugfix) issue id #
    • [ ] 新功能(Feature)
    • [ ] 代码重构(Refactor)
    • [ ] TypeScript 类型定义修改(Typings)
    • [x] 文档修改(Docs)
    • [ ] 代码风格更新(Code style update)
    • [ ] 其他,请描述(Other, please describe):

    这个 PR 涉及以下平台:

    • [ ] NutUI 2.0
    • [ ] NutUI 3.0 H5
    • [ ] NutUI 3.0 小程序
    • [ ] NutUI 4.0 H5
    • [ ] NutUI 4.0 小程序

    这个 PR 是否已自测:

    opened by gyt95 0
  • feat(config-provider): 覆盖nut-icon属性

    feat(config-provider): 覆盖nut-icon属性

    这个 PR 做了什么? (简要描述所做更改) 扩展config-provider功能,自定覆盖组件属性 #1681

    这个 PR 是什么类型? (至少选择一个)

    • [ ] 错误修复(Bugfix) issue id #
    • [x] 新功能(Feature)
    • [ ] 代码重构(Refactor)
    • [ ] TypeScript 类型定义修改(Typings)
    • [ ] 文档修改(Docs)
    • [ ] 代码风格更新(Code style update)
    • [ ] 其他,请描述(Other, please describe):

    这个 PR 涉及以下平台:

    • [ ] NutUI 2.0
    • [x] NutUI 3.0 H5
    • [x] NutUI 3.0 小程序
    • [ ] NutUI 4.0 H5
    • [ ] NutUI 4.0 小程序

    这个 PR 是否已自测:

    opened by thx125 0
  • Uploader上传组件file-list响应丢失,通过置空file-list清空文件列表操作不生效

    Uploader上传组件file-list响应丢失,通过置空file-list清空文件列表操作不生效

    NutUI scenes(nutui 场景)

    H5(@nutui/nutui)

    NutUI-vue version(nutui-vue 版本)

    3.3.2

    Vue version(vue 版本)

    3.2.45

    Operating environment(运行环境)

    dev:h5

    Citation method(引用方式)

    npm

    Node version(node 版本)

    16.13.1

    Browser and its version(浏览器及其版本)

    Chrome(106.0.5249.103)

    System and its version(系统及其版本)

    Win10

    Reproduction link(重现链接)

    stackblitz.com

    Steps to reproduce(重现步骤)

    nut-uploader 配置list-type为list,上传一个文件后置空file-list

    What is expected?(期望的结果是什么?)

    期望file-list实现响应,支持清空、编辑等业务场景

    What is actually happening?(实际的结果是什么?)

    置空file-list 未生效,文件列表未发生变化

    opened by iSmilee 1
  • Uploader上传组件上传多个文件时,progress事件返回的进度percentage 值不正确,出现来回波动情况

    Uploader上传组件上传多个文件时,progress事件返回的进度percentage 值不正确,出现来回波动情况

    NutUI scenes(nutui 场景)

    H5(@nutui/nutui)

    NutUI-vue version(nutui-vue 版本)

    3.3.2

    Vue version(vue 版本)

    3.2.45

    Operating environment(运行环境)

    dev:h5

    Citation method(引用方式)

    npm

    Node version(node 版本)

    16.13.1

    Browser and its version(浏览器及其版本)

    Chrome(106.0.5249.103)

    System and its version(系统及其版本)

    Win10

    Reproduction link(重现链接)

    stackblitz.com

    Steps to reproduce(重现步骤)

    nut-uploader 配置multiple为true,maximum为5,list-type为list,上传多个较大文件(单文件10M以上,数值反复波动的情况就非常明显)

    What is expected?(期望的结果是什么?)

    progress事件返回的进度percentage值为正常递增的情况

    What is actually happening?(实际的结果是什么?)

    实际结果为percentage数值来回波动(某次实际percentage情况:48,84,100,73,83,85,100,91,49,61,84,100,74,86,99,100)

    opened by iSmilee 0
  • input type=

    input type="textarea"在支付宝小程序无效

    NutUI scenes(nutui 场景)

    小程序(@nutui/nutui-taro)

    NutUI-vue version(nutui-vue 版本)

    3.3.2

    Vue version(vue 版本)

    3.2.45

    Operating environment(运行环境)

    dev:alipay

    Citation method(引用方式)

    npm

    Node version(node 版本)

    16.13.0

    Browser and its version(浏览器及其版本)

    108.0.5359.125

    System and its version(系统及其版本)

    windows11

    Taro environmental information(taro 环境信息)

    👽 Taro v3.5.11

    Taro CLI 3.5.11 environment info: System: OS: Windows 10 Binaries: Node: 16.13.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.18 - C:\Users\qiujiecan\AppData\Roaming\npm\yarn.CMD npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD

    Reproduction link(重现链接)

    codesandbox.io

    Steps to reproduce(重现步骤)

    ![image](https://user-images.githubusercontent.com/101537665/210718311-a12c794d-2c0d-48ef-9ad3-4a983408ee44.png)

    What is expected?(期望的结果是什么?)

    生效

    What is actually happening?(实际的结果是什么?)

    不生效

    opened by Q-J-Brilliant 1
  • picker在支付宝小程序无效

    picker在支付宝小程序无效

    NutUI scenes(nutui 场景)

    小程序(@nutui/nutui-taro)

    NutUI-vue version(nutui-vue 版本)

    3.3.2

    Vue version(vue 版本)

    3.2.45

    Operating environment(运行环境)

    dev:alipay

    Citation method(引用方式)

    npm

    Node version(node 版本)

    16.13.0

    Browser and its version(浏览器及其版本)

    108.0.5359.125

    System and its version(系统及其版本)

    windows11

    Taro environmental information(taro 环境信息)

    👽 Taro v3.5.10

    Taro CLI 3.5.10 environment info: System: OS: Windows 10 Binaries: Node: 16.13.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.18 - C:\Users\qiujiecan\AppData\Roaming\npm\yarn.CMD npm: 9.2.0 - C:\Program Files\nodejs\npm.CMD

    Reproduction link(重现链接)

    codesandbox.io

    Steps to reproduce(重现步骤)