From 2d43f26b05ee711ae88cfec8489be0a8ed27819d Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Mon, 6 Mar 2017 13:43:15 +0800
Subject: [PATCH] support Spin

---
 README.md                    |   2 +-
 examples/app.vue             |   1 +
 examples/main.js             |   4 ++++
 examples/routers/spin.vue    | 191 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/spin/spin.vue |  20 +++++++++-----------
 src/index.js                 |   4 ++--
 6 files changed, 208 insertions(+), 14 deletions(-)
 create mode 100644 examples/routers/spin.vue

diff --git a/README.md b/README.md
index 34f796f..94328f2 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,7 @@
 - [x] Circle
 - [x] Affix
 - [ ] BackTop
-- [ ] Spin
+- [x] Spin
 
 ## Overview
 
diff --git a/examples/app.vue b/examples/app.vue
index 6dc68d2..a966f99 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -41,6 +41,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/dropdown">Dropdown</router-link></li>
                 <li><router-link to="/breadcrumb">Breadcrumb</router-link></li>
                 <li><router-link to="/menu">Menu</router-link></li>
+                <li><router-link to="/spin">Spin</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/examples/main.js b/examples/main.js
index dddd09c..cc2ebdb 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -128,6 +128,10 @@ const router = new VueRouter({
         {
             path: '/menu',
             component: require('./routers/menu.vue')
+        },
+        {
+            path: '/spin',
+            component: require('./routers/spin.vue')
         }
     ]
 });
diff --git a/examples/routers/spin.vue b/examples/routers/spin.vue
new file mode 100644
index 0000000..32803f2
--- /dev/null
+++ b/examples/routers/spin.vue
@@ -0,0 +1,191 @@
+<!--<style>-->
+    <!--.demo-spin-icon-load{-->
+        <!--animation: ani-demo-spin 1s linear infinite;-->
+    <!--}-->
+    <!--@keyframes ani-demo-spin {-->
+        <!--from { transform: rotate(0deg);}-->
+        <!--50%  { transform: rotate(180deg);}-->
+        <!--to   { transform: rotate(360deg);}-->
+    <!--}-->
+    <!--.demo-spin-col{-->
+        <!--height: 100px;-->
+        <!--position: relative;-->
+        <!--border: 1px solid #eee;-->
+    <!--}-->
+    <!--/*loading*/-->
+    <!--.loader{-->
+        <!--width: 30px;-->
+        <!--height: 30px;-->
+        <!--position: relative;-->
+        <!--margin: 0 auto;-->
+    <!--}-->
+    <!--.circular {-->
+        <!-- -webkit-animation: rotate 2s linear infinite;-->
+        <!--animation: rotate 2s linear infinite;-->
+        <!--height: 100%;-->
+        <!-- -webkit-transform-origin: center center;-->
+        <!-- -ms-transform-origin: center center;-->
+        <!--transform-origin: center center;-->
+        <!--width: 100%;-->
+        <!--position: absolute;-->
+        <!--top: 0;-->
+        <!--bottom: 0;-->
+        <!--left: 0;-->
+        <!--right: 0;-->
+        <!--margin: auto;-->
+    <!--}-->
+
+    <!--.path {-->
+        <!--stroke-dasharray: 1, 200;-->
+        <!--stroke-dashoffset: 0;-->
+        <!-- -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;-->
+        <!--animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;-->
+        <!--stroke-linecap: round;-->
+    <!--}-->
+    <!--@-webkit-keyframes-->
+    <!--rotate {  100% {-->
+        <!-- -webkit-transform: rotate(360deg);-->
+        <!--transform: rotate(360deg);-->
+    <!--}-->
+    <!--}-->
+    <!--@keyframes-->
+    <!--rotate {  100% {-->
+        <!-- -webkit-transform: rotate(360deg);-->
+        <!--transform: rotate(360deg);-->
+    <!--}-->
+    <!--}-->
+    <!--@-webkit-keyframes-->
+    <!--dash {  0% {-->
+        <!--stroke-dasharray: 1, 200;-->
+        <!--stroke-dashoffset: 0;-->
+    <!--}-->
+        <!--50% {-->
+            <!--stroke-dasharray: 89, 200;-->
+            <!--stroke-dashoffset: -35;-->
+        <!--}-->
+        <!--100% {-->
+            <!--stroke-dasharray: 89, 200;-->
+            <!--stroke-dashoffset: -124;-->
+        <!--}-->
+    <!--}-->
+    <!--@keyframes-->
+    <!--dash {  0% {-->
+        <!--stroke-dasharray: 1, 200;-->
+        <!--stroke-dashoffset: 0;-->
+    <!--}-->
+        <!--50% {-->
+            <!--stroke-dasharray: 89, 200;-->
+            <!--stroke-dashoffset: -35;-->
+        <!--}-->
+        <!--100% {-->
+            <!--stroke-dasharray: 89, 200;-->
+            <!--stroke-dashoffset: -124;-->
+        <!--}-->
+    <!--}-->
+    <!--@-webkit-keyframes-->
+    <!--color {  100%, 0% {-->
+        <!--stroke: #d62d20;-->
+    <!--}-->
+        <!--40% {-->
+            <!--stroke: #0057e7;-->
+        <!--}-->
+        <!--66% {-->
+            <!--stroke: #008744;-->
+        <!--}-->
+        <!--80%, 90% {-->
+            <!--stroke: #ffa700;-->
+        <!--}-->
+    <!--}-->
+    <!--@keyframes-->
+    <!--color {  100%, 0% {-->
+        <!--stroke: #d62d20;-->
+    <!--}-->
+        <!--40% {-->
+            <!--stroke: #0057e7;-->
+        <!--}-->
+        <!--66% {-->
+            <!--stroke: #008744;-->
+        <!--}-->
+        <!--80%, 90% {-->
+            <!--stroke: #ffa700;-->
+        <!--}-->
+    <!--}-->
+<!--</style>-->
+<!--<template>-->
+    <!--<div>-->
+        <!--<Row>-->
+            <!--<i-col class="demo-spin-col" span="8">-->
+                <!--<Spin fix>加载中...</Spin>-->
+            <!--</i-col>-->
+            <!--<i-col class="demo-spin-col" span="8">-->
+                <!--<Spin fix>-->
+                    <!--<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>-->
+                    <!--<div>Loading</div>-->
+                <!--</Spin>-->
+            <!--</i-col>-->
+            <!--<i-col class="demo-spin-col" span="8">-->
+                <!--<Spin fix>-->
+                    <!--<div class="loader">-->
+                        <!--<svg class="circular" viewBox="25 25 50 50">-->
+                            <!--<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>-->
+                        <!--</svg>-->
+                    <!--</div>-->
+                <!--</Spin>-->
+            <!--</i-col>-->
+        <!--</Row>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--// 部分样式代码冗长，未作展示-->
+    <!--export default {-->
+
+    <!--}-->
+<!--</script>-->
+
+<style>
+    .demo-spin-article{
+        width: 400px;
+        height: 200px;
+        padding: 10px;
+        position: relative;
+        border: 1px solid #eee;
+        text-align: center;
+    }
+    .demo-spin-article h3{
+        font-size: 22px;
+    }
+    .demo-spin-article address{
+        color: #999;
+        font-style: normal;
+        font-size: 14px;
+    }
+    .demo-spin-article p{
+        font-size: 16px;
+    }
+</style>
+<template>
+    <div>
+        <div class="demo-spin-article">
+            <h3>登金陵凤凰台</h3>
+            <address>李白</address>
+            <article>
+                <p>凤凰台上凤凰游，凤去台空江自流。</p>
+                <p>吴宫花草埋幽径，晋代衣冠成古丘。</p>
+                <p>三山半落青天外，二水中分白鹭洲。</p>
+                <p>总为浮云能蔽日，长安不见使人愁。</p>
+            </article>
+            <Spin size="large" fix v-if="spinShow"></Spin>
+        </div>
+        <br>
+        切换显示状态：<i-switch @on-change="spinShow = !spinShow"></i-switch>
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                spinShow: true
+            }
+        }
+    }
+</script>
diff --git a/src/components/spin/spin.vue b/src/components/spin/spin.vue
index 6adb76c..b4e8cc3 100644
--- a/src/components/spin/spin.vue
+++ b/src/components/spin/spin.vue
@@ -1,10 +1,12 @@
 <template>
