mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
refactor(spin): reimplement customize icon codes
This commit is contained in:
07akioni
parent
21698de271
commit
930ecab4c8
@ -33,17 +33,13 @@ export default defineComponent({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
rotate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
useStyle('BaseLoading', style, toRef(props, 'clsPrefix'))
|
||||
},
|
||||
render () {
|
||||
const { clsPrefix, radius, strokeWidth, stroke, scale, $slots } = this
|
||||
const { clsPrefix, radius, strokeWidth, stroke, scale } = this
|
||||
const scaledRadius = radius / scale
|
||||
return (
|
||||
<div class={`${clsPrefix}-base-loading`} role="img" aria-label="loading">
|
||||
@ -51,13 +47,6 @@ export default defineComponent({
|
||||
{{
|
||||
default: () =>
|
||||
this.show ? (
|
||||
$slots.icon ?
|
||||
<div class={[
|
||||
`${clsPrefix}-base-loading__icon-slot`,
|
||||
this.rotate && `${clsPrefix}-base-loading__icon-slot--rotate`
|
||||
]}>
|
||||
{$slots.icon()}
|
||||
</div> :
|
||||
<svg
|
||||
class={`${clsPrefix}-base-loading__icon`}
|
||||
viewBox={`0 0 ${2 * scaledRadius} ${2 * scaledRadius}`}
|
||||
|
||||
@ -1,44 +1,28 @@
|
||||
import { c, cB, cE, cM } from '../../../../_utils/cssr'
|
||||
import { cB, cE } from '../../../../_utils/cssr'
|
||||
import iconSwitchTransition from '../../../../_styles/transitions/icon-switch.cssr'
|
||||
|
||||
export default c([
|
||||
c('@keyframes icon-rotate-animation', `
|
||||
0% {
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
`),
|
||||
cB('base-loading', `
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
export default cB('base-loading', `
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
`, [
|
||||
cE('placeholder', `
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
`, [
|
||||
cE('placeholder', {
|
||||
position: 'absolute',
|
||||
iconSwitchTransition({
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translateX(-50%) translateY(-50%)'
|
||||
}, [
|
||||
iconSwitchTransition({
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
originalTransform: 'translateX(-50%) translateY(-50%)'
|
||||
})
|
||||
]),
|
||||
cE('icon', `
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
`, [
|
||||
iconSwitchTransition()
|
||||
]),
|
||||
cE('icon-slot', [
|
||||
cM('rotate', `
|
||||
display: inline-block;
|
||||
animation: icon-rotate-animation 1s linear infinite;
|
||||
`)
|
||||
])
|
||||
originalTransform: 'translateX(-50%) translateY(-50%)'
|
||||
})
|
||||
]),
|
||||
cE('icon', `
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
`, [
|
||||
iconSwitchTransition()
|
||||
])
|
||||
])
|
||||
|
||||
@ -1,26 +1,11 @@
|
||||
# Customize Icon
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-spin size="small">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Reload />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-spin>
|
||||
<n-spin :show="show">
|
||||
<n-alert title="La La La" type="success">
|
||||
Leave it till tomorrow to unpack my case. Honey disconnect the phone.
|
||||
</n-alert>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Reload />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-spin>
|
||||
<n-button @click="show = !show">Click to Spin</n-button>
|
||||
</n-space>
|
||||
<n-spin :show="show" #icon>
|
||||
<n-icon>
|
||||
<Reload />
|
||||
</n-icon>
|
||||
</n-spin>
|
||||
```
|
||||
|
||||
```js
|
||||
|
||||
@ -14,15 +14,15 @@ customize-icon
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| rotate | `boolean` | `true` | If slot icon is rotate. |
|
||||
| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | |
|
||||
| rotate | `boolean` | `true` | If icon is rotating, only works for custom icon. |
|
||||
| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | Size of the spin. |
|
||||
| show | `boolean` | `true` | If spin is active. |
|
||||
| stroke-width | `number` | `undefined` | Relative width of spin's stroke, you can assume the outer radius of spin is 100. |
|
||||
| stroke | `string` | `undefined` | Color of the spin. |
|
||||
|
||||
## Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ---------------------------------- |
|
||||
| default | `()` | If set, spin will wrap the content |
|
||||
| icon | `()` | Customize the spin icon |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------------------------------- |
|
||||
| default | `()` | If set, spin will wrap the content. |
|
||||
| icon | `()` | Customize the spin icon. |
|
||||
|
||||
@ -1,26 +1,13 @@
|
||||
# 自定义图标
|
||||
|
||||
# 自定义图标
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-spin size="small" >
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Reload />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-spin>
|
||||
<n-spin :show="show">
|
||||
<n-alert title="La La La" type="success">
|
||||
明天再打开行李箱。宝贝，挂电话啦。
|
||||
</n-alert>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Reload />
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-spin>
|
||||
<n-button @click="show = !show">点出来加载</n-button>
|
||||
</n-space>
|
||||
<n-spin :show="show" #icon>
|
||||
<n-icon>
|
||||
<Reload />
|
||||
</n-icon>
|
||||
</n-spin>
|
||||
```
|
||||
|
||||
```js
|
||||
|
||||
@ -15,7 +15,7 @@ customize-icon
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| rotate | `boolean` | `true` | 自定义加载图标是否有旋转动画 |
|
||||
| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | |
|
||||
| size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | Spin 的尺寸 |
|
||||
| show | `boolean` | `true` | Spin 在填入内容的状态是否激活 |
|
||||
| stroke-width | `number` | `undefined` | Spin 边缘的相对宽度，假定 Spin 的外侧半径是 100 |
|
||||
| stroke | `string` | `undefined` | Spin 的颜色 |
|
||||
@ -25,4 +25,4 @@ customize-icon
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ------------------------------- |
|
||||
| default | `()` | 如果填入，Spin 会包裹填入的内容 |
|
||||
| icon | `()` | 自定义加载图标 |
|
||||
| icon | `()` | 自定义加载图标 |
|
||||
|
||||
@ -100,6 +100,26 @@ export default defineComponent({
|
||||
},
|
||||
render () {
|
||||
const { $slots, mergedClsPrefix } = this
|
||||
const rotate = $slots.icon && this.rotate
|
||||
const icon = $slots.icon ? (
|
||||
<div
|
||||
class={[
|
||||
`${mergedClsPrefix}-spin`,
|
||||
rotate && `${mergedClsPrefix}-spin--rotate`
|
||||
]}
|
||||
style={$slots.default ? '' : (this.cssVars as CSSProperties)}
|
||||
>
|
||||
{$slots.icon()}
|
||||
</div>
|
||||
) : (
|
||||
<NBaseLoading
|
||||
clsPrefix={mergedClsPrefix}
|
||||
style={$slots.default ? '' : (this.cssVars as CSSProperties)}
|
||||
stroke={this.stroke}
|
||||
stroke-width={this.mergedStrokeWidth}
|
||||
class={`${mergedClsPrefix}-spin`}
|
||||
/>
|
||||
)
|
||||
return $slots.default ? (
|
||||
<div
|
||||
class={`${mergedClsPrefix}-spin-container`}
|
||||
@ -115,32 +135,12 @@ export default defineComponent({
|
||||
</div>
|
||||
<Transition name="fade-in-transition">
|
||||
{{
|
||||
default: () =>
|
||||
this.compitableShow ? (
|
||||
<NBaseLoading
|
||||
clsPrefix={mergedClsPrefix}
|
||||
stroke={this.stroke}
|
||||
strokeWidth={this.mergedStrokeWidth}
|
||||
rotate={this.rotate}
|
||||
class={`${mergedClsPrefix}-spin`}
|
||||
>
|
||||
{{ icon: $slots.icon }}
|
||||
</NBaseLoading>
|
||||
) : null
|
||||
default: () => (this.compitableShow ? icon : null)
|
||||
}}
|
||||
</Transition>
|
||||
</div>
|
||||
) : (
|
||||
<NBaseLoading
|
||||
clsPrefix={mergedClsPrefix}
|
||||
style={this.cssVars as CSSProperties}
|
||||
stroke={this.stroke}
|
||||
stroke-width={this.mergedStrokeWidth}
|
||||
rotate={this.rotate}
|
||||
class={`${mergedClsPrefix}-spin`}
|
||||
>
|
||||
{{ icon: $slots.icon }}
|
||||
</NBaseLoading>
|
||||
icon
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
@ -7,6 +7,14 @@ import fadeInTransition from '../../../_styles/transitions/fade-in.cssr'
|
||||
// --size
|
||||
// --color
|
||||
export default c([
|
||||
c('@keyframes spin-rotate', `
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
`),
|
||||
cB('spin-container', {
|
||||
position: 'relative'
|
||||
}, [
|
||||
@ -30,10 +38,14 @@ export default c([
|
||||
])
|
||||
]),
|
||||
cB('spin', `
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
font-size: var(--size);
|
||||
color: var(--color);
|
||||
`)
|
||||
`, [
|
||||
cM('rotate', `
|
||||
animation: spin-rotate 2s linear infinite;
|
||||
`)
|
||||
])
|
||||
])
|
||||
|
||||
@ -11,9 +11,10 @@ describe('n-spin', () => {
|
||||
it('should work with icon slot', () => {
|
||||
const wrapper = mount(NSpin, {
|
||||
slots: {
|
||||
icon: () => h(NIcon, null, {
|
||||
default: () => h(Reload)
|
||||
})
|
||||
icon: () =>
|
||||
h(NIcon, null, {
|
||||
default: () => h(Reload)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@ -23,15 +24,20 @@ describe('n-spin', () => {
|
||||
it('rotate should work on icon slot', async () => {
|
||||
const wrapper = mount(NSpin, {
|
||||
slots: {
|
||||
icon: () => h(NIcon, null, {
|
||||
default: () => h(Reload)
|
||||
})
|
||||
icon: () =>
|
||||
h(NIcon, null, {
|
||||
default: () => h(Reload)
|
||||
})
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('.n-base-loading__icon-slot--rotate').exists()).toBe(true)
|
||||
expect(wrapper.find('.n-base-loading__icon-slot--rotate').exists()).toBe(
|
||||
true
|
||||
)
|
||||
await wrapper.setProps({
|
||||
rotate: false
|
||||
})
|
||||
expect(wrapper.find('.n-base-loading__icon-slot--rotate').exists()).toBe(false)
|
||||
expect(wrapper.find('.n-base-loading__icon-slot--rotate').exists()).toBe(
|
||||
false
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user