jdf2e / nutui Goto Github PK

View Code? Open in Web Editor NEW

5.9K 112.0 813.0 200.99 MB

京东风格的移动端 Vue 组件库，支持多端小程序(A Vue.js UI Toolkit for Mobile Web)

Home Page: https://nutui.jd.com

License: MIT License

JavaScript 4.60% Vue 63.84% SCSS 14.52% HTML 0.18% TypeScript 16.85% Shell 0.01% CSS 0.01%

nutui vue vue-components typescript components vite vue3 jd

nutui's Introduction

京东风格的轻量级 Vue 组件库，支持移动端 H5 和小程序开发

Nut[nʌt]，源自电影《冰河世纪》里松鼠 Scrat "执迷不悟"，一生追求，即便引发大灾难也绝不松手的坚果。

简体中文 | English

特性

🚀 80+ 高质量组件，覆盖移动端主流场景
💪 支持一套代码同时开发 H5+多端小程序
📖 基于京东APP 10.0 视觉规范
🍭 支持按需引用
📖 详尽的文档和示例
💪 支持 TypeScript
💪 支持服务端渲染（测试阶段）
🍭 支持组件级别定制主题，内置 700+ 个变量
🌍 国际化支持，已支持英文，印尼语和繁体中文
🍭 单元测试覆盖率超过 80%，保障稳定性
📖 提供 Sketch 设计资源

文档

官网：nutui.jd.com

@nutui/nutui：适用于移动端 H5 页面开发

@nutui/nutui-taro：支持开发 Taro 多端小程序（微信、支付宝、京东等小程序）和 Taro-H5 项目

链接

官方生态

由 NutUI 官方团队维护的项目如下：

项目	描述	版本
@nutui/nutui	NutUI 移动端 H5 版本
@nutui/nutui-taro	NutUI Taro 多端版本
@nutui/icons-vue	`@nutui/nutui` 使用的图标库
@nutui/icons-vue-taro	`@nutui/nutui-taro` 使用的图标库
@nutui/touch-emulator	在桌面端使用 NutUI 的辅助库
@nutui/auto-import-resolver	`unplugin-auto-import` 插件的 reolver 配置
@nutui/playground	NutUI 在线 Playground	-
nutui-demo	NutUI 官方示例合集	-

社区生态

由社区维护的项目如下，欢迎补充：

项目	描述
nutui-uniapp	基于 NutUI 4.x 版本开发的 uni-app 组件库
jwaterwater/uni-nutui	基于 NutUI 3.x 版本开发的 uni-app 组件库

项目状态

使用案例

NutUI 已经投入了我们的生产环境中使用，业界也在广泛地使用 NutUI 开发多端应用。

更多案例

开发交流

微信群	内部咚咚群
添加好友并回复「NutUI Vue」	82957939

参与共建

NutUI 社区共建倡议

NutUI 邀您共建，Contributor 您好

为 NutUI 贡献代码

NutUI 的共建方向主要分为：解决 issue、修复 bug、新增组件、增加国际化、UI 定制、平台适配、跨端扩展等。

欢迎社区开发者参与共建，在贡献您的代码之前请先阅读《NutUI 贡献指南》。

问题反馈与建议

给 NutUI 提 Issue

在反馈问题之前，推荐阅读《提问的智慧》、《如何向开源社区提问题》和《如何有效地报告 Bug》，这样您能够更容易获得理解和帮助。

参与 NutUI 社区讨论

如果您有任何想法、疑问或建议，都可以参与社区讨论分享您的观点。

贡献者们

感谢以下所有给 NutUI 贡献过代码的开发者。

更新日志

查阅 Release。

License

MIT

GitHub Stargazaers

nutui's People

Contributors

Stargazers

Watchers

Forkers

