other / mew-iview

Commit 2d43f26b05ee711ae88cfec8489be0a8ed27819d

Authored by 梁灏
1 parent fd1582c5

support Spin 

support Spin
Showing 6 changed files with 208 additions and 14 deletions   Show diff stats
Inline Side-by-side
README.md
  Show/Hide comments   View file @2d43f26
... ... @@ -59,7 +59,7 @@
59 59 - [x] Circle
60 60 - [x] Affix
61 61 - [ ] BackTop
62   -- [ ] Spin
  62 +- [x] Spin
63 63  
64 64 ## Overview
65 65  
... ...
examples/app.vue
  Show/Hide comments   View file @2d43f26
... ... @@ -41,6 +41,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
41 41 <li><router-link to="/dropdown">Dropdown</router-link></li>
42 42 <li><router-link to="/breadcrumb">Breadcrumb</router-link></li>
43 43 <li><router-link to="/menu">Menu</router-link></li>
  44 + <li><router-link to="/spin">Spin</router-link></li>
44 45 </ul>
45 46 </nav>
46 47 <router-view></router-view>
... ...
examples/main.js
  Show/Hide comments   View file @2d43f26
... ... @@ -128,6 +128,10 @@ const router = new VueRouter({
128 128 {
129 129 path: '/menu',
130 130 component: require('./routers/menu.vue')
  131 + },
  132 + {
  133 + path: '/spin',
  134 + component: require('./routers/spin.vue')
131 135 }
132 136 ]
133 137 });
... ...
examples/routers/spin.vue 0 → 100644
  Show/Hide comments   View file @2d43f26
  1 +<!--<style>-->
  2 + <!--.demo-spin-icon-load{-->
  3 + <!--animation: ani-demo-spin 1s linear infinite;-->
  4 + <!--}-->
  5 + <!--@keyframes ani-demo-spin {-->
  6 + <!--from { transform: rotate(0deg);}-->
  7 + <!--50% { transform: rotate(180deg);}-->
  8 + <!--to { transform: rotate(360deg);}-->
  9 + <!--}-->
  10 + <!--.demo-spin-col{-->
  11 + <!--height: 100px;-->
  12 + <!--position: relative;-->
  13 + <!--border: 1px solid #eee;-->
  14 + <!--}-->
  15 + <!--/*loading*/-->
  16 + <!--.loader{-->
  17 + <!--width: 30px;-->
  18 + <!--height: 30px;-->
  19 + <!--position: relative;-->
  20 + <!--margin: 0 auto;-->
  21 + <!--}-->
  22 + <!--.circular {-->
  23 + <!-- -webkit-animation: rotate 2s linear infinite;-->
  24 + <!--animation: rotate 2s linear infinite;-->
  25 + <!--height: 100%;-->
  26 + <!-- -webkit-transform-origin: center center;-->
  27 + <!-- -ms-transform-origin: center center;-->
  28 + <!--transform-origin: center center;-->
  29 + <!--width: 100%;-->
  30 + <!--position: absolute;-->
  31 + <!--top: 0;-->
  32 + <!--bottom: 0;-->
  33 + <!--left: 0;-->
  34 + <!--right: 0;-->
  35 + <!--margin: auto;-->
  36 + <!--}-->
  37 +
  38 + <!--.path {-->
  39 + <!--stroke-dasharray: 1, 200;-->
  40 + <!--stroke-dashoffset: 0;-->
  41 + <!-- -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;-->
  42 + <!--animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;-->
  43 + <!--stroke-linecap: round;-->
  44 + <!--}-->
  45 + <!--@-webkit-keyframes-->
  46 + <!--rotate { 100% {-->
  47 + <!-- -webkit-transform: rotate(360deg);-->
  48 + <!--transform: rotate(360deg);-->
  49 + <!--}-->
  50 + <!--}-->
  51 + <!--@keyframes-->
  52 + <!--rotate { 100% {-->
  53 + <!-- -webkit-transform: rotate(360deg);-->
  54 + <!--transform: rotate(360deg);-->
  55 + <!--}-->
  56 + <!--}-->
  57 + <!--@-webkit-keyframes-->
  58 + <!--dash { 0% {-->
  59 + <!--stroke-dasharray: 1, 200;-->
  60 + <!--stroke-dashoffset: 0;-->
  61 + <!--}-->
  62 + <!--50% {-->
  63 + <!--stroke-dasharray: 89, 200;-->
  64 + <!--stroke-dashoffset: -35;-->
  65 + <!--}-->
  66 + <!--100% {-->
  67 + <!--stroke-dasharray: 89, 200;-->
  68 + <!--stroke-dashoffset: -124;-->
  69 + <!--}-->
  70 + <!--}-->
  71 + <!--@keyframes-->
  72 + <!--dash { 0% {-->
  73 + <!--stroke-dasharray: 1, 200;-->
  74 + <!--stroke-dashoffset: 0;-->
  75 + <!--}-->
  76 + <!--50% {-->
  77 + <!--stroke-dasharray: 89, 200;-->
  78 + <!--stroke-dashoffset: -35;-->
  79 + <!--}-->
  80 + <!--100% {-->
  81 + <!--stroke-dasharray: 89, 200;-->
  82 + <!--stroke-dashoffset: -124;-->
  83 + <!--}-->
  84 + <!--}-->
  85 + <!--@-webkit-keyframes-->
  86 + <!--color { 100%, 0% {-->
  87 + <!--stroke: #d62d20;-->
  88 + <!--}-->
  89 + <!--40% {-->
  90 + <!--stroke: #0057e7;-->
  91 + <!--}-->
  92 + <!--66% {-->
  93 + <!--stroke: #008744;-->
  94 + <!--}-->
  95 + <!--80%, 90% {-->
  96 + <!--stroke: #ffa700;-->
  97 + <!--}-->
  98 + <!--}-->
  99 + <!--@keyframes-->
  100 + <!--color { 100%, 0% {-->
  101 + <!--stroke: #d62d20;-->
  102 + <!--}-->
  103 + <!--40% {-->
  104 + <!--stroke: #0057e7;-->
  105 + <!--}-->
  106 + <!--66% {-->
  107 + <!--stroke: #008744;-->
  108 + <!--}-->
  109 + <!--80%, 90% {-->
  110 + <!--stroke: #ffa700;-->
  111 + <!--}-->
  112 + <!--}-->
  113 +<!--</style>-->
  114 +<!--<template>-->
  115 + <!--<div>-->
  116 + <!--<Row>-->
  117 + <!--<i-col class="demo-spin-col" span="8">-->
  118 + <!--<Spin fix>加载中...</Spin>-->
  119 + <!--</i-col>-->
  120 + <!--<i-col class="demo-spin-col" span="8">-->
  121 + <!--<Spin fix>-->
  122 + <!--<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>-->
  123 + <!--<div>Loading</div>-->
  124 + <!--</Spin>-->
  125 + <!--</i-col>-->
  126 + <!--<i-col class="demo-spin-col" span="8">-->
  127 + <!--<Spin fix>-->
  128 + <!--<div class="loader">-->
  129 + <!--<svg class="circular" viewBox="25 25 50 50">-->
  130 + <!--<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>-->
  131 + <!--</svg>-->
  132 + <!--</div>-->
  133 + <!--</Spin>-->
  134 + <!--</i-col>-->
  135 + <!--</Row>-->
  136 + <!--</div>-->
  137 +<!--</template>-->
  138 +<!--<script>-->
  139 + <!--// 部分样式代码冗长，未作展示-->
  140 + <!--export default {-->
  141 +
  142 + <!--}-->
  143 +<!--</script>-->
  144 +
  145 +<style>
  146 + .demo-spin-article{
  147 + width: 400px;
  148 + height: 200px;
  149 + padding: 10px;
  150 + position: relative;
  151 + border: 1px solid #eee;
  152 + text-align: center;
  153 + }
  154 + .demo-spin-article h3{
  155 + font-size: 22px;
  156 + }
  157 + .demo-spin-article address{
  158 + color: #999;
  159 + font-style: normal;
  160 + font-size: 14px;
  161 + }
  162 + .demo-spin-article p{
  163 + font-size: 16px;
  164 + }
  165 +</style>
  166 +<template>
  167 + <div>
  168 + <div class="demo-spin-article">
  169 + <h3>登金陵凤凰台</h3>
  170 + <address>李白</address>
  171 + <article>
  172 + <p>凤凰台上凤凰游，凤去台空江自流。</p>
  173 + <p>吴宫花草埋幽径，晋代衣冠成古丘。</p>
  174 + <p>三山半落青天外，二水中分白鹭洲。</p>
  175 + <p>总为浮云能蔽日，长安不见使人愁。</p>
  176 + </article>
  177 + <Spin size="large" fix v-if="spinShow"></Spin>
  178 + </div>
  179 + <br>
  180 + 切换显示状态：<i-switch @on-change="spinShow = !spinShow"></i-switch>
  181 + </div>
  182 +</template>
  183 +<script>
  184 + export default {
  185 + data () {
  186 + return {
  187 + spinShow: true
  188 + }
  189 + }
  190 + }
  191 +</script>
