Docs: add English language support (#170)

* feat: support lang entry build * feat: vant support lang switch * move lang iframe-router to utils & fix router link bug * add en-US config && add some translation * chang async. to async_ (support superman cdn) * add layout translation * change nav style * upgrade zan-doc * fix: doc config * upgrade zan-doc && remove useless code * fix changelog generate path
2026-05-15 01:06:30 +08:00 · 2017-10-06 12:33:28 +08:00
parent 265fcbf2ef
commit 64ec6ce5ac
68 changed files with 439 additions and 135 deletions
@@ -0,0 +1,146 @@
+<style>
+.demo-swipe {
+  .van-swipe {
+    height: 200px;
+
+    img {
+      width: 100%;
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      autoImages: [
+        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
+      ],
+      images: [
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+      ]
+    };
+  },
+
+  methods: {
+    handlePageEnd(page, index) {
+      console.log(page, index);
+    }
+  }
+};
+</script>
+
+## Swipe 轮播
+
+### 使用指南
+``` javascript
+import { Swipe, SwipeItem } from 'vant';
+
+Vue.component(Swipe.name, Swipe);
+Vue.component(SwipeItem.name, SwipeItem);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<van-swipe>
+  <van-swipe-item v-for="(img, index) in images" :key="index">
+    <a href="https://youzan.com" target="_blank">
+      <img v-lazy="img" alt="">
+    </a>
+  </van-swipe-item>
+</van-swipe>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      images: [
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+      ]
+    };
+  }
+};
+```
+:::
+
+#### 隐藏指示器
+
+需要设置`show-indicators`属性为`false`，即会隐藏指示器。
+
+:::demo 隐藏指示器
+```html
+<van-swipe :show-indicators="false">
+  <van-swipe-item v-for="(img, index) in autoImages" :key="index">
+    <img v-lazy="img" alt="">
+  </van-swipe-item>
+</van-swipe>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      autoImages: [
+        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
+      ]
+    };
+  }
+};
+```
+:::
+
+#### 自动轮播
+
+需要设置`auto-play`属性为`true`，即会自动轮播。
+
+:::demo 自动轮播
+```html
+<van-swipe auto-play @pagechange:end="handlePageEnd">
+  <van-swipe-item v-for="(img, index) in autoImages" :key="index">
+    <img v-lazy="img" alt="">
+  </van-swipe-item>
+</van-swipe>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      autoImages: [
+        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
+        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
+      ]
+    };
+  },
+
+  methods: {
+    handlePageEnd(page, index) {
+      console.log(page, index);
+    }
+  }
+};
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| autoPlay | 是否自动轮播 | `Boolean`  |    `false`     |    `true`, `false`      |
+| showIndicators | 是否显示指示器 | `Boolean`  |   `true`       |   `true`, `false`       |
+
+### 事件
+
+| 事件名       | 说明      | 参数 |
+|-----------|-----------|-----------|
+| `pagechange:end` | 每一页轮播结束后触发 | `(elem, currIndex)`：`elem`为触发页当前的DOM节点 |