mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-19 18:23:32 -04:00
Dmitry Nagibin
428 lines
11 KiB
JavaScript
Executable File
428 lines
11 KiB
JavaScript
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>array 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" src="../../dist/array.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,
|
||
array: array.default
|
||
},
|
||
lang: lang === 'cn' ? 'zh_cn' : 'en'
|
||
});
|
||
|
||
let formSchemas = [
|
||
{
|
||
title: {
|
||
cn: '默认状态',
|
||
en: 'Default'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
items: {
|
||
type: 'string'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] disableAdd: 是否禁止添加项',
|
||
en: '[ATTR] disableAdd: Whether to disable the addition of items'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
items: {
|
||
type: 'string'
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
disableAdd: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] disableDel: 是否禁止删除项',
|
||
en: '[ATTR] disableDel: whether to disable item deletion'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
items: {
|
||
type: 'string'
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
disableDel: true
|
||
}
|
||
}
|
||
}
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
layout: 'h'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] disableReorder: 是否禁止排序',
|
||
en: '[ATTR] disableReorder: whether to disable sorting'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
items: {
|
||
type: 'string'
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
disableReorder: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] disableCollapse: 是否禁止折叠',
|
||
en: '[ATTR] disableCollapse: whether to disable collapse'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
items: {
|
||
type: 'string'
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
disableCollapse: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] collapsed: 是否默认折叠，默认是false',
|
||
en:
|
||
'[ATTR] collapsed: whether to collapse by default. default is false'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
items: {
|
||
type: 'string'
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
collapsed: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] disableItemCollapse: 是否禁止项折叠。默认是false',
|
||
en:
|
||
'[ATTR] disableItemCollapse: whether to disable items collapse by default. default is false'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
items: {
|
||
type: 'string'
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
disableItemCollapse: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] itemCollapse: 项是否默认折叠。默认是false',
|
||
en:
|
||
'[ATTR] itemCollapse: whether the item is collapsed by default. default is false'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
items: {
|
||
type: 'string'
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
itemCollapse: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] addTxt: 增加按钮的显示文字。默认值Add',
|
||
en:
|
||
'[ATTR] addTxt: display text of the add item button. Default is "Add"'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
items: {
|
||
type: 'string'
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
addTxt: 'Add'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] delAllTxt: 删除全部按钮的显示文字。默认值Del All',
|
||
en:
|
||
'[ATTR] delAllTxt: display text of delete all button. Default is "Del All"'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
items: {
|
||
type: 'string'
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
delAllTxt: 'Delete All'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] requiredDelConfirm: 是否需要删除确认。默认 false',
|
||
en:
|
||
'[ATTR] requiredDelConfirm: Whether the deletion requires confirmation. Default is false'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
items: {
|
||
type: 'string'
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
requiredDelConfirm: true,
|
||
delConfirmText: {
|
||
item: 'Are you sure to delete this item?',
|
||
all: 'Are you sure to delete all?'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
value: {
|
||
user: [ 'Daniel', 'Sarah' ]
|
||
}
|
||
},
|
||
detail: {
|
||
cn: `
|
||
当 requiredDelConfirm 为 true 时，可通过 delConfirmText 配置提示信息
|
||
1. delConfirmText.item: 删除项确认信息
|
||
2. delConfirmText.all: 删除全部确认信息
|
||
`,
|
||
en: `
|
||
Prompt information can be configured via delConfirmText when requiredDelConfirm is true
|
||
1. delConfirmText.item: delete item confirmation information
|
||
2. delConfirmText.all: delete all confirmation information
|
||
`
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] showOneIfEmpty: 当空值时是否显示一项',
|
||
en:
|
||
'[ATTR] showOneIfEmpty: Show one item at least if empty'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
items: {
|
||
type: 'string'
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
showOneIfEmpty: true
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
title: {
|
||
cn: '[属性] delExceptionRows: 对于删除动作例外的行。这些行当disableDel为true时可被删除，当disableDel原来false时不可被删除',
|
||
en:
|
||
'[ATTR] delExceptionRows: The exception rows for delete action. These rows can be deleted when disableDel is true and cannot be deleted when disableDel is false'
|
||
},
|
||
schema: {
|
||
type: 'object',
|
||
properties: {
|
||
user: {
|
||
type: 'array',
|
||
value: ['daniel', 'sarah'],
|
||
items: {
|
||
type: 'string'
|
||
},
|
||
ui: {
|
||
widgetConfig: {
|
||
disableDel: true,
|
||
delExceptionRows: 'dx: (function(item) { return item === "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>
|