From f089a405a32802df9b1947a4f3b2a5881bfb8fce Mon Sep 17 00:00:00 2001 From: cookfront Date: Fri, 24 Mar 2017 17:32:31 +0800 Subject: [PATCH 01/95] fix example --- build/genExamples.js | 1 + docs/router.config.js | 4 ++++ package.json | 2 +- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/build/genExamples.js b/build/genExamples.js index 5db7e8244..d59b81681 100644 --- a/build/genExamples.js +++ b/build/genExamples.js @@ -81,6 +81,7 @@ for (var item in Components) { var exampleVueName = `${docsDir}/examples-dist/${item}.vue`; + // 新建一个文件 if (!fs.existsSync(exampleVueName)) { fs.closeSync(fs.openSync(exampleVueName, 'w')); } diff --git a/docs/router.config.js b/docs/router.config.js index 4ac66d40c..308eaf7e1 100644 --- a/docs/router.config.js +++ b/docs/router.config.js @@ -2,6 +2,10 @@ const registerRoute = (navConfig, isExample) => { let route = []; let navs = navConfig['zh-CN']; navs.forEach(nav => { + if (isExample && !nav.showInMobile) { + return; + } + if (nav.groups) { nav.groups.forEach(group => { group.list.forEach(nav => { diff --git a/package.json b/package.json index 8559ded01..8b89a1d8e 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "deploy:docs": "rimraf docs/dist && npm run build:example && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.js", "dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:components && npm run build:utils && npm run build:zanui-css", "clean": "rimraf lib && rimraf packages/*/lib", - "lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet", + "lint": "eslint src/**/*.js packages/**/*.{js,vue} build/**/*.js --quiet", "test": "karma start test/unit/karma.conf.js --single-run; npm run coverage", "test:watch": "karma start test/unit/karma.conf.js", "coverage": "find test/unit/coverage/lcov-report -name 'index.html' | sed -n 1,1p | xargs -I {} open {} ", From a991aea5817ae72941d820eda77b2ad4ea820916 Mon Sep 17 00:00:00 2001 From: cookfront Date: Fri, 24 Mar 2017 22:02:38 +0800 Subject: [PATCH 02/95] fix docs --- docs/assets/docs.css | 6 +-- docs/components/demo-block.vue | 8 ++-- docs/components/side-nav.vue | 3 +- docs/examples-docs/actionsheet.md | 2 +- docs/examples-docs/badge.md | 2 +- docs/examples-docs/button.md | 16 ++------ docs/examples-docs/cell.md | 2 +- docs/examples-docs/checkbox.md | 2 +- docs/examples-docs/datetime-picker.md | 2 +- docs/examples-docs/dialog.md | 2 +- docs/examples-docs/field.md | 2 +- docs/examples-docs/icon.md | 6 ++- docs/examples-docs/loading.md | 2 +- docs/examples-docs/picker.md | 4 +- docs/examples-docs/popup.md | 2 +- docs/examples-docs/progress.md | 2 +- docs/examples-docs/quantity.md | 2 +- docs/examples-docs/radio.md | 2 +- docs/examples-docs/search.md | 4 +- docs/examples-docs/swipe.md | 2 +- docs/examples-docs/switch.md | 2 +- docs/examples-docs/tab.md | 2 +- docs/examples-docs/tag.md | 2 +- docs/examples-docs/toast.md | 2 +- docs/examples-docs/uploader.md | 2 +- docs/nav.config.json | 54 ++++++++++++------------- packages/zanui-css/src/button_group.css | 33 --------------- 27 files changed, 65 insertions(+), 105 deletions(-) delete mode 100644 packages/zanui-css/src/button_group.css diff --git a/docs/assets/docs.css b/docs/assets/docs.css index 3ab54888d..461e2b1db 100644 --- a/docs/assets/docs.css +++ b/docs/assets/docs.css @@ -78,15 +78,15 @@ ul, ol { .page-container { background-color: #fff; position: relative; - display: table; + display: flex; width: 100%; + overflow: hidden; } .page-content { box-sizing: border-box; - margin-left: 220px; padding: 0 40px; - display: table-cell; + flex: 1; section { > h1, diff --git a/docs/components/demo-block.vue b/docs/components/demo-block.vue index f0291eebf..d9e9dc495 100644 --- a/docs/components/demo-block.vue +++ b/docs/components/demo-block.vue @@ -23,25 +23,27 @@ export default { code { font-family: Menlo, Monaco, Consolas, Courier, monospace; + overflow: auto; + white-space: pre-wrap; } .examples { width: 320px; - float: right; box-sizing: border-box; padding: 10px 0 0; min-height: 200px; - max-height: 600px; + max-height: 500px; overflow: auto; background-color: #F8F8F8; border: 1px solid #E5E5E5; + float: right; } .highlight { - margin-right: 345px; box-sizing: border-box; border: 1px solid #E5E5E5; border-radius: 4px; + margin-right: 345px; pre { margin: 0; diff --git a/docs/components/side-nav.vue b/docs/components/side-nav.vue index fe786fbbf..2d790aa2f 100644 --- a/docs/components/side-nav.vue +++ b/docs/components/side-nav.vue @@ -56,10 +56,9 @@ export default { -## Icon +## Icon 图标 -### 所有Icon +### 基础用法 + +设置`name`属性为对应的图标名称即可。 :::demo 所有Icon ```html diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md index a57cd0636..5691d8fb8 100644 --- a/docs/examples-docs/loading.md +++ b/docs/examples-docs/loading.md @@ -17,7 +17,7 @@ } -## Loading 加载中 +## Loading 加载 ### 基础用法 diff --git a/docs/examples-docs/picker.md b/docs/examples-docs/picker.md index 6da630fc5..0c6810cf9 100644 --- a/docs/examples-docs/picker.md +++ b/docs/examples-docs/picker.md @@ -35,9 +35,7 @@ export default { }; -## Picker组件 - -模仿iOS中的`UIPickerView`。 +## Picker 选择器 ### 基础用法 diff --git a/docs/examples-docs/popup.md b/docs/examples-docs/popup.md index ea5ed0cef..9cd94610f 100644 --- a/docs/examples-docs/popup.md +++ b/docs/examples-docs/popup.md @@ -76,7 +76,7 @@ export default { }; -## Popup组件 +## Popup 弹出菜单 ### 基础用法 diff --git a/docs/examples-docs/progress.md b/docs/examples-docs/progress.md index 7261278ed..0d4291867 100644 --- a/docs/examples-docs/progress.md +++ b/docs/examples-docs/progress.md @@ -10,7 +10,7 @@ -## Progress +## Progress 进度条 ### 基础用法 diff --git a/docs/examples-docs/quantity.md b/docs/examples-docs/quantity.md index 1368f62cd..f3f81f98a 100644 --- a/docs/examples-docs/quantity.md +++ b/docs/examples-docs/quantity.md @@ -23,7 +23,7 @@ export default { }; -## Quantity +## Quantity 数量选择 ### 基础用法 diff --git a/docs/examples-docs/radio.md b/docs/examples-docs/radio.md index ca2b84f98..826379134 100644 --- a/docs/examples-docs/radio.md +++ b/docs/examples-docs/radio.md @@ -25,7 +25,7 @@ export default { }; -## Radio组件 +## Radio 单选框 ### 基础用法 diff --git a/docs/examples-docs/search.md b/docs/examples-docs/search.md index cf9f051df..13b9bd05e 100644 --- a/docs/examples-docs/search.md +++ b/docs/examples-docs/search.md @@ -8,7 +8,7 @@ export default { }; -## Search 组件 +## Search 搜索 ### 基础用法 @@ -31,4 +31,4 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| -| placeholder | `input`的`placeholder`文案 | `string` | | | \ No newline at end of file +| placeholder | `input`的`placeholder`文案 | `string` | | | diff --git a/docs/examples-docs/swipe.md b/docs/examples-docs/swipe.md index 8449eb4e7..0fd446e17 100644 --- a/docs/examples-docs/swipe.md +++ b/docs/examples-docs/swipe.md @@ -12,7 +12,7 @@ } -## Swipe +## Swipe 轮播 ### 基础用法 diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md index b9a0e332d..d9b948cef 100644 --- a/docs/examples-docs/switch.md +++ b/docs/examples-docs/switch.md @@ -36,7 +36,7 @@ export default { }; -## Switch组件 +## Switch 开关 ### 基础用法 diff --git a/docs/examples-docs/tab.md b/docs/examples-docs/tab.md index 9aad91c35..78e835f64 100644 --- a/docs/examples-docs/tab.md +++ b/docs/examples-docs/tab.md @@ -29,7 +29,7 @@ export default { }; -## Tab 组件 +## Tab 标签 ### 基础用法 diff --git a/docs/examples-docs/tag.md b/docs/examples-docs/tag.md index 126ba5c38..a1a2b89c8 100644 --- a/docs/examples-docs/tag.md +++ b/docs/examples-docs/tag.md @@ -8,7 +8,7 @@ } -## Tag 组件 +## Tag 标记 ### 基础用法 diff --git a/docs/examples-docs/toast.md b/docs/examples-docs/toast.md index a828742e4..731b57245 100644 --- a/docs/examples-docs/toast.md +++ b/docs/examples-docs/toast.md @@ -63,7 +63,7 @@ export default { }; -## Toast +## Toast 轻提示 ### 基础用法 diff --git a/docs/examples-docs/uploader.md b/docs/examples-docs/uploader.md index 7193978d5..37d503191 100644 --- a/docs/examples-docs/uploader.md +++ b/docs/examples-docs/uploader.md @@ -12,7 +12,7 @@ export default { } }; -## Uploader 组件 +## Uploader 图片上传 ### 基础用法 diff --git a/docs/nav.config.json b/docs/nav.config.json index ddeb1800b..7d1959e5a 100644 --- a/docs/nav.config.json +++ b/docs/nav.config.json @@ -26,71 +26,71 @@ "list": [ { "path": "/button", - "title": "Button" + "title": "Button 按钮" }, { "path": "/icon", - "title": "Icon" + "title": "Icon 图标" }, { "path": "/cell", - "title": "Cell" + "title": "Cell 单元格" }, { "path": "/progress", - "title": "Progress" + "title": "Progress 进度条" }, { "path": "/panel", - "title": "Panel" + "title": "Panel 面板" }, { "path": "/card", - "title": "Card" + "title": "Card 图文组件" }, { "path": "/loading", - "title": "Loading" + "title": "Loading 加载" }, { "path": "/steps", - "title": "Steps" + "title": "Steps 步骤条" }, { "path": "/tag", - "title": "Tag" + "title": "Tag 标记" }, { "path": "/badge", - "title": "Badge" + "title": "Badge 徽章" }, { "path": "/tab", - "title": "Tab" + "title": "Tab 标签" }, { "path": "/popup", - "title": "Popup" + "title": "Popup 弹出菜单" }, { "path": "/swipe", - "title": "Swipe" + "title": "Swipe 轮播" }, { "path": "/search", - "title": "Search" + "title": "Search 搜索" }, { "path": "/quantity", - "title": "Quantity" + "title": "Quantity 数量选择" }, { "path": "/waterfall", - "title": "Waterfall" + "title": "Waterfall 瀑布流" }, { "path": "/image-preview", - "title": "ImagePreview" + "title": "ImagePreview 图片预览" } ] }, @@ -99,23 +99,23 @@ "list": [ { "path": "/switch", - "title": "Switch" + "title": "Switch 开关" }, { "path": "/field", - "title": "Field" + "title": "Field 输入框" }, { "path": "/radio", - "title": "Radio" + "title": "Radio 单选框" }, { "path": "/checkbox", - "title": "Checkbox" + "title": "Checkbox 复选框" }, { "path": "/uploader", - "title": "Uploader" + "title": "Uploader 图片上传" } ] }, @@ -124,23 +124,23 @@ "list": [ { "path": "/actionsheet", - "title": "ActionSheet" + "title": "ActionSheet 行动按钮" }, { "path": "/toast", - "title": "Toast" + "title": "Toast 轻提示" }, { "path": "/picker", - "title": "Picker" + "title": "Picker 选择器" }, { "path": "/datetime-picker", - "title": "Datetime Picker" + "title": "Datetime Picker 时间选择" }, { "path": "/dialog", - "title": "Dialog" + "title": "Dialog 弹出框" } ] } diff --git a/packages/zanui-css/src/button_group.css b/packages/zanui-css/src/button_group.css deleted file mode 100644 index 5321eb204..000000000 --- a/packages/zanui-css/src/button_group.css +++ /dev/null @@ -1,33 +0,0 @@ -@define-mixin button-wrap { - display: inline-block; - box-sizing: border-box; - padding-right: 10px; - vertical-align: middle; - &:last-child { - padding-right: 0; - } - .zan-button { - width: 100%; - } -} - -@component-namespace zan { - @b button-group { - font-size: 0; - - - } - @b button-1 { - @mixin button-wrap; - padding-right: 0; - width: 100%; - } - @b button-2 { - @mixin button-wrap; - width: 50%; - } - @b button-3 { - @mixin button-wrap; - width: 33.33%; - } -} From 5f49225cc1fe969ec9aeb1b604a262b2186425ec Mon Sep 17 00:00:00 2001 From: pangxie1991 Date: Sat, 25 Mar 2017 17:06:38 +0800 Subject: [PATCH 03/95] [build] 0.0.43 --- packages/zanui-css/package.json | 2 +- src/index.js | 2 +- yarn.lock | 63 +++++++++++++++++++++++++++++++-- 3 files changed, 63 insertions(+), 4 deletions(-) diff --git a/packages/zanui-css/package.json b/packages/zanui-css/package.json index c4d565b6e..8169d9ef5 100644 --- a/packages/zanui-css/package.json +++ b/packages/zanui-css/package.json @@ -1,6 +1,6 @@ { "name": "@youzan/zanui-css", - "version": "0.0.42", + "version": "0.0.43", "description": "zanui css.", "main": "lib/index.css", "style": "lib/index.css", diff --git a/src/index.js b/src/index.js index 2f63cdc13..429f5fe83 100644 --- a/src/index.js +++ b/src/index.js @@ -80,7 +80,7 @@ if (typeof window !== 'undefined' && window.Vue) { module.exports = { install, - version: '0.0.42', + version: '0.0.43', Button, Switch, Field, diff --git a/yarn.lock b/yarn.lock index 769af8a5e..4a06ab450 100644 --- a/yarn.lock +++ b/yarn.lock @@ -237,6 +237,12 @@ async@1.x, async@^1.4.0, async@^1.5.0: version "1.5.2" resolved "http://registry.npm.qima-inc.com/async/download/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" +async@2.1.2: + version "2.1.2" + resolved "http://registry.npm.qima-inc.com/async/download/async-2.1.2.tgz#612a4ab45ef42a70cde806bad86ee6db047e8385" + dependencies: + lodash "^4.14.0" + async@^2.1.2: version "2.1.5" resolved "http://registry.npm.qima-inc.com/async/download/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc" @@ -1234,6 +1240,12 @@ code-point-at@^1.0.0: version "1.1.0" resolved "http://registry.npm.qima-inc.com/code-point-at/download/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" +collections@^0.2.0: + version "0.2.2" + resolved "http://registry.npm.qima-inc.com/collections/download/collections-0.2.2.tgz#1f23026b2ef36f927eecc901e99c5f0d48fa334e" + dependencies: + weak-map "1.0.0" + color-convert@^1.3.0: version "1.9.0" resolved "http://registry.npm.qima-inc.com/color-convert/download/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a" @@ -2696,6 +2708,18 @@ getpass@^0.1.1: dependencies: assert-plus "^1.0.0" +gh-pages@^0.12.0: + version "0.12.0" + resolved "http://registry.npm.qima-inc.com/gh-pages/download/gh-pages-0.12.0.tgz#d951e3ed98b85699d4b0418eb1a15b1a04988dc1" + dependencies: + async "2.1.2" + commander "2.9.0" + globby "^6.1.0" + graceful-fs "4.1.10" + q "1.4.1" + q-io "1.13.2" + rimraf "^2.5.4" + glob-base@^0.3.0: version "0.3.0" resolved "http://registry.npm.qima-inc.com/glob-base/download/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4" @@ -2863,6 +2887,10 @@ good-listener@^1.2.0: dependencies: delegate "^3.1.2" +graceful-fs@4.1.10: + version "4.1.10" + resolved "http://registry.npm.qima-inc.com/graceful-fs/download/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131" + graceful-fs@^3.0.0: version "3.0.11" resolved "http://registry.npm.qima-inc.com/graceful-fs/download/graceful-fs-3.0.11.tgz#7613c778a1afea62f25c630a086d7f3acbbdd818" @@ -4310,10 +4338,14 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.13, mime-types@~2.1.7: dependencies: mime-db "~1.26.0" -mime@1.3.4, mime@1.3.x, mime@^1.3.4: +mime@1.3.4, mime@1.3.x, mime@^1.2.11, mime@^1.3.4: version "1.3.4" resolved "http://registry.npm.qima-inc.com/mime/download/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53" +mimeparse@^0.1.4: + version "0.1.4" + resolved "http://registry.npm.qima-inc.com/mimeparse/download/mimeparse-0.1.4.tgz#dafb02752370fd226093ae3152c271af01ac254a" + minimalistic-assert@^1.0.0: version "1.0.0" resolved "http://registry.npm.qima-inc.com/minimalistic-assert/download/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3" @@ -5409,7 +5441,22 @@ punycode@^1.2.4, punycode@^1.4.1: version "1.4.1" resolved "http://registry.npm.qima-inc.com/punycode/download/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e" -q@^1.1.2: +q-io@1.13.2: + version "1.13.2" + resolved "http://registry.npm.qima-inc.com/q-io/download/q-io-1.13.2.tgz#eea130d481ddb5e1aa1bc5a66855f7391d06f003" + dependencies: + collections "^0.2.0" + mime "^1.2.11" + mimeparse "^0.1.4" + q "^1.0.1" + qs "^1.2.1" + url2 "^0.0.0" + +q@1.4.1: + version "1.4.1" + resolved "http://registry.npm.qima-inc.com/q/download/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e" + +q@^1.0.1, q@^1.1.2: version "1.5.0" resolved "http://registry.npm.qima-inc.com/q/download/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1" @@ -5421,6 +5468,10 @@ qs@6.4.0, qs@~6.4.0: version "6.4.0" resolved "http://registry.npm.qima-inc.com/qs/download/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233" +qs@^1.2.1: + version "1.2.2" + resolved "http://registry.npm.qima-inc.com/qs/download/qs-1.2.2.tgz#19b57ff24dc2a99ce1f8bdf6afcda59f8ef61f88" + query-string@^4.1.0: version "4.3.2" resolved "http://registry.npm.qima-inc.com/query-string/download/query-string-4.3.2.tgz#ec0fd765f58a50031a3968c2431386f8947a5cdd" @@ -6551,6 +6602,10 @@ url-parse@^1.1.1: querystringify "0.0.x" requires-port "1.0.x" +url2@^0.0.0: + version "0.0.0" + resolved "http://registry.npm.qima-inc.com/url2/download/url2-0.0.0.tgz#4eaabd1d5c3ac90d62ab4485c998422865a04b1a" + url@^0.11.0: version "0.11.0" resolved "http://registry.npm.qima-inc.com/url/download/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1" @@ -6758,6 +6813,10 @@ watchpack@^1.3.1: chokidar "^1.4.3" graceful-fs "^4.1.2" +weak-map@1.0.0: + version "1.0.0" + resolved "http://registry.npm.qima-inc.com/weak-map/download/weak-map-1.0.0.tgz#b66e56a9df0bd25a76bbf1b514db129080614a37" + webidl-conversions@^2.0.0: version "2.0.1" resolved "http://registry.npm.qima-inc.com/webidl-conversions/download/webidl-conversions-2.0.1.tgz#3bf8258f7d318c7443c36f2e169402a1a6703506" From 5724e49a0208b2440873125b091d0893ef1011f8 Mon Sep 17 00:00:00 2001 From: pangxie1991 Date: Sat, 25 Mar 2017 17:06:39 +0800 Subject: [PATCH 04/95] [release] 0.0.43 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8b89a1d8e..d0b1fb9b2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@youzan/zanui-vue", - "version": "0.0.42", + "version": "0.0.43", "description": "有赞vue wap组件库", "main": "lib/zanui.js", "style": "lib/zanui-css/index.css", From 28dfee7429d2938d97bc3beddd31eea7d51dee8a Mon Sep 17 00:00:00 2001 From: niunai Date: Sun, 26 Mar 2017 15:22:11 +0800 Subject: [PATCH 05/95] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BF=AE=E6=AD=A3quant?= =?UTF-8?q?ity=E5=80=BC=E7=9A=84=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/quantity/src/quantity.vue | 33 +++++++++++++++++------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/packages/quantity/src/quantity.vue b/packages/quantity/src/quantity.vue index 469f75ed1..0f16ef49e 100644 --- a/packages/quantity/src/quantity.vue +++ b/packages/quantity/src/quantity.vue @@ -44,8 +44,14 @@ export default { }, data() { + let value = this.value ? +this.value : +this.defaultValue; + const correctedValue = this.correctValue(value); + if (value !== correctedValue) { + value = correctedValue; + this.$emit('input', value); + } return { - currentValue: this.value ? +this.value : +this.defaultValue + currentValue: value }; }, @@ -66,38 +72,37 @@ export default { watch: { currentValue(val) { - this.$emit('input', +val); + this.$emit('input', val); + this.$emit('change', val); }, value(val) { if (val) { - this.currentValue = +val; + this.currentValue = this.correctValue(+val); } } }, methods: { + // 纠正value值 + correctValue(value) { + value = Math.max(this.min, value); + value = Math.min(this.max, value); + return value; + }, handleInputChange(event) { - let val = +event.target.value; - const max = +this.max; - const min = +this.min; + const val = +event.target.value; - if (val > max) { - val = max; - } else if (val < min) { - val = min; - } - - this.currentValue = val; + this.currentValue = this.correctValue(val); }, handleChange(type) { if ((this.isMinusDisabled && type === 'minus') || (this.isPlusDisabled && type === 'plus')) { + this.$emit('overlimit', type); return; } const step = +this.step; const currentValue = +this.currentValue; this.currentValue = type === 'minus' ? (currentValue - step) : (currentValue + step); - this.$emit('change', this.currentValue); } } }; From da41d9c1fe65ef097b2b8423210c1d604162ef8c Mon Sep 17 00:00:00 2001 From: niunai Date: Sun, 26 Mar 2017 15:29:51 +0800 Subject: [PATCH 06/95] [build] 0.0.44 --- packages/zanui-css/package.json | 2 +- src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/zanui-css/package.json b/packages/zanui-css/package.json index 8169d9ef5..4aad840f4 100644 --- a/packages/zanui-css/package.json +++ b/packages/zanui-css/package.json @@ -1,6 +1,6 @@ { "name": "@youzan/zanui-css", - "version": "0.0.43", + "version": "0.0.44", "description": "zanui css.", "main": "lib/index.css", "style": "lib/index.css", diff --git a/src/index.js b/src/index.js index 429f5fe83..755f16254 100644 --- a/src/index.js +++ b/src/index.js @@ -80,7 +80,7 @@ if (typeof window !== 'undefined' && window.Vue) { module.exports = { install, - version: '0.0.43', + version: '0.0.44', Button, Switch, Field, From db438160cda275fbc3b267d3d294595f38009a94 Mon Sep 17 00:00:00 2001 From: niunai Date: Sun, 26 Mar 2017 15:29:52 +0800 Subject: [PATCH 07/95] [release] 0.0.44 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d0b1fb9b2..bfa3e107c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@youzan/zanui-vue", - "version": "0.0.43", + "version": "0.0.44", "description": "有赞vue wap组件库", "main": "lib/zanui.js", "style": "lib/zanui-css/index.css", From 03af3b3eba3bff09fb9da1eca238de1ce0cbcc87 Mon Sep 17 00:00:00 2001 From: cookfront Date: Mon, 27 Mar 2017 17:06:30 +0800 Subject: [PATCH 08/95] swipe add indicator --- docs/examples-dist/button.vue | 7 ---- docs/examples-docs/swipe.md | 25 ++++++++++++- packages/swipe/src/swipe-item.vue | 7 +++- packages/swipe/src/swipe.vue | 33 +++++++++++++---- packages/zanui-css/src/swipe.css | 61 ++++++++++++++++++++++--------- 5 files changed, 99 insertions(+), 34 deletions(-) diff --git a/docs/examples-dist/button.vue b/docs/examples-dist/button.vue index ecbc26d0f..3295b1f38 100644 --- a/docs/examples-dist/button.vue +++ b/docs/examples-dist/button.vue @@ -53,13 +53,6 @@ - -
- 确认付款 - 确认收货 - 取消订单 -
-
+ + ## Swipe 轮播 ### 基础用法 @@ -33,7 +43,7 @@ :::demo 自动轮播 ```html - + @@ -43,3 +53,16 @@ ``` ::: + +### API + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | +|-----------|-----------|-----------|-------------|-------------| +| autoPlay | 是否自动轮播 | `boolean` | `false` | `true`, `false` | +| showIndicators | 是否显示指示器 | `boolean` | `true` | `true`, `false` | + +### 事件 + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| `pagechange:end` | 每一页轮播结束后触发 | `(elem, currIndex)`:`elem`为触发页当前的DOM节点 | diff --git a/packages/swipe/src/swipe-item.vue b/packages/swipe/src/swipe-item.vue index 0a7ea92b5..2d8575839 100644 --- a/packages/swipe/src/swipe-item.vue +++ b/packages/swipe/src/swipe-item.vue @@ -6,6 +6,11 @@ diff --git a/packages/swipe/src/swipe.vue b/packages/swipe/src/swipe.vue index 83e641a6a..0d7c5b229 100644 --- a/packages/swipe/src/swipe.vue +++ b/packages/swipe/src/swipe.vue @@ -1,6 +1,14 @@ @@ -13,13 +21,17 @@ export default { name: 'zan-swipe', props: { - autoPlay: { + autoPlay: Boolean, + showIndicators: { type: Boolean, - default: false - }, - onPageChangeEnd: { - type: Function, - default: () => {} + default: true + } + }, + + data() { + return { + currIndex: 0, + swipes: [] } }, @@ -53,6 +65,13 @@ export default { updated() { this.scroll.update(); + }, + + methods: { + onPageChangeEnd(page, currIndex) { + this.currIndex = +currIndex; + this.$emit('pagechange:end', page, currIndex); + } } }; diff --git a/packages/zanui-css/src/swipe.css b/packages/zanui-css/src/swipe.css index e5af9411f..2c092278e 100644 --- a/packages/zanui-css/src/swipe.css +++ b/packages/zanui-css/src/swipe.css @@ -1,24 +1,49 @@ +@import './common/var.css'; + @component-namespace zan { - @b swipe { - position: relative; - overflow: hidden; - width: 100%; + @b swipe { + position: relative; + overflow: hidden; + width: 100%; + + @e indicators { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); } - @b swipe-item { - display: none; - width: 100%; - height: 100%; - overflow: hidden; - text-align: center; + @e indicator { + width: 5px; + height: 5px; + display: inline-block; + border-radius: 100%; + background: #000; + opacity: .2; + margin: 0 3px; + z-index: 1; - img { - width: 100%; - height: auto; - } - - &:first-child { - display: block; - } + @m active { + background: $c-orange; + opacity: 1; + } } + } + + @b swipe-item { + display: none; + width: 100%; + height: 100%; + overflow: hidden; + text-align: center; + + img { + width: 100%; + height: auto; + } + + &:first-child { + display: block; + } + } } From e2995f1d365feee0588e3badba724e0e3dfafe0d Mon Sep 17 00:00:00 2001 From: cookfront Date: Mon, 27 Mar 2017 17:07:24 +0800 Subject: [PATCH 09/95] fix lint --- packages/swipe/src/swipe-item.vue | 1 - packages/swipe/src/swipe.vue | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/swipe/src/swipe-item.vue b/packages/swipe/src/swipe-item.vue index 2d8575839..be2dd955a 100644 --- a/packages/swipe/src/swipe-item.vue +++ b/packages/swipe/src/swipe-item.vue @@ -8,7 +8,6 @@ export default { name: 'zan-swipe-item', - beforeCreate() { this.$parent.swipes.push(this); } diff --git a/packages/swipe/src/swipe.vue b/packages/swipe/src/swipe.vue index 0d7c5b229..0c335da0e 100644 --- a/packages/swipe/src/swipe.vue +++ b/packages/swipe/src/swipe.vue @@ -32,7 +32,7 @@ export default { return { currIndex: 0, swipes: [] - } + }; }, mounted() { From 1501d6858b9081f9c601db21d7136dee667d653c Mon Sep 17 00:00:00 2001 From: cookfront Date: Mon, 27 Mar 2017 17:24:56 +0800 Subject: [PATCH 10/95] fix swipe css --- packages/zanui-css/src/swipe.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/zanui-css/src/swipe.css b/packages/zanui-css/src/swipe.css index 2c092278e..57fbdb57d 100644 --- a/packages/zanui-css/src/swipe.css +++ b/packages/zanui-css/src/swipe.css @@ -5,6 +5,7 @@ position: relative; overflow: hidden; width: 100%; + height: 100%; @e indicators { position: absolute; @@ -28,13 +29,19 @@ opacity: 1; } } + + @e items { + position: relative; + overflow: hidden; + position: relative; + height: 100%; + } } @b swipe-item { display: none; - width: 100%; height: 100%; - overflow: hidden; + width: 100%; text-align: center; img { From 10b75dcbc1511509eaf0d89a3ade7c580a607b5c Mon Sep 17 00:00:00 2001 From: cookfront Date: Mon, 27 Mar 2017 18:35:00 +0800 Subject: [PATCH 11/95] fix swipe css --- packages/zanui-css/src/swipe.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/zanui-css/src/swipe.css b/packages/zanui-css/src/swipe.css index 57fbdb57d..518ded439 100644 --- a/packages/zanui-css/src/swipe.css +++ b/packages/zanui-css/src/swipe.css @@ -19,8 +19,8 @@ height: 5px; display: inline-block; border-radius: 100%; - background: #000; - opacity: .2; + background: #999; + opacity: .8; margin: 0 3px; z-index: 1; From 8f91cd0cb732f81cde9ff0a297f9cf35ac101dca Mon Sep 17 00:00:00 2001 From: pangxie1991 Date: Mon, 27 Mar 2017 18:40:11 +0800 Subject: [PATCH 12/95] webpack --- build/webpack.config.js | 2 +- docs/examples-dist/button.vue | 7 ------- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/build/webpack.config.js b/build/webpack.config.js index 56b140900..b76332f52 100644 --- a/build/webpack.config.js +++ b/build/webpack.config.js @@ -168,7 +168,7 @@ if (process.env.NODE_ENV === 'production') { delete module.exports.devtool; module.exports.output = { path: path.join(__dirname, '../docs/dist'), - publicPath: './', + publicPath: '/vue', filename: '[name].[hash:8].js' }; module.exports.plugins = module.exports.plugins.concat([ diff --git a/docs/examples-dist/button.vue b/docs/examples-dist/button.vue index ecbc26d0f..3295b1f38 100644 --- a/docs/examples-dist/button.vue +++ b/docs/examples-dist/button.vue @@ -53,13 +53,6 @@ - -
- 确认付款 - 确认收货 - 取消订单 -
-
\ No newline at end of file +import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock); +export default { + methods: { + handlePageEnd(page, index) { + console.log(page, index); + } + } +}; + \ No newline at end of file diff --git a/docs/index.js b/docs/index.js index cdbb3a4cb..1a954a26b 100644 --- a/docs/index.js +++ b/docs/index.js @@ -39,7 +39,7 @@ router.beforeEach((route, redirect, next) => { window.scrollTo(0, 0); } if (isMobile()) { - window.location.replace(location.pathname + 'examples.html#' + route.path); + window.location.replace('/vue/' + 'examples.html#' + route.path); return; } document.title = route.meta.title || document.title; From 0083a23d6ff23aa01967a5d21d00f519c9bd4817 Mon Sep 17 00:00:00 2001 From: cookfront Date: Mon, 27 Mar 2017 19:17:10 +0800 Subject: [PATCH 14/95] fix examples --- docs/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/index.js b/docs/index.js index 1a954a26b..7dba72a00 100644 --- a/docs/index.js +++ b/docs/index.js @@ -25,7 +25,7 @@ Vue.component('footer-nav', FooterNav); let routesConfig = routes(navConfig); routesConfig.push({ path: '/', - redirect: '/component/button' + redirect: '/component/install' }); const router = new VueRouter({ @@ -38,8 +38,10 @@ router.beforeEach((route, redirect, next) => { if (route.path !== '/') { window.scrollTo(0, 0); } + + const pathname = process.env.NODE_ENV === 'production' ? '/vue' : '/'; if (isMobile()) { - window.location.replace('/vue/' + 'examples.html#' + route.path); + window.location.replace(pathname + 'examples.html#/'); return; } document.title = route.meta.title || document.title; From 0a1db61b8a68b62ba61349ac321b3a690bb16dce Mon Sep 17 00:00:00 2001 From: cookfront Date: Mon, 27 Mar 2017 19:18:55 +0800 Subject: [PATCH 15/95] fix examples --- docs/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.js b/docs/index.js index 7dba72a00..4cfc2b19e 100644 --- a/docs/index.js +++ b/docs/index.js @@ -39,7 +39,7 @@ router.beforeEach((route, redirect, next) => { window.scrollTo(0, 0); } - const pathname = process.env.NODE_ENV === 'production' ? '/vue' : '/'; + const pathname = process.env.NODE_ENV === 'production' ? '/vue/' : '/'; if (isMobile()) { window.location.replace(pathname + 'examples.html#/'); return; From deaa6346001ca843819824600ed138ebab4ce2ee Mon Sep 17 00:00:00 2001 From: cookfront Date: Mon, 27 Mar 2017 19:23:05 +0800 Subject: [PATCH 16/95] fix examples --- build/webpack.config.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/build/webpack.config.js b/build/webpack.config.js index b76332f52..f67f32fef 100644 --- a/build/webpack.config.js +++ b/build/webpack.config.js @@ -35,8 +35,8 @@ function wrap(render) { module.exports = { entry: { 'vendor': ['vue', 'vue-router'], - 'docs': './docs/index.js', - 'examples': './docs/examples.js' + 'zan-docs': './docs/index.js', + 'zan-examples': './docs/examples.js' }, output: { path: path.join(__dirname, '../docs/dist'), @@ -100,13 +100,13 @@ module.exports = { StyleExtractPlugin, new ProgressBarPlugin(), new HtmlWebpackPlugin({ - chunks: ['vendor', 'docs'], + chunks: ['vendor', 'zan-docs'], template: 'docs/index.tpl', filename: 'index.html', inject: true }), new HtmlWebpackPlugin({ - chunks: ['vendor', 'examples'], + chunks: ['vendor', 'zan-examples'], template: 'docs/index.tpl', filename: 'examples.html', inject: true From 0b90ae90d7f587aa1695ca1b583f8805b9901512 Mon Sep 17 00:00:00 2001 From: cookfront Date: Tue, 28 Mar 2017 11:03:10 +0800 Subject: [PATCH 17/95] fix progress docs --- docs/examples-docs/progress.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/examples-docs/progress.md b/docs/examples-docs/progress.md index 0d4291867..b132611df 100644 --- a/docs/examples-docs/progress.md +++ b/docs/examples-docs/progress.md @@ -40,6 +40,7 @@
+
``` ::: @@ -47,7 +48,6 @@ ### 自定义颜色和文字 :::demo 自定义颜色 ```html -
From 56a3922a01d07fb9cf7ad227ad8316dc2f780781 Mon Sep 17 00:00:00 2001 From: niunai Date: Tue, 28 Mar 2017 14:43:53 +0800 Subject: [PATCH 18/95] =?UTF-8?q?=E4=BF=AE=E5=A4=8Ddatetimepicker=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/examples-docs/datetime-picker.md | 9 +- .../datetime-picker/src/datetime-picker.vue | 112 ++++++++++++++---- packages/picker/src/picker-column.vue | 10 +- packages/picker/src/picker.vue | 2 +- 4 files changed, 100 insertions(+), 33 deletions(-) diff --git a/docs/examples-docs/datetime-picker.md b/docs/examples-docs/datetime-picker.md index c3fde9400..c3fc706bd 100644 --- a/docs/examples-docs/datetime-picker.md +++ b/docs/examples-docs/datetime-picker.md @@ -4,7 +4,8 @@ export default { return { minHour: 10, maxHour: 20, - minDate: new Date() + minDate: new Date(), + currentDate: null }; }, @@ -31,8 +32,10 @@ export default { :::demo 基础用法 ```html - -1; } }, + format: { + type: String, + default: 'yyyy.mm.dd hh时 mm分' + }, visibleItemCount: { type: Number, default: 5 @@ -56,31 +61,45 @@ export default { }, data() { + let value = this.value; + if (!value) { + if (this.type.indexOf('date') > -1) { + value = this.minDate; + } else { + const minHour = this.minHour; + value = `${minHour > 10 ? minHour : '0' + minHour}:00`; + } + } else { + value = this.correctValue(value); + } + return { - innerValue: this.val + innerValue: value }; }, watch: { value(val) { - this.innerValue = val; + val = this.correctValue(val); + const isEqual = this.type === 'time' ? val === this.innerValue : val.valueOf() === this.innerValue.valueOf(); + if (!isEqual) this.innerValue = val; }, innerValue(val) { console.log(val + '!!!'); + this.updateColumnValue(val); this.$emit('input', val); } }, computed: { ranges() { - console.log(this.innerValue + '!!'); - // return this.innerValue + '!!'; if (this.type === 'time') { return [ [this.minHour, this.maxHour], [0, 59] ]; } + const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', this.innerValue); const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', this.innerValue); @@ -96,7 +115,7 @@ export default { return result; }, columns() { - return this.ranges.map(range => { + const results = this.ranges.map(range => { const values = this.times(range[1] - range[0] + 1, index => { const value = range[0] + index; return value < 10 ? `0${value}` : `${value}`; @@ -106,10 +125,31 @@ export default { values }; }); + return results; } }, methods: { + correctValue(value) { + // 仅时间 + if (this.type === 'time') { + const [hour, minute] = value.split(':'); + let correctedHour = Math.max(hour, this.minHour); + correctedHour = Math.min(correctedHour, this.maxHour); + + return `${correctedHour}:${minute}`; + } + + // 含有日期的情况 + const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', value); + const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', value); + const minDay = new Date(minYear, minMonth - 1, minDate, minHour, minMinute); + const maxDay = new Date(maxYear, maxMonth - 1, maxDate, maxHour, maxMinute); + value = Math.max(value, minDay); + value = Math.min(value, maxDay); + + return new Date(value); + }, times(n, iteratee) { let index = -1; const result = Array(n); @@ -137,11 +177,11 @@ export default { if (value.getFullYear() === year) { month = boundary.getMonth() + 1; if (value.getMonth() + 1 === month) { - date = value.getDate(); + date = boundary.getDate(); if (value.getDate() === date) { - hour = value.getHours(); + hour = boundary.getHours(); if (value.getHours() === hour) { - minute = value.getMinutes(); + minute = boundary.getMinutes(); } } } @@ -180,8 +220,9 @@ export default { handlePickerConfirm(values) { this.$emit('confirm', this.innerValue); }, - handlePickerChange(picker, values, index) { - console.log(this.innerValue); + handlePickerChange(picker) { + const values = picker.$children.filter(child => child.currentValue !== undefined).map(child => child.currentValue); + console.log(values); let value; if (this.type === 'time') { @@ -200,21 +241,50 @@ export default { } value = new Date(year, month - 1, date, hour, minute); } + value = this.correctValue(value); this.innerValue = value; console.log(value, this.innerValue); - // this.$emit('input', value); - } - }, - - created() { - this.innerValue = this.value; - if (!this.innerValue) { - if (this.type.indexOf('date') > -1) { - this.innerValue = this.minDate; + }, + updateColumnValue(value) { + let values = []; + if (this.type === 'time') { + const currentValue = value.split(':'); + values = [ + currentValue[0], + currentValue[1] + ]; } else { - const minHour = this.minHour; - this.innerValue = `${minHour > 10 ? minHour : '0' + minHour}:00`; + values = [ + `${value.getFullYear()}`, + `0${value.getMonth() + 1}`.slice(-2), + `0${value.getDate()}`.slice(-2) + ]; + if (this.type === 'datetime') { + values.push( + `0${value.getHours()}`.slice(-2), + `0${value.getMinutes()}`.slice(-2) + ); + } } + this.$nextTick(() => { + this.setColumnByValues(values); + }); + }, + setColumnByValues(values) { + const setColumnValue = this.$refs.picker.setColumnValue; + if (this.type === 'time') { + setColumnValue(0, values[0]); + setColumnValue(1, values[1]); + } else { + setColumnValue(0, values[0]); + setColumnValue(1, values[1]); + setColumnValue(2, values[2]); + if (this.type === 'datetime') { + setColumnValue(3, values[3]); + setColumnValue(4, values[4]); + } + } + [].forEach.call(this.$refs.picker.$children, child => child.doOnValueChange()); } } }; diff --git a/packages/picker/src/picker-column.vue b/packages/picker/src/picker-column.vue index 636ca96c2..fcaf64290 100644 --- a/packages/picker/src/picker-column.vue +++ b/packages/picker/src/picker-column.vue @@ -65,23 +65,19 @@ export default { }, watch: { - value(val) { - this.currentValue = val; - }, values(val) { this.currentValues = val; }, - currentValues(val) { if (this.valueIndex === -1) { this.currentValue = (val || [])[0]; } }, - currentValue(val) { this.doOnValueChange(); - this.$emit('change', this); + this.$emit('input', val); + this.$emit('columnChange', this); } }, @@ -236,8 +232,6 @@ export default { const value = this.currentValue; const wrapper = this.$refs.wrapper; - this.$emit('input', this.currentValue); - translateUtil.translateElement(wrapper, null, this.value2Translate(value)); } } diff --git a/packages/picker/src/picker.vue b/packages/picker/src/picker.vue index 2ea6e487f..c4e475380 100644 --- a/packages/picker/src/picker.vue +++ b/packages/picker/src/picker.vue @@ -15,7 +15,7 @@ :itemHeight="itemHeight" :visible-item-count="visibleItemCount" :value-key="valueKey" - @change="columnValueChange(index)"> + @columnChange="columnValueChange(index)">
From 771db44e42d7f5a14a869a160a470628a46f59d4 Mon Sep 17 00:00:00 2001 From: cookfront Date: Wed, 29 Mar 2017 10:59:06 +0800 Subject: [PATCH 19/95] fix cell --- packages/cell/src/cell.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cell/src/cell.vue b/packages/cell/src/cell.vue index 22df2622e..aa10d51f0 100644 --- a/packages/cell/src/cell.vue +++ b/packages/cell/src/cell.vue @@ -9,7 +9,7 @@ -
From b057cc62de14b8d16eb9dffb8d45ac66fa475f87 Mon Sep 17 00:00:00 2001 From: cookfront Date: Wed, 29 Mar 2017 16:10:12 +0800 Subject: [PATCH 20/95] fix search --- packages/search/src/search.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/search/src/search.vue b/packages/search/src/search.vue index 1e3f4d233..534bf9d7c 100644 --- a/packages/search/src/search.vue +++ b/packages/search/src/search.vue @@ -51,6 +51,7 @@ this.value = ''; this.focusStatus = false; this.isFocus = false; + this.$emit('cancel'); }, handleSearch() { // input输入回车后,发送回调 From c589f23d8feb2f33643699657e6871e9ba38b43e Mon Sep 17 00:00:00 2001 From: cookfront Date: Wed, 29 Mar 2017 16:21:55 +0800 Subject: [PATCH 21/95] [build] 0.0.45 --- packages/zanui-css/package.json | 2 +- src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/zanui-css/package.json b/packages/zanui-css/package.json index 4aad840f4..17aaaff19 100644 --- a/packages/zanui-css/package.json +++ b/packages/zanui-css/package.json @@ -1,6 +1,6 @@ { "name": "@youzan/zanui-css", - "version": "0.0.44", + "version": "0.0.45", "description": "zanui css.", "main": "lib/index.css", "style": "lib/index.css", diff --git a/src/index.js b/src/index.js index 755f16254..6f72ccc16 100644 --- a/src/index.js +++ b/src/index.js @@ -80,7 +80,7 @@ if (typeof window !== 'undefined' && window.Vue) { module.exports = { install, - version: '0.0.44', + version: '0.0.45', Button, Switch, Field, From 09650d61ea6713506365b4312459d8d9f1b41e75 Mon Sep 17 00:00:00 2001 From: cookfront Date: Wed, 29 Mar 2017 16:21:56 +0800 Subject: [PATCH 22/95] [release] 0.0.45 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bfa3e107c..db4061bae 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@youzan/zanui-vue", - "version": "0.0.44", + "version": "0.0.45", "description": "有赞vue wap组件库", "main": "lib/zanui.js", "style": "lib/zanui-css/index.css", From 874df43df0beaa2378e8c97d3913ff99fc7c2af1 Mon Sep 17 00:00:00 2001 From: niunai Date: Thu, 30 Mar 2017 14:23:36 +0800 Subject: [PATCH 23/95] =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=EF=BC=8Clayout=E8=A1=A5=E5=85=A8=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 2 +- docs/examples-docs/button.md | 50 ++++++++++++++------ docs/examples-docs/icon.md | 2 +- docs/examples-docs/layout.md | 67 +++++++++++++++++++++++++++ docs/nav.config.json | 4 ++ packages/button/src/button.js | 22 +++++---- packages/quantity/src/quantity.vue | 5 +- packages/zanui-css/src/button.css | 33 +++++++------ packages/zanui-css/src/common/var.css | 6 +++ 9 files changed, 150 insertions(+), 41 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 15ae2f995..892f6e1db 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -44,7 +44,7 @@ module.exports = { 'generator-star-spacing': [2, { 'before': true, 'after': true }], 'handle-callback-err': [2, '^(err|error)$' ], 'indent': [2, 2, { 'SwitchCase': 1 }], - 'jsx-quotes': [2, 'prefer-single'], + 'jsx-quotes': [2, 'prefer-double'], 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], 'keyword-spacing': [2, { 'before': true, 'after': true }], 'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }], diff --git a/docs/examples-docs/button.md b/docs/examples-docs/button.md index 42d94d1ed..c871c2884 100644 --- a/docs/examples-docs/button.md +++ b/docs/examples-docs/button.md @@ -7,10 +7,6 @@ .zan-col { margin-bottom: 10px; } - .button-group { - font-size: 0; - padding: 0 20px; - } } } @@ -53,7 +49,7 @@ ### 按钮尺寸 -只接受`large`, `normal`, `small`, `mini`四种尺寸,默认`normal`。 +只接受`large`, `normal`, `small`, `mini`四种尺寸,默认`normal`。`large`按钮默认100%宽度。 :::demo 按钮尺寸 ```html @@ -62,15 +58,19 @@ large - - - normal + + + normal - - small + + + + small - - mini + + + + mini ``` @@ -107,6 +107,27 @@ ``` ::: +### 页面底部操作按钮 +一般用于fixed在底部的区域或是popup弹层的底部,一般只使用`primary`和`normal`两种状态。 + +:::demo +```html + + + 立即购买 + + + + + 加入购物车 + + + 立即购买 + + +``` +::: + ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | @@ -114,6 +135,7 @@ | type | 按钮类型 | `string` | `default` | `primary`, `danger` | | size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` | | tag | 按钮标签 | `string` | `button` | `a`, `span`, ... | -| diabled | 按钮是否禁用 | `boolean` | | | -| block | 按钮是否显示为块级元素 | `boolean` | | | +| diabled | 按钮是否禁用 | `boolean` | false | | +| block | 按钮是否显示为块级元素 | `boolean` | false | | +| bottomAction | 按钮是否显示为底部行动按钮,一般显示在页面底部,有特殊样式 | `boolean` | false | | diff --git a/docs/examples-docs/icon.md b/docs/examples-docs/icon.md index 99f58633a..f6c7f31e7 100644 --- a/docs/examples-docs/icon.md +++ b/docs/examples-docs/icon.md @@ -29,7 +29,7 @@ - + diff --git a/docs/examples-docs/layout.md b/docs/examples-docs/layout.md index e69de29bb..f9a7af23a 100644 --- a/docs/examples-docs/layout.md +++ b/docs/examples-docs/layout.md @@ -0,0 +1,67 @@ + + +## Layout 布局 +主要提供了 zan-row 和 zan-col 两个组件来进行行列布局 + +### 常规用法 +Layout组件提供了`24列栅格`,通过在`zan-col`上添加`span`属性设置列所占的宽度百分比(span / 24);此外,添加`offset`属性可以设置列的偏移宽度,计算方式与span相同。 + +:::demo +```html + + +
+
+ +
+
+ +
+
+
+ + +
+
+
+``` +::: + +### 在列元素之间增加间距 +列元素之间默认间距为0,如果希望在列元素增加相同的间距,可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。 + +:::demo +```html + + +
+
+ +
+
+ +
+
+
+``` +::: diff --git a/docs/nav.config.json b/docs/nav.config.json index 7d1959e5a..858ca9306 100644 --- a/docs/nav.config.json +++ b/docs/nav.config.json @@ -52,6 +52,10 @@ "path": "/loading", "title": "Loading 加载" }, + { + "path": "/layout", + "title": "Layout 布局" + }, { "path": "/steps", "title": "Steps 步骤条" diff --git a/packages/button/src/button.js b/packages/button/src/button.js index 8798cc5ad..1dc05107c 100644 --- a/packages/button/src/button.js +++ b/packages/button/src/button.js @@ -21,6 +21,7 @@ export default { disabled: Boolean, loading: Boolean, block: Boolean, + bottomAction: Boolean, tag: { type: String, default: 'button' @@ -49,8 +50,8 @@ export default { }, render(h) { - let { type, nativeType, size, disabled, loading, block } = this; - let Tag = this.tag; + const { type, nativeType, size, disabled, loading, block, bottomAction } = this; + const Tag = this.tag; return ( { - loading ? - - : - null + loading + ? + + : null } {this.$slots.default} diff --git a/packages/quantity/src/quantity.vue b/packages/quantity/src/quantity.vue index 0f16ef49e..2b89ef52b 100644 --- a/packages/quantity/src/quantity.vue +++ b/packages/quantity/src/quantity.vue @@ -76,8 +76,9 @@ export default { this.$emit('change', val); }, value(val) { - if (val) { - this.currentValue = this.correctValue(+val); + val = this.correctValue(+val); + if (val !== this.currentValue) { + this.currentValue = val; } } }, diff --git a/packages/zanui-css/src/button.css b/packages/zanui-css/src/button.css index 0dc62e8f7..29f86dc04 100644 --- a/packages/zanui-css/src/button.css +++ b/packages/zanui-css/src/button.css @@ -9,7 +9,6 @@ height: 45px; line-height: 43px; border-radius: 4px; - border: 0; box-sizing: border-box; font-size: 16px; text-align: center; @@ -28,12 +27,11 @@ opacity: .3; } - & + .zan-button { - margin-left: 10px; - } - - & + .zan-button--block { - margin-left: 0; + @e icon-loading { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: middle; } @m default { @@ -62,7 +60,7 @@ } @m normal { - padding: 0 10px; + padding: 0 15px; font-size: 14px; } @@ -105,11 +103,20 @@ } } - @e icon-loading { - display: inline-block; - width: 16px; - height: 16px; - vertical-align: middle; + @m bottom-action { + width: 100%; + height: 50px; + line-height: 50px; + border: 0; + border-radius: 0; + background-color: $bottom-action-button-default-background-color; + color: $bottom-action-button-default-color; + font-size: 16px; + + &.zan-button--primary { + background-color: $bottom-action-button-primary-background-color; + color: $bottom-action-button-primary-color; + } } } } diff --git a/packages/zanui-css/src/common/var.css b/packages/zanui-css/src/common/var.css index 7f79e0414..4e89219f5 100644 --- a/packages/zanui-css/src/common/var.css +++ b/packages/zanui-css/src/common/var.css @@ -32,3 +32,9 @@ $button-danger-border-color: #e33; $button-disabled-color: $c-gray-dark; $button-disabled-background-color: $c-gray-light; $button-disabled-border-color: #cacaca; + +$bottom-action-button-default-color: $c-white; +$bottom-action-button-default-background-color: #f85; + +$bottom-action-button-primary-color: $c-white; +$bottom-action-button-primary-background-color: #f44; From 367fc5c24eaa6bcfd1bb47a90ac4a729d1b655a5 Mon Sep 17 00:00:00 2001 From: niunai Date: Thu, 30 Mar 2017 14:25:25 +0800 Subject: [PATCH 24/95] [build] 0.0.46 --- packages/zanui-css/package.json | 2 +- src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/zanui-css/package.json b/packages/zanui-css/package.json index 17aaaff19..4f55b8256 100644 --- a/packages/zanui-css/package.json +++ b/packages/zanui-css/package.json @@ -1,6 +1,6 @@ { "name": "@youzan/zanui-css", - "version": "0.0.45", + "version": "0.0.46", "description": "zanui css.", "main": "lib/index.css", "style": "lib/index.css", diff --git a/src/index.js b/src/index.js index 6f72ccc16..bc408e105 100644 --- a/src/index.js +++ b/src/index.js @@ -80,7 +80,7 @@ if (typeof window !== 'undefined' && window.Vue) { module.exports = { install, - version: '0.0.45', + version: '0.0.46', Button, Switch, Field, From 69f106737f2922636d5554d295231c15143d4642 Mon Sep 17 00:00:00 2001 From: niunai Date: Thu, 30 Mar 2017 14:25:26 +0800 Subject: [PATCH 25/95] [release] 0.0.46 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index db4061bae..7f0044d8e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@youzan/zanui-vue", - "version": "0.0.45", + "version": "0.0.46", "description": "有赞vue wap组件库", "main": "lib/zanui.js", "style": "lib/zanui-css/index.css", From 969e1f78e19e7d040fb40342bbaf4225e67956de Mon Sep 17 00:00:00 2001 From: cookfront Date: Thu, 30 Mar 2017 14:27:49 +0800 Subject: [PATCH 26/95] tabs add click event --- docs/ExamplesDocsApp.vue | 13 ++++++-- docs/assets/docs.css | 42 ++++++++++++++++++++++++-- docs/examples-dist/datetime-picker.vue | 5 +-- docs/examples-dist/progress.vue | 4 +-- docs/examples-docs/tab.md | 34 ++++++++++++++++++++- packages/tab/src/tabs.vue | 3 +- 6 files changed, 90 insertions(+), 11 deletions(-) diff --git a/docs/ExamplesDocsApp.vue b/docs/ExamplesDocsApp.vue index 31f8d5860..11f5dafca 100644 --- a/docs/ExamplesDocsApp.vue +++ b/docs/ExamplesDocsApp.vue @@ -1,7 +1,17 @@ diff --git a/docs/assets/docs.css b/docs/assets/docs.css index 461e2b1db..0d9ba48fa 100644 --- a/docs/assets/docs.css +++ b/docs/assets/docs.css @@ -68,7 +68,43 @@ ul, ol { .page-header { height: 60px; - background-color: #fff; + background-color: #fbfbfb; + overflow: hidden; +} + +.page-header-logo { + float: left; + + > a { + display: block; + width: 78px; + height: 20px; + background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fjm3aSwID8ROIV_5TO6dZdJ_IEgz.png); + background-size: contain; + background-repeat: no-repeat; + margin: 20px 0 0 20px; + } +} + +.page-header-navs { + float: right; + margin-right: 50px; + + li { + float: left; + } + + a { + display: block; + line-height: 60px; + color: #333; + font-size: 16px; + margin: 0 35px; + + &.active { + color: #3388FF; + } + } } .main-content { @@ -213,7 +249,7 @@ ul, ol { } .page-footer { - height: 150px; + height: 72px; margin-top: 40px; - background-color: #fff; + background-color: #34383B; } diff --git a/docs/examples-dist/datetime-picker.vue b/docs/examples-dist/datetime-picker.vue index 2bbd5265f..2ccbf84f4 100644 --- a/docs/examples-dist/datetime-picker.vue +++ b/docs/examples-dist/datetime-picker.vue @@ -1,5 +1,5 @@ diff --git a/docs/examples-dist/icon.vue b/docs/examples-dist/icon.vue index ca11e36c4..ede91994d 100644 --- a/docs/examples-dist/icon.vue +++ b/docs/examples-dist/icon.vue @@ -8,7 +8,7 @@ - + diff --git a/docs/examples-dist/tab.vue b/docs/examples-dist/tab.vue index ac97cb4e8..68383b102 100644 --- a/docs/examples-dist/tab.vue +++ b/docs/examples-dist/tab.vue @@ -36,6 +36,17 @@ + + + 内容一 + 内容二 + 内容三 + 内容四 + 内容五 + + + + diff --git a/docs/examples-docs/layout.md b/docs/examples-docs/layout.md index f9a7af23a..6d980b0ef 100644 --- a/docs/examples-docs/layout.md +++ b/docs/examples-docs/layout.md @@ -21,12 +21,49 @@ ## Layout 布局 -主要提供了 zan-row 和 zan-col 两个组件来进行行列布局 -### 常规用法 -Layout组件提供了`24列栅格`,通过在`zan-col`上添加`span`属性设置列所占的宽度百分比(span / 24);此外,添加`offset`属性可以设置列的偏移宽度,计算方式与span相同。 +主要提供了`zan-row`和`zan-col`两个组件来进行行列布局。 -:::demo +### 使用指南 + +如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`,以下**组件注册**就可以忽略了,因为你已经全局注册了`ZanUI`中的全部组件。 + +#### 全局注册 + +你可以在全局注册`Row`和`Col`组件,比如页面的主文件(`index.js`,`main.js`),这样页面任何地方都可以直接使用`Row`和`Col`组件了: + +```js +import Vue from 'vue'; +import { Row, Col } from '@youzan/zanui-vue'; +import '@youzan/zanui-vue/lib/zanui-css/col.css'; +import '@youzan/zanui-vue/lib/zanui-css/row.css'; + +Vue.component(Row.name, Row); +Vue.component(Col.name, Col); +``` + +#### 局部注册 + +如果你只是想在某个组件中使用,你可以在对应组件中注册`Row`和`Col`组件,这样只能在你注册的组件中使用`Row`和`Col`: + +```js +import { Row, Col } from '@youzan/zanui-vue'; + +export default { + components: { + 'zan-row': Row, + 'zan-col': Col + } +}; +``` + +### 代码演示 + +#### 常规用法 + +Layout组件提供了`24列栅格`,通过在`zan-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`;此外,添加`offset`属性可以设置列的偏移宽度,计算方式与span相同。 + +:::demo 常规用法 ```html @@ -47,10 +84,11 @@ Layout组件提供了`24列栅格`,通过在`zan-col`上添加`span`属性设 ``` ::: -### 在列元素之间增加间距 +#### 在列元素之间增加间距 + 列元素之间默认间距为0,如果希望在列元素增加相同的间距,可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。 -:::demo +:::demo 在列元素之间增加间距 ```html diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md index 5691d8fb8..cfdca181b 100644 --- a/docs/examples-docs/loading.md +++ b/docs/examples-docs/loading.md @@ -1,49 +1,83 @@ ## Loading 加载 -### 基础用法 +### 使用指南 -:::demo 基础用法 +如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`,以下**组件注册**就可以忽略了,因为你已经全局注册了`ZanUI`中的全部组件。 + +#### 全局注册 + +你可以在全局注册`Loading`组件,比如页面的主文件(`index.js`,`main.js`),这样页面任何地方都可以直接使用`Loading`组件了: + +```js +import Vue from 'vue'; +import { Loading } from '@youzan/zanui-vue'; +import '@youzan/zanui-vue/lib/zanui-css/loading.css'; + +Vue.component(Loading.name, Loading); +``` + +#### 局部注册 + +如果你只是想在某个组件中使用,你可以在对应组件中注册`Loading`组件,这样只能在你注册的组件中使用`Loading`: + +```js +import { Loading } from '@youzan/zanui-vue'; + +export default { + components: { + 'zan-loading': Loading + } +}; +``` + +### 代码演示 + +#### 渐变深色spinner + +:::demo 渐变深色spinner ```html -
-

渐变深色spinner

-
- -
-

渐变浅色spinner

-
- -
-

单色spinner

-
- -
-

单色spinner

-
- -
+ +``` +::: + +#### 渐变浅色spinner + +:::demo +```html +
+
``` ::: +#### 单色spinner + +:::demo +```html + + +``` +::: + ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md index e551e43e8..12bae1f50 100644 --- a/docs/examples-docs/panel.md +++ b/docs/examples-docs/panel.md @@ -31,9 +31,41 @@ ## Panel 面板 -面板只是一个容器,里面可以放入自定义的内容。 +### 使用指南 -### 基础用法 +如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`,以下**组件注册**就可以忽略了,因为你已经全局注册了`ZanUI`中的全部组件。 + +#### 全局注册 + +你可以在全局注册`Panel`组件,比如页面的主文件(`index.js`,`main.js`),这样页面任何地方都可以直接使用`Panel`组件了: + +```js +import Vue from 'vue'; +import { Panel } from '@youzan/zanui-vue'; +import '@youzan/zanui-vue/lib/zanui-css/panel.css'; + +Vue.component(Panel.name, Panel); +``` + +#### 局部注册 + +如果你只是想在某个组件中使用,你可以在对应组件中注册`Panel`组件,这样只能在你注册的组件中使用`Panel`: + +```js +import { Panel } from '@youzan/zanui-vue'; + +export default { + components: { + 'zan-panel': Panel + } +}; +``` + +### 代码演示 + +#### 基础用法 + +面板只是一个容器,里面可以放入自定义的内容。 :::demo 基础用法 ```html @@ -45,7 +77,7 @@ ``` ::: -### 高级用法 +#### 高级用法 使用具名`slot`自定义内容。 diff --git a/docs/examples-docs/progress.md b/docs/examples-docs/progress.md index b132611df..6dbd829e8 100644 --- a/docs/examples-docs/progress.md +++ b/docs/examples-docs/progress.md @@ -12,7 +12,41 @@ ## Progress 进度条 -### 基础用法 +### 使用指南 + +如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`,以下**组件注册**就可以忽略了,因为你已经全局注册了`ZanUI`中的全部组件。 + +#### 全局注册 + +你可以在全局注册`Progress`组件,比如页面的主文件(`index.js`,`main.js`),这样页面任何地方都可以直接使用`Progress`组件了: + +```js +import Vue from 'vue'; +import { Progress } from '@youzan/zanui-vue'; +import '@youzan/zanui-vue/lib/zanui-css/progress.css'; + +Vue.component(Progress.name, Progress); +``` + +#### 局部注册 + +如果你只是想在某个组件中使用,你可以在对应组件中注册`Progress`组件,这样只能在你注册的组件中使用`Progress`: + +```js +import { Progress } from '@youzan/zanui-vue'; + +export default { + components: { + 'zan-progress': Progress + } +}; +``` + +### 代码演示 + +#### 基础用法 + +默认情况进度条为蓝色,使用`percentage`属性来设置当前进度。 :::demo 基础用法 ```html @@ -29,7 +63,10 @@ ::: -### Inactive +#### Inactive + +是否置灰进度条,一般用于进度条被取消时。 + :::demo Inactive ```html
@@ -45,8 +82,11 @@ ::: -### 自定义颜色和文字 -:::demo 自定义颜色 +#### 自定义颜色和文字 + +可以使用`pivot-text`属性自定义文字,`color`属性自定义进度条颜色 + +:::demo 自定义颜色和文字 ```html
@@ -64,7 +104,7 @@ | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| inactive | 是否只会 | `boolean` | `false` | `true`, `false` | +| inactive | 是否置灰 | `boolean` | `false` | `true`, `false` | | percentage | 进度百分比 | `number` | `false` | `0-100` | | pivotText | 文字显示 | `string` | 百分比文字 | - | | color | 进度条颜色 | `string` | `#38f` | hexvalue | diff --git a/docs/examples-docs/steps.md b/docs/examples-docs/steps.md index b5beffa8e..de9eb5699 100644 --- a/docs/examples-docs/steps.md +++ b/docs/examples-docs/steps.md @@ -30,11 +30,45 @@ export default { ## Steps 步骤条 -### 基础用法 +### 使用指南 + +如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`,以下**组件注册**就可以忽略了,因为你已经全局注册了`ZanUI`中的全部组件。 + +#### 全局注册 + +你可以在全局注册`Steps`组件,比如页面的主文件(`index.js`,`main.js`),这样页面任何地方都可以直接使用`Steps`组件了: + +```js +import Vue from 'vue'; +import { Steps, Step } from '@youzan/zanui-vue'; +import '@youzan/zanui-vue/lib/zanui-css/steps.css'; + +Vue.component(Steps.name, Steps); +Vue.component(Step.name, Step); +``` + +#### 局部注册 + +如果你只是想在某个组件中使用,你可以在对应组件中注册`Steps`组件,这样只能在你注册的组件中使用`Steps`: + +```js +import { Steps, Step } from '@youzan/zanui-vue'; + +export default { + components: { + 'zan-steps': Steps, + 'zan-step': Step + } +}; +``` + +### 代码演示 + +#### 基础用法 :::demo 基础用法 ```html - + 买家下单 商家接单 买家提货 @@ -61,7 +95,9 @@ export default { ``` ::: -### 只显示步骤条 +#### 只显示步骤条 + +当你不设置`title`或`description`属性时,就会🈯️显示步骤条,而没有步骤的详细信息。 :::demo 只显示步骤条 ```html @@ -89,5 +125,6 @@ export default { | 名称 | 说明 | |-----------|-----------| +| icon | 自定义icon区域 | | message-extra | 状态栏添加额外的元素 | diff --git a/docs/examples-docs/tag.md b/docs/examples-docs/tag.md index a1a2b89c8..d7f1af015 100644 --- a/docs/examples-docs/tag.md +++ b/docs/examples-docs/tag.md @@ -10,13 +10,47 @@ ## Tag 标记 -### 基础用法 +### 使用指南 + +如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`,以下**组件注册**就可以忽略了,因为你已经全局注册了`ZanUI`中的全部组件。 + +#### 全局注册 + +你可以在全局注册`Tag`组件,比如页面的主文件(`index.js`,`main.js`),这样页面任何地方都可以直接使用`Tag`组件了: + +```js +import Vue from 'vue'; +import { Tag } from '@youzan/zanui-vue'; +import '@youzan/zanui-vue/lib/zanui-css/tag.css'; + +Vue.component(Tag.name, Tag); +``` + +#### 局部注册 + +如果你只是想在某个组件中使用,你可以在对应组件中注册`Tag`组件,这样只能在你注册的组件中使用`Tag`: + +```js +import { Tag } from '@youzan/zanui-vue'; + +export default { + components: { + 'zan-tag': Tag + } +}; +``` + +### 代码演示 + +#### 基础用法 + +`Tag`目前有三种类型,`danger`、`success`、`primary`,它们分别显示为红色,绿色和蓝色,你也可以加上自定义的类,为它们加上其他的颜色。 :::demo 基础用法 ```html
返现 - 返现 + 返现
返现 @@ -26,24 +60,26 @@ ``` ::: -### 高级用法 +#### 高级用法 + +设置`plain`为`true`时表示空心的`tag`,还可以设置`mark`为`true`,表示是否为标记。 :::demo 高级用法 ```html
返现 - 返现 + 返现
返现 - 返现 + 返现
返现 - 返现 + 返现
- 返现 + 返现
``` ::: diff --git a/packages/badge/src/badge-group.vue b/packages/badge/src/badge-group.vue index 7e98f52fb..c9f5695b0 100644 --- a/packages/badge/src/badge-group.vue +++ b/packages/badge/src/badge-group.vue @@ -14,6 +14,12 @@ type: [Number, String], default: 0 } + }, + + data() { + return { + badges: [] + }; } }; diff --git a/packages/badge/src/badge.vue b/packages/badge/src/badge.vue index 43f827f21..749f48819 100644 --- a/packages/badge/src/badge.vue +++ b/packages/badge/src/badge.vue @@ -1,5 +1,7 @@ - \ No newline at end of file diff --git a/docs/examples-dist/loading.vue b/docs/examples-dist/loading.vue index d6a92785a..8f761de57 100644 --- a/docs/examples-dist/loading.vue +++ b/docs/examples-dist/loading.vue @@ -24,7 +24,10 @@ .demo-loading__example--with-bg { background-color: rgba(0, 0, 0, 0.5); - margin-bottom: 10px; + margin: 0 auto; + width: 80px; + padding: 25px 0; + border-radius: 10px; } } } diff --git a/docs/examples-dist/search.vue b/docs/examples-dist/search.vue index a94a4eb5a..725fa0555 100644 --- a/docs/examples-dist/search.vue +++ b/docs/examples-dist/search.vue @@ -1,5 +1,11 @@ @@ -13,6 +19,9 @@ export default { }, handleChange(value) { console.log(value); + }, + handleCancel() { + alert('cancel'); } } }; diff --git a/docs/examples-dist/tab.vue b/docs/examples-dist/tab.vue index 68383b102..abf38569f 100644 --- a/docs/examples-dist/tab.vue +++ b/docs/examples-dist/tab.vue @@ -7,17 +7,27 @@ 内容五 - + 内容一 - 内容二 + 内容二 + 内容三 + 内容四 + 内容五 + + + + + 内容一 + 内容二 内容三 内容四 内容五 - + + 内容一 内容二 @@ -26,8 +36,8 @@ 内容五 - - + + 内容一 内容二 内容三 @@ -36,6 +46,7 @@ + 内容一 @@ -55,21 +66,31 @@ background-color: #fff; padding: 20px; } + + .zan-tabs--card .zan-tab__pane { + background-color: transparent; + } + + .custom-tabwrap .zan-tab-active { + color: #20a0ff; + } + .custom-tabwrap .zan-tabs-nav-bar { + background: #20a0ff; + } + .custom-pane { + text-align: center; + height: 50px; + line-height: 50px; + } } } - +``` +::: + ### API | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| | placeholder | `input`的`placeholder`文案 | `string` | | | + +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| change | `input`输入框每次`change`时触发,适用于实时搜索等 | value:当前`input`输入框的值 | +| cancel | 取消搜索 | | +| search | 确定搜索 | value:当前`input`输入框的值 | diff --git a/packages/search/src/search.vue b/packages/search/src/search.vue index 82c045813..fb70d53cf 100644 --- a/packages/search/src/search.vue +++ b/packages/search/src/search.vue @@ -2,7 +2,13 @@