From 03af3b3eba3bff09fb9da1eca238de1ce0cbcc87 Mon Sep 17 00:00:00 2001 From: cookfront Date: Mon, 27 Mar 2017 17:06:30 +0800 Subject: [PATCH 01/10] 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 02/10] 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 03/10] 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 04/10] 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 05/10] 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 07/10] 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 08/10] 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 09/10] 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 10/10] 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 -