-    <div :class="classes" transition="fade">
-        <div :class="mainClasses">
-            <span :class="dotClasses"></span>
-            <div :class="textClasses" v-el:text><slot></slot></div>
+    <transition name="fade">
+        <div :class="classes">
+            <div :class="mainClasses">
+                <span :class="dotClasses"></span>
+                <div :class="textClasses"><slot></slot></div>
+            </div>
         </div>
-    </div>
+    </transition>
 </template>
 <script>
     import { oneOf } from '../../utils/assist';
@@ -49,12 +51,8 @@
                 return `${prefixCls}-text`;
             }
         },
-        compiled () {
-            const text = this.$els.text.innerHTML;
-
-            if (text != '') {
-                this.showText = true;
-            }
+        mounted () {
+            this.showText = this.$slots.default !== undefined;
         }
     };
 </script>
diff --git a/src/index.js b/src/index.js
index f7050ca..8b9373f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -30,7 +30,7 @@ import Progress from './components/progress';
 import Radio from './components/radio';
 import Rate from './components/rate';
 import Slider from './components/slider';
-// import Spin from './components/spin';
+import Spin from './components/spin';
 import Steps from './components/steps';
 import Switch from './components/switch';
 // import Table from './components/table';
@@ -95,7 +95,7 @@ const iview = {
     Row,
     // iSelect: Select,
     Slider,
-    // Spin,
+    Spin,
     Step: Steps.Step,
     Steps,
     iSwitch: Switch,
--
libgit2 0.21.4