support Spin
support Spin
This commit is contained in:
梁灏
parent
fd1582c5b5
commit
2d43f26b05
6 changed files with 208 additions and 14 deletions
|
|
@ -59,7 +59,7 @@
|
||||||
- [x] Circle
|
- [x] Circle
|
||||||
- [x] Affix
|
- [x] Affix
|
||||||
- [ ] BackTop
|
- [ ] BackTop
|
||||||
- [ ] Spin
|
- [x] Spin
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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="/dropdown">Dropdown</router-link></li>
|
||||||
<li><router-link to="/breadcrumb">Breadcrumb</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="/menu">Menu</router-link></li>
|
||||||
|
<li><router-link to="/spin">Spin</router-link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
|
|
|
||||||
|
|
@ -128,6 +128,10 @@ const router = new VueRouter({
|
||||||
{
|
{
|
||||||
path: '/menu',
|
path: '/menu',
|
||||||
component: require('./routers/menu.vue')
|
component: require('./routers/menu.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/spin',
|
||||||
|
component: require('./routers/spin.vue')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
|
||||||
191
examples/routers/spin.vue
Normal file
191
examples/routers/spin.vue
Normal file
|
|
@ -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>
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="classes" transition="fade">
|
<transition name="fade">
|
||||||
<div :class="mainClasses">
|
<div :class="classes">
|
||||||
<span :class="dotClasses"></span>
|
<div :class="mainClasses">
|
||||||
<div :class="textClasses" v-el:text><slot></slot></div>
|
<span :class="dotClasses"></span>
|
||||||
|
<div :class="textClasses"><slot></slot></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { oneOf } from '../../utils/assist';
|
import { oneOf } from '../../utils/assist';
|
||||||
|
|
@ -49,12 +51,8 @@
|
||||||
return `${prefixCls}-text`;
|
return `${prefixCls}-text`;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
compiled () {
|
mounted () {
|
||||||
const text = this.$els.text.innerHTML;
|
this.showText = this.$slots.default !== undefined;
|
||||||
|
|
||||||
if (text != '') {
|
|
||||||
this.showText = true;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ import Progress from './components/progress';
|
||||||
import Radio from './components/radio';
|
import Radio from './components/radio';
|
||||||
import Rate from './components/rate';
|
import Rate from './components/rate';
|
||||||
import Slider from './components/slider';
|
import Slider from './components/slider';
|
||||||
// import Spin from './components/spin';
|
import Spin from './components/spin';
|
||||||
import Steps from './components/steps';
|
import Steps from './components/steps';
|
||||||
import Switch from './components/switch';
|
import Switch from './components/switch';
|
||||||
// import Table from './components/table';
|
// import Table from './components/table';
|
||||||
|
|
@ -95,7 +95,7 @@ const iview = {
|
||||||
Row,
|
Row,
|
||||||
// iSelect: Select,
|
// iSelect: Select,
|
||||||
Slider,
|
Slider,
|
||||||
// Spin,
|
Spin,
|
||||||
Step: Steps.Step,
|
Step: Steps.Step,
|
||||||
Steps,
|
Steps,
|
||||||
iSwitch: Switch,
|
iSwitch: Switch,
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue