Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

sites/doc/info.vue

@@ -65,22 +65,22 @@ export default {
   },
   watch: {
     packages() {
-      const compare = (obj1, obj2) => {
-        const val1 = obj1.name;
-        const val2 = obj2.name;
-        if (val1 < val2) {
-          return -1;
-        } else if (val1 > val2) {
-          return 1;
-        } else {
-          return 0;
-        }
-      };
+      // const compare = (obj1, obj2) => {
+      //   const val1 = obj1.name;
+      //   const val2 = obj2.name;
+      //   if (val1 < val2) {
+      //     return -1;
+      //   } else if (val1 > val2) {
+      //     return 1;
+      //   } else {
+      //     return 0;
+      //   }
+      // };
       let that = this;
       let tempAry = [];
       let temp = {};
       let sorts = this.sorts;
-      let sortArys = [...this.packages].sort(compare);
+      let sortArys = [...this.packages];
       sortArys.map(item => {
         let name = sorts[item.sort];
         if (!temp[name]) {

src/packages/backtop/backtop.vue

@@ -1,118 +1,121 @@
 <template>
-    <div :class="['nut-backtop', {'show': backTop}]" :style="styles" @click="goto">
-        <slot>
-            <div class="nut-backtop-main">
-            </div>
-        </slot>
-    </div>
+  <div :class="['nut-backtop', {'show': backTop}]" :style="styles" @click="goto">
+    <slot>
+      <div class="nut-backtop-main"></div>
+    </slot>
+  </div>
 </template>
 <script>
+export default {
+  name: "nut-backtop",
+  props: {
+    distance: {
+      type: Number,
+      default: 200
+    },
+    bottom: {
+      type: Number,
+      default: 20
+    },
+    right: {
+      type: Number,
+      default: 10
+    },
+    duration: {
+      type: Number,
+      default: 1000
+    },
+    zIndex: {
+      type: Number,
+      default: 1111
+    }
+  },
+  data() {
+    return {
+      backTop: false
+    };
+  },
+  mounted() {
+    window.addEventListener("scroll", this.handleScroll, false);
+    window.addEventListener("resize", this.handleScroll, false);
+  },
+  beforeDestroy() {
+    window.removeEventListener("scroll", this.handleScroll, false);
+    window.removeEventListener("resize", this.handleScroll, false);
+  },
+  computed: {
+    styles() {
+      return {
+        bottom: `${this.bottom}px`,
+        right: `${this.right}px`,
+        "z-index": this.zIndex
+      };
+    }
+  },
+  methods: {
+    handleScroll() {
+      this.backTop = window.pageYOffset >= this.distance;
+    },
+    goto() {
+      const sTop =
+        document.documentElement.scrollTop || document.body.scrollTop;
+      this.scrollTop(window, sTop, 0, this.duration);
+      this.$emit("click");
+    },
+    scrollTop(el, from = 0, to, duration = 500, endCallback) {
+      this.el = el;
+      let lastTime = 0;
+      let vendors = ["webkit", "moz"];
+      for (
+        let x = 0;
+        x < vendors.length && !window.requestAnimationFrame;
+        ++x
+      ) {
+        window.requestAnimationFrame =
+          window[vendors[x] + "RequestAnimationFrame"];
+        window.cancelAnimationFrame =
+          window[vendors[x] + "CancelAnimationFrame"] ||
+          window[vendors[x] + "CancelRequestAnimationFrame"];
+      }
 
-    export default {
-        name:'nut-backtop',
-        props: {
-            distance: {
-                type: Number,
-                default: 200
-            },
-            bottom: {
-                type: Number,
-                default: 20
-            },
-            right: {
-                type: Number,
-                default: 10
-            },
-            duration: {
-                type: Number,
-                default: 1000
-            },
-            zIndex: {
-                type: Number,
-                default: 1111
-            }
-        },
-        data () {
-            return {
-                backTop: false
-            };
-        },
-        mounted () {
-            window.addEventListener('scroll', this.handleScroll, false);
-            window.addEventListener('resize', this.handleScroll, false);
-        },
-        beforeDestroy () {
-            window.removeEventListener('scroll', this.handleScroll, false);
-            window.removeEventListener('resize', this.handleScroll, false);
-        },
-        computed: {
-            styles () {
-                return {
-                    'bottom': `${this.bottom}px`,
-                    'right': `${this.right}px`,
-                    'z-index': this.zIndex
-                };
-            }
-        },
-        methods: {
-            handleScroll () {
-                this.backTop = window.pageYOffset >= this.distance;
-            },
-            goto () {
-                const sTop = document.documentElement.scrollTop || document.body.scrollTop;
-                this.scrollTop(window, sTop, 0, this.duration);
-                this.$emit('click');
-            },
-            scrollTop(el, from = 0, to, duration = 500, endCallback) {
-                this.el = el;
-                let lastTime = 0;
-                let vendors = ['webkit', 'moz'];
-                for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
-                    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
-                    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    // name has changed in Webkit
-                                                window[vendors[x] + 'CancelRequestAnimationFrame'];
-                }
-
-                if (!window.requestAnimationFrame) {
-                    window.requestAnimationFrame = function(callback, element) {
-                        var currTime = new Date().getTime();
-                        var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
-                        var id = window.setTimeout(function() {
-                            callback(currTime + timeToCall);
-                        }, timeToCall);
-                        lastTime = currTime + timeToCall;
-                        return id;
-                    };
-                }
-                if (!window.cancelAnimationFrame) {
-                    window.cancelAnimationFrame = function(id) {
-                        clearTimeout(id);
-                    };
-                }
-                const difference = Math.abs(from - to);
-                const step = Math.ceil(difference / duration * 50);
-
-                
-                this.scroll(from, to, step, endCallback);
-            },
-            scroll(start, end, step, endCallback) {
-                if (start === end) {
-                    endCallback && endCallback();
-                    return;
-                }
+      if (!window.requestAnimationFrame) {
+        window.requestAnimationFrame = function(callback, element) {
+          let currTime = new Date().getTime();
+          let timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
+          let id = window.setTimeout(function() {
+            callback(currTime + timeToCall);
+          }, timeToCall);
+          lastTime = currTime + timeToCall;
+          return id;
+        };
+      }
+      if (!window.cancelAnimationFrame) {
+        window.cancelAnimationFrame = function(id) {
+          clearTimeout(id);
+        };
+      }
+      const difference = Math.abs(from - to);
+      const step = Math.ceil((difference / duration) * 50);
 
-                let d = (start + step > end) ? end : start + step;
-                if (start > end) {
-                    d = (start - step < end) ? end : start - step;
-                }
-                if (this.el === window) {
-                    window.scrollTo(d, d);
-                } else {
-                    this.el.scrollTop = d;
-                }
-                window.requestAnimationFrame(() => this.scroll(d, end, step));
-            }
+      this.scroll(from, to, step, endCallback);
+    },
+    scroll(start, end, step, endCallback) {
+      if (start === end) {
+        endCallback && endCallback();
+        return;
+      }
 
-        }
-    };
+      let d = start + step > end ? end : start + step;
+      if (start > end) {
+        d = start - step < end ? end : start - step;
+      }
+      if (this.el === window) {
+        window.scrollTo(d, d);
+      } else {
+        this.el.scrollTop = d;
+      }
+      window.requestAnimationFrame(() => this.scroll(d, end, step));
+    }
+  }
+};
 </script>

src/packages/backtop/demo.vue

@@ -1,36 +1,82 @@
 <template>
-    <div class="back-top-demo"> 
-      这个页面很长...<br>       
-      这个页面很长...<br>       
-      这个页面很长...<br>       
-      这个页面很长...<br>       
-      这个页面很长...<br>       
-      这个页面很长...<br>       
-      这个页面很长...<br>             
-      <nut-backtop @click="handleClick"></nut-backtop>
-    </div>
+  <div class="back-top-demo">
+    <h3>《再别康桥》</h3>
+    <p>徐志摩</p>
+    <p>轻轻的我走了，正如我轻轻的来；</p>
+    <p>我轻轻的招手，作别西天的云彩。</p>
+    <p>那河畔的金柳，是夕阳中的新娘；</p>
+    <p>波光里的艳影，在我的心头荡漾。</p>
+    <p>软泥上的青荇，油油的在水底招摇；</p>
+    <p>在康桥的柔波里，</p>
+    <p>我甘心做一条水草！</p>
+    <p>那榆荫下的一潭，</p>
+    <p>不是清泉，是天上虹</p>
+    <p>揉碎在浮藻间，沉淀着彩虹似的梦。</p>
+    <p>寻梦？撑一支长蒿，</p>
+    <p>向青草更青处漫溯，</p>
+    <p>满载一船星辉，在星辉斑斓里放歌。</p>
+    <p>但我不能放歌，悄悄是别离的笙箫；</p>
+    <p>夏虫也为我沉默，沉默是今晚的康桥！</p>
+    <p>悄悄的我走了，正如我悄悄的来；</p>
+    <p>我挥一挥衣袖，不带走一片云彩。</p>
+
+    <h3>《乡愁》</h3>
+    <p>余光中</p>
+    <p>小时侯</p>
+    <p>乡愁是一枚小小的邮票</p>
+    <p>我在这头</p>
+    <p>母亲在那头</p>
+    <p>长大后</p>
+    <p>乡愁是一张窄窄的船票</p>
+    <p>我在这头</p>
+    <p>新娘在那头</p>
+    <p>之后呵</p>
+    <p>乡愁是一方矮矮的坟墓</p>
+    <p>我在外头</p>
+    <p>母亲呵在里头</p>
+    <p>而此刻</p>
+    <p>乡愁是一湾浅浅的海峡</p>
+    <p>我在这头</p>
+    <p>大陆在那头</p>
+    
+    <h3>《盼望》</h3>
+    <p>席慕容</p>
+    <p>其实我盼望的</p>
+    <p>也但是就只是那一瞬</p>
+    <p>我从没要求过你给我</p>
+    <p>你的一生</p>
+    <p>如果能在开满了栀子花的山坡上</p>
+    <p>与你相遇如果能</p>
+    <p>深深地爱过一次再别离</p>
+    <p>那麽再长久的一生</p>
+    <p>不也就只是就只是</p>
+    <p>回首时</p>
+    <p>那短短的一瞬</p>
+    <nut-backtop @click="handleClick"></nut-backtop>
+  </div>
 </template>
 
 <script>
 export default {
-  components: {
-
-  },
+  components: {},
   data() {
     return {};
   },
   methods: {
-      handleClick(){
-        console.log('触发回到顶部')
-      }
+    handleClick() {
+      console.log("触发回到顶部");
+    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-  .back-top-demo {
-    height: 1600px;
-    line-height: 400px;
-    text-align: center;
+.back-top-demo {
+  height: 1600px;
+  line-height: 2;
+  text-align: center;
+  p {
+    font-size: 14px;
   }
+}
 </style>

src/packages/backtop/doc.md

@@ -1,11 +1,12 @@
-# Switch 滑动开关
+# BackTop 回到顶部
 
 用于较长的页面快捷回到顶部的组件。
 
 ## 基本用法
 
 ```html
-<nut-backtop></nut-backtop>
+<nut-backtop>
+</nut-backtop>
 ```
 
 ## 设置出现位置
@@ -15,9 +16,12 @@
   :distance="400"
 >
 </nut-backtop>
+```
+
 > “页面垂直方向滚动高度”后出现
 
 ## click事件
+
 ```html
 <nut-backtop 
   @click="onClick"
@@ -60,12 +64,12 @@ export default {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | duration | 设置动画持续时间 | Number | 1000
-| distance | 设置“页面垂直方向滚动高度”后出现 | Number | 200
+| distance | “页面垂直方向滚动高度”后出现 | Number | 200
 | bottom | 设置离页面底部距离 | Number | 30
 | right | 设置离页面右边距离 | Number | 30
 | zIndex | 设置层级 | Number | 1111
 
-## Events
+## Event
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
 | click | 按钮点击时触发 | -

src/packages/rate/doc.md

@@ -47,7 +47,7 @@
 | uncheckedIcon | 使用图标(未选中) | String | -
 | checkedIcon | 使用图标(选中) | String | -
 
-## Events
+## Event
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
 | click | 点击star市触发 | star的index