diff --git a/build/webpack.config.js b/build/webpack.config.js
index 56b140900..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
@@ -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/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
-
diff --git a/docs/examples-docs/swipe.md b/docs/examples-docs/swipe.md
index 0fd446e17..7846421a4 100644
--- a/docs/examples-docs/swipe.md
+++ b/docs/examples-docs/swipe.md
@@ -12,6 +12,16 @@
}
+
+
## 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/docs/index.js b/docs/index.js
index cdbb3a4cb..4cfc2b19e 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(location.pathname + 'examples.html#' + route.path);
+ window.location.replace(pathname + 'examples.html#/');
return;
}
document.title = route.meta.title || document.title;
diff --git a/packages/swipe/src/swipe-item.vue b/packages/swipe/src/swipe-item.vue
index 0a7ea92b5..be2dd955a 100644
--- a/packages/swipe/src/swipe-item.vue
+++ b/packages/swipe/src/swipe-item.vue
@@ -6,6 +6,10 @@
diff --git a/packages/swipe/src/swipe.vue b/packages/swipe/src/swipe.vue
index 83e641a6a..0c335da0e 100644
--- a/packages/swipe/src/swipe.vue
+++ b/packages/swipe/src/swipe.vue
@@ -1,6 +1,14 @@
@@ -13,16 +21,20 @@ 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: []
+ };
+ },
+
mounted() {
this.input = new Input(this.$el, {
listenMoving: true
@@ -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..518ded439 100644
--- a/packages/zanui-css/src/swipe.css
+++ b/packages/zanui-css/src/swipe.css
@@ -1,24 +1,56 @@
+@import './common/var.css';
+
@component-namespace zan {
- @b swipe {
- position: relative;
- overflow: hidden;
- width: 100%;
+ @b swipe {
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ height: 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: #999;
+ opacity: .8;
+ margin: 0 3px;
+ z-index: 1;
- img {
- width: 100%;
- height: auto;
- }
-
- &:first-child {
- display: block;
- }
+ @m active {
+ background: $c-orange;
+ opacity: 1;
+ }
}
+
+ @e items {
+ position: relative;
+ overflow: hidden;
+ position: relative;
+ height: 100%;
+ }
+ }
+
+ @b swipe-item {
+ display: none;
+ height: 100%;
+ width: 100%;
+ text-align: center;
+
+ img {
+ width: 100%;
+ height: auto;
+ }
+
+ &:first-child {
+ display: block;
+ }
+ }
}