关于文件（图片）类型的jsonschema编写体验、表单面板的UI及交互体验的一点提议。 #52
Comments
|
其实原本的设计，是希望如果需要符合业务的场景可以去定义自己的 提议1
所以推荐的解决方案，是封装你自己的upload，可以包含你的 并且配置也会像下面这样简单，这样也不会打破 "imgUrl": {
"title": "单个图片",
"type": "string",
"ui:widget": "YourUploadImg" // 自定义你的上传图片
}
// 注册一个全局组件
Vue.component('YourUploadImg', {
render(h) {
return h('a-upload', {
...
})
}
})提议2上面已经提到了，可以封装到你的 upload 组件中，比如直接使用现有的 Vue.component('my-upload', {
functional: true,
render: function (h, context) {
return h(
'UploadWidget',
{
...context.data,
props: {
action: 'https://www..w.w.w/upload',
...context.data.props
}
},
context.children
)
}
}) |
|
写了个自定义widget，此时该值如何修改到 formData.imgUrl ? "imgUrl": {
"title": "单个图片",
"type": "string",
"ui:widget": "JsonSchemaImageWidget"
}<template>
<div>
<a-upload
name="avatar"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
:beforeUpload="uploadFile"
>
<img style="width: 100%" v-if="image" :src="image" alt="avatar" />
<div v-else>
<loading-outlined v-if="loading" />
<plus-outlined v-else />
<div class="ant-upload-text">Upload</div>
</div>
</a-upload>
<a-input :value="image" @change="changeImage" />
</div>
</template>
<script>
import {
PlusOutlined,
LoadingOutlined,
} from '@ant-design/icons-vue';
import {ref} from 'vue'
import {putCOS} from "@/services/common";
export default {
name: 'JsonSchemaImageWidget',
props: {
},
components: {
PlusOutlined,
LoadingOutlined,
},
setup(props) {
const image = ref('');
const loading = ref(false);
const changeImage = (e) => {
image.value = e.target.value
}
const uploadFile = async(e) => {
loading.value = true;
const res = await putCOS(e);
image.value = res.location;
loading.value = false;
return Promise.reject();
}
return {
image,
changeImage,
uploadFile,
loading
}
}
};
</script>
|
|
<template>
<div>
<a-upload
name="avatar"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
:before-upload="uploadFile"
>
<img
v-if="image"
style="width: 100%"
:src="image"
alt="avatar"
/>
<div v-else>
<loading-outlined v-if="loading" />
<plus-outlined v-else />
<div class="ant-upload-text">Upload</div>
</div>
</a-upload>
<a-input
:value="image"
@change="changeImage"
/>
</div>
</template>
<script>
import {
PlusOutlined,
LoadingOutlined,
} from '@ant-design/icons-vue';
import { ref, computed } from 'vue';
export default {
name: 'JsonSchemaImageWidget',
components: {
PlusOutlined,
LoadingOutlined,
},
props: {
modelValue: {
type: String,
default: null
}
},
setup(props, { emit }) {
const loading = ref(false);
const image = computed({
get: () => props.modelValue,
set: (val) => {
emit('update:modelValue', val);
},
});
const changeImage = (e) => {
image.value = e.target.value;
};
const uploadFile = async (e) => {
loading.value = true;
image.value = 'https://ww.ww.w.w';
loading.value = false;
return Promise.resolve();
};
return {
image,
changeImage,
uploadFile,
loading
};
}
};
</script>
|
|
good, 有用。 再定义了一个颜色选择器 <template>
<div>
<a-input style="width: 150px" :value="color" @change="changeColor">
<template #addonAfter>
<a-input style="width: 40px" type="color" :value="color" @change="changeColor" />
</template>
</a-input>
</div>
</template>
<script>
import {computed} from 'vue'
export default {
name: 'JsonSchemaColorPicker',
props: {
modelValue: {
type: String,
default: null
}
},
setup(props, { emit }) {
const color = computed({
get: () => props.modelValue,
set: (val) => {
emit('update:modelValue', val);
},
});
const changeColor = (e) => {
color.value = e.target.value
}
return {
color,
changeColor,
}
}
};
</script>
|
|
奈斯，vue3 antd 没有提供 color picker，所以就使用了原生的 ，这样挺好，到时候可以更新在后续版本默认的format color中 。 另外上面使用 <template>
<div>
<a-input
v-model:value="color"
style="width: 150px"
>
<template #addonAfter>
<a-input
v-model:value="color"
style="width: 40px"
type="color"
/>
</template>
</a-input>
</div>
</template>
<script>
import { computed } from 'vue';
export default {
name: 'JsonSchemaColorPicker',
props: {
modelValue: {
type: String,
default: null
}
},
setup(props, { emit }) {
const color = computed({
get: () => props.modelValue,
set: (val) => {
emit('update:modelValue', val);
},
});
return {
color
};
}
};
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
文件是比较特殊的类型，其中图片甚之。
目前图片类型json schema书写如下：
表单面板展示如下：
提议1
提议2
以作者的活动编辑器来讲，文件的上传是否可以交到这一层（编辑器开发者、动态表单方案采纳者？）统一处理，而无需组件开发者重复填写ui:action地址。
这样的支持，对于可视化（组件化）中台来讲，组件开发者会轻松许多。
😃 盼回复~
The text was updated successfully, but these errors were encountered: