mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-22 06:45:23 -04:00
daniel.xiao
521 lines
16 KiB
JavaScript
Executable File
521 lines
16 KiB
JavaScript
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
|
||
<title>Component Example</title>
|
||
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="../demo.css" />
|
||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
|
||
|
||
<script>
|
||
var _hmt = _hmt || [];
|
||
(function() {
|
||
var hm = document.createElement("script");
|
||
hm.src = "https://hm.baidu.com/hm.js?027aa17f0e14133f0b8aa5f1f0af3ca7";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
})();
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
<!--演示区域-->
|
||
<div id="demo" v-cloak>
|
||
<div v-for="(item, idx) in formSchemas">
|
||
<h4 class="demo_title">{{ item.title }}</h4>
|
||
<div class="demo_item-wrapper">
|
||
<div>
|
||
<ncform :form-schema="item.schema" v-model="item.schema.value"></ncform>
|
||
<small>value: {{ item.schema.value }}</small>
|
||
</div>
|
||
<div>
|
||
<pre>{{ JSON.stringify(originFormSchemas[idx].schema.properties, null, 2) }}</pre>
|
||
<!-- <pre>{{JSON.stringify(item.schema, null, 2)}}</pre> -->
|
||
</div>
|
||
|
||
<div>
|
||
<pre>{{ item.detail }}</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/javascript" src="../../node_modules/lodash/lodash.min.js"></script>
|
||
<script type="text/javascript" src="../../node_modules/axios/dist/axios.min.js"></script>
|
||
<script type="text/javascript" src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
|
||
<script type="text/javascript" src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||
<script src="https://unpkg.com/mockjs"></script>
|
||
<script src="https://unpkg.com/js-url"></script>
|
||
<script type="text/javascript" src="../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
|
||
<script type="text/javascript" src="../../node_modules/@ncform/ncform/dist/vueNcform.js"></script>
|
||
<script type="text/javascript" src="../../dist/upload.js"></script>
|
||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
let lang = 'en';
|
||
|
||
if (location.search.indexOf('lang=cn') >= 0) {
|
||
lang = 'cn';
|
||
}
|
||
|
||
Mock.mock(/getFileInfo/, function(options) {
|
||
return { data: { name: 'shoe.jpg', url: '//user-gold-cdn.xitu.io/2019/3/15/1697f38df3ba0613?w=570&h=273&f=jpeg&s=40278' } };
|
||
});
|
||
|
||
Vue.use(vueNcform, { extComponents: { object: object.default, upload: upload.default }, lang: lang === 'cn' ? 'zh_cn' : 'en' });
|
||
|
||
let formSchemas = [
|
||
{
|
||
title: {
|
||
cn: '默认状态',
|
||
en: 'Default'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `支持的数据类型为：array`,
|
||
en: `Supported data type: array`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '提供值',
|
||
en: 'Provide value'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
value: [{ name: 'girl.jpg', url: '//user-gold-cdn.xitu.io/2019/3/15/1697f38df3ba0613?w=570&h=273&f=jpeg&s=40278' }],
|
||
ui: {
|
||
widget: 'upload'
|
||
}
|
||
}
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
layout: 'h'
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `
|
||
默认传入的文件列表数组必须含有这2个字段：
|
||
|
||
name：文件名
|
||
|
||
url：文件地址
|
||
`,
|
||
en: `
|
||
The default file list array must contain these 2 fields:
|
||
|
||
name: filename
|
||
|
||
url: file url
|
||
`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] readonly: 只读状态',
|
||
en: '[ATTR] readonly: read-only state'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
value: [],
|
||
ui: {
|
||
widget: 'upload',
|
||
readonly: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] disabled: 禁用状态',
|
||
en: '[ATTR] disabled: disable state'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
disabled: true,
|
||
widgetConfig: {
|
||
showFileList: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] uploadUrl: 上传的地址.',
|
||
en: '[ATTR] uploadUrl: upload api url'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo' // 上传的地址
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `thumbnail-mode 模式下此参数无效`,
|
||
en: `This parameter is invalid in thumbnail-mode mode`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] autoUpload: 是否在选取文件后立即进行上传. 默认 false',
|
||
en: '[ATTR] autoUpload: Whether to upload immediately after selecting the file. Default is false'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
autoUpload: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] data: 上传时附带的额外参数.',
|
||
en: '[ATTR] data: additional parameters attached to the upload.'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
data: {
|
||
a: 123,
|
||
b: 'sample'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] resField: 数据源读取返回文件数据的哪个字段. 例如： {name: "xx", url: "aaa"}',
|
||
en: '[ATTR] resField: Which field of the response data as the data source'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
resField: 'data' // 接口返回获取{name: 'xx', url: 'aaa'}结构的路径
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] fileNameField: 数据源读取返回带有文件数据的字段resField下的文件名字段. 默认 "name"',
|
||
en: '[ATTR] fileNameField: The field of the expression file name under the resField field in the response data. Default is "name"'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
resField: 'data', // 接口返回获取结构的路径
|
||
fileNameField: 'name' // 接口返回获取结构的路径
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `如果上传接口返回的结构数据无该字段，将使用原文件的上传名`,
|
||
en: `If the data returned by the upload api does not have this field, the upload name of the original file will be used.`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] fileUrlField: 数据源读取返回带有文件数据的字段resField下的 文件地址 字段. 默认 "url"',
|
||
en: '[ATTR] fileUrlField: The field of the expression file url under the resField field in the response data. Default is "url"'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
resField: 'data', // 接口返回获取结构的路径
|
||
fileUrlField: 'url' // 接口返回获取结构的路径
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `如果上传接口返回的结构数据无该字段，将使用原文件的blob地址`,
|
||
en: `If the data returned by the upload api does not have this field, the blob address of the original file will be used.`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] fileField: 表示文件的字段，默认是file',
|
||
en: '[ATTR] fileField: indicates the field of the file, default is file'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
resField: 'data', // 接口返回获取结构的路径
|
||
fileUrlField: 'url', // 接口返回获取结构的路径
|
||
fileField: 'file'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] showFileList: 是否显示已上传文件列表. 默认 false',
|
||
en: '[ATTR] showFileList: Whether to display the list of uploaded files. Default is false'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
value: [{ name: 'girl.jpg', url: '//user-gold-cdn.xitu.io/2019/3/15/1697f38df3ba0613?w=570&h=273&f=jpeg&s=40278' }],
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
showFileList: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] listType: 图片列表显示形式. 可选值 [text | picture]，默认值 text',
|
||
en: '[ATTR] listType: list display type. optional value [text | picture], default is text'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
value: [{ name: 'girl.jpg', url: '//user-gold-cdn.xitu.io/2019/3/15/1697f38df3ba0613?w=570&h=273&f=jpeg&s=40278' }],
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
showFileList: true, // 显示已上传文件列表
|
||
listType: 'picture'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `在开启 showFileList 的前提下，方可使用 listType`,
|
||
en: `you can use listType only the showFileList is true`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] drag: 是否启用拖拽上传. 默认值 false',
|
||
en: '[ATTR] drag: Whether to enable drag and drop upload. Default is false'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
drag: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] limit: 最大允许上传个数. 默认值为1',
|
||
en: '[ATTR] limit: Maximum number of uploads allowed. Default is 1'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
limit: 4
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] multiple: 是否支持多选文件.',
|
||
en: '[ATTR] multiple: Whether to support multiple files selection.'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
limit: 4,
|
||
multiple: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `在限制个数 limit > 1 的前提下，使用 multiple`,
|
||
en: `use multiple when limit > 1`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] accept: 接受上传的文件类型.',
|
||
en: '[ATTR] accept: accept the uploaded file type.'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
accept: '.jpg'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `thumbnail-mode 模式下此参数无效`,
|
||
en: `This parameter is invalid in thumbnail-mode mode`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] headers: 设置上传的请求头部.',
|
||
en: '[ATTR] headers: set the request headers for the upload.'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
files: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'upload',
|
||
widgetConfig: {
|
||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||
headers: {
|
||
author: 'daniel'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
];
|
||
|
||
// Bootstrap the app
|
||
new Vue({
|
||
el: '#demo',
|
||
data: {
|
||
formSchemas: getFormSchemas(),
|
||
originFormSchemas: getFormSchemas()
|
||
}
|
||
});
|
||
|
||
function getFormSchemas() {
|
||
return formSchemas.map(item => ({
|
||
title: item.title[lang],
|
||
schema: item.schema,
|
||
detail: item.detail ? item.detail[lang] : ''
|
||
}));
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|