mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] Loading: size prop support number type
This commit is contained in:
parent
0a7ca2fb6e
commit
e64dd9b121
@ -55,6 +55,7 @@
|
||||
|
||||
- 新增`default`插槽
|
||||
- 新增`text-size`属性
|
||||
- 支持`Number`类型的`size`属性
|
||||
|
||||
## NoticeBar
|
||||
|
||||
|
@ -35,11 +35,11 @@ Vue.use(Loading);
|
||||
|------|------|------|------|
|
||||
| color | Loading color | `String` | `#c9c9c9` | |
|
||||
| type | Can be set to `spinner` | `String` | `circular` |
|
||||
| size | Icon size | `String` | `30px` |
|
||||
| size | Icon size | `String | Number` | `30px` |
|
||||
| text-size | Text font size | `String | Number` | `14px` |
|
||||
|
||||
### Slot
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| default | Loading text |
|
||||
| default | Loading text |
|
||||
|
@ -6,8 +6,8 @@ import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { DefaultSlots } from '../utils/use/sfc';
|
||||
|
||||
export type LoadingProps = {
|
||||
type: string;
|
||||
size?: string;
|
||||
type: 'circular' | 'spinner';
|
||||
size?: string | number;
|
||||
color: string;
|
||||
textSize?: string | number;
|
||||
};
|
||||
@ -23,11 +23,12 @@ function Loading(
|
||||
) {
|
||||
const { color, size, type } = props;
|
||||
|
||||
const style = {
|
||||
color,
|
||||
width: size,
|
||||
height: size
|
||||
};
|
||||
const style: { [key: string]: string } = { color };
|
||||
if (size) {
|
||||
const iconSize = suffixPx(size);
|
||||
style.width = iconSize;
|
||||
style.height = iconSize;
|
||||
}
|
||||
|
||||
const Spin = [];
|
||||
if (type === 'spinner') {
|
||||
@ -68,7 +69,7 @@ function Loading(
|
||||
}
|
||||
|
||||
Loading.props = {
|
||||
size: String,
|
||||
size: [String, Number],
|
||||
textSize: [String, Number],
|
||||
type: {
|
||||
type: String,
|
||||
|
@ -1,3 +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>`;
|
||||
|
@ -1,6 +1,16 @@
|
||||
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: {
|
||||
|
@ -35,7 +35,7 @@ Vue.use(Loading);
|
||||
|------|------|------|------|------|
|
||||
| color | 颜色 | `String` | `#c9c9c9` | - |
|
||||
| type | 类型,可选值为 `spinner` | `String` | `circular` | - |
|
||||
| size | 加载图标大小 | `String` | `30px` | - |
|
||||
| size | 加载图标大小 | `String | Number` | `30px` | - |
|
||||
| text-size | 文字大小 | `String | Number` | `14px` | 2.0.0 |
|
||||
|
||||
### Slot
|
||||
|
Loading…
x
Reference in New Issue
Block a user