... ...
src/components/spin/spin.vue
  Show/Hide comments   View file @2d43f26
1 1 <template>
2   - <div :class="classes" transition="fade">
3   - <div :class="mainClasses">
4   - <span :class="dotClasses"></span>
5   - <div :class="textClasses" v-el:text><slot></slot></div>
  2 + <transition name="fade">
  3 + <div :class="classes">
  4 + <div :class="mainClasses">
  5 + <span :class="dotClasses"></span>
  6 + <div :class="textClasses"><slot></slot></div>
  7 + </div>
6 8 </div>
7   - </div>
  9 + </transition>
8 10 </template>
9 11 <script>
10 12 import { oneOf } from '../../utils/assist';
... ... @@ -49,12 +51,8 @@
49 51 return `${prefixCls}-text`;
50 52 }
51 53 },
52   - compiled () {
53   - const text = this.$els.text.innerHTML;
54   -
55   - if (text != '') {
56   - this.showText = true;
57   - }
  54 + mounted () {
  55 + this.showText = this.$slots.default !== undefined;
58 56 }
59 57 };
60 58 </script>
... ...
src/index.js
  Show/Hide comments   View file @2d43f26
... ... @@ -30,7 +30,7 @@ import Progress from &#39;./components/progress&#39;;
30 30 import Radio from './components/radio';
31 31 import Rate from './components/rate';
32 32 import Slider from './components/slider';
33   -// import Spin from './components/spin';
  33 +import Spin from './components/spin';
34 34 import Steps from './components/steps';
35 35 import Switch from './components/switch';
36 36 // import Table from './components/table';
... ... @@ -95,7 +95,7 @@ const iview = {
95 95 Row,
96 96 // iSelect: Select,
97 97 Slider,
98   - // Spin,
  98 + Spin,
99 99 Step: Steps.Step,
100 100 Steps,
101 101 iSwitch: Switch,
... ...