feat: spin tip support slot

feat-css-var
tangjinzhou 2022-03-06 21:32:19 +08:00
parent 2bd5fc15ff
commit 93a06a45f5
5 changed files with 26 additions and 18 deletions

View File

@ -15,7 +15,7 @@ export const spinProps = () => ({
spinning: PropTypes.looseBool,
size: SpinSize,
wrapperClassName: PropTypes.string,
tip: PropTypes.string,
tip: PropTypes.any,
delay: PropTypes.number,
indicator: PropTypes.any,
});
@ -121,7 +121,12 @@ export default defineComponent({
},
},
render() {
const { size, prefixCls: customizePrefixCls, tip, wrapperClassName } = this.$props;
const {
size,
prefixCls: customizePrefixCls,
tip = this.$slots.tip?.(),
wrapperClassName,
} = this.$props;
const { class: cls, style, ...divProps } = this.$attrs;
const { getPrefixCls, direction } = this.configProvider;
const prefixCls = getPrefixCls('spin', customizePrefixCls);

View File

@ -13,14 +13,14 @@ When part of the page is waiting for asynchronous data or during a rendering pro
## API
| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
| indicator | vue node of the spinning indicator | vNode \|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 | - |
| Property | Description | Type | Default Value | Version |
| --- | --- | --- | --- | --- |
| delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - | |
| indicator | vue node of the spinning indicator | vNode \|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 \| slot | - | slot 3.0 |
| wrapperClassName | className of wrapper when Spin has children | string | - | |
### Static Method

View File

@ -14,14 +14,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
## API
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | -------------------------------------------- | ------------- | --------- |
| delay | 延迟显示加载效果的时间(防止闪烁) | number (毫秒) | - |
| indicator | 加载指示符 | vNode \| slot | - |
| size | 组件大小,可选值为 `small` `default` `large` | string | `default` |
| spinning | 是否为加载中状态 | boolean | true |
| tip | 当作为包裹元素时,可以自定义描述文案 | string | - |
| wrapperClassName | 包装器的类属性 | string | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| delay | 延迟显示加载效果的时间(防止闪烁) | number (毫秒) | - | |
| indicator | 加载指示符 | vNode \| slot | - | |
| size | 组件大小,可选值为 `small` `default` `large` | string | `default` | |
| spinning | 是否为加载中状态 | boolean | true | |
| tip | 当作为包裹元素时,可以自定义描述文案 | string \| slot | - | slot 3.0 |
| wrapperClassName | 包装器的类属性 | string | - | |
### 静态方法

View File

@ -141,16 +141,19 @@
top: 0;
left: 0;
}
&:nth-child(2) {
top: 0;
right: 0;
animation-delay: 0.4s;
}
&:nth-child(3) {
right: 0;
bottom: 0;
animation-delay: 0.8s;
}
&:nth-child(4) {
bottom: 0;
left: 0;