diff --git a/README-zh_CN.md b/README-zh_CN.md index f0b823e854..ad101e0786 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -10,6 +10,7 @@ ## 特性 * 全新的架构 +* 40+ 高质量组件 * 30+ 京东移动端项目正在使用 * 参照京东APP 7.0 视觉规范 * 支持按需加载 diff --git a/README.md b/README.md index 164cfed81f..a5b7eb9ac2 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ English | [简体中文](./README-zh_CN.md) ## Features * New structure +* 40+ Reusable components * Used by 30+ JD mobile projects * Refer to JD APP 7.0 visual specification * On-demand loading Support diff --git a/docs/intro.md b/docs/intro.md index 3064f699a3..b92d8527f5 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -14,6 +14,7 @@ NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web ## 特性 +* 40+ 高质量组件 * 30+ 京东移动端项目正在使用 * 基于京东APP 7.0 视觉规范 * 支持按需加载 diff --git a/package.json b/package.json index 75d95854ca..54f783166d 100644 --- a/package.json +++ b/package.json @@ -137,7 +137,7 @@ "vue": "^2.6.10", "vue-i18n": "8.1.0", "vue-jest": "2.6.0", - "vue-lazyload": "1.3.3", + "vue-lazyload": "^1.3.3", "vue-loader": "15.4.0", "vue-router": "^3.0.2", "vue-style-loader": "^4.1.2", @@ -162,4 +162,4 @@ "instrument": false, "sourceMap": false } -} \ No newline at end of file +} diff --git a/scripts/mdToVue.js b/scripts/mdToVue.js index ac365a45ac..429994242f 100644 --- a/scripts/mdToVue.js +++ b/scripts/mdToVue.js @@ -6,6 +6,7 @@ let { version } = require("../package.json"); let marked = require('marked'); let contrast = require('./contrast'); let rimraf = require("rimraf"); +let Chokidar = require('chokidar'); if (!marked) { console.log('you need npm i marked -D!'); } @@ -33,6 +34,7 @@ class mdVue{ _that.needHandleFiles = res; _that.ishasOutFile(_that.options.output).then(res=>{ _that.star(); + _that.filelisten() }); }) }) @@ -59,6 +61,37 @@ class mdVue{ } apply(){} + filelisten(){ + let _that = this; + let watcher = Chokidar.watch(_that.options.entry,{ + persistent: true, + usePolling: true, + }); + let log = console.dir.bind(console); + let watchAction = function({event, eventPath}){ + // 这里进行文件更改后的操作 + // fileReadStar(eventPath,(res)=>{ + // createdFile(param.output + res.mdName + '.vue', res.html, param.needCode) + // }) + console.log(path.join(__dirname,JSON.stringify(eventPath))) + if(/\.md$/.test(eventPath)){ + _that.vueDesWrite(eventPath) + } + // "d:\workplace\nutui\docs\international.md" + // _that.read(eventPath).then(res=>{ + // _that.headHandle(); + // _that.markHandle(); + // let html = _that.marked(res); + // _that.write({ + // outsrc:_that.options.output, + // name:fileName + '.vue', + // html:html + // }); + // }) + } + watcher.on('change', path => watchAction({event: 'change', eventPath: path})) + .on('unlink', path => watchAction({event: 'remove', eventPath: path})); + } star(){ let _that = this; hashElement(_that.options.entry, { @@ -68,43 +101,73 @@ class mdVue{ }).then(hash => { nodeFilelist.read([_that.options.entry],{"ext":'md'}, res => { - res.map((item,index) =>{ - if(index == 30){ - debugger - } - let fileSplits = item.path.split(path.sep); - let fileName = fileSplits.pop(); - if(_that.isDoc(fileName)){ - fileName = fileSplits.pop(); - }else{ - fileName = fileName.replace(/\.md/,''); - } - if(_that.needHandleFiles[fileName]){ - // _that.read(item.path).then(res=>{ - // _that.headHandle(); - // _that.markHandle(); - // let html = _that.marked(res); - // _that.write({ - // outsrc:_that.options.output, - // name:fileName + '.vue', - // html:html - // }); - // }) - } - _that.read(item.path).then(res=>{ - _that.headHandle(); - _that.markHandle(); - let html = _that.marked(res); - _that.write({ - outsrc:_that.options.output, - name:fileName + '.vue', - html:html - }); - }) + res.map((item,index) =>{ + _that.vueDesWrite(item.path) + // let fileSplits = item.path.split(path.sep); + // let fileName = fileSplits.pop(); + // if(_that.isDoc(fileName)){ + // fileName = fileSplits.pop(); + // }else{ + // fileName = fileName.replace(/\.md/,''); + // } + // if(_that.needHandleFiles[fileName]){ + // // _that.read(item.path).then(res=>{ + // // _that.headHandle(); + // // _that.markHandle(); + // // let html = _that.marked(res); + // // _that.write({ + // // outsrc:_that.options.output, + // // name:fileName + '.vue', + // // html:html + // // }); + // // }) + // } + // _that.read(item.path).then(res=>{ + // _that.headHandle(); + // _that.markHandle(); + // let html = _that.marked(res); + // _that.write({ + // outsrc:_that.options.output, + // name:fileName + '.vue', + // html:html + // }); + // }) }); }); }) } + vueDesWrite(getpath){ + let _that = this; + let fileSplits = getpath.split(path.sep); + let fileName = fileSplits.pop(); + if(_that.isDoc(fileName)){ + fileName = fileSplits.pop(); + }else{ + fileName = fileName.replace(/\.md/,''); + } + if(_that.needHandleFiles[fileName]){ + // _that.read(item.path).then(res=>{ + // _that.headHandle(); + // _that.markHandle(); + // let html = _that.marked(res); + // _that.write({ + // outsrc:_that.options.output, + // name:fileName + '.vue', + // html:html + // }); + // }) + } + _that.read(getpath).then(res=>{ + _that.headHandle(); + _that.markHandle(); + let html = _that.marked(res); + _that.write({ + outsrc:_that.options.output, + name:fileName + '.vue', + html:html + }); + }) + } isDoc(name){ return (name == "doc.md") ? true : false; } diff --git a/sites/demo/view/index.vue b/sites/demo/view/index.vue index 31d8e98488..fb2dcffcb3 100644 --- a/sites/demo/view/index.vue +++ b/sites/demo/view/index.vue @@ -3,7 +3,7 @@ Github

-
NutUI 2.0
+
NutUI {{version}}

一套京东风格的移动端Vue组件库

@@ -38,7 +38,7 @@ export default { version, sortedPackages: [], oriSorts: [], - sorts: [1, 2, 0, 3, 4, 5], + sorts: [1, 2, 0, 3, 4, 5, 6], foldStatus: [] }; }, diff --git a/src/config.json b/src/config.json index 6e59684b2d..71958ba41e 100644 --- a/src/config.json +++ b/src/config.json @@ -1,520 +1,538 @@ { - "sorts": ["数据展示", "数据录入", "操作反馈", "导航组件", "布局组件", "基础组件"], - "packages": [ - { - "name": "Cell", - "version": "1.0.0", - "sort": "4", - "chnName": "列表项", - "type": "component", - "showDemo": true, - "desc": "列表项，可组合成列表", - "author": "Frans" - }, - { - "name": "Dialog", - "version": "1.0.0", - "sort": "2", - "chnName": "对话框", - "type": "method", - "showDemo": true, - "desc": "模态弹窗，支持按钮交互，支持图片弹窗。", - "star": 5, - "author": "Frans" - }, - { - "name": "Icon", - "version": "1.0.0", - "sort": "5", - "chnName": "图标", - "type": "component", - "showDemo": true, - "desc": "网页小图标。", - "author": "Frans" - }, - { - "version": "1.0.0", - "name": "Toast", - "sort": "2", - "chnName": "吐司", - "desc": "轻提示。", - "type": "method", - "showDemo": true, - "star": 4, - "author": "Frans" - }, - { - "version": "1.0.0", - "name": "ActionSheet", - "sort": "2", - "chnName": "动作面板", - "desc": "从底部弹出的动作菜单面板。", - "type": "component", - "showDemo": true, - "star": 5, - "author": "iris" - }, - { - "version": "1.0.0", - "name": "Tab", - "sort": "3", - "chnName": "选项卡", - "desc": "常用于平级区域大块内容的的收纳和展现。", - "type": "component", - "showDemo": true, - "star": 3, - "author": "甄玉磊" - }, - { - "version": "1.0.0", - "name": "TabPanel", - "sort": "3", - "chnName": "选项卡", - "desc": "标签栏 选项卡组件", - "type": "component", - "showDemo": false, - "author": "甄玉磊" - }, - { - "version": "1.0.0", - "name": "TabBar", - "sort": "3", - "chnName": "标签栏", - "desc": "用于不同模块以之间的切换", - "type": "component", - "showDemo": true, - "star": 3, - "author": "甄玉磊" - }, - { - "version": "1.0.0", - "name": "Calendar", - "sort": "1", - "chnName": "日历", - "desc": "日历", - "type": "component", - "showDemo": true, - "star": 5, - "author": "iris" - }, - { - "version": "1.0.0", - "name": "DatePicker", - "sort": "1", - "chnName": "日期选择", - "desc": "日期选择", - "type": "component", - "showDemo": true, - "star": 5, - "author": "iris" - }, - { - "version": "1.0.0", - "name": "NavBar", - "sort": "3", - "chnName": "导航栏", - "desc": "移动端头部导航栏", - "type": "component", - "showDemo": true, - "author": "lishaoqi" - }, - { - "version": "1.0.0", - "name": "NoticeBar", - "sort": "3", - "chnName": "公告栏", - "desc": "移动端公告栏", - "type": "component", - "showDemo": true, - "author": "wangyue" - }, - { - "name": "Switch", - "version": "1.0.0", - "sort": "1", - "chnName": "开关", - "type": "component", - "showDemo": true, - "desc": "滑动开关，通过点击使按钮左右滑动，同时触发对应的开关状态", - "author": "Frans" - }, - { - "version": "1.0.0", - "name": "Slider", - "sort": "1", - "chnName": "滑块", - "desc": "滑动输入器，用于在数值区间/自定义区间内进行选择。", - "type": "component", - "showDemo": true, - "star": 4, - "author": "Frans" - }, - { - "version": "1.0.0", - "name": "Range", - "sort": "1", - "chnName": "区间选择器", - "desc": "区间选择器组件", - "type": "component", - "showDemo": true, - "star": 4, - "author": "famanoder" - }, - { - "version": "1.0.0", - "name": "Picker", - "sort": "1", - "chnName": "拾取器", - "desc": "提供多个选项集合供用户选择其中一项。", - "type": "component", - "showDemo": true, - "star": 5, - "author": "iris" - }, - { - "version": "1.0.0", - "name": "Progress", - "sort": "2", - "chnName": "进度条", - "desc": "展示操作或任务的当前进度，比如上传文件。", - "type": "component", - "showDemo": true, - "author": "张毓飞" - }, - { - "version": "1.0.0", - "name": "Price", - "sort": "0", - "chnName": "商品价格", - "desc": "商品价格组件，支持小数点前后应用不同样式、千位分隔、人民币符号等功能", - "type": "component", - "showDemo": true, - "author": "liaoyanli5" - }, - { - "version": "1.0.0", - "name": "Flex", - "sort": "4", - "chnName": "Flex布局", - "desc": "Flex布局速简便地创建布局", - "type": "component", - "showDemo": true, - "author": "秦伟伟" - }, - { - "version": "1.0.0", - "name": "Col", - "sort": "4", - "chnName": "Flex布局", - "desc": "Flex布局速简便地创建布局", - "type": "component", - "showDemo": false, - "author": "秦伟伟" - }, - { - "version": "1.0.0", - "name": "Row", - "sort": "4", - "chnName": "Flex布局", - "desc": "Flex布局速简便地创建布局", - "type": "component", - "showDemo": false, - "author": "秦伟伟" - }, - { - "version": "1.0.0", - "name": "Steps", - "sort": "0", - "chnName": "步骤条", - "desc": "拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。", - "type": "component", - "showDemo": true, - "author": "宋其斌" - }, - { - "version": "1.0.0", - "name": "Button", - "sort": "5", - "chnName": "按钮", - "desc": "各式各样的按钮", - "type": "component", - "showDemo": true, - "author": "杨磊" - }, - { - "version": "1.0.0", - "name": "Badge", - "sort": "0", - "chnName": "徽标", - "desc": "出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息", - "type": "component", - "showDemo": true, - "author": "杨磊" - }, - { - "version": "1.0.0", - "name": "Rate", - "sort": "1", - "chnName": "评分", - "desc": "用于快速的评级操作，或对评价进行展示。", - "type": "component", - "showDemo": true, - "star": 4, - "author": "永无止晋" - }, - { - "version": "1.0.1", - "name": "Swiper", - "chnName": "滑动切换", - "sort": "0", - "desc": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。", - "type": "component", - "showDemo": true, - "star": 5, - "author": "wangnan31" - }, - { - "version": "1.0.0", - "name": "Menu", - "sort": "3", - "chnName": "菜单", - "desc": "菜单", - "type": "component", - "showDemo": true, - "author": "苏子刚" - }, - { - "version": "1.0.0", - "name": "Stepper", - "chnName": "步进器", - "desc": "通过点击按钮控制数字加减", - "type": "component", - "sort": "1", - "showDemo": true, - "star": 3, - "author": "famanoder" - }, - { - "version": "1.0.0", - "name": "ButtonGroup", - "chnName": "按钮组", - "desc": "用于页面底部的按钮组", - "type": "component", - "sort": "5", - "showDemo": true, - "author": "杨磊" - }, - { - "version": "1.0.0", - "name": "SearchBar", - "chnName": "搜索栏", - "desc": "搜索栏", - "type": "component", - "sort": "1", - "showDemo": true, - "author": "lemon" - }, - { - "version": "1.0.0", - "name": "ImagePicker", - "sort": "1", - "chnName": "图片选择器", - "desc": "图片选择器", - "type": "component", - "showDemo": true, - "author": "苏子刚" - }, - { - "name": "Radio", - "version": "1.0.0", - "sort": "1", - "chnName": "单选按钮", - "type": "component", - "showDemo": true, - "desc": "单选按钮，可组合成单选按钮组", - "author": "Frans" - }, - { - "name": "RadioGroup", - "version": "1.0.0", - "sort": "1", - "chnName": "单选按钮组", - "type": "component", - "showDemo": false, - "desc": "单选按钮组", - "author": "Frans" - }, - { - "version": "1.0.0", - "name": "CheckBox", - "sort": "1", - "chnName": "复选按钮", - "desc": "复选多个选项", - "type": "component", - "showDemo": true, - "author": "Vicky.Ye" - }, - { - "version": "1.0.0", - "name": "CheckBoxGroup", - "sort": "1", - "chnName": "复选按钮组", - "desc": "成组出现的复选按钮组件", - "type": "component", - "showDemo": true, - "author": "Vicky.Ye" - }, - { - "version": "1.0.0", - "name": "ShortPassword", - "chnName": "短密码", - "des": "短密码", - "type": "component", - "sort": "1", - "showDemo": true, - "author": "wangnan31" - }, - { - "version": "1.0.0", - "name": "Skeleton", - "chnName": "骨架屏", - "des": "在页面上待加载区域填充灰色的占位图，本质上是界面加载过程中的过渡效果", - "type": "component", - "sort": "0", - "showDemo": true, - "author": "wangnan31" - }, - { - "version": "1.0.0", - "name": "Scroller", - "chnName": "滚动", - "desc": "滚动组件", - "type": "component", - "sort": "0", - "star": 5, - "showDemo": true, - "author": "iris" - }, - { - "version": "1.0.0", - "name": "BackTop", - "chnName": "回到顶部", - "desc": "用于页面内容高度过长，快捷回到顶部使用。", - "type": "component", - "sort": "2", - "showDemo": true, - "author": "永无止晋" - }, - { - "version": "1.0.0", - "name": "CountDown", - "chnName": "倒计时", - "desc": "倒计时组件", - "type": "component", - "sort": "0", - "showDemo": true, - "author": "famanoder" - }, - { - "version": "1.0.0", - "name": "InfiniteLoading", - "chnName": "无限加载", - "desc": "无限加载", - "type": "component", - "sort": "0", - "star": 4, - "showDemo": true, - "author": "iris" - }, - { - "version": "1.0.0", - "name": "Uploader", - "chnName": "上传", - "desc": "文件上传组件", - "type": "component", - "sort": "5", - "showDemo": true, - "author": "林如风" - }, - { - "version": "1.0.0", - "name": "TextInput", - "chnName": "文本框", - "desc": "单行文本框", - "type": "component", - "sort": "1", - "showDemo": true, - "author": "Frans" - }, - { - "version": "1.0.0", - "name": "Avatar", - "chnName": "头像", - "desc": "用来表示用户或事物，支持图片或字符展示。", - "type": "component", - "sort": "5", - "showDemo": true, - "author": "zhenyulei" - }, - { - "version": "1.0.0", - "name": "lazyload", - "chnName": "图片懒加载", - "desc": "图片懒加载", - "type": "component", - "sort": "0", - "showDemo": true, - "author": "zhuzhida" - }, - { - "version": "1.0.0", - "name": "TextBox", - "chnName": "文本域", - "desc": "文本域", - "type": "component", - "sort": "1", - "showDemo": true, - "author": "guoxiaoxiao" - }, - { - "version": "1.0.0", - "name": "Elevator", - "chnName": "电梯楼层", - "desc": "类似于电梯楼层，组件可以跟着右侧索引而滑动", - "type": "component", - "sort": "3", - "showDemo": true, - "author": "zhenyulei" - }, - { - "version": "1.0.0", - "name": "Popup", - "chnName": "弹出层", - "desc": "弹出层", - "type": "component", - "sort": "5", - "showDemo": true, - "author": "杨凯旋" - }, - { - "version": "1.0.0", - "name": "LeftSlip", - "chnName": "左滑删除", - "desc": "手势左滑删除元素", - "type": "component", - "sort": "2", - "showDemo": true, - "author": "vickyYE" - }, - { - "version": "1.0.0", - "name": "TabSelect", - "chnName": "分类选择", - "desc": "两级分类选择", - "type": "component", - "sort": "3", - "showDemo": true, - "author": "dsj" - } - ] + "sorts": [ + "数据展示", + "数据录入", + "操作反馈", + "导航组件", + "布局组件", + "基础组件", + "业务组件" + ], + "packages": [ + { + "name": "Cell", + "version": "1.0.0", + "sort": "4", + "chnName": "列表项", + "type": "component", + "showDemo": true, + "desc": "列表项，可组合成列表", + "author": "Frans" + }, + { + "name": "Dialog", + "version": "1.0.0", + "sort": "2", + "chnName": "对话框", + "type": "method", + "showDemo": true, + "desc": "模态弹窗，支持按钮交互，支持图片弹窗。", + "star": 5, + "author": "Frans" + }, + { + "name": "Icon", + "version": "1.0.0", + "sort": "5", + "chnName": "图标", + "type": "component", + "showDemo": true, + "desc": "网页小图标。", + "author": "Frans" + }, + { + "version": "1.0.0", + "name": "Toast", + "sort": "2", + "chnName": "吐司", + "desc": "轻提示。", + "type": "method", + "showDemo": true, + "star": 4, + "author": "Frans" + }, + { + "version": "1.0.0", + "name": "ActionSheet", + "sort": "2", + "chnName": "动作面板", + "desc": "从底部弹出的动作菜单面板。", + "type": "component", + "showDemo": true, + "star": 5, + "author": "iris" + }, + { + "version": "1.0.0", + "name": "Tab", + "sort": "3", + "chnName": "选项卡", + "desc": "常用于平级区域大块内容的的收纳和展现。", + "type": "component", + "showDemo": true, + "star": 3, + "author": "甄玉磊" + }, + { + "version": "1.0.0", + "name": "TabPanel", + "sort": "3", + "chnName": "选项卡", + "desc": "标签栏 选项卡组件", + "type": "component", + "showDemo": false, + "author": "甄玉磊" + }, + { + "version": "1.0.0", + "name": "TabBar", + "sort": "3", + "chnName": "标签栏", + "desc": "用于不同模块以之间的切换", + "type": "component", + "showDemo": true, + "star": 3, + "author": "甄玉磊" + }, + { + "version": "1.0.0", + "name": "Calendar", + "sort": "1", + "chnName": "日历", + "desc": "日历", + "type": "component", + "showDemo": true, + "star": 5, + "author": "iris" + }, + { + "version": "1.0.0", + "name": "DatePicker", + "sort": "1", + "chnName": "日期选择", + "desc": "日期选择", + "type": "component", + "showDemo": true, + "star": 5, + "author": "iris" + }, + { + "version": "1.0.0", + "name": "NavBar", + "sort": "3", + "chnName": "导航栏", + "desc": "移动端头部导航栏", + "type": "component", + "showDemo": true, + "author": "lishaoqi" + }, + { + "version": "1.0.0", + "name": "NoticeBar", + "sort": "3", + "chnName": "公告栏", + "desc": "移动端公告栏", + "type": "component", + "showDemo": true, + "author": "wangyue" + }, + { + "name": "Switch", + "version": "1.0.0", + "sort": "1", + "chnName": "开关", + "type": "component", + "showDemo": true, + "desc": "滑动开关，通过点击使按钮左右滑动，同时触发对应的开关状态", + "author": "Frans" + }, + { + "version": "1.0.0", + "name": "Slider", + "sort": "1", + "chnName": "滑块", + "desc": "滑动输入器，用于在数值区间/自定义区间内进行选择。", + "type": "component", + "showDemo": true, + "star": 4, + "author": "Frans" + }, + { + "version": "1.0.0", + "name": "Range", + "sort": "1", + "chnName": "区间选择器", + "desc": "区间选择器组件", + "type": "component", + "showDemo": true, + "star": 4, + "author": "famanoder" + }, + { + "version": "1.0.0", + "name": "Picker", + "sort": "1", + "chnName": "拾取器", + "desc": "提供多个选项集合供用户选择其中一项。", + "type": "component", + "showDemo": true, + "star": 5, + "author": "iris" + }, + { + "version": "1.0.0", + "name": "Progress", + "sort": "2", + "chnName": "进度条", + "desc": "展示操作或任务的当前进度，比如上传文件。", + "type": "component", + "showDemo": true, + "author": "张毓飞" + }, + { + "version": "1.0.0", + "name": "Price", + "sort": "0", + "chnName": "商品价格", + "desc": "商品价格组件，支持小数点前后应用不同样式、千位分隔、人民币符号等功能", + "type": "component", + "showDemo": true, + "author": "liaoyanli5" + }, + { + "version": "1.0.0", + "name": "Flex", + "sort": "4", + "chnName": "Flex布局", + "desc": "Flex布局速简便地创建布局", + "type": "component", + "showDemo": true, + "author": "秦伟伟" + }, + { + "version": "1.0.0", + "name": "Col", + "sort": "4", + "chnName": "Flex布局", + "desc": "Flex布局速简便地创建布局", + "type": "component", + "showDemo": false, + "author": "秦伟伟" + }, + { + "version": "1.0.0", + "name": "Row", + "sort": "4", + "chnName": "Flex布局", + "desc": "Flex布局速简便地创建布局", + "type": "component", + "showDemo": false, + "author": "秦伟伟" + }, + { + "version": "1.0.0", + "name": "Steps", + "sort": "0", + "chnName": "步骤条", + "desc": "拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。", + "type": "component", + "showDemo": true, + "author": "宋其斌" + }, + { + "version": "1.0.0", + "name": "Button", + "sort": "5", + "chnName": "按钮", + "desc": "各式各样的按钮", + "type": "component", + "showDemo": true, + "author": "杨磊" + }, + { + "version": "1.0.0", + "name": "Badge", + "sort": "0", + "chnName": "徽标", + "desc": "出现在图标或文字右上角的红色圆点、数字或者文字，表示有新内容或者待处理的信息", + "type": "component", + "showDemo": true, + "author": "杨磊" + }, + { + "version": "1.0.0", + "name": "Rate", + "sort": "1", + "chnName": "评分", + "desc": "用于快速的评级操作，或对评价进行展示。", + "type": "component", + "showDemo": true, + "star": 4, + "author": "永无止晋" + }, + { + "version": "1.0.1", + "name": "Swiper", + "chnName": "滑动切换", + "sort": "0", + "desc": "常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。", + "type": "component", + "showDemo": true, + "star": 5, + "author": "wangnan31" + }, + { + "version": "1.0.0", + "name": "Menu", + "sort": "3", + "chnName": "菜单", + "desc": "菜单", + "type": "component", + "showDemo": true, + "author": "苏子刚" + }, + { + "version": "1.0.0", + "name": "Stepper", + "chnName": "步进器", + "desc": "通过点击按钮控制数字加减", + "type": "component", + "sort": "1", + "showDemo": true, + "star": 3, + "author": "famanoder" + }, + { + "version": "1.0.0", + "name": "ButtonGroup", + "chnName": "按钮组", + "desc": "用于页面底部的按钮组", + "type": "component", + "sort": "5", + "showDemo": true, + "author": "杨磊" + }, + { + "version": "1.0.0", + "name": "SearchBar", + "chnName": "搜索栏", + "desc": "搜索栏", + "type": "component", + "sort": "1", + "showDemo": true, + "author": "lemon" + }, + { + "version": "1.0.0", + "name": "ImagePicker", + "sort": "1", + "chnName": "图片选择器", + "desc": "图片选择器", + "type": "component", + "showDemo": true, + "author": "苏子刚" + }, + { + "name": "Radio", + "version": "1.0.0", + "sort": "1", + "chnName": "单选按钮", + "type": "component", + "showDemo": true, + "desc": "单选按钮，可组合成单选按钮组", + "author": "Frans" + }, + { + "name": "RadioGroup", + "version": "1.0.0", + "sort": "1", + "chnName": "单选按钮组", + "type": "component", + "showDemo": false, + "desc": "单选按钮组", + "author": "Frans" + }, + { + "version": "1.0.0", + "name": "CheckBox", + "sort": "1", + "chnName": "复选按钮", + "desc": "复选多个选项", + "type": "component", + "showDemo": true, + "author": "Vicky.Ye" + }, + { + "version": "1.0.0", + "name": "CheckBoxGroup", + "sort": "1", + "chnName": "复选按钮组", + "desc": "成组出现的复选按钮组件", + "type": "component", + "showDemo": true, + "author": "Vicky.Ye" + }, + { + "version": "1.0.0", + "name": "ShortPassword", + "chnName": "短密码", + "des": "短密码", + "type": "component", + "sort": "1", + "showDemo": true, + "author": "wangnan31" + }, + { + "version": "1.0.0", + "name": "Skeleton", + "chnName": "骨架屏", + "des": "在页面上待加载区域填充灰色的占位图，本质上是界面加载过程中的过渡效果", + "type": "component", + "sort": "0", + "showDemo": true, + "author": "wangnan31" + }, + { + "version": "1.0.0", + "name": "Scroller", + "chnName": "滚动", + "desc": "滚动组件", + "type": "component", + "sort": "0", + "star": 5, + "showDemo": true, + "author": "iris" + }, + { + "version": "1.0.0", + "name": "BackTop", + "chnName": "回到顶部", + "desc": "用于页面内容高度过长，快捷回到顶部使用。", + "type": "component", + "sort": "2", + "showDemo": true, + "author": "永无止晋" + }, + { + "version": "1.0.0", + "name": "CountDown", + "chnName": "倒计时", + "desc": "倒计时组件", + "type": "component", + "sort": "0", + "showDemo": true, + "author": "famanoder" + }, + { + "version": "1.0.0", + "name": "InfiniteLoading", + "chnName": "无限加载", + "desc": "无限加载", + "type": "component", + "sort": "0", + "star": 4, + "showDemo": true, + "author": "iris" + }, + { + "version": "1.0.0", + "name": "Uploader", + "chnName": "上传", + "desc": "文件上传组件", + "type": "component", + "sort": "5", + "showDemo": true, + "author": "林如风" + }, + { + "version": "1.0.0", + "name": "TextInput", + "chnName": "文本框", + "desc": "单行文本框", + "type": "component", + "sort": "1", + "showDemo": true, + "author": "Frans" + }, + { + "version": "1.0.0", + "name": "Avatar", + "chnName": "头像", + "desc": "用来表示用户或事物，支持图片或字符展示。", + "type": "component", + "sort": "5", + "showDemo": true, + "author": "zhenyulei" + }, + { + "version": "1.0.0", + "name": "Lazyload", + "chnName": "图片懒加载", + "desc": "图片懒加载", + "type": "component", + "sort": "0", + "showDemo": true, + "author": "zhuzhida" + }, + { + "version": "1.0.0", + "name": "TextBox", + "chnName": "文本域", + "desc": "文本域", + "type": "component", + "sort": "1", + "showDemo": true, + "author": "guoxiaoxiao" + }, + { + "version": "1.0.0", + "name": "Elevator", + "chnName": "电梯楼层", + "desc": "类似于电梯楼层，组件可以跟着右侧索引而滑动", + "type": "component", + "sort": "3", + "showDemo": true, + "author": "zhenyulei" + }, + { + "version": "1.0.0", + "name": "Popup", + "chnName": "弹出层", + "desc": "弹出层", + "type": "component", + "sort": "5", + "showDemo": true, + "author": "杨凯旋" + }, + { + "version": "1.0.0", + "name": "LeftSlip", + "chnName": "左滑删除", + "desc": "手势左滑删除元素", + "type": "component", + "sort": "2", + "showDemo": true, + "author": "vickyYE" + }, + { + "version": "1.0.0", + "name": "TabSelect", + "chnName": "分类选择", + "desc": "两级分类选择", + "type": "component", + "sort": "6", + "showDemo": true, + "author": "dsj" + }, + { + "version": "1.0.0", + "name": "LuckDraw", + "chnName": "转盘抽奖", + "desc": "可设置中奖奖品，转动时间，中奖标识等", + "type": "component", + "sort": "6", + "showDemo": true, + "author": "ymm" + } + ] } \ No newline at end of file diff --git a/src/nutui.js b/src/nutui.js index dc1a68725c..8ca3c60906 100644 --- a/src/nutui.js +++ b/src/nutui.js @@ -1,6 +1,6 @@ -import {version} from '../package.json'; -import {packages as pkgList} from './config.json'; -import {locale} from './locales'; +import { version } from '../package.json'; +import { packages as pkgList } from './config.json'; +import { locale } from './locales'; import Cell from './packages/cell/index.js'; import './packages/cell/cell.scss'; import Dialog from './packages/dialog/index.js'; @@ -99,58 +99,61 @@ import LeftSlip from './packages/leftslip/index.js'; import './packages/leftslip/leftslip.scss'; import TabSelect from "./packages/tabselect/index.js"; import "./packages/tabselect/tabselect.scss"; - import './packages/popup/popup.scss'; +import LuckDraw from "./packages/luckdraw/index.js"; +import "./packages/luckdraw/luckdraw.scss"; + const packages = { - Cell, - Dialog, - Icon, - Toast, - ActionSheet, - Tab, - TabPanel, - TabBar, - Calendar, - DatePicker, - NavBar, - NoticeBar, - Switch, - Slider, - Range, - Picker, - Progress, - Price, - Flex, - Col, - Row, - Steps, - Button, - Badge, - Rate, - Swiper, - Menu, - Stepper, - ButtonGroup, - SearchBar, - ImagePicker, - Radio, - RadioGroup, - CheckBox, - CheckBoxGroup, - ShortPassword, - Skeleton, - Scroller, - BackTop, - CountDown, - InfiniteLoading, - Uploader, - TextInput, - TextBox, - Avatar, - Elevator, - Popup, - LeftSlip, - TabSelect: TabSelect + Cell, + Dialog, + Icon, + Toast, + ActionSheet, + Tab, + TabPanel, + TabBar, + Calendar, + DatePicker, + NavBar, + NoticeBar, + Switch, + Slider, + Range, + Picker, + Progress, + Price, + Flex, + Col, + Row, + Steps, + Button, + Badge, + Rate, + Swiper, + Menu, + Stepper, + ButtonGroup, + SearchBar, + ImagePicker, + Radio, + RadioGroup, + CheckBox, + CheckBoxGroup, + ShortPassword, + Skeleton, + Scroller, + BackTop, + CountDown, + InfiniteLoading, + Uploader, + TextInput, + TextBox, + Avatar, + Elevator, + Popup, + LeftSlip, + TabSelect: TabSelect, + LuckDraw: LuckDraw }; const components = {}; @@ -158,79 +161,79 @@ const methods = {}; const filters = {}; const directives = {}; pkgList.map(item => { - const pkg = packages[item.name]; - if (!pkg) return; + const pkg = packages[item.name]; + if (!pkg) return; - if (item.type == 'component') { - if (pkg.name) { - components[pkg.name] = pkg; - } else { - for (let n in pkg) { - components[n] = pkg[n]; - } - } - } else if (item.type == 'method') { - methods[item.name] = pkg; - } else if (item.type == 'filter') { - filters[item.name] = pkg; - } else if (item.type == 'directive') { - directives[item.name] = pkg; + if (item.type == 'component') { + if (pkg.name) { + components[pkg.name] = pkg; + } else { + for (let n in pkg) { + components[n] = pkg[n]; + } } + } else if (item.type == 'method') { + methods[item.name] = pkg; + } else if (item.type == 'filter') { + filters[item.name] = pkg; + } else if (item.type == 'directive') { + directives[item.name] = pkg; + } }); -const install = function(Vue, opts = {}) { - if (install.installed) return; +const install = function (Vue, opts = {}) { + if (install.installed) return; - if (opts.locale) { - Vue.config.lang = opts.locale; - } + if (opts.locale) { + Vue.config.lang = opts.locale; + } - if (opts.lang) locale(Vue.config.lang, opts.lang); + if (opts.lang) locale(Vue.config.lang, opts.lang); - for (let cptName in methods) { - if (Array.isArray(methods[cptName])) { - Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName][0]; - Vue.component(methods[cptName][1].name, methods[cptName][1]); - } else { - Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName]; - } + for (let cptName in methods) { + if (Array.isArray(methods[cptName])) { + Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName][0]; + Vue.component(methods[cptName][1].name, methods[cptName][1]); + } else { + Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName]; } + } - for (let cptName in components) { - if (components[cptName] && components[cptName].name) { - Vue.component(components[cptName].name, components[cptName]); - } + for (let cptName in components) { + if (components[cptName] && components[cptName].name) { + Vue.component(components[cptName].name, components[cptName]); } + } - for (let cptName in filters) { - if (filters[cptName] && filters[cptName].name) { - Vue.filter(cptName, filters[cptName]); - } + for (let cptName in filters) { + if (filters[cptName] && filters[cptName].name) { + Vue.filter(cptName, filters[cptName]); } + } - for (let cptName in directives) { - if (directives[cptName] && directives[cptName].name) { - Vue.directive(directives[cptName].name, directives[cptName]); - } + for (let cptName in directives) { + if (directives[cptName] && directives[cptName].name) { + Vue.directive(directives[cptName].name, directives[cptName]); } + } - Vue.use(Lazyload, { - lazyComponent: true, - loading: '//img12.360buyimg.com/imagetools/jfs/t1/73967/28/14561/916/5dc142e4E0666555b/bf33454553c6035e.png' - }); + Vue.use(Lazyload, { + lazyComponent: true, + loading: '//img12.360buyimg.com/imagetools/jfs/t1/73967/28/14561/916/5dc142e4E0666555b/bf33454553c6035e.png' + }); }; if (typeof window !== 'undefined' && window.Vue) { - install(window.Vue); + install(window.Vue); } export default { - version, - locale, - install, - Lazyload, - ...components, - ...filters, - ...directives, - ...methods + version, + locale, + install, + Lazyload, + ...components, + ...filters, + ...directives, + ...methods }; \ No newline at end of file diff --git a/src/packages/cell/cell.scss b/src/packages/cell/cell.scss index b0e0ac52de..2f0f63986a 100644 --- a/src/packages/cell/cell.scss +++ b/src/packages/cell/cell.scss @@ -2,7 +2,7 @@ display: block; padding: 0 10px; text-decoration: none; - -webkit-tap-highlight-color: transparent; + -webkit-tap-highlight-color: rgba(0,0,0,0); outline: none; &.nut-cell-link:active { background-color: $light-color !important; diff --git a/src/packages/cell/cell.vue b/src/packages/cell/cell.vue index fb94093f91..332eef1cdc 100644 --- a/src/packages/cell/cell.vue +++ b/src/packages/cell/cell.vue @@ -1,18 +1,29 @@ \ No newline at end of file diff --git a/src/packages/cell/demo.vue b/src/packages/cell/demo.vue index 930b09ed0a..90cb72c102 100644 --- a/src/packages/cell/demo.vue +++ b/src/packages/cell/demo.vue @@ -2,23 +2,24 @@

基本用法

- + - - - +

通过Slot插槽分发内容

- + 我是主标题 我是副标，我们都是通过Slot分发的 我是描述 - + 通过Slot自定义右侧ICON - + + + +
@@ -27,13 +28,24 @@ +} + \ No newline at end of file diff --git a/src/packages/leftslip/__test__/leftslip.spec.js b/src/packages/leftslip/__test__/leftslip.spec.js index 74bfeaa6cf..21852ad2b7 100644 --- a/src/packages/leftslip/__test__/leftslip.spec.js +++ b/src/packages/leftslip/__test__/leftslip.spec.js @@ -1,18 +1,16 @@ -import { shallowMount } from '@vue/test-utils' -import LeftSlip from "../leftslip.vue" +import {shallowMount} from '@vue/test-utils'; +import LeftSlip from '../leftslip.vue'; import Vue from 'vue'; describe('LeftSlip.vue', () => { const wrapper = shallowMount(LeftSlip, {}); - it('一键删除设置', () => { + it('设置单一删除键', () => { wrapper.setProps({ - onlyDel: true, + onlyDelBtn: true }); return Vue.nextTick().then(function() { - expect(wrapper.find('.delbtn').isVisible()).toBe(true); - }) - }) - - -}); \ No newline at end of file + expect(wrapper.find('.nut-delet-btn').isVisible()).toBe(true); + }); + }); +}); diff --git a/src/packages/leftslip/demo.vue b/src/packages/leftslip/demo.vue index db8b557e78..1818f696a5 100644 --- a/src/packages/leftslip/demo.vue +++ b/src/packages/leftslip/demo.vue @@ -12,12 +12,15 @@

