mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-20 22:05:47 -04:00
Updates
This commit is contained in:
xiaow
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
+98
-4
File diff suppressed because one or more lines are too long
+239
File diff suppressed because one or more lines are too long
+2
-2
File diff suppressed because one or more lines are too long
@@ -537,7 +537,10 @@ The resField is empty means the whole response data is the result of the display
|
||||
maxSize: 0, // 最大图片大小，单位KB，0代表不限
|
||||
minSize: 0 // 最小图片大小，单位KB，0代表不限
|
||||
},
|
||||
uploadText: 'Upload' // 上传按钮的名称
|
||||
uploadText: 'Upload', // 上传按钮的名称
|
||||
headers: {
|
||||
author: 'daniel'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -560,6 +563,7 @@ upload各字段的描述如下：
|
||||
- maxSize：上传文件最大大小，默认值为0，代表不限，单位KB
|
||||
- minSize：上传文件最小大小，默认值为0，代表不限，单位KB
|
||||
- uploadText：上传按钮的名称，默认是"点击上传"
|
||||
- headers: 设置上传的请求头部
|
||||
`,
|
||||
en: `
|
||||
Note: When type="file", the "upload" attribute has the highest priority.
|
||||
@@ -576,6 +580,7 @@ The description of each field of upload is as follows:
|
||||
- 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"
|
||||
- headers: set the request headers for the upload
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,265 @@
|
||||
<!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>switch widget</title>
|
||||
|
||||
<link rel="stylesheet" href="../demo.css" />
|
||||
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
|
||||
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?027aa17f0e14133f0b8aa5f1f0af3ca7";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--演示区域-->
|
||||
<div id="demo" v-cloak>
|
||||
<div v-for="(item, idx) in formSchemas">
|
||||
<h4 class="demo_title">{{ item.title }}</h4>
|
||||
<div class="demo_item-wrapper">
|
||||
<div>
|
||||
<ncform :form-schema="item.schema" v-model="item.schema.value"></ncform>
|
||||
<small>value: {{ item.schema.value }}</small>
|
||||
</div>
|
||||
<div>
|
||||
<pre>{{ JSON.stringify(originFormSchemas[idx].schema.properties, null, 2) }}</pre>
|
||||
</div>
|
||||
<div>
|
||||
<pre>{{ item.detail }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../assets/lodash.min.js"></script>
|
||||
<script type="text/javascript" src="../assets/axios.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script type="text/javascript" src="../assets/ncformCommon.min.js"></script>
|
||||
<script type="text/javascript" src="../assets/vueNcform.min.js"></script>
|
||||
<script type="text/javascript" src="../assets/dist/switch.js"></script>
|
||||
<script type="text/javascript" src="../assets/dist/object.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
let lang = 'en';
|
||||
|
||||
if (location.search.indexOf('lang=cn') >= 0) {
|
||||
lang = 'cn';
|
||||
}
|
||||
|
||||
Vue.use(vueNcform, { extComponents: { object: object.default, switch: window.switch.default }, lang: lang === 'cn' ? 'zh_cn' : 'en' });
|
||||
|
||||
let formSchemas = [
|
||||
{
|
||||
title: {
|
||||
cn: '默认状态',
|
||||
en: 'Default'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
isOpen: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widget: 'switch'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '提供值',
|
||||
en: 'Provide value'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
isOpen: {
|
||||
type: 'boolean',
|
||||
value: true,
|
||||
ui: {
|
||||
widget: 'switch'
|
||||
}
|
||||
}
|
||||
},
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
layout: 'h'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] readonly: 只读状态',
|
||||
en: '[ATTR] readonly: read-only state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
isOpen: {
|
||||
type: 'boolean',
|
||||
value: true,
|
||||
ui: {
|
||||
widget: 'switch',
|
||||
readonly: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] disabled: 禁用状态',
|
||||
en: '[ATTR] disabled: disable state'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
isOpen: {
|
||||
type: 'boolean',
|
||||
value: true,
|
||||
ui: {
|
||||
widget: 'switch',
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] width: switch 的宽度（像素）。 默认值: 40',
|
||||
en: '[ATTR] width: switch\'s width（pixel）. Default is 40'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
isOpen: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widget: 'switch',
|
||||
widgetConfig: {
|
||||
width: 80
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] activeIconClass / inactiveIconClass: 打开/关闭时所显示图标的类名，设置此项会忽略 activeText/inactiveText',
|
||||
en: '[ATTR] activeIconClass / inactiveIconClass: the class name of the icon displayed when the switch is turned on/off. Setting this item ignores activeText/inactiveText'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
isOpen: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widget: 'switch',
|
||||
widgetConfig: {
|
||||
activeIconClass: 'el-icon-unlock',
|
||||
inactiveIconClass: 'el-icon-lock'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] activeText / inactiveText: switch 打开/关闭时的文字描述',
|
||||
en: '[ATTR] activeText / inactiveText: text description when switch is turned on/off'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
isOpen: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widget: 'switch',
|
||||
widgetConfig: {
|
||||
activeText: 'On',
|
||||
inactiveText: 'Off'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] activeValue / inactiveValue: switch 打开/关闭时的值。默认值是true/false。 boolean / string / number',
|
||||
en: '[ATTR] activeValue / inactiveValue: the value of the switch when it is turned on/off. default is true/false [boolean / string / number]'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
isOpen: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widget: 'switch',
|
||||
widgetConfig: {
|
||||
activeValue: 'ON',
|
||||
inactiveValue: 'OFF'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] activeColor / inactiveColor: switch 打开/关闭时的背景色',
|
||||
en: '[ATTR] activeColor / inactiveColor: background color when switch is on/off'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
isOpen: {
|
||||
type: 'boolean',
|
||||
ui: {
|
||||
widget: 'switch',
|
||||
widgetConfig: {
|
||||
activeColor: '#67C23A',
|
||||
inactiveColor: '#E6A23C'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
// 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>
|
||||
@@ -473,6 +473,29 @@ url: file url
|
||||
cn: `thumbnail-mode 模式下此参数无效`,
|
||||
en: `This parameter is invalid in thumbnail-mode mode`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] headers: 设置上传的请求头部.',
|
||||
en: '[ATTR] headers: set the request headers for the upload.'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
files: {
|
||||
type: 'array',
|
||||
ui: {
|
||||
widget: 'upload',
|
||||
widgetConfig: {
|
||||
uploadUrl: '/api/upload/getFileInfo', // 上传的地址
|
||||
headers: {
|
||||
author: 'daniel'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -109,7 +109,9 @@
|
||||
{ "url": "control-comps/radio.html", "name": "radio" },
|
||||
{ "url": "control-comps/checkbox.html", "name": "checkbox" },
|
||||
{ "url": "control-comps/upload.html", "name": "upload" },
|
||||
{ "url": "control-comps/label.html", "name": "label" }],
|
||||
{ "url": "control-comps/label.html", "name": "label" },
|
||||
{ "url": "control-comps/switch.html", "name": "switch" }],
|
||||
|
||||
layouts: [
|
||||
{ "url": "layout-comps/object.html", "name": "object" },
|
||||
{ "url": "layout-comps/array.html", "name": "array" },
|
||||
|
||||
Reference in New Issue
Block a user