mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-19 18:23:32 -04:00
docs: translate standard components doc
This commit is contained in:
daniel.xiao
@@ -1,247 +1,300 @@
|
||||
<!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>
|
||||
|
||||
<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="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
</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>
|
||||
<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>
|
||||
</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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/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" 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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/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">
|
||||
Mock.mock(/getItems/, function (options) {
|
||||
return { result: [{ id: 1, label: 'iphone' }, { id: 2, label: 'xiaomi' }, { id: 3, label: 'oppo' }] };
|
||||
})
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, checkbox: checkbox.default } });
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widget: 'checkbox'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `支持的数据类型为：boolean 和 array`
|
||||
},
|
||||
{
|
||||
title: '提供值',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
value: true,
|
||||
ui: {
|
||||
widget: 'checkbox'
|
||||
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 } });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: {
|
||||
cn: '默认状态',
|
||||
en: 'Default'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widget: 'checkbox'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
detail: {
|
||||
cn: `支持的数据类型为：boolean 和 array`,
|
||||
en: `Supported data types: boolean and array`
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] readonly: 只读状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
readonly: true,
|
||||
widget: 'checkbox',
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '提供值',
|
||||
en: 'Provide value'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
value: true,
|
||||
ui: {
|
||||
widget: 'checkbox'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `readonly：当没选中任何值，无展示值`
|
||||
},
|
||||
{
|
||||
title: '[属性] disabled: 禁用状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widget: 'checkbox',
|
||||
disabled: true
|
||||
{
|
||||
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: '[属性] enumSource: 可选项本地数据源.',
|
||||
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: '[属性] disabled: 禁用状态',
|
||||
en: '[ATTR] disabled: disable state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widget: 'checkbox',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '[属性] enumSourceRemote: 可选项远程数据源。',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
phones: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'checkbox',
|
||||
widgetConfig: {
|
||||
itemValueField: 'id', // 值字段
|
||||
itemLabelField: 'label', // 显示字段
|
||||
enumSourceRemote: {
|
||||
remoteUrl: '/api/radio/getItems', // 如果是远程访问，则填写该url
|
||||
resField: 'result',
|
||||
{
|
||||
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' }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `
|
||||
{
|
||||
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
|
||||
|
||||
itemValueField: 值字段，默认是value. 例子中是id
|
||||
|
||||
itemLabelField: 显示字段，默认是label. 例子中是label
|
||||
itemLabelField: 数据源的每一项显示的标签的字段，例子中就是label
|
||||
|
||||
remoteUrl: 远程接口url
|
||||
|
||||
resField: 数据源读取返回数据的哪个字段，如例子返回{result: [{ id: 1, label: "iphone" }, ...]}，则填写result
|
||||
`
|
||||
},
|
||||
{
|
||||
title: '[属性] selectAll: 是否显示全选.',
|
||||
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: '[属性] type: 显示类型. 可选值 [checkbox | button]，默认值 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: '[属性] arrangement: 可选项展示排列方式. 可选值 [v | h]，默认值 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'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
`,
|
||||
en: `
|
||||
itemValueField: The field of the value displayed by each item of the data source, in the example is "id"
|
||||
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
formSchemas: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// 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>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,130 +1,151 @@
|
||||
<!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>color-picker widget</title>
|
||||
|
||||
<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>color-picker widget</title>
|
||||
<link rel="stylesheet" href="../demo.css" />
|
||||
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
|
||||
</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>
|
||||
<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>
|
||||
</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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/colorPicker.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
<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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/colorPicker.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, colorPicker: colorPicker.default } });
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
color: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'color-picker'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '提供值',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
color: {
|
||||
type: 'string',
|
||||
value: '#ccffff',
|
||||
ui: {
|
||||
widget: 'color-picker'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] readonly: 只读状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
color: {
|
||||
type: 'string',
|
||||
value: '#ccffff',
|
||||
ui: {
|
||||
widget: 'color-picker',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disabled: 禁用状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
color: {
|
||||
type: 'string',
|
||||
value: '#ccffff',
|
||||
ui: {
|
||||
widget: 'color-picker',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
formSchemas: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, colorPicker: colorPicker.default } });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: {
|
||||
cn: '默认状态',
|
||||
en: 'Default'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
color: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'color-picker'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '提供值',
|
||||
en: 'Provide value'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
color: {
|
||||
type: 'string',
|
||||
value: '#ccffff',
|
||||
ui: {
|
||||
widget: 'color-picker'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] readonly: 只读状态',
|
||||
en: '[ATTR] readonly: read-only state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
color: {
|
||||
type: 'string',
|
||||
value: '#ccffff',
|
||||
ui: {
|
||||
widget: 'color-picker',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] disabled: 禁用状态',
|
||||
en: '[ATTR] disabled: disable state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
color: {
|
||||
type: 'string',
|
||||
value: '#ccffff',
|
||||
ui: {
|
||||
widget: 'color-picker',
|
||||
disabled: 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>
|
||||
|
||||
@@ -1,182 +1,218 @@
|
||||
<!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>date-picker widget</title>
|
||||
|
||||
<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>date-picker widget</title>
|
||||
<link rel="stylesheet" href="../demo.css" />
|
||||
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
|
||||
</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>
|
||||
<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>
|
||||
</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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/datePicker.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
<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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/datePicker.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, datePicker: datePicker.default } });
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'date-picker'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `支持的数据类型: string`
|
||||
},
|
||||
{
|
||||
title: '提供值',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
value: '1512284108066',
|
||||
ui: {
|
||||
widget: 'date-picker'
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, datePicker: datePicker.default } });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: {
|
||||
cn: '默认状态',
|
||||
en: 'Default'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'date-picker'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
detail: {
|
||||
cn: `支持的数据类型: string`,
|
||||
en: `Only support "string" type`
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disalbed: 禁用状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'date-picker',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] readonly: 只读状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
value: '1512284108066',
|
||||
ui: {
|
||||
widget: 'date-picker',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] placeholder: 占位',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'date-picker',
|
||||
placeholder: '选择日期点这里'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] type: 日期控件类型. 可选项：[ year | month | date | week | datetime ]',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'date-picker',
|
||||
widgetConfig: {
|
||||
type: 'datetime'
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '提供值',
|
||||
en: 'Provide value'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
value: '1512284108066',
|
||||
ui: {
|
||||
widget: 'date-picker'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] format: 显示格式. ',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
value: '1512284108066',
|
||||
ui: {
|
||||
widget: 'date-picker',
|
||||
widgetConfig: {
|
||||
type: 'date',
|
||||
format: 'yyyy年MM月dd日'
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] disabled: 禁用状态',
|
||||
en: '[ATTR] disabled: disable state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'date-picker',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: '年 yyyy，月 MM，日 dd，小时 HH，分 mm，秒 ss'
|
||||
},
|
||||
]
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] readonly: 只读状态',
|
||||
en: '[ATTR] readonly: read-only state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
value: '1512284108066',
|
||||
ui: {
|
||||
widget: 'date-picker',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] placeholder: 占位显示',
|
||||
en: '[ATTR] placeholder: placeholder display'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'date-picker',
|
||||
placeholder: 'Click here to choose date'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] type: 日期控件类型. 可选项：[ year | month | date | week | datetime ]',
|
||||
en: '[ATTR] type: date control type. Optional: [ year | month | date | week | datetime ]'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'date-picker',
|
||||
widgetConfig: {
|
||||
type: 'datetime'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] format: 显示格式. ',
|
||||
en: '[ATTR] format: display format. '
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
value: '1512284108066',
|
||||
ui: {
|
||||
widget: 'date-picker',
|
||||
widgetConfig: {
|
||||
type: 'date',
|
||||
format: 'yyyy-MM-dd'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
cn: '年 yyyy，月 MM，日 dd，小时 HH，分 mm，秒 ss',
|
||||
en: 'Year yyyy, month MM, day dd, hour HH, minute mm, second ss'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
formSchemas: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
// 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>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,179 +1,209 @@
|
||||
<!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-number widget</title>
|
||||
|
||||
<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-number widget</title>
|
||||
<link rel="stylesheet" href="../demo.css" />
|
||||
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
|
||||
</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>
|
||||
<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>
|
||||
</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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/inputNumber.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
<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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/inputNumber.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, inputNumber: inputNumber.default } });
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'input-number'
|
||||
}
|
||||
}
|
||||
}
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '提供值',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
value: 20,
|
||||
ui: {
|
||||
widget: 'input-number'
|
||||
}
|
||||
}
|
||||
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, inputNumber: inputNumber.default } });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: {
|
||||
cn: '默认状态',
|
||||
en: 'Default'
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] readonly: 只读状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'input-number',
|
||||
readonly: true
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'input-number'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disabled: 禁用状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'input-number',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '提供值',
|
||||
en: 'Provide value'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
value: 20,
|
||||
ui: {
|
||||
widget: 'input-number'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] min: 最小值. 默认值: 0',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'input-number',
|
||||
widgetConfig: {
|
||||
min: -2
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] readonly: 只读状态',
|
||||
en: '[ATTR] readonly: read-only state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'input-number',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] disabled: 禁用状态',
|
||||
en: '[ATTR] disabled: disable state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'input-number',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] min: 最小值. 默认值: 0',
|
||||
en: '[ATTR] min: minimum. Default is 0'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'input-number',
|
||||
widgetConfig: {
|
||||
min: -2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] max: 最大值. 默认值: Infinity',
|
||||
en: '[ATTR] max: maximum. Default is Infinity'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'input-number',
|
||||
widgetConfig: {
|
||||
max: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] step: 步长. 默认值: 1',
|
||||
en: '[ATTR] step: step. Default is 1'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'input-number',
|
||||
widgetConfig: {
|
||||
step: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] max: 最大值. 默认值: Infinity',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'input-number',
|
||||
widgetConfig: {
|
||||
max: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] step: 步长. 默认值: 1',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
count: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'input-number',
|
||||
widgetConfig: {
|
||||
step: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
formSchemas: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
// 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>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,274 +1,316 @@
|
||||
<!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>
|
||||
|
||||
<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="../demo.css">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
|
||||
</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>
|
||||
<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>
|
||||
</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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/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/input.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
<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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/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/input.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
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) };
|
||||
})
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, input: input.default } });
|
||||
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) };
|
||||
});
|
||||
|
||||
let formSchemas = [
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, input: input.default } });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
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: '提供值',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
value: 'daniel',
|
||||
}
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] trim: 前后去空格。默认值是true',
|
||||
en: '[ATTR] trim: remove the spaces before and after. Default is true'
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] trim: 前后去空格。默认值是true',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
trim: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] clearable: 是否可清空。默认值是false',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
clearable: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] readonly: 只读状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disabled: 禁用状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] placeholder: 占位显示',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
placeholder: 'fill your name'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] type: 显示类型. 可选值：[text | number | password]',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
password: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
type: 'password'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] prefixIcon: 前图标样式名',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
keyword: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
prefixIcon: 'el-icon-search'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] suffixIcon: 前图标样式名',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
date: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
suffixIcon: 'el-icon-date'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] autocomplete 以及 enumSource: 根据输入从本地加载匹配的提示信息',
|
||||
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
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
trim: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `
|
||||
itemTemplate: 显示数据项的模板，如"<span>-> {{item.keyword}}</span>"
|
||||
|
||||
itemValueField: 数据源的每一项显示的标签的字段，默认值是value. 例子中就是keyword
|
||||
|
||||
immediateShow: 是否立即显示，如果为false则当输入关键字才显示。默认为false
|
||||
`
|
||||
},
|
||||
{
|
||||
title: '[属性] autocomplete.enumSourceRemote: 根据输入从远程加载匹配的提示信息',
|
||||
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', // 响应结果的字段
|
||||
{
|
||||
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: '[属性] 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: '[属性] 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
|
||||
`
|
||||
}
|
||||
},
|
||||
detail: `
|
||||
{
|
||||
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
|
||||
@@ -276,174 +318,222 @@ paramName: 请求参数名，默认是keyword
|
||||
otherParams: 其它请求参数，值支持 dx表达式
|
||||
|
||||
resField: 数据源读取返回数据的哪个字段，如例子返回{data: [{ value: 'iphone', label: 'iphone' }, ...]}，则填写data
|
||||
`
|
||||
},
|
||||
{
|
||||
title: '[属性] compound.prependLabel: 组合Input的前置标签',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
keyword: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
compound: {
|
||||
prependLabel: 'http://',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
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: '[属性] compound.appendLabel: 组合Input的后置标签',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
keyword: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
compound: {
|
||||
appendLabel: 'go',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] compound.prependIcon: 前置图标样式',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
keyword: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
compound: {
|
||||
prependIcon: 'el-icon-search',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] compound.appendIcon: 后置图标样式',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
keyword: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
compound: {
|
||||
appendIcon: 'el-icon-search',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] compound.prependSelect: 前置下拉框 / 本地数据源',
|
||||
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: '男' }, { value: 2, label: '女' }], // 本地数据源
|
||||
modelField: 'gender' // 用于绑定input value值的某个属性
|
||||
},
|
||||
{
|
||||
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://'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `
|
||||
{
|
||||
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值的某个属性
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
cn: `
|
||||
注意：
|
||||
1. type必须为object类型
|
||||
2. 必须指定 modelField 和 compound.prependSelect.modelField
|
||||
`
|
||||
},
|
||||
{
|
||||
title: '[属性] compound.appendSelect: 后置下拉框 / 远程数据源',
|
||||
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值的某个属性
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
`,
|
||||
en: `
|
||||
note:
|
||||
1. type must be "object"
|
||||
2. must specify modelField and compound.prependSelect.modelField
|
||||
`
|
||||
}
|
||||
},
|
||||
detail: `
|
||||
当返回数据即为显示的结果时，resField为空。如例子中返回结果为[{ id: 1, label: '.cn' }, ...]
|
||||
`
|
||||
},
|
||||
{
|
||||
title: '[属性] 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: '点击上传' // 上传按钮的名称
|
||||
{
|
||||
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值的某个属性
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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' }, ...]
|
||||
`
|
||||
}
|
||||
},
|
||||
detail: `
|
||||
{
|
||||
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' // 上传按钮的名称
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
cn: `
|
||||
注意：当type="file"时，upload属性的优先级最高
|
||||
upload各字段的描述如下：
|
||||
- uploadUrl：上传文件的地址
|
||||
@@ -458,20 +548,43 @@ upload各字段的描述如下：
|
||||
- maxSize：上传文件最大大小，默认值为0，代表不限，单位KB
|
||||
- minSize：上传文件最小大小，默认值为0，代表不限，单位KB
|
||||
- uploadText：上传按钮的名称，默认是"点击上传"
|
||||
`,
|
||||
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"
|
||||
`
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
formSchemas: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
// 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>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,117 +1,136 @@
|
||||
<!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>label widget</title>
|
||||
|
||||
<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>label widget</title>
|
||||
<link rel="stylesheet" href="../demo.css" />
|
||||
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
<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>
|
||||
|
||||
</head>
|
||||
<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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/label.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
<!--演示区域-->
|
||||
<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>
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
|
||||
<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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/label.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, label: label.default } });
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, label: label.default } });
|
||||
let formSchemas = [
|
||||
{
|
||||
title: {
|
||||
cn: '默认状态',
|
||||
en: 'Default'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
label: {
|
||||
type: 'string',
|
||||
default: 'some text',
|
||||
ui: {
|
||||
widget: 'label'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '提供值',
|
||||
en: 'Provide value'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
label: {
|
||||
type: 'string',
|
||||
value: 'some text',
|
||||
ui: {
|
||||
widget: 'label'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] multiLine: 超过一行时是否多行显示，默认为false',
|
||||
en: '[ATTR] multiLine: whether multiple lines are displayed when more than one line, default is false'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
label: {
|
||||
type: 'string',
|
||||
value:
|
||||
'React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.',
|
||||
ui: {
|
||||
widget: 'label',
|
||||
widgetConfig: {
|
||||
multiLine: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
label: {
|
||||
type: 'string',
|
||||
default: 'some text',
|
||||
ui: {
|
||||
widget: 'label'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '提供值',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
label: {
|
||||
type: 'string',
|
||||
value: 'some text',
|
||||
ui: {
|
||||
widget: 'label',
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] multiLine: 超过一行时是否多行显示，默认为false',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
label: {
|
||||
type: 'string',
|
||||
value: 'React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.',
|
||||
ui: {
|
||||
widget: 'label',
|
||||
widgetConfig: {
|
||||
multiLine: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
formSchemas: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
// 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>
|
||||
|
||||
@@ -1,195 +1,223 @@
|
||||
<!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>radio widget</title>
|
||||
|
||||
<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>radio widget</title>
|
||||
<link rel="stylesheet" href="../demo.css" />
|
||||
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
|
||||
</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>
|
||||
<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>
|
||||
</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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/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/radio.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
<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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/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/radio.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
Mock.mock(/getItems/, function (options) {
|
||||
return { result: [{ id: 1, label: 'iphone' }, { id: 2, label: 'xiaomi' }, { id: 3, label: 'oppo' }] };
|
||||
})
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, radio: radio.default } });
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '提供值',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
value: true,
|
||||
}
|
||||
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, radio: radio.default } });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: {
|
||||
cn: '默认状态',
|
||||
en: 'Default'
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] readonly: 只读状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
readonly: true
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disabled: 禁用状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] arrangement: 可选项展示排列方式. 可选值 [v | h]，默认值 h',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
arrangement: 'v'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '提供值',
|
||||
en: 'Provide value'
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] type: 显示类型. 可选值 [radio | button]，默认值 radio',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
type: 'button'
|
||||
}
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
value: true
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] enumSource: 可选项本地数据源.',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'radio',
|
||||
widgetConfig: {
|
||||
enumSource: [{ value: 1, label: 'orange' }, { value: 2, label: 'red' }, { value: 3, label: 'blue' }]
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] readonly: 只读状态',
|
||||
en: '[ATTR] readonly: read-only state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] enumSourceRemote: 可选项远程数据源。',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'integer',
|
||||
ui: {
|
||||
widget: 'radio',
|
||||
widgetConfig: {
|
||||
itemValueField: 'id', // 值字段
|
||||
itemLabelField: 'label', // 显示字段
|
||||
enumSourceRemote: {
|
||||
remoteUrl: '/api/radio/getItems', // 如果是远程访问，则填写该url
|
||||
resField: 'result',
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] disabled: 禁用状态',
|
||||
en: '[ATTR] disabled: disable state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] arrangement: 可选项展示排列方式. 可选值 [v | h]，默认值 h',
|
||||
en: '[ATTR] arrangement: Optional display arrangement. Optional value: [v | h], default is h'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
arrangement: 'v'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] type: 显示类型. 可选值 [radio | button]，默认值 radio',
|
||||
en: '[ATTR] type: display type. optional value [radio | button], default is radio'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
type: 'button'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] enumSource: 可选项本地数据源.',
|
||||
en: '[ATTR] enumSource: local data source.'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'radio',
|
||||
widgetConfig: {
|
||||
enumSource: [{ value: 1, label: 'orange' }, { value: 2, label: 'red' }, { value: 3, label: 'blue' }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] enumSourceRemote: 可选项远程数据源。',
|
||||
en: '[ATTR] enumSourceRemote: remote data source. '
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
ok: {
|
||||
type: 'integer',
|
||||
ui: {
|
||||
widget: 'radio',
|
||||
widgetConfig: {
|
||||
itemValueField: 'id', // 值字段
|
||||
itemLabelField: 'label', // 显示字段
|
||||
enumSourceRemote: {
|
||||
remoteUrl: '/api/radio/getItems', // 如果是远程访问，则填写该url
|
||||
resField: 'result'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
cn: `
|
||||
itemValueField: 数据源的每一项显示的值的字段，例子中就是id
|
||||
|
||||
itemLabelField: 数据源的每一项显示的标签的字段，例子中就是label
|
||||
@@ -197,20 +225,36 @@ itemLabelField: 数据源的每一项显示的标签的字段，例子中就是l
|
||||
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"
|
||||
`
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// 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] : ''
|
||||
}));
|
||||
}
|
||||
]
|
||||
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
formSchemas: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,339 +1,401 @@
|
||||
<!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>rate widget</title>
|
||||
|
||||
<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>rate widget</title>
|
||||
<link rel="stylesheet" href="../demo.css" />
|
||||
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
|
||||
</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>
|
||||
<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>
|
||||
</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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/rate.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
<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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/rate.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, rate: rate.default } });
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'rate'
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, rate: rate.default } });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: {
|
||||
cn: '默认状态',
|
||||
en: 'Default'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'rate'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '提供值',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 3,
|
||||
ui: {
|
||||
widget: 'rate'
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '提供值',
|
||||
en: 'Provide value'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 3,
|
||||
ui: {
|
||||
widget: 'rate'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] readonly: 只读状态',
|
||||
en: '[ATTR] readonly: read-only state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 3,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] disabled: 禁用状态',
|
||||
en: '[ATTR] disabled: disable state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 3,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] max: 最大值. 默认值: 5',
|
||||
en: '[ATTR] max: maximum. Default is 5'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 3,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
max: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] allowHalf: 允许半选. 默认值: false',
|
||||
en: '[ATTR] allowHalf: Allow semi-selection. Default is false'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 3.5,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
allowHalf: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] lowThreshold:低分和中等分数的界限 highThreshold:高分和中等分数的界限 . 默认值: lowThreshold：2，highThreshold：4',
|
||||
en:
|
||||
'[ATTR] lowThreshold: the bound between the low and medium scores; highThreshold: the bounds between the high and medium scores. Default: lowThreshold: 2, highThreshold: 4'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 3.5,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
lowThreshold: 2,
|
||||
highThreshold: 4,
|
||||
colors: ['red', 'green', 'blue']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] colors: 颜色数组，共有 3 个元素，为 3 个分段所对应的颜色',
|
||||
en: '[ATTR] colors: an array of colors with 3 elements, the color corresponding to 3 segments'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 4,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
lowThreshold: 2,
|
||||
highThreshold: 4,
|
||||
colors: ['red', 'green', 'blue']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] voidColor: 未选中 icon 的颜色',
|
||||
en: "[ATTR] voidColor: unchecked icon's color"
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 1,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
voidColor: 'black'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] disabledVoidColor: 未选中且不可选的 icon 的颜色',
|
||||
en: "[ATTR] disabledVoidColor: unchecked and disabled icon's color"
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 1,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
disabled: true,
|
||||
widgetConfig: {
|
||||
disabledVoidColor: '#09c'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] iconClasses: icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名',
|
||||
en: '[ATTR] iconClasses: an array of class names for icon, with 3 elements, the class name corresponding to 3 segments'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 2,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
iconClasses: ['el-icon-d-arrow-right', 'el-icon-d-arrow-right', 'el-icon-d-arrow-left']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] voidIconClass: 未选中 icon 的类名',
|
||||
en: '[ATTR] voidIconClass: unchecked class name of icon'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 2,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
voidIconClass: 'el-icon-info'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] disabledVoidIconClass: 只读时 未选中 icon 的类名',
|
||||
en: '[ATTR] disabledVoidIconClass: unchecked and disabled class name of icon'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 2,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
disabled: true,
|
||||
widgetConfig: {
|
||||
disabledVoidIconClass: 'el-icon-info'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] showText: 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容',
|
||||
en:
|
||||
'[ATTR] showText: whether to display auxiliary text, if true, the text content corresponding to the current score will be selected from the texts array'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 2,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
showText: true,
|
||||
texts: ['very poor', 'disappointment', 'general', 'satisfaction', 'surprise'], // 辅助文字数组
|
||||
textColor: 'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] readonly: 只读状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 3,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disabled: 只读状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 3,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] max: 最大值. 默认值: 5',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 3,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
max: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] allowHalf: 允许半选. 默认值: false',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 3.5,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
allowHalf: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] lowThreshold:低分和中等分数的界限 highThreshold:高分和中等分数的界限 . 默认值: lowThreshold：2，highThreshold：4',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 3.5,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
lowThreshold: 2,
|
||||
highThreshold: 4,
|
||||
colors: ['red', 'green', 'blue'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] colors: 颜色数组，共有 3 个元素，为 3 个分段所对应的颜色',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 4,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
lowThreshold: 2,
|
||||
highThreshold: 4,
|
||||
colors: ['red', 'green', 'blue'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] voidColor: 未选中 icon 的颜色',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 1,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
voidColor: 'black'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disabledVoidColor: 未选中 icon 的颜色',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 1,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
disabled: true,
|
||||
widgetConfig: {
|
||||
disabledVoidColor: '#09c'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] iconClasses: icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 2,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
iconClasses: ['el-icon-d-arrow-right', 'el-icon-d-arrow-right', 'el-icon-d-arrow-left']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] voidIconClass: 未选中 icon 的类名',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 2,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
voidIconClass: 'el-icon-info'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disabledVoidIconClass: 只读时 未选中 icon 的类名',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 2,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
disabled: true,
|
||||
widgetConfig: {
|
||||
disabledVoidIconClass: 'el-icon-info'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] showText: 是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 2,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
showText: true,
|
||||
texts: ['极差', '失望', '一般', '满意', '惊喜'], // 辅助文字数组
|
||||
textColor: 'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
detail: {
|
||||
cn: 'showText和showScore 只能其中一个为true\ntextColor为辅助颜色的颜色\ntexts：辅助文字数组',
|
||||
en: 'showText and showScore can only have one of true\ntextColor as the color of the auxiliary color\ntexts: auxiliary text array'
|
||||
}
|
||||
},
|
||||
detail: 'showText和showScore 只能其中一个为true\ntextColor为辅助颜色的颜色\ntexts：辅助文字数组'
|
||||
},
|
||||
{
|
||||
title: '[属性] showScore: 是否显示分数',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 2,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
showScore: true,
|
||||
textColor: 'red'
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] showScore: 是否显示分数',
|
||||
en: '[ATTR] showScore: whether to display the score'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
evaluation: {
|
||||
type: 'number',
|
||||
value: 2,
|
||||
ui: {
|
||||
widget: 'rate',
|
||||
widgetConfig: {
|
||||
showScore: true,
|
||||
textColor: 'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
cn: 'showText和showScore 只能其中一个为true,\ntextColor为辅助颜色的颜色',
|
||||
en: 'showText and showScore can only be one of true, \ntextColor is the color of the auxiliary color'
|
||||
}
|
||||
},
|
||||
detail: 'showText和showScore 只能其中一个为true,\ntextColor为辅助颜色的颜色'
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
formSchemas: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
// 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>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,304 +1,369 @@
|
||||
<!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>
|
||||
|
||||
<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="../demo.css">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
|
||||
</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>
|
||||
<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>
|
||||
</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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/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/select.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
<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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/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/select.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
Mock.mock(/getMoney/, function (options) {
|
||||
let params = url('?', options.url) || {};
|
||||
let result = [{ id: 1, name: '1元' }, { id: 2, name: '2元' }];
|
||||
return result.filter(item => !params.keyword || item.name.indexOf(params.keyword) >= 0);
|
||||
})
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, select: select.default } });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
choice: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widget: 'select'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '提供值',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
choice: {
|
||||
type: 'boolean',
|
||||
value: true,
|
||||
ui: {
|
||||
widget: 'select'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] readonly: 只读状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
choice: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disabled: 禁用状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
choice: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] placeholder: 文字占位符',
|
||||
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: '[属性] clearable: 带清除按钮. 默认值: true',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
choice: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'select',
|
||||
widgetConfig: {
|
||||
clearable: true,
|
||||
enumSource: [{ value: 1, label: 'option1' }, { value: 2, label: 'option2' }],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] multiple: 是否支持多选. 默认值: 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: '[属性] filterable: 过滤器. 默认值: 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: '[属性] itemTemplate: 自定义模板',
|
||||
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: '[属性] enumSource: 可选项使用本地数据源.',
|
||||
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: '[属性] enumSourceRemote: 使用远程数据源',
|
||||
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: `
|
||||
itemLabelField: 数据源的每一项显示的标签的字段，默认值是label. 例子中就是name
|
||||
|
||||
itemValueField: 数据源的每一项显示的值的字段，默认值是value. 例子中就是id
|
||||
|
||||
remoteUrl: 远程接口url
|
||||
|
||||
paramName: 请求参数名，默认是keyword
|
||||
|
||||
otherParams: 其它请求参数，值支持 dx表达式 。如{countryId: 'dx: {{$root.countryId}}'}
|
||||
|
||||
resField: 数据源读取返回数据的哪个字段，如例子返回[{ id: 1, name: '1元' }, ...]，则填写空字符串
|
||||
|
||||
selectFirstItem: 默认选中第一项， 默认值是false
|
||||
`
|
||||
},
|
||||
{
|
||||
title: '[属性] filterLocal: 只搜索本地数据. 默认值: 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: `例子中数据源是远程数据源，但输入keyword时不会每次都从远程加载数据，只会从第一次从远程加载的数据源中进行筛选`
|
||||
},
|
||||
]
|
||||
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
formSchemas: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
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 } });
|
||||
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
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.`
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// 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>
|
||||
|
||||
@@ -1,181 +1,211 @@
|
||||
<!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>slider widget</title>
|
||||
|
||||
<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>slider widget</title>
|
||||
<link rel="stylesheet" href="../demo.css" />
|
||||
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
|
||||
</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>
|
||||
<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>
|
||||
</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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/slider.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
<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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/slider.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, slider: slider.default } });
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'slider'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '提供值',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
value: 20,
|
||||
ui: {
|
||||
widget: 'slider'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] readonly: 只读状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
value: 20,
|
||||
ui: {
|
||||
widget: 'slider',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disabled: 禁用状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
value: 20,
|
||||
ui: {
|
||||
widget: 'slider',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] min: 最小值. 默认值: 0',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'slider',
|
||||
widgetConfig: {
|
||||
min: -2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] max: 最大值. 默认值: 100',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'slider',
|
||||
widgetConfig: {
|
||||
max: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] step: 步长. 默认值: 1',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'slider',
|
||||
widgetConfig: {
|
||||
step: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
formSchemas: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, slider: slider.default } });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: {
|
||||
cn: '默认状态',
|
||||
en: 'Default'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'slider'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '提供值',
|
||||
en: 'Provide value'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
value: 20,
|
||||
ui: {
|
||||
widget: 'slider'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] readonly: 只读状态',
|
||||
en: '[ATTR] readonly: read-only state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
value: 20,
|
||||
ui: {
|
||||
widget: 'slider',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] disabled: 禁用状态',
|
||||
en: '[ATTR] disabled: disable state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
value: 20,
|
||||
ui: {
|
||||
widget: 'slider',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] min: 最小值. 默认值: 0',
|
||||
en: '[ATTR] min: minimum. Default is 0'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'slider',
|
||||
widgetConfig: {
|
||||
min: -2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] max: 最大值. 默认值: Infinity',
|
||||
en: '[ATTR] max: maximum. Default is Infinity'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'slider',
|
||||
widgetConfig: {
|
||||
max: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] step: 步长. 默认值: 1',
|
||||
en: '[ATTR] step: step. Default is 1'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
age: {
|
||||
type: 'number',
|
||||
ui: {
|
||||
widget: 'slider',
|
||||
widgetConfig: {
|
||||
step: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// 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>
|
||||
|
||||
@@ -1,181 +1,190 @@
|
||||
<!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>textarea widget</title>
|
||||
|
||||
<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>textarea widget</title>
|
||||
<link rel="stylesheet" href="../demo.css" />
|
||||
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
|
||||
</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>
|
||||
<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>
|
||||
</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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/textarea.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
<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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/textarea.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, textarea: textarea.default } });
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
message: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'textarea'
|
||||
}
|
||||
}
|
||||
}
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '提供值',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
message: {
|
||||
type: 'string',
|
||||
value: 'hello world.',
|
||||
ui: {
|
||||
widget: 'textarea'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] readonly: 只读状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
message: {
|
||||
type: 'string',
|
||||
value: 'hello world.',
|
||||
ui: {
|
||||
widget: 'textarea',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disabled: 禁用状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
message: {
|
||||
type: 'string',
|
||||
value: 'hello world.',
|
||||
ui: {
|
||||
widget: 'textarea',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] rows: 行数. 默认值: 2',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
message: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'textarea',
|
||||
widgetConfig: {
|
||||
rows: 2
|
||||
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, textarea: textarea.default } });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: {
|
||||
cn: '默认状态',
|
||||
en: 'Default'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
message: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'textarea'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] autoSize: 自动伸缩. 默认值: false',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
message: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'textarea',
|
||||
widgetConfig: {
|
||||
rows: 3,
|
||||
autoSize: {
|
||||
minRows: 2,
|
||||
maxRows: 4
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '提供值',
|
||||
en: 'Provide value'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
message: {
|
||||
type: 'string',
|
||||
value: 'hello world.',
|
||||
ui: {
|
||||
widget: 'textarea'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] readonly: 只读状态',
|
||||
en: '[ATTR] readonly: read-only state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
message: {
|
||||
type: 'string',
|
||||
value: 'hello world.',
|
||||
ui: {
|
||||
widget: 'textarea',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] disabled: 禁用状态',
|
||||
en: '[ATTR] disabled: disable state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
message: {
|
||||
type: 'string',
|
||||
value: 'hello world.',
|
||||
ui: {
|
||||
widget: 'textarea',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] rows: 行数. 默认值: 2',
|
||||
en: '[ATTR] rows: number of rows. Default is 2'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
message: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'textarea',
|
||||
widgetConfig: {
|
||||
rows: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] autoSize: 自动伸缩. 默认值: false',
|
||||
en: '[ATTR] autoSize: auto-stretch. Default is false'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
message: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'textarea',
|
||||
widgetConfig: {
|
||||
rows: 3,
|
||||
autoSize: {
|
||||
minRows: 2,
|
||||
maxRows: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// {
|
||||
// title: '[属性] step: 步长. 默认值: 1',
|
||||
// schema: {
|
||||
// type: 'object',
|
||||
// properties: {
|
||||
// message: {
|
||||
// type: 'number',
|
||||
// value: 0,
|
||||
// ui: {
|
||||
// widget: 'textarea',
|
||||
// widgetConfig: {
|
||||
// step: 2
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
]
|
||||
];
|
||||
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
formSchemas: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
// 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>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,417 +1,487 @@
|
||||
<!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>Component Example</title>
|
||||
|
||||
<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>Component Example</title>
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../demo.css" />
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
</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>
|
||||
<!-- <pre>{{JSON.stringify(item.schema, null, 2)}}</pre> -->
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- <pre>{{JSON.stringify(item.schema, null, 2)}}</pre> -->
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<pre>{{item.detail}}</pre>
|
||||
<div>
|
||||
<pre>{{ item.detail }}</pre>
|
||||
</div>
|
||||
</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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/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/upload.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
<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="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/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/upload.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
Mock.mock(/getFileInfo/, function (options) {
|
||||
return { data: { name: 'shoe.jpg', url: '//a.vpimg2.com/upload/upimg2/ued/cxy/xinke/02-sport.jpg' } };
|
||||
})
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, upload: upload.default } });
|
||||
Mock.mock(/getFileInfo/, function(options) {
|
||||
return { data: { name: 'shoe.jpg', url: '//a.vpimg2.com/upload/upimg2/ued/cxy/xinke/02-sport.jpg' } };
|
||||
});
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `支持的数据类型为：array`
|
||||
},
|
||||
{
|
||||
title: '提供值',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
value: [
|
||||
{ name: '女装.jpg', url: '//a.vpimg2.com/upload/merchandise/pdc/176/162/8951543587594162176/0/2152212-5.jpg' },
|
||||
],
|
||||
ui: {
|
||||
widget: 'upload'
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, upload: upload.default } });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: {
|
||||
cn: '默认状态',
|
||||
en: 'Default'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
detail: {
|
||||
cn: `支持的数据类型为：array`,
|
||||
en: `Supported data type: array`
|
||||
}
|
||||
},
|
||||
detail: `
|
||||
default：传入文件列表数组，其中数组必须含有这2个字段：
|
||||
{
|
||||
title: {
|
||||
cn: '提供值',
|
||||
en: 'Provide value'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
value: [{ name: 'girl.jpg', url: '//a.vpimg2.com/upload/111.jpg' }],
|
||||
ui: {
|
||||
widget: 'upload'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
cn: `
|
||||
默认传入的文件列表数组必须含有这2个字段：
|
||||
|
||||
name：文件名
|
||||
|
||||
url：文件地址
|
||||
`
|
||||
},
|
||||
{
|
||||
title: '[属性] readonly: 只读状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
value: [],
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
`,
|
||||
en: `
|
||||
The default file list array must contain these 2 fields:
|
||||
|
||||
name: filename
|
||||
|
||||
url: file url
|
||||
`
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disabled: 禁用状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
disabled: true,
|
||||
widgetConfig: {
|
||||
showFileList: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] uploadUrl: 必选参数，上传的地址.',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] readonly: 只读状态',
|
||||
en: '[ATTR] readonly: read-only state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
value: [],
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `thumbnail-mode 模式下此参数无效`
|
||||
},
|
||||
{
|
||||
title: '[属性] autoUpload: 是否在选取文件后立即进行上传. 默认 false',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
autoUpload: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] data: 上传时附带的额外参数.',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
data: {
|
||||
a: 123,
|
||||
b: 'sample'
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] disabled: 禁用状态',
|
||||
en: '[ATTR] disabled: disable state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
disabled: true,
|
||||
widgetConfig: {
|
||||
showFileList: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] resField: 数据源读取返回文件数据的哪个字段. 例如： {name: "xx", url: "aaa"}',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
resField: 'data' // 接口返回获取{name: 'xx', url: 'aaa'}结构的路径
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] uploadUrl: 上传的地址.',
|
||||
en: '[ATTR] uploadUrl: upload api url'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo' // 上传的地址
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
cn: `thumbnail-mode 模式下此参数无效`,
|
||||
en: `This parameter is invalid in thumbnail-mode mode`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] autoUpload: 是否在选取文件后立即进行上传. 默认 false',
|
||||
en: '[ATTR] autoUpload: Whether to upload immediately after selecting the file. Default is false'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
autoUpload: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] data: 上传时附带的额外参数.',
|
||||
en: '[ATTR] data: additional parameters attached to the upload.'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
data: {
|
||||
a: 123,
|
||||
b: 'sample'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] resField: 数据源读取返回文件数据的哪个字段. 例如： {name: "xx", url: "aaa"}',
|
||||
en: '[ATTR] resField: Which field of the response data as the data source'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
resField: 'data' // 接口返回获取{name: 'xx', url: 'aaa'}结构的路径
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] fileNameField: 数据源读取返回带有文件数据的字段resField下的文件名字段. 默认 "name"',
|
||||
en: '[ATTR] fileNameField: The field of the expression file name under the resField field in the response data. Default is "name"'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
resField: 'data', // 接口返回获取结构的路径
|
||||
fileNameField: 'name' // 接口返回获取结构的路径
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
cn: `如果上传接口返回的结构数据无该字段，将使用原文件的上传名`,
|
||||
en: `If the data returned by the upload api does not have this field, the upload name of the original file will be used.`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] fileUrlField: 数据源读取返回带有文件数据的字段resField下的 文件地址 字段. 默认 "url"',
|
||||
en: '[ATTR] fileUrlField: The field of the expression file url under the resField field in the response data. Default is "url"'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
resField: 'data', // 接口返回获取结构的路径
|
||||
fileUrlField: 'url' // 接口返回获取结构的路径
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
cn: `如果上传接口返回的结构数据无该字段，将使用原文件的blob地址`,
|
||||
en: `If the data returned by the upload api does not have this field, the blob address of the original file will be used.`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] fileField: 表示文件的字段，默认是file',
|
||||
en: '[ATTR] fileField: indicates the field of the file, default is file'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
resField: 'data', // 接口返回获取结构的路径
|
||||
fileUrlField: 'url', // 接口返回获取结构的路径
|
||||
fileField: 'file'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] showFileList: 是否显示已上传文件列表. 默认 false',
|
||||
en: '[ATTR] showFileList: Whether to display the list of uploaded files. Default is false'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
value: [{ name: 'girl.jpg', url: '//a.vpimg2.com/upload/merchandise/pdc/176/162/8951543587594162176/0/2152212-5.jpg' }],
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
showFileList: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] listType: 图片列表显示形式. 可选值 [text | picture]，默认值 text',
|
||||
en: '[ATTR] listType: list display type. optional value [text | picture], default is text'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
value: [{ name: 'girl.jpg', url: '//a.vpimg2.com/upload/merchandise/pdc/176/162/8951543587594162176/0/2152212-5.jpg' }],
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
showFileList: true, // 显示已上传文件列表
|
||||
listType: 'picture'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
cn: `在开启 showFileList 的前提下，方可使用 listType`,
|
||||
en: `you can use listType only the showFileList is true`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] drag: 是否启用拖拽上传. 默认值 false',
|
||||
en: '[ATTR] drag: Whether to enable drag and drop upload. Default is false'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
drag: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] limit: 最大允许上传个数. 默认值为1',
|
||||
en: '[ATTR] limit: Maximum number of uploads allowed. Default is 1'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
limit: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] multiple: 是否支持多选文件.',
|
||||
en: '[ATTR] multiple: Whether to support multiple files selection.'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
limit: 4,
|
||||
multiples: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
cn: `在限制个数 limit > 1 的前提下，使用 multiple`,
|
||||
en: `use multiple when limit > 1`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] accept: 接受上传的文件类型.',
|
||||
en: '[ATTR] accept: accept the uploaded file type.'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
accept: '.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
cn: `thumbnail-mode 模式下此参数无效`,
|
||||
en: `This parameter is invalid in thumbnail-mode mode`
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] fileNameField: 数据源读取返回带有文件数据的字段resField下的文件名字段. 默认 "name"',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
resField: 'data', // 接口返回获取结构的路径
|
||||
fileNameField: 'name' // 接口返回获取结构的路径
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `如果上传接口返回的结构数据无该字段，将使用原文件的上传名`
|
||||
},
|
||||
{
|
||||
title: '[属性] fileUrlField: 数据源读取返回带有文件数据的字段resField下的 文件地址 字段. 默认 "url"',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
resField: 'data', // 接口返回获取结构的路径
|
||||
fileUrlField: 'url' // 接口返回获取结构的路径
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `如果上传接口返回的结构数据无该字段，将使用原文件的blob地址`
|
||||
},
|
||||
{
|
||||
title: '[属性] fileField: 表示文件的字段，默认是file',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
resField: 'data', // 接口返回获取结构的路径
|
||||
fileUrlField: 'url', // 接口返回获取结构的路径
|
||||
fileField: 'file'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `如果上传接口返回的结构数据无该字段，将使用原文件的blob地址`
|
||||
},
|
||||
{
|
||||
title: '[属性] showFileList: 是否显示已上传文件列表. 默认 false',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
value: [
|
||||
{ name: '女装.jpg', url: '//a.vpimg2.com/upload/merchandise/pdc/176/162/8951543587594162176/0/2152212-5.jpg' },
|
||||
],
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
showFileList: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] listType: 图片列表缩略图. 可选值 [text | picture]，默认值 text',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
value: [
|
||||
{ name: '女装.jpg', url: '//a.vpimg2.com/upload/merchandise/pdc/176/162/8951543587594162176/0/2152212-5.jpg' },
|
||||
],
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
showFileList: true, // 显示已上传文件列表
|
||||
listType: 'picture'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `在开启 showFileList 的前提下，方可使用 listType`
|
||||
},
|
||||
{
|
||||
title: '[属性] drag: 是否启用拖拽上传. 默认值 false',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
drag: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] limit: 最大允许上传个数. 默认值为1',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
limit: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] multiple: 是否支持多选文件.',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
limit: 4,
|
||||
multiples: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `在限制个数 limit > 1 的前提下，使用 multiples`
|
||||
},
|
||||
{
|
||||
title: '[属性] accept: 接受上传的文件类型.',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
accept: '.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detail: `thumbnail-mode 模式下此参数无效`
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
// Bootstrap the app
|
||||
new Vue({
|
||||
el: '#demo',
|
||||
data: {
|
||||
formSchemas: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
// 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] : ''
|
||||
}));
|
||||
}
|
||||
});
|
||||
// multipleFile: {
|
||||
// multiple: true, // 是否支持多选
|
||||
// limit: 4, // 最大允许上传个数
|
||||
// accept: '.jpg', // 接受上传的文件类型
|
||||
// },
|
||||
// interface: {
|
||||
// uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
// data: {}, // 上传时附带的额外参数
|
||||
// resField: 'data.url' // 接口返回获取{name: 'xx', url: 'aaa'}结构的路径
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -12,46 +12,74 @@
|
||||
<style>
|
||||
.doc {
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
min-height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2 style="margin-left: 25px; color: #5A5E66">ncform standard components</h2>
|
||||
<div class="doc">
|
||||
<h2 style="margin-left: 25px; color: #5A5E66">
|
||||
ncform standard components
|
||||
|
||||
<div style="display: flex" class="doc" v-cloak>
|
||||
<div style="flex:1">
|
||||
<ul class="el-menu el-menu-vertical-demo">
|
||||
<li class="el-submenu is-opened">
|
||||
<div class="el-submenu__title" style="padding-left: 20px;"><i class="el-icon-star-on"></i><span>Controls</span></div>
|
||||
<ul class="el-menu">
|
||||
<li v-for="item in controls" class="el-menu-item" :class="{'is-active': currentUrl === item.url}" @click="goto(item.url)">
|
||||
{{item.name}}
|
||||
</li>
|
||||
<!-- Don't touch me - controls -->
|
||||
</ul>
|
||||
</li>
|
||||
<li class="el-submenu is-opened">
|
||||
<div class="el-submenu__title" style="padding-left: 20px;"><i class="el-icon-star-on"></i><span>Layouts</span></div>
|
||||
<ul class="el-menu">
|
||||
<li v-for="item in layouts" class="el-menu-item" :class="{'is-active': currentUrl === item.url}" @click="goto(item.url)">
|
||||
{{item.name}}
|
||||
</li>
|
||||
<!-- Don't touch me - layouts -->
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="flex:5">
|
||||
<iframe :src="currentUrl" style="width: 100%; border: none; height: 100%"></iframe>
|
||||
<div class="el-radio-group" style="float: right;">
|
||||
<label class="el-radio-button">
|
||||
<input type="radio" class="el-radio-button__orig-radio" value="en" v-model="lang">
|
||||
<span class="el-radio-button__inner">English</span>
|
||||
</label>
|
||||
<label class="el-radio-button" value="cn">
|
||||
<input type="radio" class="el-radio-button__orig-radio" value="cn" v-model="lang">
|
||||
<span class="el-radio-button__inner">中文</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</h2>
|
||||
|
||||
<div style="display: flex; height: calc(100vh - 80px); overflow: hidden;" v-cloak>
|
||||
<div style="flex:1; overflow: auto">
|
||||
<ul class="el-menu el-menu-vertical-demo">
|
||||
<li class="el-submenu is-opened">
|
||||
<div class="el-submenu__title" style="padding-left: 20px;"><i
|
||||
class="el-icon-star-on"></i><span>Controls</span></div>
|
||||
<ul class="el-menu">
|
||||
<li v-for="item in displayControls" class="el-menu-item" :class="{'is-active': currentUrl === item.url}"
|
||||
@click="goto(item.url)">
|
||||
{{item.name}}
|
||||
</li>
|
||||
<!-- Don't touch me - controls -->
|
||||
</ul>
|
||||
</li>
|
||||
<li class="el-submenu is-opened">
|
||||
<div class="el-submenu__title" style="padding-left: 20px;"><i
|
||||
class="el-icon-star-on"></i><span>Layouts</span>
|
||||
</div>
|
||||
<ul class="el-menu">
|
||||
<li v-for="item in displayLayouts" class="el-menu-item" :class="{'is-active': currentUrl === item.url}"
|
||||
@click="goto(item.url)">
|
||||
{{item.name}}
|
||||
</li>
|
||||
<!-- Don't touch me - layouts -->
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="flex:5">
|
||||
<iframe :src="currentUrl" style="width: 100%; border: none; height: 100%"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
new Vue({
|
||||
el: '.doc',
|
||||
created() {
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
this.$data.lang = 'cn';
|
||||
}
|
||||
},
|
||||
data: {
|
||||
controls: [
|
||||
{ "url": "/examples/control-comps/input.html", "name": "input" },
|
||||
@@ -72,12 +100,34 @@
|
||||
{ "url": "/examples/layout-comps/array-table.html", "name": "array-table" },
|
||||
{ "url": "/examples/layout-comps/array-tabs.html", "name": "array-tabs" }
|
||||
],
|
||||
currentUrl: ''
|
||||
currentUrl: '',
|
||||
lang: 'en'
|
||||
},
|
||||
computed: {
|
||||
displayControls() {
|
||||
return this.$data.controls.map(item => ({
|
||||
url: item.url + '?lang=' + this.$data.lang,
|
||||
name: item.name
|
||||
}))
|
||||
},
|
||||
displayLayouts() {
|
||||
return this.$data.layouts.map(item => ({
|
||||
url: item.url + '?lang=' + this.$data.lang,
|
||||
name: item.name
|
||||
}))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goto(url) {
|
||||
this.$data.currentUrl = url;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'lang': function (newVal) {
|
||||
let url = location.pathname + '?lang=' + this.$data.lang;
|
||||
window.history.replaceState("", document.title, url);
|
||||
this.$data.currentUrl = this.$data.currentUrl.replace(/lang=.*/, 'lang=' + this.$data.lang);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,233 +1,266 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>object widget</title>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>object widget</title>
|
||||
<link rel="stylesheet" href="../demo.css" />
|
||||
|
||||
<link rel="stylesheet" href="../demo.css">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css" />
|
||||
</head>
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="../../node_modules/element-ui/lib/theme-chalk/index.css">
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../../node_modules/lodash/lodash.min.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/input.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/lodash/lodash.min.js"></script>
|
||||
<script type="text/javascript" src="../../node_modules/vue/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui@2.0.7/lib/index.js"></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/input.js"></script>
|
||||
<script type="text/javascript" src="../../dist/object.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.use(vueNcform, { extComponents: { input: input.default, object: object.default } });
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: '默认状态',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstname: {
|
||||
type: 'string',
|
||||
},
|
||||
lastname: {
|
||||
type: 'string'
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
|
||||
Vue.use(vueNcform, { extComponents: { input: input.default, object: object.default } });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: {
|
||||
cn: '默认状态',
|
||||
en: 'Default'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstname: {
|
||||
type: 'string'
|
||||
},
|
||||
lastname: {
|
||||
type: 'string'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '丰富显示',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
label: '姓名',
|
||||
placeholder: '填写姓名',
|
||||
description: '请填写你的姓名',
|
||||
help: {
|
||||
show: true,
|
||||
text: '?',
|
||||
content: '关于填写姓名的重要性'
|
||||
},
|
||||
{
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '多列',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
columns: 6,
|
||||
},
|
||||
{
|
||||
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: '[属性] 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'
|
||||
}
|
||||
},
|
||||
lastname: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
columns: 6,
|
||||
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'
|
||||
}
|
||||
},
|
||||
email: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
columns: 12,
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] layout: 布局类型，垂直即为label上control下，水平即为label左control右，可选值 [v | h]',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstname: {
|
||||
type: 'string',
|
||||
},
|
||||
lastname: {
|
||||
type: 'string'
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] labelWidth: 标签的宽度，当布局类型为h时有效',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstname: {
|
||||
type: 'string',
|
||||
},
|
||||
lastname: {
|
||||
type: 'string'
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h',
|
||||
labelWidth: '150px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] collapsed: 是否默认折叠',
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
user: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
firstname: {
|
||||
type: 'string',
|
||||
},
|
||||
lastname: {
|
||||
type: 'string'
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
collapsed: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '[属性] disableCollapse: 是否禁止折叠',
|
||||
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: _.cloneDeep(formSchemas),
|
||||
originFormSchemas: formSchemas
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
// 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>
|
||||
|
||||
Reference in New Issue
Block a user