From 522830aac5846e9853cd554bd5cb81213a145a35 Mon Sep 17 00:00:00 2001 From: zhuxiang Date: Fri, 3 Mar 2017 14:08:33 +0800 Subject: [PATCH 1/6] tabs almost --- components.json | 4 +- docs/examples-docs/tab.md | 60 +++++++++++++++++++ docs/examples/tab.vue | 49 +++++++++++++++ packages/tab/CHANGELOG.md | 8 +++ packages/tab/README.md | 26 ++++++++ packages/tab/index.js | 2 + packages/tab/package.json | 10 ++++ packages/tab/src/tab.vue | 37 ++++++++++++ packages/tab/src/tabs.vue | 86 ++++++++++++++++++++++++++ packages/tabs/index.js | 3 + packages/zanui-css/src/index.css | 1 + packages/zanui-css/src/tab.css | 100 +++++++++++++++++++++++++++++++ src/index.js | 8 ++- 13 files changed, 392 insertions(+), 2 deletions(-) create mode 100644 docs/examples-docs/tab.md create mode 100644 docs/examples/tab.vue create mode 100644 packages/tab/CHANGELOG.md create mode 100644 packages/tab/README.md create mode 100644 packages/tab/index.js create mode 100644 packages/tab/package.json create mode 100644 packages/tab/src/tab.vue create mode 100644 packages/tab/src/tabs.vue create mode 100644 packages/tabs/index.js create mode 100644 packages/zanui-css/src/tab.css diff --git a/components.json b/components.json index 4cd925021..0f7b1a387 100644 --- a/components.json +++ b/components.json @@ -21,5 +21,7 @@ "badge-group": "./packages/badge-group/index.js", "badge": "./packages/badge/index.js", "search": "./packages/search/index.js", - "step": "./packages/step/index.js" + "step": "./packages/step/index.js", + "tabs": "./packages/tabs/index.js", + "tab": "./packages/tab/index.js" } diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md new file mode 100644 index 000000000..a6f3f2735 --- /dev/null +++ b/docs/examples-docs/tab.md @@ -0,0 +1,60 @@ +## Tab 组件 + +### 基础用法 + +```html + + 内容一 + 内容二 + 内容三 + 内容四 + 内容五 + +``` + +### 自定义样式用法 + +```html + + 内容一 + 内容二 + 内容三 + 内容四 + 内容五 + + +``` + + +### zan-tabs API + +| 参数 | 说明 | 类型 | 默认值 | 必须 | +|-----------|-----------|-----------|-------------|-------------| +| active-key | 激活的badge的索引 | string | '0'但必须子badge里的mark是有0位索引 | | + + +### z-badge API +| 参数 | 说明 | 类型 | 默认值 | 必须 | +|-----------|-----------|-----------|-------------|-------------| +| mark | badge的唯一key值 | string | '' | required | +| title | badge的文案标题 | string | '' | required | +| info | 当前badge的提示消息数量 | string | '' | | +| url | 跳转链接 | string | 全连接直接跳转或者hash | | diff --git a/docs/examples/tab.vue b/docs/examples/tab.vue new file mode 100644 index 000000000..789d1210d --- /dev/null +++ b/docs/examples/tab.vue @@ -0,0 +1,49 @@ + + \ No newline at end of file diff --git a/packages/tab/CHANGELOG.md b/packages/tab/CHANGELOG.md new file mode 100644 index 000000000..e88c472b3 --- /dev/null +++ b/packages/tab/CHANGELOG.md @@ -0,0 +1,8 @@ +## 0.0.2 (2017-01-20) + +* 改了bug A +* 加了功能B + +## 0.0.1 (2017-01-10) + +* 第一版 diff --git a/packages/tab/README.md b/packages/tab/README.md new file mode 100644 index 000000000..4c6172563 --- /dev/null +++ b/packages/tab/README.md @@ -0,0 +1,26 @@ +# @youzan/<%= name %> + +!!! 请在此处填写你的文档最简单描述 !!! + +[![version][version-image]][download-url] +[![download][download-image]][download-url] + +[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square +[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square +[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %> + +## Demo + +## Usage + +## API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| className | 自定义额外类名 | string | '' | '' | + + + + +## License +[MIT](https://opensource.org/licenses/MIT) diff --git a/packages/tab/index.js b/packages/tab/index.js new file mode 100644 index 000000000..551749afb --- /dev/null +++ b/packages/tab/index.js @@ -0,0 +1,2 @@ +import Tab from './src/tab'; +export default Tab; diff --git a/packages/tab/package.json b/packages/tab/package.json new file mode 100644 index 000000000..7dbfa2900 --- /dev/null +++ b/packages/tab/package.json @@ -0,0 +1,10 @@ +{ + "name": "<%= name %>", + "version": "<%= version %>", + "description": "<%= description %>", + "main": "./lib/index.js", + "author": "<%= author %>", + "license": "<%= license %>", + "devDependencies": {}, + "dependencies": {} +} diff --git a/packages/tab/src/tab.vue b/packages/tab/src/tab.vue new file mode 100644 index 000000000..ed9dd328b --- /dev/null +++ b/packages/tab/src/tab.vue @@ -0,0 +1,37 @@ + + + diff --git a/packages/tab/src/tabs.vue b/packages/tab/src/tabs.vue new file mode 100644 index 000000000..ac87fe140 --- /dev/null +++ b/packages/tab/src/tabs.vue @@ -0,0 +1,86 @@ + + + diff --git a/packages/tabs/index.js b/packages/tabs/index.js new file mode 100644 index 000000000..5db150464 --- /dev/null +++ b/packages/tabs/index.js @@ -0,0 +1,3 @@ +import Tabs from '../tab/src/tabs'; + +export default Tabs; diff --git a/packages/zanui-css/src/index.css b/packages/zanui-css/src/index.css index 3f89bef3c..3584e581d 100644 --- a/packages/zanui-css/src/index.css +++ b/packages/zanui-css/src/index.css @@ -19,3 +19,4 @@ @import './steps.css'; @import './tag.css'; @import './checkbox.css'; +@import './tab.css'; diff --git a/packages/zanui-css/src/tab.css b/packages/zanui-css/src/tab.css new file mode 100644 index 000000000..9286383c4 --- /dev/null +++ b/packages/zanui-css/src/tab.css @@ -0,0 +1,100 @@ +@import "./common/var.css"; +@import "./mixins/border_retina.css"; +@component-namespace zan { + @b tabs { + position: relative; + } + @b tabs-line { + height: 44px; + background-color: $c-white; + &::after { + @mixin border-retina (top); + @mixin border-retina (bottom); + } + @b tabs-nav-bar { + display: block; + } + } + @b tabs-card { + height: 28px; + margin: 0 15px; + background-color: $c-white; + border-radius: 2px; + border: 1px solid #666666; + overflow: hidden; + .zan-tabs-nav-bar { + display: none; + } + .zan-tab { + color: #666666; + line-height: 28px; + border-right: 1px solid #666666; + &:last-child { + border-right: none; + } + &.zan-tab-active { + background-color: #666666; + color: $c-white; + } + } + } + @b tabs-nav { + display: flex; + transition: transform .5s cubic-bezier(.645, .045, .355, 1); + position: relative; + /*float: left*/ + &::after, &::before { + display: table; + content: " " + } + &::after { + clear: both + } + } + @b tabs-nav-bar { + z-index: 1; + position: absolute; + left: 0; + bottom: 0; + height: 2px; + background-color: #f13e3a; + transition: transform .3s cubic-bezier(.645, .045, .355, 1); + transform-origin: 0 0; + } + @b tab { + color: $c-black; + font-size: 14px; + line-height: 44px; + flex: 1; + display: inline-block; + box-sizing: border-box; + transition: color .3s cubic-bezier(.645, .045, .355, 1); + cursor: pointer; + text-align: center; + } + @b tab-active { + color: #FF4444; + } + @b tabs-pane { + display: none; + @when select { + display: block; + } + } +} + + + + + + + + + + + + + + + + diff --git a/src/index.js b/src/index.js index bd9ebdc0c..5d8b0566b 100644 --- a/src/index.js +++ b/src/index.js @@ -21,6 +21,8 @@ import BadgeGroup from '../packages/badge-group/index.js'; import Badge from '../packages/badge/index.js'; import Search from '../packages/search/index.js'; import Step from '../packages/step/index.js'; +import Tabs from '../packages/tabs/index.js'; +import Tab from '../packages/tab/index.js'; const install = function(Vue) { if (install.installed) return; @@ -46,6 +48,8 @@ const install = function(Vue) { Vue.component(Badge.name, Badge); Vue.component(Search.name, Search); Vue.component(Step.name, Step); + Vue.component(Tabs.name, Tabs); + Vue.component(Tab.name, Tab); }; // auto install @@ -78,5 +82,7 @@ module.exports = { BadgeGroup, Badge, Search, - Step + Step, + Tabs, + Tab }; From 4ab5c331b7231798d8dba0c07f94f01d8ec58cd3 Mon Sep 17 00:00:00 2001 From: zhuxiang Date: Fri, 3 Mar 2017 14:13:17 +0800 Subject: [PATCH 2/6] lazyload start --- components.json | 3 ++- packages/lazyload/CHANGELOG.md | 8 ++++++++ packages/lazyload/README.md | 26 ++++++++++++++++++++++++++ packages/lazyload/index.js | 3 +++ packages/lazyload/package.json | 10 ++++++++++ packages/lazyload/src/main.vue | 18 ++++++++++++++++++ 6 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 packages/lazyload/CHANGELOG.md create mode 100644 packages/lazyload/README.md create mode 100644 packages/lazyload/index.js create mode 100644 packages/lazyload/package.json create mode 100644 packages/lazyload/src/main.vue diff --git a/components.json b/components.json index 0f7b1a387..15e5eda3c 100644 --- a/components.json +++ b/components.json @@ -23,5 +23,6 @@ "search": "./packages/search/index.js", "step": "./packages/step/index.js", "tabs": "./packages/tabs/index.js", - "tab": "./packages/tab/index.js" + "tab": "./packages/tab/index.js", + "lazyload": "./packages/lazyload/index.js" } diff --git a/packages/lazyload/CHANGELOG.md b/packages/lazyload/CHANGELOG.md new file mode 100644 index 000000000..e88c472b3 --- /dev/null +++ b/packages/lazyload/CHANGELOG.md @@ -0,0 +1,8 @@ +## 0.0.2 (2017-01-20) + +* 改了bug A +* 加了功能B + +## 0.0.1 (2017-01-10) + +* 第一版 diff --git a/packages/lazyload/README.md b/packages/lazyload/README.md new file mode 100644 index 000000000..4c6172563 --- /dev/null +++ b/packages/lazyload/README.md @@ -0,0 +1,26 @@ +# @youzan/<%= name %> + +!!! 请在此处填写你的文档最简单描述 !!! + +[![version][version-image]][download-url] +[![download][download-image]][download-url] + +[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square +[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square +[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %> + +## Demo + +## Usage + +## API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| className | 自定义额外类名 | string | '' | '' | + + + + +## License +[MIT](https://opensource.org/licenses/MIT) diff --git a/packages/lazyload/index.js b/packages/lazyload/index.js new file mode 100644 index 000000000..59bd195b2 --- /dev/null +++ b/packages/lazyload/index.js @@ -0,0 +1,3 @@ +import SampleComponent from './src/main'; + +export default SampleComponent; diff --git a/packages/lazyload/package.json b/packages/lazyload/package.json new file mode 100644 index 000000000..7dbfa2900 --- /dev/null +++ b/packages/lazyload/package.json @@ -0,0 +1,10 @@ +{ + "name": "<%= name %>", + "version": "<%= version %>", + "description": "<%= description %>", + "main": "./lib/index.js", + "author": "<%= author %>", + "license": "<%= license %>", + "devDependencies": {}, + "dependencies": {} +} diff --git a/packages/lazyload/src/main.vue b/packages/lazyload/src/main.vue new file mode 100644 index 000000000..0d2c38ebd --- /dev/null +++ b/packages/lazyload/src/main.vue @@ -0,0 +1,18 @@ + + + From 847e5092442c62c1d7a7e48540e1905f4062440b Mon Sep 17 00:00:00 2001 From: zhuxiang Date: Tue, 7 Mar 2017 14:56:47 +0800 Subject: [PATCH 3/6] done --- packages/lazyload/index.js | 85 +++++++++++++++++++++++++++++++++- packages/lazyload/src/main.vue | 18 ------- 2 files changed, 83 insertions(+), 20 deletions(-) delete mode 100644 packages/lazyload/src/main.vue diff --git a/packages/lazyload/index.js b/packages/lazyload/index.js index 59bd195b2..554352235 100644 --- a/packages/lazyload/index.js +++ b/packages/lazyload/index.js @@ -1,3 +1,84 @@ -import SampleComponent from './src/main'; +export default { + install: function(Vue,options){ + options = options || { + fade: false, + nohori: false + } + // scroll结束的时候触发scrollend事件 + var timer = null; + var topValue = 0; + var bodyEle = document.body; -export default SampleComponent; + var scrollEnd = document.createEvent('HTMLEvents'); + scrollEnd.initEvent('scrollEnd',true,false) + function enterFrame(){ + if(bodyEle.scrollTop == topValue){ + window.cancelAnimationFrame(timer); + window.dispatchEvent(scrollEnd) + } else { + topValue = bodyEle.scrollTop; + } + requestAnimationFrame(enterFrame); + } + document.addEventListener('scroll',function(){ + if(!timer) { + timer = window.requestAnimationFrame(enterFrame); + } + },true) + + //vue指令 + function update(value){ + if (!value) { + return; + } + var isFadeIn = this.modifiers.fade || options.fade + var isNoHori = this.modifiers.nohori || options.nohori + // 用css3来控制过渡效果 + if(isFadeIn){ + this.el.style.opacity = 0 + this.el.style.transition = 'opacity .3s' + this.el.style.webkitTransition = 'opacity .3s' + } + var compute = function(){ + if (this.el === null) { + return; + } + var rect = this.el.getBoundingClientRect(); + var vpWidth = document.head.parentNode.clientWidth + var vpHeight = document.head.parentNode.clientHeight + var loadImg = function(){ + this.el.src = value + this.el.addEventListener('load',onloadEnd) + window.removeEventListener('scrollEnd',compute,true) + window.removeEventListener('resize',compute,true) + + }.bind(this) + if(this.el.src == value)return + if(isNoHori){ + if(rect.bottom >=0 && rect.top <= vpHeight){ + loadImg() + } + }else if(rect.bottom >=0 && rect.top <= vpHeight + && rect.right >= 0 && rect.left <= vpWidth){ + loadImg() + } + }.bind(this) + var onload = function(){ + compute(); + this.el && this.el.removeEventListener('load',onload) + window.addEventListener('scrollEnd',compute,true) + window.addEventListener('resize',compute,true) + }.bind(this) + var onloadEnd = function(){ + if (this.el === null) {return;} + if(isFadeIn){ + this.el.style.opacity = 1 + } + this.el.removeEventListener('load',onloadEnd) + }.bind(this) + // 元素load触发事件 + this.el.addEventListener('load',onload) + } + Vue.directive('lazyload',update) + } +}; diff --git a/packages/lazyload/src/main.vue b/packages/lazyload/src/main.vue deleted file mode 100644 index 0d2c38ebd..000000000 --- a/packages/lazyload/src/main.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - From 14110f6c908be0048e160d3e0dd588fc04260a46 Mon Sep 17 00:00:00 2001 From: zhuxiang Date: Tue, 7 Mar 2017 16:40:06 +0800 Subject: [PATCH 4/6] done --- docs/examples-docs/tab.md | 109 ++++++++++++++++++++++++++++++-------- packages/tab/src/tab.vue | 16 +++--- packages/tab/src/tabs.vue | 41 ++++++-------- src/index.js | 2 + 4 files changed, 113 insertions(+), 55 deletions(-) diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md index a6f3f2735..60d94bd4f 100644 --- a/docs/examples-docs/tab.md +++ b/docs/examples-docs/tab.md @@ -2,25 +2,90 @@ ### 基础用法 +:::demo 基础用法 ```html - 内容一 - 内容二 - 内容三 - 内容四 - 内容五 + 内容一 + 内容二 + 内容三 + 内容四 + 内容五 ``` -### 自定义样式用法 - + +::: +### 禁用用法 +:::demo 禁用用法 ```html - - 内容一 - 内容二 - 内容三 - 内容四 - 内容五 + + 内容一 + 内容二 + 内容三 + 内容四 + 内容五 + + +``` +::: + +### card样式用法 +:::demo card样式用法 +```html + + 内容一 + 内容二 + 内容三 + 内容四 + 内容五 + +``` +::: + + +### 自定义样式用法 +:::demo 自定义样式用法 +```html + + 内容一 + 内容二 + 内容三 + 内容四 + 内容五 ``` - +::: ### zan-tabs API -| 参数 | 说明 | 类型 | 默认值 | 必须 | +| 参数 | 说明 | 类型 | 默认值 | 可选 | |-----------|-----------|-----------|-------------|-------------| -| active-key | 激活的badge的索引 | string | '0'但必须子badge里的mark是有0位索引 | | +| classtype | 两种UI | string | line | card | +| active | 默认激活的tab | string || number | 0 | | +| classname | tabs自定义classname | string | '' | | -### z-badge API +### zan-tab API | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| -| mark | badge的唯一key值 | string | '' | required | -| title | badge的文案标题 | string | '' | required | -| info | 当前badge的提示消息数量 | string | '' | | -| url | 跳转链接 | string | 全连接直接跳转或者hash | | +| title | tab的标题 | string | '' | required | +| paneclass | 底部内容区的classname | string | '' | | +| disable | 是否禁用这个tab | Boolean | false | | + diff --git a/packages/tab/src/tab.vue b/packages/tab/src/tab.vue index ed9dd328b..196173c29 100644 --- a/packages/tab/src/tab.vue +++ b/packages/tab/src/tab.vue @@ -8,30 +8,26 @@ export default { name: 'zan-tab', props: { - // 对应 Tabs 组件的 activeKey - tabKey: { - type: [Number, String], - required: true - }, // 选项卡头显示文字 title: { type: String, required: true }, - tabPaneClassName: { + paneclass: { type: String - } + }, + disable: Boolean }, computed: { classNames() { return [ - {'is-select': this.tabKey == this.$parent.switchActiveTabKey}, - this.tabPaneClassName + {'is-select': this.$parent.tabs.indexOf(this) == this.$parent.switchActiveTabKey }, + this.paneclass ]; } }, created () { - this.$parent.tabCreate(this.tabKey, this.title); + this.$parent.tabs.push(this); } }; diff --git a/packages/tab/src/tabs.vue b/packages/tab/src/tabs.vue index ac87fe140..bd79fb80b 100644 --- a/packages/tab/src/tabs.vue +++ b/packages/tab/src/tabs.vue @@ -3,11 +3,11 @@
{{ tab.title }}
@@ -21,41 +21,36 @@ name: 'zan-tabs', props: { // 外部传入的激活的tab标签 - activeTabKey: { + active: { type: [Number, String], default: 0 }, // 是默认的line还是card - classType: { + classtype: { type: String, default: 'line' }, // nav的wrap的样式 - tabsClassName: { + classname: { type: String, default: '' - }, - // 每个nav里tab的样式 - tabClassName: { - type: String } }, data() { return { tabs: [], isReady: false, - switchActiveTabKey: this.activeTabKey + switchActiveTabKey: this.active }; }, computed: { classNames () { - return [ `zan-tabs-${this.classType}`, this.tabsClassName ] + return [ `zan-tabs-${this.classtype}`, this.classname ] }, navBarStyle () { if(!this.isReady) return; let tabKey = this.switchActiveTabKey; - let selectors = `.J-tab-key[data-key="${tabKey}"]`; - let elem = this.$el.querySelector(selectors) || {}; + let elem = this.$refs.tabkey[tabKey]; let w = `${elem.offsetWidth || 0}px`; let x = `${elem.offsetLeft || 0}px`; return { @@ -65,14 +60,12 @@ } }, methods: { - tabCreate (tabKey, title) { - this.tabs.push({ - tabKey: tabKey, - title: title - }); - }, - handleTabClick(tabKey) { - this.switchActiveTabKey = tabKey; + handleTabClick(index, el) { + if(el.disable) { + el.$emit('ondisable'); + return + } + this.switchActiveTabKey = index; } }, mounted () { diff --git a/src/index.js b/src/index.js index 4503f31bd..71103a6fb 100644 --- a/src/index.js +++ b/src/index.js @@ -23,6 +23,7 @@ import Search from '../packages/search/index.js'; import Step from '../packages/step/index.js'; import Tabs from '../packages/tabs/index.js'; import Tab from '../packages/tab/index.js'; +import Lazyload from '../packages/lazyload/index.js'; import ImagePreview from '../packages/image-preview/index.js'; import Col from '../packages/col/index.js'; import Row from '../packages/row/index.js'; @@ -92,6 +93,7 @@ module.exports = { Step, Tabs, Tab, + Lazyload, ImagePreview, Col, Row, From 43e79ccc65eb522f5bb608f8c56f961d8acb3ce8 Mon Sep 17 00:00:00 2001 From: zhuxiang Date: Wed, 8 Mar 2017 12:59:44 +0800 Subject: [PATCH 5/6] eslint done --- docs/examples-docs/tab.md | 16 ++-- packages/lazyload/index.js | 157 ++++++++++++++++++------------------- packages/tab/src/tab.vue | 10 +-- packages/tab/src/tabs.vue | 38 ++++----- 4 files changed, 105 insertions(+), 116 deletions(-) diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md index 60d94bd4f..844b4abb3 100644 --- a/docs/examples-docs/tab.md +++ b/docs/examples-docs/tab.md @@ -28,7 +28,7 @@ export default { ```html 内容一 - 内容二 + 内容二 内容三 内容四 内容五 @@ -48,7 +48,7 @@ export default { ### card样式用法 :::demo card样式用法 ```html - + 内容一 内容二 内容三 @@ -80,12 +80,12 @@ export default { ### 自定义样式用法 :::demo 自定义样式用法 ```html - - 内容一 - 内容二 - 内容三 - 内容四 - 内容五 + + 内容一 + 内容二 + 内容三 + 内容四 + 内容五