add spin
wangxueliang
parent
eaaa0a1bab
commit
f410612fe1
|
|
@ -14,23 +14,7 @@ const md = {
|
|||
Avatars can be used to represent people or objects. It supports images, 'Icon's, or letters.
|
||||
`,
|
||||
}
|
||||
|
||||
const UserList = ['U', 'Lucy', 'Tom', 'Edward']
|
||||
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
avatarValue: UserList[0],
|
||||
color: colorList[0],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeValue () {
|
||||
const index = UserList.indexOf(this.avatarValue)
|
||||
this.avatarValue = index < UserList.length - 1 ? UserList[index + 1] : UserList[0]
|
||||
this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0]
|
||||
},
|
||||
},
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@ export { Collapse, CollapsePanel }
|
|||
import notification from './notification'
|
||||
import message from './message'
|
||||
|
||||
export { default as Spin } from './spin'
|
||||
|
||||
const api = {
|
||||
notification,
|
||||
message,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,142 @@
|
|||
<script>
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import BaseMixin from '../_util/BaseMixin'
|
||||
import isCssAnimationSupported from '../_util/isCssAnimationSupported'
|
||||
import animate from '../_util/css-animation'
|
||||
|
||||
export default {
|
||||
name: 'Spin',
|
||||
mixins: [BaseMixin],
|
||||
props: {
|
||||
prefixCls: PropTypes.string.def('ant-spin'),
|
||||
spinning: PropTypes.bool.def(true),
|
||||
size: PropTypes.oneOf(['small', 'default', 'large']).def('default'),
|
||||
wrapperClassName: PropTypes.string.def(''),
|
||||
tip: PropTypes.string,
|
||||
delay: PropTypes.number,
|
||||
},
|
||||
data () {
|
||||
const { spinning } = this
|
||||
return {
|
||||
stateSpinning: spinning,
|
||||
debounceTimeout: null,
|
||||
delayTimeout: null,
|
||||
notCssAnimationSupported: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getHasDefaultSlots () {
|
||||
return this.$slots && this.$slots.default
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (!isCssAnimationSupported()) {
|
||||
// Show text in IE9
|
||||
this.setState({
|
||||
notCssAnimationSupported: true,
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.debounceTimeout) {
|
||||
clearTimeout(this.debounceTimeout)
|
||||
}
|
||||
if (this.delayTimeout) {
|
||||
clearTimeout(this.delayTimeout)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
spinning (val) {
|
||||
const { delay, stateSpinning, spinning } = this
|
||||
|
||||
if (this.debounceTimeout) {
|
||||
clearTimeout(this.debounceTimeout)
|
||||
}
|
||||
if (stateSpinning && !spinning) {
|
||||
this.debounceTimeout = window.setTimeout(() => this.setState({ stateSpinning: spinning }), 200)
|
||||
if (this.delayTimeout) {
|
||||
clearTimeout(this.delayTimeout)
|
||||
}
|
||||
} else {
|
||||
if (spinning && delay && !isNaN(Number(delay))) {
|
||||
if (this.delayTimeout) {
|
||||
clearTimeout(this.delayTimeout)
|
||||
}
|
||||
this.delayTimeout = window.setTimeout(() => this.setState({ stateSpinning: spinning }), delay)
|
||||
} else {
|
||||
this.setState({ stateSpinning: spinning })
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { size, prefixCls, tip, wrapperClassName, ...restProps } = this.$props
|
||||
const { notCssAnimationSupported, $slots, stateSpinning } = this
|
||||
|
||||
const spinClassName = {
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-sm`]: size === 'small',
|
||||
[`${prefixCls}-lg`]: size === 'large',
|
||||
[`${prefixCls}-spinning`]: stateSpinning,
|
||||
[`${prefixCls}-show-text`]: !!tip || notCssAnimationSupported,
|
||||
}
|
||||
|
||||
const spinIndicator = $slots.indicator ? $slots.indicator : (
|
||||
<span class={`${prefixCls}-dot`}>
|
||||
<i />
|
||||
<i />
|
||||
<i />
|
||||
<i />
|
||||
</span>
|
||||
)
|
||||
|
||||
const spinElement = (
|
||||
<div {...restProps} class={spinClassName} >
|
||||
{spinIndicator}
|
||||
{tip ? <div class={`${prefixCls}-text`}>{tip}</div> : null}
|
||||
</div>
|
||||
)
|
||||
|
||||
if (this.getHasDefaultSlots()) {
|
||||
let animateClassName = prefixCls + '-nested-loading'
|
||||
if (wrapperClassName) {
|
||||
animateClassName += ' ' + wrapperClassName
|
||||
}
|
||||
const containerClassName = {
|
||||
[`${prefixCls}-container`]: true,
|
||||
[`${prefixCls}-blur`]: stateSpinning,
|
||||
}
|
||||
|
||||
const transitionProps = {
|
||||
props: Object.assign({
|
||||
appear: true,
|
||||
css: false,
|
||||
}),
|
||||
}
|
||||
const transitionEvent = {
|
||||
enter: (el, done) => {
|
||||
animate(el, 'fade-enter', done)
|
||||
},
|
||||
leave: (el, done) => {
|
||||
animate(el, 'fade-leave', done)
|
||||
},
|
||||
}
|
||||
|
||||
transitionProps.on = transitionEvent
|
||||
|
||||
return (<transition
|
||||
{...transitionProps}
|
||||
>
|
||||
<div class={animateClassName}>
|
||||
{stateSpinning && <div key='loading'>{spinElement}</div>}
|
||||
<div class={containerClassName} key='container'>
|
||||
{this.$slots.default}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
)
|
||||
}
|
||||
return spinElement
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<cn>
|
||||
#### 基本用法
|
||||
一个简单的 loading 状态。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### basic Usage
|
||||
A simple loading status.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-spin />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<cn>
|
||||
#### 自定义指示符
|
||||
使用自定义指示符。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Custom spinning indicator
|
||||
Use custom loading indicator.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-spin>
|
||||
<a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<cn>
|
||||
#### 延迟
|
||||
延迟显示 loading 效果。当 spinning 状态在 `delay` 时间内结束，则不显示 loading 状态。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### delay
|
||||
Specifies a delay for loading state. If `spinning` ends during delay, loading status won't appear.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.content{
|
||||
border: 1px solid #91d5ff;
|
||||
background-color: #e6f7ff;
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<a-spin :spinning="spinning" :delay="delayTime">
|
||||
<div class="content">
|
||||
可以点击‘切换’按钮，延迟显示 loading 效果。当 spinning 状态在 `delay` 时间内结束，则不显示 loading 状态。
|
||||
</div>
|
||||
</a-spin>
|
||||
<a-button @click="changeSpinning" style="margin-top: 5px">切换</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
spinning: false,
|
||||
delayTime: 500,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeSpinning(){
|
||||
this.spinning = !this.spinning
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<script>
|
||||
import CustomIndicator from './custom-indicator'
|
||||
import Basic from './basic'
|
||||
import DelayAndDebounce from './delayAndDebounce'
|
||||
import Inside from './inside'
|
||||
import Nested from './nested'
|
||||
import Size from './size'
|
||||
import Tip from './tip'
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
|
||||
const md = {
|
||||
cn: `# Spin 加载中
|
||||
|
||||
用于页面和区块的加载中状态。
|
||||
|
||||
## 何时使用
|
||||
|
||||
页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
|
||||
## 代码演示`,
|
||||
us: `# Spin
|
||||
|
||||
A spinner for displaying loading state of a page or a section.
|
||||
|
||||
# When To Use
|
||||
|
||||
When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.`,
|
||||
}
|
||||
export default {
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<md cn={md.cn} us={md.us}/>
|
||||
<Basic />
|
||||
<br/>
|
||||
<Size />
|
||||
<br/>
|
||||
<Inside />
|
||||
<br/>
|
||||
<Nested />
|
||||
<br/>
|
||||
<Tip />
|
||||
<br/>
|
||||
<DelayAndDebounce />
|
||||
<br/>
|
||||
<CustomIndicator />
|
||||
<br/>
|
||||
<api>
|
||||
<template slot='cn'>
|
||||
<CN/>
|
||||
</template>
|
||||
<US/>
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<cn>
|
||||
#### 容器
|
||||
放入一个容器中。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Inside a container
|
||||
Spin in a container.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.example {
|
||||
text-align: center;
|
||||
background: rgba(0,0,0,0.05);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
padding: 30px 50px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="example">
|
||||
<a-spin />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<cn>
|
||||
#### 卡片加载中
|
||||
可以直接把内容内嵌到 `Spin` 中，将现有容器变为加载状态。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Embedded mode
|
||||
Embedding content into `Spin` will alter it into loading state.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.content{
|
||||
border: 1px solid #91d5ff;
|
||||
background-color: #e6f7ff;
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<a-spin :spinning="spinning">
|
||||
<div class="content">
|
||||
可以点击‘切换’按钮，控制本区域的spin展示。
|
||||
</div>
|
||||
</a-spin>
|
||||
<a-button @click="changeSpinning" style="margin-top: 5px">切换</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
spinning: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeSpinning(){
|
||||
this.spinning = !this.spinning
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<cn>
|
||||
#### 各种大小
|
||||
小的用于文本加载，默认用于卡片容器级加载，大的用于**页面级**加载。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Size
|
||||
A small `Spin` use in loading text, default `Spin` use in loading card-level block, and large `Spin` use in loading **page**.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-spin size="small" />
|
||||
<a-spin />
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<cn>
|
||||
#### 自定义描述文案
|
||||
自定义描述文案。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Customized description
|
||||
Customized description content.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.content{
|
||||
border: 1px solid #91d5ff;
|
||||
background-color: #e6f7ff;
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div>
|
||||
<a-spin tip="Loading...">
|
||||
<div class="content">
|
||||
我的描述文案是自定义的。。。
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| -------- | ----------- | ---- | ------------- |
|
||||
| delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
|
||||
| indicator | React node of the spinning indicator | slot | - |
|
||||
| size | size of Spin, options: `small`, `default` and `large` | string | `default` |
|
||||
| spinning | whether Spin is spinning | boolean | true |
|
||||
| tip | customize description content when Spin has children | string | - |
|
||||
| wrapperClassName | className of wrapper when Spin has children | string | - |
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Spin from './Spin'
|
||||
|
||||
export default Spin
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |
|
||||
| indicator | 加载指示符 | slot方式 | - |
|
||||
| size | 组件大小，可选值为 `small` `default` `large` | string | 'default' |
|
||||
| spinning | 是否旋转 | boolean | true |
|
||||
| tip | 当作为包裹元素时，可以自定义描述文案 | string | - |
|
||||
| wrapperClassName | 包装器的类属性 | string | - |
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import '../../style/index.less'
|
||||
import './index.less'
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@spin-prefix-cls: ~"@{ant-prefix}-spin";
|
||||
@spin-dot-default: @text-color-secondary;
|
||||
|
||||
.@{spin-prefix-cls} {
|
||||
.reset-component;
|
||||
color: @primary-color;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
transition: transform 0.3s @ease-in-out-circ;
|
||||
display: none;
|
||||
|
||||
&-spinning {
|
||||
opacity: 1;
|
||||
position: static;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&-nested-loading {
|
||||
position: relative;
|
||||
> div > .@{spin-prefix-cls} {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
max-height: 320px;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
.@{spin-prefix-cls}-dot {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -@spin-dot-size / 2;
|
||||
}
|
||||
.@{spin-prefix-cls}-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
padding-top: (@spin-dot-size - @font-size-base) / 2 + 2px;
|
||||
text-shadow: 0 1px 2px #fff;
|
||||
}
|
||||
&.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
|
||||
margin-top: -@spin-dot-size / 2 - 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> div > .@{spin-prefix-cls}-sm {
|
||||
.@{spin-prefix-cls}-dot {
|
||||
margin: -@spin-dot-size-sm / 2;
|
||||
}
|
||||
.@{spin-prefix-cls}-text {
|
||||
padding-top: (@spin-dot-size-sm - @font-size-base) / 2 + 2px;
|
||||
}
|
||||
&.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
|
||||
margin-top: -@spin-dot-size-sm / 2 - 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> div > .@{spin-prefix-cls}-lg {
|
||||
.@{spin-prefix-cls}-dot {
|
||||
margin: -@spin-dot-size-lg / 2;
|
||||
}
|
||||
.@{spin-prefix-cls}-text {
|
||||
padding-top: (@spin-dot-size-lg - @font-size-base) / 2 + 2px;
|
||||
}
|
||||
&.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
|
||||
margin-top: -@spin-dot-size-lg / 2 - 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-container {
|
||||
position: relative;
|
||||
.clearfix;
|
||||
}
|
||||
|
||||
&-blur {
|
||||
overflow: hidden;
|
||||
opacity: 0.7;
|
||||
-webkit-filter: blur(0.5px);
|
||||
filter: blur(0.5px);
|
||||
|
||||
/* autoprefixer: off */
|
||||
filter: ~"progid\:DXImageTransform\.Microsoft\.Blur(PixelRadius\=1, MakeShadow\=false)";
|
||||
// workround for a strange style bug in safari:
|
||||
// https://github.com/ant-design/ant-design/issues/4622
|
||||
// have no clue why this works
|
||||
-webkit-transform: translateZ(0);
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
opacity: 0.3;
|
||||
transition: all .3s;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
// tip
|
||||
// ------------------------------
|
||||
&-tip {
|
||||
color: @spin-dot-default;
|
||||
}
|
||||
|
||||
// dots
|
||||
// ------------------------------
|
||||
|
||||
&-dot {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
.square(@spin-dot-size);
|
||||
transform: rotate(45deg);
|
||||
animation: antRotate 1.2s infinite linear;
|
||||
i {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 100%;
|
||||
background-color: @primary-color;
|
||||
transform: scale(0.75);
|
||||
display: block;
|
||||
position: absolute;
|
||||
opacity: 0.3;
|
||||
animation: antSpinMove 1s infinite linear alternate;
|
||||
transform-origin: 50% 50%;
|
||||
&:nth-child(1) {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
right: 0;
|
||||
top: 0;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
// ------------------------------
|
||||
// small
|
||||
&-sm &-dot {
|
||||
.square(@spin-dot-size-sm);
|
||||
i {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// large
|
||||
&-lg &-dot {
|
||||
.square(@spin-dot-size-lg);
|
||||
i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&&-show-text &-text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
/* IE10+ */
|
||||
.@{spin-prefix-cls}-blur {
|
||||
background: @component-background;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antSpinMove {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antRotate {
|
||||
to {
|
||||
transform: rotate(405deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -20,3 +20,4 @@ import './card/style'
|
|||
import './collapse/style'
|
||||
import './notification/style'
|
||||
import './message/style'
|
||||
import './spin/style'
|
||||
|
|
|
|||
|
|
@ -21,4 +21,5 @@ export { default as divider } from 'antd/divider/demo/index.vue'
|
|||
export { default as collapse } from 'antd/collapse/demo/index.vue'
|
||||
export { default as notification } from 'antd/notification/demo/index.vue'
|
||||
export { default as message } from 'antd/message/demo/index.vue'
|
||||
export { default as spin } from 'antd/spin/demo/index.vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
|||
const hashs = window.location.hash.split('/')
|
||||
const d = hashs[hashs.length - 1]
|
||||
return {
|
||||
component: import(`../components/vc-select/demo/${d}.vue`),
|
||||
component: import(`../components/spin/demo/index.vue`),
|
||||
}
|
||||
}
|
||||
export default [
|
||||
|
|
|
|||
Loading…
Reference in New Issue