单个按钮

-
单一按钮
+
自定义单一按钮
删除
 - -
向左滑滑滑~一键删除
+ +
单一按钮点击一键删除
 +

多个按钮

@@ -77,10 +80,6 @@ export default { delItem(index) { this.list.splice(index, 1); }, - onlyDelBtnClick(par) { - // console.log(par); - par.remove(); - }, oneDel(par) { par.remove(); } diff --git a/src/packages/leftslip/doc.md b/src/packages/leftslip/doc.md index 167032fd62..689b8bdc3a 100644 --- a/src/packages/leftslip/doc.md +++ b/src/packages/leftslip/doc.md @@ -18,17 +18,17 @@ ```html
-
单一按钮
+
自定义单一按钮
删除
``` -### 单个按钮左滑一键删除 +### 单个按钮一键删除 ```html - -
向左滑滑滑~一键删除
+ +
单一按钮点击一键删除
 ``` @@ -106,11 +106,11 @@ export default { ## Prop -| 字段 | 说明 | 类型 | 默认值 | -| -------------- | ---------------------------------------------- | ------- | ------ | -| slot:slip-main | 列表主内容自定义区域 | html | - | -| slot:slipbtns | 左滑按钮自定义区域 | html | - | -| onlyDel | 显示只有一个删除按钮的列表样式（支持一键删除） | Boolean | false | +| 字段 | 说明 | 类型 | 默认值 | +| -------------- | -------------------- | ------- | ------ | +| slot:slip-main | 列表主内容自定义区域 | html | - | +| slot:slipbtns | 左滑按钮自定义区域 | html | - | +| onlyDelBtn | 设置单一删除按钮 | Boolean | false | ## Event diff --git a/src/packages/leftslip/leftslip.scss b/src/packages/leftslip/leftslip.scss index 17f3425001..995a639d4b 100644 --- a/src/packages/leftslip/leftslip.scss +++ b/src/packages/leftslip/leftslip.scss @@ -40,6 +40,21 @@ height: 100%; } } + .nut-delet-btn{ + position: absolute; + right: -50px; + top: 0; + min-width: 40px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + // transform: translateX(100%); + background: #ff4949; + color: #fff; + padding: 0 5px; + font-size: 14px; + } .slipbtns { position: absolute; right: 0; diff --git a/src/packages/leftslip/leftslip.vue b/src/packages/leftslip/leftslip.vue index df428dc90f..a2cd3ceafb 100644 --- a/src/packages/leftslip/leftslip.vue +++ b/src/packages/leftslip/leftslip.vue @@ -1,16 +1,24 @@ - diff --git a/src/packages/popup/overlay.vue b/src/packages/popup/overlay.vue new file mode 100644 index 0000000000..50ed27f9ff --- /dev/null +++ b/src/packages/popup/overlay.vue @@ -0,0 +1,15 @@ + + diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss index de5d9311ed..dffa0ae0e3 100644 --- a/src/packages/popup/popup.scss +++ b/src/packages/popup/popup.scss @@ -71,7 +71,7 @@ $popup-close-icon-margin: 16px; background-color: #fff; transition: transform 0.3s; -webkit-overflow-scrolling: touch; - z-index: 2028; + z-index: 100; } @keyframes nut-fade-in { from { @@ -93,7 +93,9 @@ $popup-close-icon-margin: 16px; } } - + .nut-overflow-hidden{ + overflow: hidden !important; + } .nutui-popup{ @@ -131,4 +133,39 @@ $popup-close-icon-margin: 16px; } + .popup-fade-enter-active { + animation: 0.3s nut-fade-in; +} +.popup-fade-leave-active { + animation: 0.3s nut-fade-out; +} +.popup-bg { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + z-index: 99; +} + +@keyframes nut-fade-in { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes nut-fade-out { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} \ No newline at end of file diff --git a/src/packages/popup/popup.vue b/src/packages/popup/popup.vue index 7fa01f4eea..b48502cdb9 100644 --- a/src/packages/popup/popup.vue +++ b/src/packages/popup/popup.vue @@ -1,20 +1,32 @@ diff --git a/src/packages/tab/demo.vue b/src/packages/tab/demo.vue index 3225f3215e..be9b838d2b 100644 --- a/src/packages/tab/demo.vue +++ b/src/packages/tab/demo.vue @@ -2,6 +2,12 @@

默认用法

+ + 页签1 + 页签2 + 页签3 + +

支持导航条在上下左右位置

- -

支持导航条在上下左右位置

禁止选中，默认选中某个标签

- +

如需要更新页面，请将监听变化的数据传入init-data

+ + +
+ + +