新增了 ref向外暴露方法

zwhGithub · Jan 27, 2018 · b131d1b · b131d1b
1 parent 02fb019
commit b131d1b
Show file tree

Hide file tree

Showing 19 changed files with 264 additions and 210 deletions.
diff --git a/README.md b/README.md
@@ -1,15 +1,14 @@
 ## vue-swiper
-- 基于Vue2.0开发，基本满足大部分功能
-- 轻量、高性能轮播插件。目前支持  无缝衔接自动轮播、无限轮播、手势轮播
-- 没有引入第三方库，原生js封装,打包之后只有8.2KB大小 性能还是杠杠滴
-
 
+* 基于 Vue2.0 开发，基本满足大部分功能
+* 轻量、高性能轮播插件。目前支持 无缝衔接自动轮播、无限轮播、手势轮播
+* 没有引入第三方库，原生 js 封装,打包之后只有 8.2KB 大小 性能还是杠杠滴
 
 ## demo
 
- ![效果](http://zwhgithub.github.io/vue-swiper/dist/1514291260.png)
+![效果](http://zwhgithub.github.io/vue-swiper/dist/1514291260.png)
 
- - 如果觉得好用，给一个star哦~~~
+* 如果觉得好用，给一个 star 哦~~~
 
 ## Install
 
@@ -38,7 +37,7 @@ components: {
  //同步加载轮播图情况
   <Swiper>
        <Slide>
-       		1
+               1
        </Slide>
        <Slide>
        		2
@@ -49,30 +48,27 @@ components: {
   </Swiper>
 
     //加一些参数配置情况
-  <Swiper v-if="slidesReal.length > 0"
-  		  :autoPlay='true' //是否自动轮播
-       @transtionend='move'
-       //每次轮播之后调用的方法，参数是跳到第几个轮播图
-  		  :showIndicator='true' //是否显示轮播的那个点
-  		  interval="2500" //每两次隔多久滚动一次
-  		  duration="500"  //每次滚动一页需要多久时间
-  		  >
+  <Swiper v-if="slidesReal.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
         <Slide @click="clickMe" v-for="(tag,key) in slidesReal" :key="key">
         	//添加click事件
         </Slide>
    </Swiper>
-
 ```
 
 ## API
 
-| 属性            | 说明           | 默认   |
-| ------------- | ------------ | ---- |
-| autoPlay      | 是否自动轮播       | true |
-| showIndicator | 是否显示轮播的那个点   | true |
-| interval      | 每两次隔多久滚动一次   | 2500 |
+| 属性          | 说明                     | 默认 |
+| ------------- | ------------------------ | ---- |
+| autoPlay      | 是否自动轮播             | true |
+| showIndicator | 是否显示轮播的那个点     | true |
+| interval      | 每两次隔多久滚动一次     | 2500 |
 | duration      | 每次滚动一页需要多久时间 | 500  |
 
+* Swiper 上面还暴露了其他方法,在 Swiper 标签上添加 ref 属性, 例如: <Swiper ref="swiper"></Swiper>
+    * this.$refs.swiper.prevSlide(); // 下一张图
+    * this.$refs.swiper.nextSlide(); // 上一张图
+    * this.$refs.swiper.slideTo(2); //某一张图
+
 ## 事件
 
 ```
@@ -82,6 +78,6 @@ click  事件 每个轮播图上的事件
 
 ## Other
 
-- 可以通过覆盖我的样式进行自定义样式，Slide标签里面可以写div或者其他的东西
-- 一些参数配置可以参考上面Usage 第三个示例，异步渲染要加v-if 保证渲染成功 参考第一个示例
-- 如果其他问题可以邮箱沟通，452216418@qq.com;
+* 可以通过覆盖我的样式进行自定义样式，Slide 标签里面可以写 div 或者其他的东西
+* 一些参数配置可以参考上面 Usage 第三个示例，异步渲染要加 v-if 保证渲染成功 参考第一个示例
+* 如果其他问题可以邮箱沟通，452216418@qq.com;
diff --git a/dist/index.html b/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>demo</title><link href=static/css/app.8bd1065bb36651d8de563ff07b6a9da2.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/manifest.1a3c64a7f75e35c82da8.js></script><script type=text/javascript src=static/js/vendor.e60ecb02767b4e777d19.js></script><script type=text/javascript src=static/js/app.45dc4668bfaad93d7540.js></script></body></html>
+<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>demo</title><link href=static/css/app.cf7ab6b647e131b3da168cb9cb4f88a6.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/manifest.4462f552c7d4746f3359.js></script><script type=text/javascript src=static/js/vendor.28e9d15b2c3c4718c0cd.js></script><script type=text/javascript src=static/js/app.03ba9b50fee03dbf10a3.js></script></body></html>
diff --git a/dist/static/css/app.8bd1065bb36651d8de563ff07b6a9da2.css b/dist/static/css/app.8bd1065bb36651d8de563ff07b6a9da2.css
diff --git a/dist/static/css/app.8bd1065bb36651d8de563ff07b6a9da2.css.map b/dist/static/css/app.8bd1065bb36651d8de563ff07b6a9da2.css.map
diff --git a/dist/static/css/app.cf7ab6b647e131b3da168cb9cb4f88a6.css b/dist/static/css/app.cf7ab6b647e131b3da168cb9cb4f88a6.css
diff --git a/dist/static/css/app.cf7ab6b647e131b3da168cb9cb4f88a6.css.map b/dist/static/css/app.cf7ab6b647e131b3da168cb9cb4f88a6.css.map
diff --git a/dist/static/js/app.03ba9b50fee03dbf10a3.js b/dist/static/js/app.03ba9b50fee03dbf10a3.js
diff --git a/dist/static/js/app.03ba9b50fee03dbf10a3.js.map b/dist/static/js/app.03ba9b50fee03dbf10a3.js.map
diff --git a/dist/static/js/app.45dc4668bfaad93d7540.js b/dist/static/js/app.45dc4668bfaad93d7540.js