yuanchanglong luckyjingen snandy robin-zhigeng xianglongxiang maroon77 sn790519 sangcz eamiear andyroyal davidmr001 zlxbuzz satcon diexue jack0888 enfangzhong augustvino zhouhaimei z1769057083 ilovezy sdtm1016 penghongsun fenglui luckysoda hw172553043 wuruijin1996 annyways yang123vc shezhanjun zhaozhinan yyy-team zhangxiang0316 92zhouliang pengyuanhong huajiuz zuopf769 johnsongong ljb1010 wangqianggithub kule2018 asiapyh b-xiang xuxchao bsyslient woshilaoge ivan135 handy2015 jangocheng iamlile qinweizhi chix1221 iqinning appfws youngshine iatlasmachine behaviour915 linrufeng kfqweb szg2008 thunder1211 newlysoft igit-cn wuzhou98 wukongcrm xialinlin dut3062796s foundations kelvinxuelei linson-lin weizai118 leonardoyhl qhx0807 runningv zjc12358 xiaoye1988 libin1991 eason1999 qianjingxxxi leiyu0932 dobeee li-breeder managerorganization itcgq liruimin2 andyroyal520 zxy0128 yangbinfx yangzhaoguo xingchenyefeng niubicat hc1028 juanjuangit lafeillou chengshengru ckbabby hereyouareok yegs 17710537335 shenqistart antik-ding

nutui's Issues

按需加载DatePicker的问题

按需加载DatePicker，"style": "scss"的时候，因DatePicker.scss文件为空，导致组件因样式问题不可用

按需加载报错

按照文档操作，按需加载对应组件报错
Cannot read property 'install' of undefined

styles文件下面的variable.scss是怎么引用的？

我在阅读源码的时候发现 styles/variable.scss 和 styles/index.scss 文件基本没有单独引入到packages 下面的组件中。但是每个 packages//.scss (packages/picker/picker.scss) 文件夹都可以使用 styles/variable.scss 里面定义的变量。而其中只有 noticebar.scss、 rate.scss、 searchbar.scss 文件确明确引入了。这是为什么呢？

上拉加载，下拉刷新组件没有么？

2.09版本，引入scss报错

更细Vue版本之后会有报错

比如：toast.js文件
let ToastConstructor = Vue.extend(require('./toast.vue'));
然后我改成let ToastConstructor = Vue.extend(require('./toast.vue').default);加了一个.default就可以了

马上关注了准备”猜“下坑

马上关注了准备踩下坑，估计问题不会太多。

例子首页组件

这个例子首页的分类组件（手风琴），没有相关文档呢

Imagepicker组件的ismultiple失效

这input的multiple逻辑写错了

dialog 弹窗

除了js调用外，希望给提供标签引用方式（提供插槽）更方便配置弹窗内容

tab组件点击回调的问题

tab组件中，点击tab的title文字，不会触发tabSwitch事件，看了下组件代码，发现是被event.target拦截了。
switchTab:function(index,event,disable){ if(!disable && event.target.className.indexOf('nut-title-nav')!==-1){ ... ... this.$emit('tab-switch',index,event); } }

为什么 html 标签没有设置字体大小, badge 组件还可以使用 rem 单位呢？

在看 badge 组建的时候发现 html 标签是没有设置字体大小的。为什么能够用 rem 单位呢？自己想到的一种可能是 html 有默认字体大小。那这样会不会由于其他的浏览器默认字体大小不一样而导致 rem 单位不准确呢？

按照快速上手里的操作步骤，无法做到按需加载会报错

主题设置，按照文档步骤设置主题颜色，没有成功

ui细节需要美化。。。

一定没有设计小姐姐把持Ui

动态改变nut-col的:span值列宽不变，只能静态写死，不灵活

动态改变span的值

通过修改span后面的值，值变了，列宽不变，只能写死数值！！！

<nut-button @click="test">改变值

span:{{this.myValue}}

data: function(){
return {
myValue: 12
}
},

methods: {
test(){
this.myValue+=1;
}
}

缺少倒计时模块

点击倒计时会报错，缺少模块

nutui 没有form组件？

form 组件
input 组件
目前看到文档和代码里面没有，后期会有吗？

来了，老弟~

🎉🎉欢迎大家使用NutUI组件库~ 🎉🎉

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

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

产品/项目：
链接：（如果可以）
公司或组织：（如果可以）
截图：（如果可以）
Email：（如果可以）

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

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

欢迎Star，欢迎PR~

微信交流群

日期picker，type：datetime

设置默认defaultValue、startDate、endDate；华为手机p10plus自带浏览器，年份滚动拦，显示Fri Mar...等英文月份，并且不能切换其他年份

