-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(image): add can-preview & on-load prop and add loading & errorbo…
…x slot (#1714) * feat(n-input):add select methods, closes #1328 * Feat(image):add canPreview,onLoad,loading,errorbox * del(image) show errorBox tests * feat(switch):add activeColor`&inactiveColor&activeButtonColor&inactiveButtonColor Co-authored-by: 勤劳上班的卑微小张 <jiazhan.zhang@ggimage.com>
- Loading branch information
1 parent
eff7472
commit 3884845
Showing
24 changed files
with
629 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| # Load failed | ||
|
|
||
| {{showError ? "Don't worry, the darkness will pass." : "In life, failure is inevitable."}} | ||
|
|
||
| ```html | ||
| <n-button | ||
| type="primary" | ||
| @click="showError = !showError" | ||
| style="margin-bottom:10px" | ||
| >{{showError ? "To repair the image" : "Destroy the image"}}</n-button | ||
| > | ||
| <n-space> | ||
| <div style="margin-right: 10px"> | ||
| <n-tag type="success"> Default style </n-tag> | ||
| <div> | ||
| <n-image | ||
| width="100" | ||
| :src="showError ? 'http://www.yi-schoo/logo.jpg' : 'http://www.yi-school.top/logo.jpg'" | ||
| :canPreview="false" | ||
| ></n-image> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <n-tag type="success"> Error slot style </n-tag> | ||
| <div> | ||
| <n-image | ||
| width="200" | ||
| height="200" | ||
| :src="showError ? 'http://www.yi-schoo/logo.jpg' : 'http://www.yi-school.top/logo.jpg'" | ||
| :canPreview="false" | ||
| > | ||
| <template #errorbox> | ||
| <n-result | ||
| status="404" | ||
| size="small" | ||
| title="404 Resources do not exist" | ||
| > | ||
| </n-result> | ||
| </template> | ||
| </n-image> | ||
| </div> | ||
| </div> | ||
| </n-space> | ||
| ``` | ||
|
|
||
| ```js | ||
| import { defineComponent, ref } from 'vue' | ||
|
|
||
| export default defineComponent({ | ||
| setup () { | ||
| const showError = ref(false) | ||
| return { | ||
| showError | ||
| } | ||
| } | ||
| }) | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| # Loading Image | ||
|
|
||
| This is just a demo of the loading effect. The component will automatically display the loading effect when the image is loaded. It is `not recommended` to change the showLoadIng property unless you know exactly what you are doing! | ||
|
|
||
| ```html | ||
| <n-button type="primary" @click="loadImg" style="margin-bottom:10px" | ||
| >{{showLoadIng ? "Finished loading" : "Show loading"}}</n-button | ||
| > | ||
| <n-space> | ||
| <div style="margin-right: 10px"> | ||
| <n-tag type="success"> Default style </n-tag> | ||
| <div> | ||
| <n-image | ||
| width="100" | ||
| src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" | ||
| :canPreview="false" | ||
| ref="nImageRef1" | ||
| ></n-image> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <n-tag type="success"> Loading slot style </n-tag> | ||
| <div> | ||
| <n-image | ||
| width="200" | ||
| src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" | ||
| :canPreview="false" | ||
| ref="nImageRef2" | ||
| > | ||
| <template #loading> | ||
| <n-progress type="circle" :percentage="percentage" /> | ||
| </template> | ||
| </n-image> | ||
| </div> | ||
| </div> | ||
| </n-space> | ||
| ``` | ||
|
|
||
| ```js | ||
| import { defineComponent, ref } from 'vue' | ||
|
|
||
| export default defineComponent({ | ||
| setup () { | ||
| const nImageRef1 = ref(null) | ||
| const nImageRef2 = ref(null) | ||
| const percentage = ref(0) | ||
| const TimeFun = ref(null) | ||
| const showLoadIng = ref(false) | ||
| return { | ||
| loadImg () { | ||
| nImageRef1.value.showLoadIng = !showLoadIng.value | ||
| nImageRef2.value.showLoadIng = !showLoadIng.value | ||
| showLoadIng.value = !showLoadIng.value | ||
| if (showLoadIng.value) { | ||
| TimeFun.value = setInterval(() => { | ||
| percentage.value = | ||
| percentage.value < 100 ? percentage.value + 1 : 100 | ||
| }, 1000) | ||
| } else { | ||
| clearInterval(TimeFun.value) | ||
| percentage.value = 0 | ||
| } | ||
| }, | ||
| nImageRef1, | ||
| nImageRef2, | ||
| percentage, | ||
| showLoadIng | ||
| } | ||
| } | ||
| }) | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| # 加载失败 | ||
|
|
||
| {{showError ? "别担心，柳暗花明又一村。" : "人生嘛，失败总是难免的。"}} | ||
|
|
||
| ```html | ||
| <n-button | ||
| type="primary" | ||
| @click="showError = !showError" | ||
| style="margin-bottom:10px" | ||
| >{{showError ? "修复一下" : "干掉图片"}}</n-button | ||
| > | ||
| <n-space> | ||
| <div style="margin-right: 10px"> | ||
| <n-tag type="success"> 默认样式 </n-tag> | ||
| <div> | ||
| <n-image | ||
| width="100" | ||
| :src="showError ? 'http://www.yi-schoo/logo.jpg' : 'http://www.yi-school.top/logo.jpg'" | ||
| :canPreview="false" | ||
| ></n-image> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <n-tag type="success"> error插槽样式 </n-tag> | ||
| <div> | ||
| <n-image | ||
| width="200" | ||
| height="200" | ||
| :src="showError ? 'http://www.yi-schoo/logo.jpg' : 'http://www.yi-school.top/logo.jpg'" | ||
| :canPreview="false" | ||
| > | ||
| <template #errorbox> | ||
| <n-result status="404" size="small" title="404 资源不存在"> | ||
| </n-result> | ||
| </template> | ||
| </n-image> | ||
| </div> | ||
| </div> | ||
| </n-space> | ||
| ``` | ||
|
|
||
| ```js | ||
| import { defineComponent, ref } from 'vue' | ||
|
|
||
| export default defineComponent({ | ||
| setup () { | ||
| const showError = ref(false) | ||
| return { | ||
| showError | ||
| } | ||
| } | ||
| }) | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.