mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-19 18:23:32 -04:00
Dmitry Nagibin
304 lines
8.3 KiB
JavaScript
Executable File
304 lines
8.3 KiB
JavaScript
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>object 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="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 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';
|
|
}
|
|
|
|
Vue.use(vueNcform, { extComponents: { input: input.default, object: object.default }, lang: lang === 'cn' ? 'zh_cn' : 'en' });
|
|
|
|
let formSchemas = [
|
|
{
|
|
title: {
|
|
cn: '默认状态',
|
|
en: 'Default'
|
|
},
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'object',
|
|
properties: {
|
|
firstname: {
|
|
type: 'string'
|
|
},
|
|
lastname: {
|
|
type: 'string'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: {
|
|
cn: '丰富显示',
|
|
en: 'Rich display'
|
|
},
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'object',
|
|
properties: {
|
|
name: {
|
|
type: 'string',
|
|
ui: {
|
|
label: 'Name',
|
|
placeholder: 'your name',
|
|
description: 'Fill your name please',
|
|
help: {
|
|
show: true,
|
|
text: '?',
|
|
content: 'The importance of filling in names'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
ui: {
|
|
widgetConfig: {
|
|
layout: 'h'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: {
|
|
cn: '多列',
|
|
en: 'Multi-column'
|
|
},
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'object',
|
|
properties: {
|
|
firstname: {
|
|
type: 'string',
|
|
ui: {
|
|
columns: 6
|
|
}
|
|
},
|
|
lastname: {
|
|
type: 'string',
|
|
ui: {
|
|
columns: 6
|
|
}
|
|
},
|
|
email: {
|
|
type: 'string',
|
|
ui: {
|
|
columns: 12
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: {
|
|
cn: '隐藏标题栏',
|
|
en: 'Hide legend'
|
|
},
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'object',
|
|
properties: {
|
|
firstname: {
|
|
type: 'string'
|
|
}
|
|
},
|
|
ui: {
|
|
showLegend: false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: {
|
|
cn: '[属性] layout: 布局类型，垂直即为label上control下，水平即为label左control右，可选值 [v | h]',
|
|
en:
|
|
'[ATTR] layout: layout type, vertical is the control under label, horizontal is label on the left side of the control, optional value [v | h]'
|
|
},
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'object',
|
|
properties: {
|
|
firstname: {
|
|
type: 'string'
|
|
},
|
|
lastname: {
|
|
type: 'string'
|
|
}
|
|
},
|
|
ui: {
|
|
widgetConfig: {
|
|
layout: 'h'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: {
|
|
cn: '[属性] labelWidth: 标签的宽度，当布局类型为h时有效',
|
|
en: '[ATTR] labelWidth: the width of the label, valid when the layout type is h'
|
|
},
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'object',
|
|
properties: {
|
|
firstname: {
|
|
type: 'string'
|
|
},
|
|
lastname: {
|
|
type: 'string'
|
|
}
|
|
},
|
|
ui: {
|
|
widgetConfig: {
|
|
layout: 'h',
|
|
labelWidth: '150px'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: {
|
|
cn: '[属性] collapsed: 是否默认折叠。默认为false',
|
|
en: '[ATTR] collapsed: whether to collapse by default, default is false'
|
|
},
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'object',
|
|
properties: {
|
|
firstname: {
|
|
type: 'string'
|
|
},
|
|
lastname: {
|
|
type: 'string'
|
|
}
|
|
},
|
|
ui: {
|
|
widgetConfig: {
|
|
collapsed: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: {
|
|
cn: '[属性] disableCollapse: 是否禁止折叠。默认为false',
|
|
en: '[ATTR] disableCollapse: whether to disable collapse. default is false'
|
|
},
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
user: {
|
|
type: 'object',
|
|
properties: {
|
|
firstname: {
|
|
type: 'string'
|
|
},
|
|
lastname: {
|
|
type: 'string'
|
|
}
|
|
},
|
|
ui: {
|
|
widgetConfig: {
|
|
disableCollapse: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
];
|
|
|
|
// 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>
|