countDown 组件这一行代码的意思？

countdownTimer.restTime = restTime;

这是 countDown 组件第 147 行代码，没有看懂这个赋值有什么作用？希望能给解答一下，谢谢

请问有组织么？

Nutui QQ交流群

599125181

日历组件Calendar: end-date 设置为今天之前，比如昨天，但是今天的日期还是高亮，能自己指定高亮的日期吗？？

日历组件: end-date 设置为今天之前，比如昨天，但是今天的日期还是高亮，能自己指定高亮的日期吗？？

小程序版本大概什么时候上线？

window is not defined

nuxt版本2.3.X
nutui版本2.X

在nuxt中使用报window is not defined

请问怎么设置局域网可访问呢？

使用 npm run dev 启动项目之后只能够本地访问，这样手机调试的时候会比较麻烦，如何能够让属于同一个局域网的用户可访问呢？

Dialog标签式写法内容无法在手机浏览器现实全，在苹果和安卓机上都测试过

官方文档swiper方法说明错误

http://nutui.jd.com/#/Swiper
Methods中的

异步数据渲染slide，都需要重新调用方法，绑定事件，如【横向无缝滑动】this.$ref.demo1.update(1)。也提供设置初始页面

其中的$ref应为$refs

感觉过场动画稍微有点卡顿

感觉过场动画稍微有点卡顿, 不怎么流畅

ShortPassword居中短密码输入框溢出

在小屏幕下，如iphone4，居中短密码弹窗中的输入框超出弹窗外了。

官网对应demo链接：https://nutui.jd.com/demo.html#/ShortPassword

按需加载ImagePicker，使用scss时报错

使用css正常，使用scss报错

Scroller 组件交互上存在一些不友好的地方

在 type = horizontal 的时候，会存在整个容器能够左右滑动问题，原因是给 nut-scroller 定义了 flex 布局，导致的。而案例中给 demo-list 设置了 overflow = hidden 所以没有出现这个问题。
在 type = horizontal 的时候，手指轻轻触摸的时候会有很大幅度的滚动
在 type = vertical 的时候，触发下拉加载的动作存在问题，我下拉了一丢丢也会触发，我下拉了又拉回去也会触发，体验性不太好。

没有scrollload组件么？

package.json 依赖问题

autoprefixer
vue
vue-i18n

这个在 "dependencies" 和 "devDependencies" 都出现

"devDependencies" 是开发时候的依赖， " autoprefixer " 应该作为 “devDependencies” 依赖，感觉包管理有点问题

你们的提交commit没有规范吗？

我刚看你们的commit好像都没有具体的规范

首页会出现横向滚动条哦提个醒

.css-animation
这个块的宽度影响了

示例Cell组件的带链接部分无法返回

示例里Cell组件点了带链接之后会跳到京东wap，无法返回

修改主题一直编译失败

修改主题一直编译失败:
style为css时正常，改为scss后，一直编译失败，写不写sass-loader都提示下面的错误:

dialog标签中嵌入RadioGroup时 dialog中的lockBgScroll设置不生效页面还是会滚动

引入scss，显示loading-img图片not found

你值得拥有！

来了，老弟！

🎉🎉欢迎大家使用NutUI组件库~ 🎉🎉

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

目前NutUI已在京东内外数十个项目中应用，如果你的项目中也有用到，欢迎留言告诉我们，建议包含以下内容：

产品/项目：
链接：（如果可以）
公司或组织：（如果可以）
截图：（如果可以）
Email：（如果可以）

您的回复是我们开发的动力。

欢迎Star，欢迎PR~

按需加载引入Radio RadioGroup问题

后端渲染报错

用nuxt+nutui引入了一个简单的Button，直接报错：
代码：

import Button from '@nutui/nutui/dist/packages/button/button.js';  
Button.install(Vue);

错误信息：

ReferenceError
window is not defined

看文档说是支持ssr，想问下是我写的有问题吗？

* ../../assets/img/img-error.png in ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-1-3!./node_modules/@nutui/nutui/dist/nutui.scss                                   friendly-errors 15:40:04
* ../../assets/img/img-loading.png in ./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-1-3!./node_modules/@nutui/nutui/dist/nutui.scss

请问是哪里出了问题？