mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-19 18:23:32 -04:00
Dmitry Nagibin
651 lines
21 KiB
JavaScript
Executable File
651 lines
21 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>input widget</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>
|
||
</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.11/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/@vxcontrol/ncform-common/dist/ncformCommon.js"></script>
|
||
<script type="text/javascript" src="../../node_modules/@vxcontrol/ncform/dist/vueNcform.min.js"></script>
|
||
<script type="text/javascript" src="../../dist/input.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(/getDomains/, function(options) {
|
||
return [{ id: 1, label: '.cn' }, { id: 2, label: '.com' }, { id: 3, label: '.net' }];
|
||
});
|
||
Mock.mock(/getKeywords/, function(options) {
|
||
let params = url('?', options.url) || {};
|
||
console.log('getKeywords:', params);
|
||
let result = [{ value: 'oppo' }, { value: 'xiaomi' }, { value: 'iphone' }, { value: 'iphone x' }, { value: 'iphone 6s' }];
|
||
return { data: result.filter(item => item.value.indexOf(params.keyword) >= 0) };
|
||
});
|
||
|
||
Vue.use(vueNcform, { extComponents: { object: object.default, input: input.default }, lang: lang === 'cn' ? 'zh_cn' : 'en' });
|
||
|
||
let formSchemas = [
|
||
{
|
||
title: {
|
||
cn: '默认状态',
|
||
en: 'Default'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
name: {
|
||
type: 'string'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '提供值',
|
||
en: 'Provide value'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
name: {
|
||
type: 'string',
|
||
value: 'daniel'
|
||
}
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
layout: 'h'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] readonly: 只读状态',
|
||
en: '[ATTR] readonly: read-only state'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
name: {
|
||
type: 'string',
|
||
ui: {
|
||
readonly: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] disabled: 禁用状态',
|
||
en: '[ATTR] disabled: disable state'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
name: {
|
||
type: 'string',
|
||
ui: {
|
||
disabled: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] placeholder: 占位显示',
|
||
en: '[ATTR] placeholder: placeholder display'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
name: {
|
||
type: 'string',
|
||
ui: {
|
||
placeholder: 'fill your name'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] type: 显示类型. 可选值：[text | number | password]',
|
||
en: '[ATTR] type: display type. Optional: [text | number | password]'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
password: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
type: 'password'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] trim: 前后去空格。默认值是true',
|
||
en: '[ATTR] trim: remove the spaces before and after. Default is true'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
name: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
trim: false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] clearable: 当有内容时显示清空按钮。默认值是false',
|
||
en: '[ATTR] clearable: With clear button. Default is false'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
name: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
clearable: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] prefixIcon: 前图标样式名',
|
||
en: '[ATTR] prefixIcon: pre-icon class name'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
keyword: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
prefixIcon: 'el-icon-search'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] suffixIcon: 后图标样式名',
|
||
en: '[ATTR] suffixIcon: suffix-icon class name'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
date: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
suffixIcon: 'el-icon-date'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] autocomplete 以及 enumSource: 根据输入从本地加载匹配的提示信息',
|
||
en: '[ATTR] autocomplete and enumSource: load matching hints locally based on input'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
keyword: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
autocomplete: {
|
||
itemValueField: 'keyword', // 项数据表示value的字段
|
||
itemTemplate: '<span>-> {{item.keyword}}</span>',
|
||
enumSource: [{ keyword: 'iphone1' }, { keyword: 'iphone x' }, { keyword: 'oppo' }],
|
||
immediateShow: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `
|
||
itemTemplate: 显示数据项的模板，如"<span>-> {{item.keyword}}</span>"
|
||
|
||
itemValueField: 数据源的每一项显示的标签的字段，默认值是value. 例子中就是keyword
|
||
|
||
immediateShow: 是否立即显示，如果为false则当输入关键字才显示。默认为false
|
||
`,
|
||
en: `
|
||
itemTemplate: A template that displays the data item, such as "<span>-> {{item.keyword}}</span>"
|
||
|
||
itemValueField: The field of the label displayed by each item of the data source. The default value is "value". In the example, it is "keyword".
|
||
|
||
immediateShow: Whether to display immediately, if false, displayed when the keyword is entered. Default is false
|
||
`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] autocomplete.enumSourceRemote: 根据输入从远程加载匹配的提示信息',
|
||
en: '[ATTR] autocomplete.enumSourceRemote: Load matching prompts from remote'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
keyword: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
autocomplete: {
|
||
itemValueField: 'value', // 项数据表示value的字段
|
||
itemTemplate: '',
|
||
enumSourceRemote: {
|
||
remoteUrl: '/api/input/getKeywords', // 如果是远程访问，则填写该url
|
||
paramName: 'keyword', // 请求参数名，默认是keyword
|
||
otherParams: { date: 'dx: +new Date()' }, // 其它请求参数，值支持 dx表达式
|
||
resField: 'data' // 响应结果的字段
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `
|
||
remoteUrl: 远程接口url
|
||
|
||
paramName: 请求参数名，默认是keyword
|
||
|
||
otherParams: 其它请求参数，值支持 dx表达式
|
||
|
||
resField: 数据源读取返回数据的哪个字段，如例子返回{data: [{ value: 'iphone', label: 'iphone' }, ...]}，则填写data
|
||
`,
|
||
en: `
|
||
remoteUrl: remote api
|
||
|
||
paramName: request parameter name, default is "keyword"
|
||
|
||
otherParams: other request parameters. support "dx expressions"
|
||
|
||
resField: Which field of the response data as the data source, as the example returns {data: [{ value: 'iphone', label: 'iphone' }, ...]}, then fill in "data"
|
||
`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] compound.prependLabel: 组合Input的前置标签',
|
||
en: '[ATTR] compound.prependLabel: prepend label of compound Input'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
keyword: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
compound: {
|
||
prependLabel: 'http://'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] compound.appendLabel: 组合Input的后置标签',
|
||
en: '[ATTR] compound.appendLabel: append label of compound input'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
keyword: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
compound: {
|
||
appendLabel: 'go'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] compound.prependIcon: 前置图标样式',
|
||
en: '[ATTR] compound.prependIcon: pre-icon class name of compound input'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
keyword: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
compound: {
|
||
prependIcon: 'el-icon-search'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] compound.appendIcon: 后置图标样式',
|
||
en: '[ATTR] compound.appendIcon: append icon class name of compound input'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
keyword: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
compound: {
|
||
appendIcon: 'el-icon-search'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] compound.prependSelect: 前置下拉框 / 本地数据源',
|
||
en: '[ATTR] compound.prependSelect: pre-dropdown box / local data source'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'object',
|
||
ui: {
|
||
widget: 'input',
|
||
widgetConfig: {
|
||
modelField: 'name',
|
||
compound: {
|
||
prependSelect: {
|
||
// 前置下拉框，使用该种的数据必须是对象
|
||
itemLabelField: 'label', // 项数据表示label的字段
|
||
itemValueField: 'value', // 项数据表示value的字段
|
||
enumSource: [{ value: 1, label: 'Man' }, { value: 2, label: 'Woman' }], // 本地数据源
|
||
modelField: 'gender', // 用于绑定input value值的某个属性
|
||
placeholder: 'Select',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `
|
||
注意：
|
||
1. type必须为object类型
|
||
2. 必须指定 modelField 和 compound.prependSelect.modelField
|
||
`,
|
||
en: `
|
||
note:
|
||
1. type must be "object"
|
||
2. must specify modelField and compound.prependSelect.modelField
|
||
`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] compound.appendSelect: 后置下拉框 / 远程数据源',
|
||
en: '[ATTR] compound.appendSelect: post drop-down box / remote data source'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
site: {
|
||
type: 'object',
|
||
ui: {
|
||
widget: 'input',
|
||
widgetConfig: {
|
||
modelField: 'host',
|
||
compound: {
|
||
appendSelect: {
|
||
// 前置下拉框，使用该种的数据必须是对象
|
||
itemLabelField: 'label', // 项数据表示label的字段
|
||
itemValueField: 'id', // 项数据表示value的字段
|
||
enumSourceRemote: {
|
||
// 远程数据源
|
||
remoteUrl: '/api/input/getDomains', // 如果是远程访问，则填写该url
|
||
resField: '' // 响应结果的字段
|
||
},
|
||
modelField: 'domain', // 用于绑定input value值的某个属性
|
||
placeholder: '',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `
|
||
当返回数据即为显示的结果时，resField为空。如例子中返回结果为[{ id: 1, label: '.cn' }, ...]
|
||
`,
|
||
en: `
|
||
The resField is empty means the whole response data is the result of the display. As the example, the response data is [{ id: 1, label: '.cn' }, ...]
|
||
`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] upload',
|
||
en: '[ATTR] upload'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
fileUrl: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
type: 'file',
|
||
upload: {
|
||
uploadUrl: 'http://houyi-api-admin.vip.vip.com/adminII.php/Pic/upLoadPic', // 上传的地址
|
||
resField: 'data.data.url', // 获取返回结果的字段,
|
||
fileField: 'pic',
|
||
data: {
|
||
is_slices: 0
|
||
}, // 上传时附带的额外参数
|
||
accept: '.jpg,.png', // 接受上传的文件类型
|
||
constraint: {
|
||
// 约束
|
||
width: 100, // 图片宽度
|
||
height: 100, // 图片高度
|
||
sizeFixed: false, // 图片尺寸约束的大小是否按固定值，当为false时按比例
|
||
maxSize: 0, // 最大图片大小，单位KB，0代表不限
|
||
minSize: 0 // 最小图片大小，单位KB，0代表不限
|
||
},
|
||
uploadText: 'Upload', // 上传按钮的名称
|
||
headers: {
|
||
author: 'daniel'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `
|
||
注意：当type="file"时，upload属性的优先级最高
|
||
upload各字段的描述如下：
|
||
- uploadUrl：上传文件的地址
|
||
- resField：获取返回文件上传后的地址的字段
|
||
- fileField: 表示文件的字段，默认是file
|
||
- data：上传时附带的额外参数
|
||
- accept：接受上传的文件类型
|
||
- constraint：上传文件约束
|
||
- width： 图片宽度，仅图片类型有效
|
||
- height： 图片高度，仅图片类型有效
|
||
- sizeFixed： 图片尺寸约束的大小是否按固定值，当为false时按比例，默认为true
|
||
- maxSize：上传文件最大大小，默认值为0，代表不限，单位KB
|
||
- minSize：上传文件最小大小，默认值为0，代表不限，单位KB
|
||
- uploadText：上传按钮的名称，默认是"点击上传"
|
||
- headers: 设置上传的请求头部
|
||
`,
|
||
en: `
|
||
Note: When type="file", the "upload" attribute has the highest priority.
|
||
The description of each field of upload is as follows:
|
||
- uploadUrl: the upload url
|
||
- resField: the field that returns the uploaded file url
|
||
- fileField: indicates the field of the file. The default is "file".
|
||
- data: additional parameters attached to the upload
|
||
- accept: accept the uploaded file type
|
||
- constraint: upload file constraint
|
||
- width: image width, only image type is valid
|
||
- height: image height, only image type is valid
|
||
- sizeFixed: whether the image size constraint is by a fixed value, when it is false, it is proportional. default is true
|
||
- maxSize: The maximum size of the uploaded file. The default value is 0, which means no limit, the unit is KB.
|
||
- minSize: the minimum size of the uploaded file. The default value is 0, which means no limit, the unit is KB.
|
||
- uploadText: the name of the upload button, default is "click upload"
|
||
- headers: set the request headers for the upload
|
||
`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] updateOn: 触发值更新的时机，默认是输入变化即触发。可选值：["change", "blur"]',
|
||
en: '[ATTR] updateOn: timing of triggering value changes, the default is to trigger when value changed. Optional value: ["change", "blur"]'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
name: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
updateOn: 'blur'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] Size: 尺寸. 可选值：[medium | small | mini]',
|
||
en: '[ATTR] Size: Options: [medium | small | mini]'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
name: {
|
||
type: 'string',
|
||
ui: {
|
||
widgetConfig: {
|
||
size: 'mini'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
layout: 'h'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
];
|
||
|
||
// 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>
|