mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-19 18:23:32 -04:00
Dmitry Nagibin
447 lines
15 KiB
JavaScript
Executable File
447 lines
15 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>select 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/select.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(/getMoney/, function(options) {
|
||
let params = url('?', options.url) || {};
|
||
let result = [{ id: 1, name: '1 yuan' }, { id: 2, name: '2 yuan' }];
|
||
return result.filter(item => !params.keyword || item.name.indexOf(params.keyword) >= 0);
|
||
});
|
||
|
||
Vue.use(vueNcform, { extComponents: { object: object.default, select: select.default }, lang: lang === 'cn' ? 'zh_cn' : 'en' });
|
||
|
||
let formSchemas = [
|
||
{
|
||
title: {
|
||
cn: '默认状态',
|
||
en: 'Default'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'boolean',
|
||
ui: {
|
||
widget: 'select'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '提供值',
|
||
en: 'Provide value'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'boolean',
|
||
value: true,
|
||
ui: {
|
||
widget: 'select'
|
||
}
|
||
}
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
layout: 'h'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] readonly: 只读状态',
|
||
en: '[ATTR] readonly: read-only state'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'boolean',
|
||
ui: {
|
||
widget: 'select',
|
||
readonly: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] disabled: 禁用状态',
|
||
en: '[ATTR] disabled: disable state'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'boolean',
|
||
ui: {
|
||
widget: 'select',
|
||
disabled: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] placeholder: 占位显示',
|
||
en: '[ATTR] placeholder: placeholder display'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'string',
|
||
ui: {
|
||
widget: 'select',
|
||
widgetConfig: {
|
||
placeholder: 'select your choice',
|
||
enumSource: [{ value: 1, label: 'option1' }, { value: 2, label: 'option2' }]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] clearable: 带清除按钮。默认值是false',
|
||
en: '[ATTR] clearable: With clear button. Default is false'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'string',
|
||
ui: {
|
||
widget: 'select',
|
||
widgetConfig: {
|
||
clearable: true,
|
||
enumSource: [{ value: 1, label: 'option1' }, { value: 2, label: 'option2' }]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] multiple: 是否支持多选. 默认值: false',
|
||
en: '[ATTR] multiple: Whether to support multiple selection. Default is false'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'select',
|
||
widgetConfig: {
|
||
multiple: true,
|
||
enumSource: [{ value: 1, label: 'option1' }, { value: 2, label: 'option2' }, { value: 3, label: 'option3' }]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] filterable: 过滤器. 默认值: false',
|
||
en: '[ATTR] filterable: filter options. Default is false'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'string',
|
||
ui: {
|
||
widget: 'select',
|
||
widgetConfig: {
|
||
filterable: true,
|
||
enumSource: [{ value: 1, label: 'option1' }, { value: 2, label: 'option2' }, { value: 3, label: 'option3' }]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] itemTemplate: 自定义模板',
|
||
en: '[ATTR] itemTemplate: item custom template'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'string',
|
||
ui: {
|
||
widget: 'select',
|
||
widgetConfig: {
|
||
itemTemplate: '<span>{{item.label}} : {{item.value}}</span>',
|
||
enumSource: [{ value: 1, label: 'option1' }, { value: 2, label: 'option2' }, { value: 3, label: 'option3' }]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] enumSource: 可选项使用本地数据源.',
|
||
en: '[ATTR] enumSource: use local data source as option items data source'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'string',
|
||
ui: {
|
||
widget: 'select',
|
||
widgetConfig: {
|
||
enumSource: [{ value: 1, label: 'option1' }, { value: 2, label: 'option2' }, { value: 3, label: 'option3' }]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] enumSourceRemote: 使用远程数据源',
|
||
en: '[ATTR] enumSourceRemote: use remote data source'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'number',
|
||
ui: {
|
||
widget: 'select',
|
||
widgetConfig: {
|
||
itemLabelField: 'name', // 项数据表示label的字段
|
||
itemValueField: 'id', // 项数据表示value的字段
|
||
enumSourceRemote: {
|
||
// 远程数据源
|
||
remoteUrl: '/api/test/getMoney', // 如果是远程访问，则填写该url
|
||
paramName: 'keyword', // 请求参数名，默认是keyword
|
||
otherParams: {}, // 其它请求的参数，支持字符串表达式
|
||
resField: '', // 响应结果的字段
|
||
selectFirstItem: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `
|
||
itemLabelField: 数据源的每一项显示的标签的字段，默认值是label. 例子中就是name
|
||
|
||
itemValueField: 数据源的每一项显示的值的字段，默认值是value. 例子中就是id
|
||
|
||
remoteUrl: 远程接口url
|
||
|
||
paramName: 请求参数名，默认是keyword
|
||
|
||
otherParams: 其它请求参数，值支持 dx表达式 。如{countryId: 'dx: {{$root.countryId}}'}
|
||
|
||
resField: 数据源读取返回数据的哪个字段，如例子返回[{ id: 1, name: '1元' }, ...]，则填写空字符串
|
||
|
||
selectFirstItem: 默认选中第一项， 默认值是false
|
||
`,
|
||
en: `
|
||
itemLabelField: The field of the label displayed by each item of the data source. default is "label". In the example is "name"
|
||
|
||
itemValueField: The field of the value displayed by each item of the data source. default is "value". In the example is "id"
|
||
|
||
remoteUrl: remote api url
|
||
|
||
paramName: request parameter name, default is "keyword"
|
||
|
||
otherParams: Other request parameters, support dx expressions. Such as {countryId: 'dx: {{$root.countryId}}'}
|
||
|
||
resField: Which field of the response data as the data source, as the example returns [{ id: 1, name: '1 yuan' }, ...], then fill in ""
|
||
|
||
selectFirstItem: whether tp selecte the first item by default, default is false
|
||
`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] filterLocal: 只搜索本地数据. 默认值: true',
|
||
en: '[ATTR] filterLocal: only searches for local data. Default is true'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'select',
|
||
widgetConfig: {
|
||
filterLocal: true,
|
||
filterable: true,
|
||
itemLabelField: 'name', // 项数据表示label的字段
|
||
itemValueField: 'id', // 项数据表示value的字段
|
||
enumSourceRemote: {
|
||
// 远程数据源
|
||
remoteUrl: '/api/test/getMoney' // 如果是远程访问，则填写该url
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `例子中数据源是远程数据源，但输入keyword时不会每次都从远程加载数据，只会从第一次从远程加载的数据源中进行筛选`,
|
||
en: `The data source in the example is a remote data source, but when you enter the keyword, it will not load the data from the remote every time, only from the data source that is loaded remotely from the first time.`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] itemDataKey: 选中项的数据的字段，可通过 {{$temp.[itemDataKey]}} 访问',
|
||
en: "[ATTR] itemDataKey: The key of the selected item's data, can be accessed by {{$temp[itemDataKey]}}"
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
choice: {
|
||
type: 'string',
|
||
ui: {
|
||
description: 'dx: {{$temp.selectedItem.desc}}',
|
||
widget: 'select',
|
||
widgetConfig: {
|
||
itemDataKey: 'selectedItem',
|
||
enumSource: [
|
||
{
|
||
value: '1',
|
||
label: 'ncform',
|
||
desc: 'ncform is a very nice configuration generation way to develop forms'
|
||
},
|
||
{
|
||
value: '2',
|
||
label: 'daniel',
|
||
desc: "Daniel is the author of ncform"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `可通过该 itemDataKey 去访问选中项的除了 value 和 label 之外的其它字段的值`,
|
||
en: `ItemDataKey can be used to access the values of other fields except the "value" and "label" of the selected item.`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] Size: 尺寸. 可选值：[medium | small | mini]',
|
||
en: '[ATTR] Size: Options：[medium | small | mini]'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
count: {
|
||
type: 'boolean',
|
||
ui: {
|
||
widget: 'select',
|
||
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>
|