Skip to content

Commit

Permalink
perf: image-format支持预览原图
Browse files Browse the repository at this point in the history 
#123
  • Loading branch information
@greper
greper committed Dec 12, 2022
1 parent d2c7c90 commit 5b94c17
Show file tree
Hide file tree
Showing 9 changed files with 145 additions and 79 deletions.
2 changes: 1 addition & 1 deletion packages/fast-admin/fs-admin-antdv
Submodule fs-admin-antdv updated 4 files
+1 −1 src/style/fix-windicss.less
+2 −1 src/views/crud/basis/compute-more/crud.jsx
+12 −1 src/views/crud/component/uploader/form/crud.jsx
+6 −1 src/views/crud/feature/search/crud.jsx
14 changes: 13 additions & 1 deletion packages/fast-crud/src/components/basic/fs-button.less
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,16 @@
.fs-button {
.fs-button-icon{
margin-right: 2px;
&.anticon{
margin-right: 0;
}
}
.fs-button-icon-right{
margin-left: 2px;
&.anticon{
margin-right: 0;
}
}
&.is-thin {
&.el-button--small,
&.el-button--small.is-round {
Expand All @@ -21,4 +33,4 @@
align-items: center;
justify-content: center;
}
}
}
20 changes: 11 additions & 9 deletions packages/fast-crud/src/components/basic/fs-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default defineComponent({
/**
* 右边的图标
*/
iconRight: { type: String, default: "", required: false },
iconRight: { type: [String, Object], default: "", required: false },
/**
* 是否圆形按钮，text需配置为null
*/
Expand All @@ -32,15 +32,15 @@ export default defineComponent({
render() {
const { ui } = useUi();
const icon: string | null | undefined | object = this.icon;
const iconRight: string | null | undefined = this.iconRight;
const iconRender = () => {
const iconRight: string | null | undefined | object = this.iconRight;
const iconRender = (icon, iconClass = "fs-button-icon") => {
if (icon == null) {
return;
}
if (typeof icon === "string") {
return <fs-icon icon={icon} />;
return <fs-icon icon={icon} class={iconClass} />;
} else {
return <fs-icon {...icon} />;
return <fs-icon {...icon} class={iconClass} />;
}
};
const isIconSlot = ui.type !== "element";
Expand All @@ -53,7 +53,7 @@ export default defineComponent({
slots.default = () => {
const children: any = [];
if (icon && !isIconSlot && !isIconProp) {
children.push(iconRender());
children.push(iconRender(icon));
}
if (this.$slots.default) {
children.push(this.$slots.default());
Expand All @@ -62,18 +62,20 @@ export default defineComponent({
children.push(this.text);
}
if (iconRight) {
children.push(<fs-icon icon={iconRight} />);
children.push(iconRender(iconRight, "fs-button-icon-right"));
}
return children;
};
}
if (icon) {
if (isIconSlot && !slots["icon"]) {
//@ts-ignore
slots["icon"] = iconRender;
slots["icon"] = () => {
return iconRender(icon);
};
} else if (isIconProp && !slots["icon"]) {
//@ts-ignore
iconProp = iconRender();
iconProp = iconRender(icon);
}
}

Expand Down
9 changes: 9 additions & 0 deletions packages/fast-extends/src/uploader/components/fs-file-uploader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ export default {
},
/**
* 返回值类型
* 支持：`[url,key,object]`
*/
valueType: {
type: String, // url ,key, object
Expand Down Expand Up @@ -482,6 +483,14 @@ export default {
display: none;
}
}
.ant-upload-list-item-actions{
display: flex;
align-items: center;
> a{
display: flex;
align-items: center;
}
}
.el-upload{
justify-content: left;
Expand Down
120 changes: 79 additions & 41 deletions packages/fast-extends/src/uploader/components/fs-images-format.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,31 @@
<div class="fs-image-format">
<component :is="$fsui.imageGroup.name" v-bind="wrapper">
<component
:is="$fsui.image.name"
v-for="url in computedUrls"
:key="url"
class="fs-image-item"
:src="url"
v-bind="binding"
:is="$fsui.image.name"
v-for="item in computedImageList"
:key="item.src"
class="fs-image-item"
v-bind="item"
>
<template #placeholder>
<div class="fs-image-slot">
<fs-loading :loading="true" />
<fs-loading :loading="true"/>
</div>
</template>

<template #error>
<div class="fs-image-slot">
<img :src="error" style="max-width: 50%" />
<img :src="error" style="max-width: 50%"/>
</div>
</template>
</component>
</component>
</div>
</template>

<script>
<script lang="ts">
import {computed} from 'vue'
import {useUi} from '@fast-crud/fast-crud'
// 图片行展示组件
export default {
name: "FsImagesFormat",
Expand All @@ -39,31 +40,42 @@ export default {
type: [String, Array],
require: true
},
/**
* 加载错误时的图片
*/
error: {
default:
"data:image/png;base64,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"
"data:image/png;base64,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"
},
// 构建下载url方法
/**
* 构建预览大图的方法
*/
buildPreviewUrl: {
type: Function,
default: function ({url,index}) {
return url;
}
},
/**
* 构建图片下载url的方法
*/
buildUrl: {
type: Function,
default: function (value) {
return value;
}
}
},
data() {
return {};
},
computed: {
computedUrls() {
const urls = [];
if (this.modelValue == null || this.modelValue === "") {
setup(props, ctx) {
const computedUrls = computed(() => {
const urls:any = [];
if (props.modelValue == null || props.modelValue === "") {
return urls;
}
if (typeof this.modelValue === "string") {
urls.push(this.modelValue);
} else if (this.modelValue instanceof Array) {
for (const item of this.modelValue) {
if (typeof props.modelValue === "string") {
urls.push(props.modelValue);
} else {
for (const item of props.modelValue) {
if (item == null) {
continue;
}
Expand All @@ -73,33 +85,51 @@ export default {
urls.push(item);
}
}
} else if (this.modelValue.url) {
urls.push(this.modelValue.url);
}
if (!this.buildUrl) {
if (!props.buildUrl) {
return urls;
}
const arr = [];
const buildUrls:any = [];
for (const url of urls) {
arr.push(this.buildUrl(url));
buildUrls.push(props.buildUrl(url));
}
return arr;
},
return buildUrls;
})
binding() {
const preview = this.$fsui.image.buildPreviewList(this.computedUrls);
return {
fit: "contain",
...this.$attrs,
...preview
};
const {ui} = useUi()
const computedImageList = computed(() => {
const imageList:string[] = []
const previewUrls:string[] = []
for (let i = 0; i < computedUrls.value.length; i++) {
const url = computedUrls.value[i]
previewUrls[i] = props.buildPreviewUrl({
url,index:i
})
}
for (let i = 0; i < computedUrls.value.length; i++) {
const url = computedUrls.value[i]
const previewUrl =previewUrls[i]
const preview = ui.image.buildPreviewBind({
url,
urls: computedUrls.value,
previewUrl,
previewUrls,
index:i
});
imageList.push( {
fit: "contain",
src: url,
...ctx.attrs,
...preview
})
}
return imageList
})
return {
computedImageList
}
},
methods: {
handleClick() {
// this.$emit('input', !this.modelValue)
}
}
};
</script>
<style lang="less">
Expand All @@ -109,17 +139,25 @@ export default {
flex-wrap: wrap;
justify-content: center;
align-items: center;
.fs-box{
display: flex;
align-items: center;
}
.fs-image-item {
border: 1px solid #eee;
margin: 0 1px;
object-fit: fill;
}
.image-slot {
display: flex;
align-items: center;
justify-content: center;
// height: 100%;
}
.el-image-viewer__close {
color: #fff;
}
Expand Down
9 changes: 7 additions & 2 deletions packages/ui/ui-antdv/src/antdv.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -525,8 +525,13 @@ export class Antdv implements UiInterface {
};
image: ImageCI = {
name: "a-image",
buildPreviewList: () => {
return {};
buildPreviewBind: ({ url, urls, previewUrl, previewUrls }) => {
debugger;
return {
preview: {
src: previewUrl
}
};
}
};
progress: ProgressCI = {
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/ui-element/src/element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -448,8 +448,8 @@ export class Element implements UiInterface {
};
image: ImageCI = {
name: "el-image",
buildPreviewList: urls => {
return { "preview-src-list": urls };
buildPreviewBind: ({ url, urls, previewUrl, previewUrls, index }) => {
return { "preview-src-list": previewUrls, "initial-index": index };
}
};
progress: ProgressCI = {
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/ui-interface/src/ui-interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ export interface DropdownItemCI extends CI {
}
export type ImageGroupCI = CI;
export interface ImageCI extends CI {
buildPreviewList;
buildPreviewBind;
}
export type ProgressCI = CI;
export interface LoadingCI extends CI {
Expand Down
Loading

0 comments on commit 5b94c17

Please sign in to comment.