[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('type')">
|
||||
<van-loading />
|
||||
<van-loading type="spinner" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('color')">
|
||||
<van-loading color="#1989fa" />
|
||||
<van-loading
|
||||
type="spinner"
|
||||
color="#1989fa"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block
|
||||
v-if="!$attrs.weapp"
|
||||
:title="$t('text')"
|
||||
>
|
||||
<van-loading size="24px">
|
||||
{{ $t('loading') }}
|
||||
</van-loading>
|
||||
</demo-block>
|
||||
|
||||
<demo-block
|
||||
v-if="!$attrs.weapp"
|
||||
:title="$t('vertical')"
|
||||
>
|
||||
<van-loading
|
||||
size="24px"
|
||||
vertical
|
||||
>
|
||||
{{ $t('loading') }}
|
||||
</van-loading>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
type: '加载类型',
|
||||
color: '自定义颜色',
|
||||
text: '加载文案',
|
||||
vertical: '垂直排列'
|
||||
},
|
||||
'en-US': {
|
||||
type: 'Type',
|
||||
color: 'Color',
|
||||
text: 'Text',
|
||||
vertical: 'Vertical'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-loading {
|
||||
.van-loading {
|
||||
display: inline-block;
|
||||
margin: 5px 0 5px 20px;
|
||||
|
||||
&--vertical {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
# Loading
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { Loading } from 'vant';
|
||||
|
||||
Vue.use(Loading);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Type
|
||||
|
||||
```html
|
||||
<van-loading />
|
||||
<van-loading type="spinner" />
|
||||
```
|
||||
|
||||
### Color
|
||||
|
||||
```html
|
||||
<van-loading color="#1989fa" />
|
||||
<van-loading type="spinner" color="#1989fa" />
|
||||
```
|
||||
|
||||
### Text
|
||||
|
||||
```html
|
||||
<van-loading size="24px">Loading...</van-loading>
|
||||
```
|
||||
|
||||
### Vertical
|
||||
|
||||
```html
|
||||
<van-loading size="24px" vertical>Loading...</van-loading>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| color | Loading color | `String` | `#c9c9c9` | |
|
||||
| type | Can be set to `spinner` | `String` | `circular` |
|
||||
| size | Icon size | `String | Number` | `30px` |
|
||||
| text-size | Text font size | `String | Number` | `14px` |
|
||||
| vertical | Whether to arrange icons and text content vertically | `Boolean` | `false` |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| default | Loading text |
|
||||
@@ -0,0 +1,102 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-loading {
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
&__spinner {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
// compatible for 1.x, users may set width or height in root element
|
||||
max-width: 100%;
|
||||
height: 30px;
|
||||
max-height: 100%;
|
||||
vertical-align: middle;
|
||||
animation: van-rotate 0.8s linear infinite;
|
||||
|
||||
&--spinner {
|
||||
animation-timing-function: steps(12);
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 25%;
|
||||
margin: 0 auto;
|
||||
background-color: currentColor;
|
||||
border-radius: 40%;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--circular {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
}
|
||||
|
||||
&__circular {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
circle {
|
||||
animation: van-circular 1.5s ease-in-out infinite;
|
||||
stroke: currentColor;
|
||||
stroke-width: 3;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
color: @loading-text-color;
|
||||
font-size: @loading-text-font-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.van-loading__text {
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes van-circular {
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 90, 150;
|
||||
stroke-dashoffset: -40;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 90, 150;
|
||||
stroke-dashoffset: -120;
|
||||
}
|
||||
}
|
||||
|
||||
.generate-spinner(@n, @i: 1) when (@i =< @n) {
|
||||
.van-loading__spinner--spinner i:nth-of-type(@{i}) {
|
||||
transform: rotate(@i * 30deg);
|
||||
opacity: 1 - (0.75 / 12) * (@i - 1);
|
||||
}
|
||||
.generate-spinner(@n, (@i + 1));
|
||||
}
|
||||
.generate-spinner(12);
|
||||
@@ -0,0 +1,90 @@
|
||||
import { createNamespace, suffixPx } from '../utils';
|
||||
import { GRAY } from '../utils/color';
|
||||
import { inherit } from '../utils/functional';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { DefaultSlots } from '../utils/types';
|
||||
|
||||
export type LoadingType = 'circular' | 'spinner';
|
||||
|
||||
export type LoadingProps = {
|
||||
type: LoadingType;
|
||||
size?: string | number;
|
||||
color: string;
|
||||
vertical?: boolean;
|
||||
textSize?: string | number;
|
||||
};
|
||||
|
||||
const [createComponent, bem] = createNamespace('loading');
|
||||
|
||||
function LoadingIcon(h: CreateElement, props: LoadingProps) {
|
||||
if (props.type === 'spinner') {
|
||||
const Spin = [];
|
||||
for (let i = 0; i < 12; i++) {
|
||||
Spin.push(<i />);
|
||||
}
|
||||
return Spin;
|
||||
}
|
||||
|
||||
return (
|
||||
<svg class={bem('circular')} viewBox="25 25 50 50">
|
||||
<circle cx="50" cy="50" r="20" fill="none" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function LoadingText(h: CreateElement, props: LoadingProps, slots: DefaultSlots) {
|
||||
if (slots.default) {
|
||||
const style = props.textSize && {
|
||||
fontSize: suffixPx(props.textSize)
|
||||
};
|
||||
|
||||
return (
|
||||
<span class={bem('text')} style={style}>
|
||||
{slots.default()}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function Loading(
|
||||
h: CreateElement,
|
||||
props: LoadingProps,
|
||||
slots: DefaultSlots,
|
||||
ctx: RenderContext<LoadingProps>
|
||||
) {
|
||||
const { color, size, type } = props;
|
||||
|
||||
const style: { [key: string]: string } = { color };
|
||||
if (size) {
|
||||
const iconSize = suffixPx(size) as string;
|
||||
style.width = iconSize;
|
||||
style.height = iconSize;
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={bem([type, { vertical: props.vertical }])} {...inherit(ctx, true)}>
|
||||
<span class={bem('spinner', type)} style={style}>
|
||||
{LoadingIcon(h, props)}
|
||||
</span>
|
||||
{LoadingText(h, props, slots)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading.props = {
|
||||
size: [String, Number],
|
||||
textSize: [String, Number],
|
||||
vertical: Boolean,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'circular'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: GRAY
|
||||
}
|
||||
};
|
||||
|
||||
export default createComponent<LoadingProps>(Loading);
|
||||
@@ -0,0 +1,24 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: rgb(201, 201, 201);"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: rgb(25, 137, 250);"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 24px; height: 24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">
|
||||
加载中...
|
||||
</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-loading van-loading--circular van-loading--vertical"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 24px; height: 24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">
|
||||
加载中...
|
||||
</span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,5 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`size prop 1`] = `<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>`;
|
||||
|
||||
exports[`text-size prop 1`] = `<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text" style="font-size: 20px;">Text</span></div>`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,25 @@
|
||||
import { mount } from '../../../test/utils';
|
||||
import Loading from '..';
|
||||
|
||||
test('size prop', () => {
|
||||
const wrapper = mount(Loading, {
|
||||
propsData: {
|
||||
size: 20
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('text-size prop', () => {
|
||||
const wrapper = mount(Loading, {
|
||||
propsData: {
|
||||
textSize: 20
|
||||
},
|
||||
scopedSlots: {
|
||||
default: () => 'Text'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
# Loading 加载
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { Loading } from 'vant';
|
||||
|
||||
Vue.use(Loading);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 加载类型
|
||||
|
||||
```html
|
||||
<van-loading />
|
||||
<van-loading type="spinner" />
|
||||
```
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-loading color="#1989fa" />
|
||||
<van-loading type="spinner" color="#1989fa" />
|
||||
```
|
||||
|
||||
### 加载文案
|
||||
|
||||
```html
|
||||
<van-loading size="24px">加载中...</van-loading>
|
||||
```
|
||||
|
||||
### 垂直排列
|
||||
|
||||
```html
|
||||
<van-loading size="24px" vertical>加载中...</van-loading>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| color | 颜色 | `String` | `#c9c9c9` | - |
|
||||
| type | 类型，可选值为 `spinner` | `String` | `circular` | - |
|
||||
| size | 加载图标大小，默认单位为`px` | `String | Number` | `30px` | - |
|
||||
| text-size | 文字大小，默认单位为`px` | `String | Number` | `14px` | 2.0.0 |
|
||||
| vertical | 是否垂直排列图标和文字内容 | `Boolean` | `false` | 2.0.0 |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 加载文案 |
|
||||
Reference in New Issue
Block a user