fix: 修复vue.use自动注册组件时没有兼容到不传prefix的场景 && 补充affix组件的demo和测试用例

docs/atui/introduce.md

@@ -3,7 +3,7 @@ order: 0
 english: AliTelecom UI System
 ---
 
-[![logo](http://img.alicdn.com/tps/TB16WYGPFXXXXX4XXXXXXXXXXXX-400-172.png)](github.com/aliqin/atui)
+[![logo](http://img.alicdn.com/tps/TB16WYGPFXXXXX4XXXXXXXXXXXX-400-172.png)](https://github.com/aliqin/atui)
 
 
 由阿里通信技术团队打造基于Vue2.0的Web组件库，目前支撑了[阿里天机](https://alitj.tmall.com/#!/)，[阿里大于](https://www.alidayu.com/)，[优酷移动](https://youku170.tmall.com/)，以及阿里通信内部的中后台项目

site/theme/template/Layout/Footer.jsx

@@ -60,7 +60,7 @@ export default class Footer extends React.Component {
       <footer id="footer">
         <ul>
           <li>
-            <h2>GitLab</h2>
+            <h2>Github</h2>
             <div>
               <a target="_blank " href="https://github.com/aliqin/atui">仓库</a>
             </div>

src/components/Affix/Affix.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-  <div v-bind:class="{'vue-affix': affixed}"
+  <div v-bind:class="[prefixCls + '-affix', affixed ? 'vue-affix' : '' ]"
     v-bind:style="styles">
     <slot></slot>
   </div>
@@ -21,6 +21,10 @@ export default {
     target: {
       type: Function,
       default: () => window
+    },
+    prefixCls: {
+      type: String,
+      default: 'atui'
     }
   },
   data () {
@@ -43,10 +47,14 @@ export default {
           left: elementOffset.left + targetRect.left + 'px',
           width: this.$el.offsetWidth + 'px'
         }
+
+        this.$emit('change', this.affixed)
       }
       if (this.affixed && scrollTop < elementOffset.top) {
         this.affixed = false
         this.styles = {}
+
+        this.$emit('change', this.affixed)
       }
     },
     // reffered from antd

src/components/Affix/demo/basic.md

@@ -0,0 +1,37 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Type
+---
+
+## zh-CN
+基本使用方式，默认会固定在浏览器窗口最上方，当元素固定时会加上vue-affix这个class，可以依据此class写固定状态的自定义样式
+
+
+## en-US
+
+
+````jsx
+<v-affix>
+  <v-button>affix</v-button>
+</v-affix>
+````
+
+````vue-script
+new Vue({
+  el: 'body',
+  components: {
+    vButton: atui.Button,
+    vAffix: atui.Affix
+  },
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+
+  }
+})
+````

src/components/Affix/demo/offset.md

@@ -0,0 +1,36 @@
+---
+order: 2
+title:
+  zh-CN: 偏移量
+  en-US: Type
+---
+
+## zh-CN
+可以设置offset属性来设置距离窗口顶部达到指定偏移量后触发 ，默认为0
+
+## en-US
+
+
+````jsx
+<v-affix :offset="100">
+  <v-button>100px to top</v-button>
+</v-affix>
+````
+
+````vue-script
+new Vue({
+  el: 'body',
+  components: {
+    vButton: atui.Button,
+    vAffix: atui.Affix
+  },
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+
+  }
+})
+````

src/components/Affix/demo/target.md

@@ -0,0 +1,42 @@
+---
+order: 1
+title:
+  zh-CN: 滚动容器
+  en-US: Container to scroll
+---
+
+## zh-CN
+用 `target` 设置 `Affix` 需要监听其滚动事件的元素，默认为 `window`。
+
+## en-US
+Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
+
+````jsx
+<div id="affixTarget" style="width: 100%; height: 100px; background: #ccc; overflow-y: scroll; padding: 30px;">
+  <div style="height: 300px;">
+    <v-affix :target="getTarget">
+      <v-button>affix</v-button>
+    </v-affix>
+  </div>
+</div>
+````
+
+````vue-script
+new Vue({
+  el: 'body',
+  components: {
+    vButton: atui.Button,
+    vAffix: atui.Affix
+  },
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    getTarget () {
+      return document.getElementById('affixTarget')
+    }
+  }
+})
+````

src/components/Affix/index.md

@@ -0,0 +1,26 @@
+---
+category: Components
+type: Basic
+title: Affix
+subtitle: 固钉
+---
+
+将页面元素钉在可视范围。
+
+## 何时使用
+当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
+
+页面可视范围过小时，慎用此功能以免遮挡页面内容。
+
+
+## API
+
+
+### Button
+
+属性 | 说明 | 类型 | 默认值
+-----|-----|-----|------
+offset | 距离窗口顶部达到指定偏移量后触发 | `number` | 0 |
+target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 `DOM` 元素的函数 | `Function` | () => window |
+change | 固定状态改变时触发的回调函数 | `Function(affixed)` |  |
+

src/components/Affix/test/affix.test.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Button from '../../Button'
+import Affix from '../'
+
+let vm = new Vue({
+  template: `
+      <v-affix>
+        <v-button>affix</v-button>
+      </v-affix>
+      `,
+  components: { vButton: Button, vAffix: Affix },
+  data: {
+
+  }
+}).$mount()
+
+describe('Affix', () => {
+  it('Affix组件是否正常显示', () => {
+    expect(vm.$el.querySelectorAll('div.atui-affix').length).to.equal(1)
+  })
+})

src/index.js

@@ -115,6 +115,7 @@ module.exports = { ...VueComponent }
 module.exports.version = '0.0.29'
 
 module.exports.install = (Vue, opts) => {
+  opts = opts || {}
   let prefix = opts.prefix || 'v'
   Object.keys(VueComponent).forEach((key) => {
     // prefix component name with 'v'  <v-button></v-button>

test.html

@@ -52,9 +52,7 @@
     <script src="./dist/vue.js"></script>
     <script src="./build/atui.js"></script>
     <script>
-      Vue.use(atui, {
-        prefix: 'v'
-      })
+      Vue.use(atui)
 
       new Vue({
         el:'#app',