mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-22 14:55:26 -04:00
daniel.xiao
348 lines
11 KiB
JavaScript
Executable File
348 lines
11 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>checkbox 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.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/checkbox.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(/getItems/, function(options) {
|
||
return { result: [{ id: 1, label: 'iphone' }, { id: 2, label: 'xiaomi' }, { id: 3, label: 'oppo' }] };
|
||
});
|
||
|
||
Vue.use(vueNcform, { extComponents: { object: object.default, checkbox: checkbox.default }, lang: lang === 'cn' ? 'zh_cn' : 'en' });
|
||
|
||
let formSchemas = [
|
||
{
|
||
title: {
|
||
cn: '默认状态',
|
||
en: 'Default'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
ok: {
|
||
type: 'boolean',
|
||
ui: {
|
||
widget: 'checkbox'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `支持的数据类型为：boolean 和 array`,
|
||
en: `Supported data types: boolean and array`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '提供值',
|
||
en: 'Provide value'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
ok: {
|
||
type: 'boolean',
|
||
value: true,
|
||
ui: {
|
||
widget: 'checkbox'
|
||
}
|
||
}
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
layout: 'h'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] readonly: 只读状态',
|
||
en: '[ATTR] readonly: read-only state'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
ok: {
|
||
type: 'boolean',
|
||
ui: {
|
||
readonly: true,
|
||
widget: 'checkbox'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `readonly：当没选中任何值，无展示值`,
|
||
en: `readonly: When no value is selected, no display value.`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] disabled: 禁用状态',
|
||
en: '[ATTR] disabled: disable state'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
ok: {
|
||
type: 'boolean',
|
||
ui: {
|
||
widget: 'checkbox',
|
||
disabled: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] enumSource: 可选项本地数据源.',
|
||
en: '[ATTR] enumSource: local data source.'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
colors: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'checkbox',
|
||
widgetConfig: {
|
||
enumSource: [{ value: 1, label: 'red' }, { value: 2, label: 'green' }, { value: 3, label: 'blue' }]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] enumSourceRemote: 可选项远程数据源。',
|
||
en: '[ATTR] enumSourceRemote: remote data source. '
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
phones: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'checkbox',
|
||
widgetConfig: {
|
||
itemValueField: 'id', // 值字段
|
||
itemLabelField: 'label', // 显示字段
|
||
enumSourceRemote: {
|
||
remoteUrl: '/api/radio/getItems', // 如果是远程访问，则填写该url
|
||
resField: 'result'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `
|
||
itemValueField: 数据源的每一项显示的值的字段，例子中就是id
|
||
|
||
itemLabelField: 数据源的每一项显示的标签的字段，例子中就是label
|
||
|
||
remoteUrl: 远程接口url
|
||
|
||
resField: 数据源读取返回数据的哪个字段，如例子返回{result: [{ id: 1, label: "iphone" }, ...]}，则填写result
|
||
`,
|
||
en: `
|
||
itemValueField: The field of the value displayed by each item of the data source, in the example is "id"
|
||
|
||
itemLabelField: The field of the label displayed for each item of the data source, in the example is "label"
|
||
|
||
remoteUrl: remote api url
|
||
|
||
resField: Which field of the response data as the data source, as the example returns {result: [{ id: 1, label: "iphone" }, ...]}, then fill in "result"
|
||
`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] selectAll: 是否显示全选.',
|
||
en: '[ATTR] selectAll: whether to show all selections.'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
colors: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'checkbox',
|
||
widgetConfig: {
|
||
selectAll: true,
|
||
enumSource: [{ value: 1, label: 'red' }, { value: 2, label: 'green' }, { value: 3, label: 'blue' }]
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] type: 显示类型. 可选值 [checkbox | button]，默认值 checkbox',
|
||
en: '[ATTR] type: display type. optional value: [checkbox | button], default is checkbox'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
colors: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'checkbox',
|
||
widgetConfig: {
|
||
type: 'button',
|
||
enumSource: [{ value: 1, label: 'red' }, { value: 2, label: 'green' }, { value: 3, label: 'blue' }]
|
||
}
|
||
}
|
||
}
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
layout: 'h'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] arrangement: 可选项展示排列方式. 可选值 [v | h]，默认值 h',
|
||
en: '[ATTR] arrangement: Optional display arrangement. Optional value: [v | h], default is h'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
colors: {
|
||
type: 'array',
|
||
ui: {
|
||
widget: 'checkbox',
|
||
widgetConfig: {
|
||
arrangement: 'v',
|
||
enumSource: [{ value: 1, label: 'red' }, { value: 2, label: 'green' }, { value: 3, label: 'blue' }]
|
||
}
|
||
}
|
||
}
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
layout: 'h'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
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: 'array',
|
||
ui: {
|
||
description: 'dx: ({{$temp.selectedItem}} || []).map(item => item.desc).join("\\n")',
|
||
widget: 'checkbox',
|
||
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.`
|
||
}
|
||
}
|
||
];
|
||
|
||
// 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>
|