vxcontrol/ncform
1
0
Fork 0
mirror of https://github.com/vxcontrol/ncform.git synced 2026-07-19 18:23:32 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #43 from ncform/develop

Browse Source 
Develop
This commit is contained in:
daniel-dx
2019-03-02 22:50:44 -06:00
committed by GitHub
parent 14c1770086 023473e308
commit e4d37186e1
30 changed files with 445 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CONFIG.md
+49
View File
@@ -203,6 +203,55 @@ this.$ncformValidate('demoForm').then(data => {
})
```
- $ncformAddWidget({name, widget})
Add your custom form control
```
// Demo code:
this.$ncformAddWidget({name: 'sayHi', widget: {
mixins: [ncformCommon.mixins.vue.controlMixin],
template: '<div>hi {{modelVal}}</div>',
props: {
value: {
type: [String]
},
},
}});
```
- $ncformAddRule({name, rule})
Add your custom validation rule
```
// Demo code:
class MyCustomRule extends ncformCommon.ValidationRule {
constructor(props) {
super(props);
this.name = 'myCustom';
this.defaultErrMsg = 'yeah, show my custom rule message';
}
validateLogic(val, ruleVal) {
this.errMsg = "must fill in 'daniel'"
return val === 'daniel';
}
}
this.$ncformAddRule({name: 'myCustom', rule: MyCustomRule});
```
- $ncformSetLang(lang)
Switch language
```
// Demo code:
this.$ncformSetLang('en');
```
## ncform event
- submit
CONFIG_CN.md
+49
View File
@@ -203,6 +203,55 @@ this.$ncformValidate('demoForm').then(data => {
})
```
- $ncformAddWidget({name, widget})
增加自定义表单控件
```
// Demo code:
this.$ncformAddWidget({name: 'sayHi', widget: {
mixins: [ncformCommon.mixins.vue.controlMixin],
template: '<div>hi {{modelVal}}</div>',
props: {
value: {
type: [String]
},
},
}});
```
- $ncformAddRule({name, rule})
增加自定义验证规则
```
// Demo code:
class MyCustomRule extends ncformCommon.ValidationRule {
constructor(props) {
super(props);
this.name = 'myCustom';
this.defaultErrMsg = 'yeah, show my custom rule message';
}
validateLogic(val, ruleVal) {
this.errMsg = "must fill in 'daniel'"
return val === 'daniel';
}
}
this.$ncformAddRule({name: 'myCustom', rule: MyCustomRule});
```
- $ncformSetLang(lang)
切换语言
```
// Demo code:
this.$ncformSetLang('en');
```
## ncform event
- submit
EXT-DOC.md
+20 -2
View File
@@ -38,6 +38,10 @@ export MyCustomRule;
3.Register rule
```
Vue.use(vueNcform, { extRules: [{myCustom: MyCustomRule}] });
or
vm.$ncformAddRule({name: 'myCustom', rule: MyCustomRule});
```
4.Use it
@@ -61,7 +65,8 @@ npm i @ncform/ncform-common --save
<template>
<div >
<label>{{mergeConfig.msg}}</label>
<!-- use $t to get i18n data -->
<label>{{$t('hi', {name: mergeConfig.name})}}</label>
<!-- disabled / readonly / placeholder / hidden : use the computed version, not the config version. defined in controlMixin -->
<!-- modelVal: for binding value. defined in controlMixin -->
@@ -83,10 +88,19 @@ import ncformCommon from '@ncform/ncform-common';
export default {
mixins: [ncformCommon.mixins.vue.controlMixin],
i18nData: { // i18n
en: {
hi: 'Hi <%= name %>'
},
zh_cn: {
hi: '你好 <%= name %>'
}
},
data() {
return {
defaultConfig: { // your config's default value（Note: use mergeConfig when use config value）
msg: 'hello'
name: 'daniel'
}
}
},
@@ -109,6 +123,10 @@ export default {
```
Vue.use(vueNcform, { extComponents: {myCustomComp} });
or
vm.$ncformAddWidget({name: 'myCustomComp', widget: myCustomComp});
```
4.Use it
packages/ncform-common/src/mixins/vue/control-mixin.js
+27 -1
View File
@@ -1,10 +1,20 @@
import extend from "extend";
import axios from "axios";
import _template from "lodash-es/template";
import ncformUtils from "../../ncform-utils";
export default {
lang: (navigator.browserLanguage || navigator.language).replace(/-/, '_').toLowerCase(),
i18nData: {
en: {},
zh_cn: {}
},
created() {
this.$data.i18n = this.$options.i18nData[this.$options.lang] || this.$options.i18nData.en;
if (!this.$http) {
this.$http = this.$axios || this.axios || axios;
}
@@ -24,6 +34,12 @@ export default {
this.config
);
});
window.__$ncform.eventHub.$on('ncform set lang', this._changeLang)
},
beforeDestroy() {
window.__$ncform.eventHub.$off('ncform set lang', this._changeLang)
},
props: {
@@ -61,7 +77,8 @@ export default {
return {
mergeConfig: {},
defaultConfig: {},
modelVal: this.value
modelVal: this.value,
i18n: {},
};
},
@@ -108,6 +125,15 @@ export default {
_processModelVal(modelVal) {
return modelVal;
},
_changeLang(lang) {
this.$options.lang = lang.replace(/-/, '_').toLowerCase();
this.$data.i18n = this.$options.i18nData[this.$options.lang] || this.$options.i18nData.en;
},
$t(key, data) {
return Object.prototype.toString.call(data) !== "[object Object]" ? this.$data.i18n[key] : _template(this.$data.i18n[key])(data);
}
}
};
packages/ncform-common/src/mixins/vue/layout-array-mixin.js
+32 -3
View File
@@ -1,9 +1,22 @@
import _cloneDeep from "lodash-es/cloneDeep";
import _template from "lodash-es/template";
import extend from "extend";
import ncformUtils from "../../ncform-utils";
export default {
lang: (navigator.browserLanguage || navigator.language).replace(/-/, '_').toLowerCase(),
i18nData: {
en: {
},
zh_cn: {
}
},
created() {
this.$data.i18n = this.$options.i18nData[this.$options.lang] || this.$options.i18nData.en;
this.schema.value =
this.schema.value && this.schema.value.length > 0
? this.schema.value
@@ -26,6 +39,12 @@ export default {
this.config
);
});
window.__$ncform.eventHub.$on('ncform set lang', this._changeLang)
},
beforeDestroy() {
window.__$ncform.eventHub.$off('ncform set lang', this._changeLang)
},
props: {
@@ -65,9 +84,10 @@ export default {
disableReorder: false,
disableAdd: false,
disableDel: false,
addTxt: "Add",
delAllTxt: "Del All"
}
addTxt: "",
delAllTxt: "",
},
i18n: {},
};
},
@@ -137,6 +157,15 @@ export default {
collapse() {
if (!this.$data.mergeConfig.disableCollapse)
this.$data.mergeConfig.collapsed = !this.$data.mergeConfig.collapsed;
},
_changeLang(lang) {
this.$options.lang = lang.replace(/-/, '_').toLowerCase();
this.$data.i18n = this.$options.i18nData[this.$options.lang] || this.$options.i18nData.en;
},
$t(key, data) {
return Object.prototype.toString.call(data) !== "[object Object]" ? this.$data.i18n[key] : _template(this.$data.i18n[key])(data);
}
}
};
packages/ncform-theme-elementui/examples/control-comps/checkbox.html
+3
View File
@@ -282,6 +282,9 @@ resField: Which field of the response data as the data source, as the example re
// Bootstrap the app
new Vue({
el: '#demo',
mounted() {
this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
},
data: {
formSchemas: getFormSchemas(),
originFormSchemas: getFormSchemas()
packages/ncform-theme-elementui/examples/control-comps/date-picker.html
+3
View File
@@ -200,6 +200,9 @@
// Bootstrap the app
new Vue({
el: '#demo',
mounted() {
this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
},
data: {
formSchemas: getFormSchemas(),
originFormSchemas: getFormSchemas()
packages/ncform-theme-elementui/examples/control-comps/input.html
+3
View File
@@ -572,6 +572,9 @@ The description of each field of upload is as follows:
// Bootstrap the app
new Vue({
el: '#demo',
mounted() {
this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
},
data: {
formSchemas: getFormSchemas(),
originFormSchemas: getFormSchemas()
packages/ncform-theme-elementui/examples/control-comps/label.html
+2 -2
View File
@@ -60,7 +60,7 @@
properties: {
label: {
type: 'string',
default: 'some text',
default: 'ncform',
ui: {
widget: 'label'
}
@@ -78,7 +78,7 @@
properties: {
label: {
type: 'string',
value: 'some text',
value: 'ncform, a nice form development way that generates form UIs and their interactions with just configuration.',
ui: {
widget: 'label'
}
packages/ncform-theme-elementui/examples/control-comps/select.html
+3
View File
@@ -351,6 +351,9 @@
// Bootstrap the app
new Vue({
el: '#demo',
mounted() {
this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
},
data: {
formSchemas: getFormSchemas(),
originFormSchemas: getFormSchemas()
packages/ncform-theme-elementui/examples/control-comps/upload.html
+3
View File
@@ -469,6 +469,9 @@ url: file url
// Bootstrap the app
new Vue({
el: '#demo',
mounted() {
this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
},
data: {
formSchemas: getFormSchemas(),
originFormSchemas: getFormSchemas()
packages/ncform-theme-elementui/examples/demo.css
+2 -1
View File
@@ -9,6 +9,7 @@
}
#demo .demo_item-wrapper > div:first-child {
flex: 1;
width: 33%;
}
#demo .demo_item-wrapper > div:first-child small {
margin-top: 8px; display: block;
@@ -31,4 +32,4 @@
}
.doc .el-submenu .el-menu-item {
height: 40px;
}
}
packages/ncform-theme-elementui/examples/layout-comps/array-table.html
+3
View File
@@ -268,6 +268,9 @@
// Bootstrap the app
new Vue({
el: '#demo',
mounted() {
this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
},
data: {
formSchemas: getFormSchemas(),
originFormSchemas: getFormSchemas()
packages/ncform-theme-elementui/examples/layout-comps/array.html
+3
View File
@@ -303,6 +303,9 @@
// Bootstrap the app
new Vue({
el: '#demo',
mounted() {
this.$ncformSetLang(lang === 'cn' ? 'zh_cn' : 'en');
},
data: {
formSchemas: getFormSchemas(),
originFormSchemas: getFormSchemas()
packages/ncform-theme-elementui/src/components/control-comps/checkbox.vue
+13 -2
View File
@@ -10,7 +10,7 @@
:indeterminate="mergeConfig.isIndeterminate"
v-model="mergeConfig.checkAll"
@change="handleCheckAllChange"
>全选</el-checkbox>
>{{$t('all')}}</el-checkbox>
<el-checkbox-group
v-if="!readonly"
@@ -98,6 +98,17 @@
mixins: [controlMixin],
i18nData: {
en: {
yes: 'Yes',
all: 'All'
},
zh_cn: {
yes: '是',
all: '全选'
}
},
props: {
value: {
// type: [String, Number, Boolean, Array],
@@ -204,7 +215,7 @@
if (enumSourceRemote && enumSourceRemote.remoteUrl) {
vm.getRemoteSource();
} else if (!vm.mergeConfig.enumSource.length) {
vm.mergeConfig.enumSource = [ {label: '是', value: true}];
vm.mergeConfig.enumSource = [ {label: this.$t('yes'), value: true}];
}
}
}
packages/ncform-theme-elementui/src/components/control-comps/date-picker.vue
+27 -8
View File
@@ -1,13 +1,13 @@
<template>
<el-date-picker class="ncform-date-picker"
v-if="mergeConfig.type && typeOptions[mergeConfig.type]"
:placeholder="placeholder || typeOptions[mergeConfig.type].placeholder"
:placeholder="placeholder || $t(typeOptions[mergeConfig.type].placeholder)"
:disabled="disabled"
:readonly="readonly"
v-show="!hidden"
v-model="modelVal"
:type="mergeConfig.type"
:format="mergeConfig.format || typeOptions[mergeConfig.type].format"
:format="mergeConfig.format || $t(typeOptions[mergeConfig.type].format)"
>
</el-date-picker>
</template>
@@ -44,6 +44,25 @@ const controlMixin = ncformCommon.mixins.vue.controlMixin;
export default {
mixins: [controlMixin],
i18nData: {
en: {
chYear: 'Choose Year',
chMonth: 'Choose Month',
chDate: 'Choose Date',
chWeek: 'Choose Week',
chTime: 'Choose Datetime',
weekFormat: 'Week WW of yyyy'
},
zh_cn: {
chYear: '选择年份',
chMonth: '选择月份',
chDate: '选择日期',
chWeek: '选择周',
chTime: '选择时间',
weekFormat: 'yyyy年 第WW周'
}
},
props: {
value: {
type: String,
@@ -70,23 +89,23 @@ export default {
typeOptions: {
year: {
format: '',
placeholder: '选择年',
placeholder: 'chYear',
},
month: {
format: '',
placeholder: '选择月',
placeholder: 'chMonth',
},
date: {
format: '',
placeholder: '选择日期',
placeholder: 'chDate',
},
week: {
format: 'yyyy年 第WW周',
placeholder: '选择周',
format: 'weekFormat',
placeholder: 'chWeek',
},
datetime:{
format: '',
placeholder: '选择时间',
placeholder: 'chTime',
}
},
// 组件特有的配置属性
packages/ncform-theme-elementui/src/components/control-comps/input.vue
+19 -6
View File
@@ -10,18 +10,18 @@
<el-button slot="prepend" v-if="mergeConfig.compound.prependIcon" :icon="mergeConfig.compound.prependIcon"></el-button>
<el-button slot="append" v-if="mergeConfig.compound.appendIcon" :icon="mergeConfig.compound.appendIcon"></el-button>
<el-select v-if="mergeConfig.compound.prependSelect" v-model="prependSelectVal" slot="prepend" placeholder="请选择">
<el-select v-if="mergeConfig.compound.prependSelect" v-model="prependSelectVal" slot="prepend" :placeholder="$t('selectPls')">
<el-option v-for="item in prependSelectOptions" :label="item[mergeConfig.compound.prependSelect.itemLabelField]" :value="item[mergeConfig.compound.prependSelect.itemValueField]" :key="item[mergeConfig.compound.prependSelect.itemValueField]"></el-option>
</el-select>
<el-select v-if="mergeConfig.compound.appendSelect" v-model="appendSelectVal" slot="append" placeholder="请选择">
<el-select v-if="mergeConfig.compound.appendSelect" v-model="appendSelectVal" slot="append" :placeholder="$t('selectPls')">
<el-option v-for="item in appendSelectOptions" :label="item[mergeConfig.compound.appendSelect.itemLabelField]" :value="item[mergeConfig.compound.appendSelect.itemValueField]" :key="item[mergeConfig.compound.appendSelect.itemValueField]"></el-option>
</el-select>
</template>
<!--上传类型-->
<template v-else-if="mergeConfig.type === 'file' && mergeConfig.upload">
<el-button slot="append" v-if="mergeConfig.upload.uploadUrl" class="ncform-input-upload" @click="handleClickUpload">{{isUploading ? '上传中...' : mergeConfig.upload.uploadText}}
<el-button slot="append" v-if="mergeConfig.upload.uploadUrl" class="ncform-input-upload" @click="handleClickUpload">{{isUploading ? $t('uploading') : mergeConfig.upload.uploadText || $t('upload')}}
<input type="file" ref="upload" :accept="mergeConfig.upload.accept || ''" @change="handleFileChange" />
</el-button>
</template>
@@ -42,11 +42,11 @@
<el-button slot="prepend" v-if="mergeConfig.compound.prependIcon" :icon="mergeConfig.compound.prependIcon"></el-button>
<el-button slot="append" v-if="mergeConfig.compound.appendIcon" :icon="mergeConfig.compound.appendIcon"></el-button>
<el-select v-if="mergeConfig.compound.prependSelect" v-model="prependSelectVal" slot="prepend" placeholder="请选择">
<el-select v-if="mergeConfig.compound.prependSelect" v-model="prependSelectVal" slot="prepend" :placeholder="$t('selectPls')">
<el-option v-for="item in prependSelectOptions" :label="item[mergeConfig.compound.prependSelect.itemLabelField]" :value="item[mergeConfig.compound.prependSelect.itemValueField]" :key="item[mergeConfig.compound.prependSelect.itemValueField]"></el-option>
</el-select>
<el-select v-if="mergeConfig.compound.appendSelect" v-model="appendSelectVal" slot="append" placeholder="请选择">
<el-select v-if="mergeConfig.compound.appendSelect" v-model="appendSelectVal" slot="append" :placeholder="$t('selectPls')">
<el-option v-for="item in appendSelectOptions" :label="item[mergeConfig.compound.appendSelect.itemLabelField]" :value="item[mergeConfig.compound.appendSelect.itemValueField]" :key="item[mergeConfig.compound.appendSelectVal.itemValueField]"></el-option>
</el-select>
</template>
@@ -84,6 +84,19 @@ const controlMixin = ncformCommon.mixins.vue.controlMixin;
export default {
mixins: [controlMixin],
i18nData: {
en: {
selectPls: 'Select Please',
uploading: 'Uploading...',
upload: 'Upload'
},
zh_cn: {
selectPls: '请选择',
uploading: '上传中...',
upload: '点击上传'
}
},
props: {
value: {
type: [String, Number, Object]
@@ -260,7 +273,7 @@ export default {
minSize: 0 // 最小图片大小，单位KB，0代表不限
},
resField: "", // 获取返回结果的字段,
uploadText: "点击上传" // 上传按钮的名称
uploadText: "" // 上传按钮的名称
}
}
};
packages/ncform-theme-elementui/src/components/control-comps/label.vue
+4 -26
View File
@@ -1,16 +1,8 @@
<template>
<el-tooltip
class="ncform-label-wrap"
:content="modelVal"
placement="top"
:disabled="mergeConfig.multiLine"
>
<label
ref="label"
:class="['ncform-label', mergeConfig.multiLine ? 'multi-line' : '']"
:style="{ width: dynamicWidth }"
>{{val}}</label>
</el-tooltip>
<label :title="mergeConfig.multiLine ? '' : val"
ref="label"
:class="['ncform-label', mergeConfig.multiLine ? 'multi-line' : '']"
>{{val}}</label>
</template>
<style lang="scss">
@@ -48,27 +40,13 @@
multiLine: false // 是否多行显示 （当为false时，内容溢出时用...显示，然后鼠标移上去可显示完整的内容）
},
val: '',
dynamicWidth: '100%'
// mergeConfig: 请使用该值去绑定你的组件的属性，它包含了defaultConfig data和config props的值
// modelVal：请使用该值来绑定实际的组件的model
}
},
methods: {
setDynamicWidth() {
const vm = this;
// 不只使用css3的原因在于 内嵌ncform布局组件，此组件的父组件下有子组件具有浮动属性导致宽度继承失效，父组件宽度为0，只能靠子组件自行撑开宽度
if (!vm.mergeConfig.multiLine && vm.modelVal !== '') {
vm.$nextTick(() => {
vm.dynamicWidth = `${this.$parent.$el.offsetWidth}px`;
})
}
}
},
mounted() {
const vm = this;
vm.setDynamicWidth();
vm.val = vm.modelVal;
},
}
packages/ncform-theme-elementui/src/components/control-comps/radio.vue
+12 -1
View File
@@ -67,6 +67,17 @@
mixins: [controlMixin],
i18nData: {
en: {
yes: 'Yes',
no: 'No'
},
zh_cn: {
yes: '是',
no: '否'
}
},
props: {
value: {
type: [String, Number, Boolean]
@@ -157,7 +168,7 @@
if (enumSourceRemote && enumSourceRemote.remoteUrl) {
vm.getRemoteSource();
} else if (!vm.mergeConfig.enumSource.length) {
vm.mergeConfig.enumSource = [ {value: true, label: '是'}, {value: false, label: '否'} ];
vm.mergeConfig.enumSource = [ {value: true, label: this.$t('yes')}, {value: false, label: this.$t('no')} ];
}
}
}
packages/ncform-theme-elementui/src/components/control-comps/select.vue
+10 -1
View File
@@ -1,6 +1,6 @@
<template>
<el-select v-model="modelVal" :placeholder="placeholder || '请选择'" v-show="!hidden" :disabled="disabled || readonly"
<el-select v-model="modelVal" :placeholder="placeholder || $t('selectPls')" v-show="!hidden" :disabled="disabled || readonly"
:clearable="mergeConfig.clearable"
:multiple="mergeConfig.multiple"
:filterable="mergeConfig.filterable"
@@ -35,6 +35,15 @@ const ncformUtils = ncformCommon.ncformUtils;
export default {
mixins: [controlMixin],
i18nData: {
en: {
selectPls: 'Select Please'
},
zh_cn: {
selectPls: '请选择'
}
},
props: {
value: {
type: [String, Number, Boolean, Object, Array],
packages/ncform-theme-elementui/src/components/control-comps/upload.vue
+34 -9
View File
@@ -24,7 +24,7 @@
<!-- 可拖拽 -->
<template v-if="!readonly && mergeConfig.drag" slot="trigger">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__text" v-html="$t('uploadTips')"></div>
</template>
<div v-if="mergeConfig.drag && disabled" class="disabled-mask"></div>
@@ -35,7 +35,7 @@
size="small"
type="success"
@click="submitUpload"
>上传到服务器</el-button>
>{{$t('uploadServer')}}</el-button>
<!-- 不能可拖拽 是否自动上传 维度-->
<el-button
@@ -43,7 +43,7 @@
:disabled="disabled"
size="small"
type="primary"
>点击上传</el-button>
>{{$t('upload')}}</el-button>
<template v-if="!readonly && !mergeConfig.drag && !mergeConfig.autoUpload">
<el-button
@@ -51,14 +51,14 @@
slot="trigger"
size="small"
type="primary"
>选取文件</el-button>
>{{$t('chFile')}}</el-button>
<el-button
:disabled="disabled"
class="upload-btn"
size="small"
type="success"
@click="submitUpload"
>上传到服务器</el-button>
>{{$t('uploadServer')}}</el-button>
</template>
</el-upload>
@@ -120,6 +120,31 @@
mixins: [controlMixin],
i18nData: {
en: {
uploadTips: 'Drag file here, or <em>click to upload</em>',
uploadServer: 'Upload to server',
upload: 'Upload',
chFile: 'Select file',
successChTips: '<%= fileCount %> files selected',
uploadSuccess: 'Uploaded successfully!',
uploadFail: 'Uploading files all failed!',
uploadSomeFail: 'Some files failed to upload!',
limitTips: 'No more than <%= limit %> files can be selected, please re-select'
},
zh_cn: {
uploadTips: '将文件拖到此处，或<em>点击上传</em>',
uploadServer: '上传到服务器',
upload: '点击上传',
chFile: '选取文件',
successChTips: '共选中文件 <%= fileCount %> 个',
uploadSuccess: '上传成功！',
uploadFail: '上传文件全部失败！',
uploadSomeFail: '部分文件上传失败！',
limitTips: '选中文件不能多于<%= limit %>个，请重新选择'
}
},
props: {
value: {
type: Array,
@@ -210,7 +235,7 @@
&& !vm.mergeConfig.showFileList
&& fileList.length) {
vm.$message({
message: `成功选中文件！目前选中文件共 ${fileList.length} 个`,
message: this.$t('successChTips', {fileCount: fileList.length}),
type: 'success'
});
}
@@ -247,12 +272,12 @@
let content;
if (total === vm.uploadInfo.num[state]) {
vm.$message({
message: state === 'success' ? '上传成功！' : '上传文件全部失败！',
message: state === 'success' ? vm.$t('uploadSuccess') : vm.$t('uploadFail'),
type: state
});
} else {
vm.$message({
message: '部分文件上传失败！',
message: vm.$t('uploadSomeFail'),
type: 'error'
});
}
@@ -266,7 +291,7 @@
handleUploadExceed(files, fileList) {
const vm = this;
vm.$message({
message: `此次选择导致一次上传的文件个数超过限制数目${vm.mergeConfig.limit}个，请重新选择！`,
message: vm.$t('limitTips', {limit: vm.mergeConfig.limit}),
type: 'warning'
});
},
packages/ncform-theme-elementui/src/components/layout-comps/array-table.vue
+16 -3
View File
@@ -26,7 +26,7 @@
</small>
</th>
<th v-if="!mergeConfig.disableDel || !mergeConfig.disableReorder">操作</th>
<th v-if="!mergeConfig.disableDel || !mergeConfig.disableReorder">{{$t('action')}}</th>
</thead>
<tbody>
<tr v-for="(dataItem, idx) in schema.value" :key="dataItem.__dataSchema.__id">
@@ -49,8 +49,8 @@
<td :colspan="renderSchemas.length + 1">
<!-- 列表控制按钮 -->
<div class="el-button-group" v-if="!mergeConfig.disableAdd || !mergeConfig.disableDel">
<button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="el-button el-button--mini"><i class="el-icon-circle-plus-outline"></i> {{mergeConfig.addTxt}}</button>
<button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="el-button el-button--danger el-button--mini"><i class="el-icon-remove"></i> {{mergeConfig.delAllTxt}}</button>
<button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="el-button el-button--mini"><i class="el-icon-circle-plus-outline"></i> {{mergeConfig.addTxt || $t('add')}}</button>
<button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="el-button el-button--danger el-button--mini"><i class="el-icon-remove"></i> {{mergeConfig.delAllTxt || $t('delAll')}}</button>
</div>
</td>
</tr>
@@ -123,6 +123,19 @@
mixins: [layoutArrayMixin],
i18nData: {
en: {
action: 'Action',
add: 'Add',
delAll: 'Delete All'
},
zh_cn: {
action: '操作',
add: '增加',
delAll: '删除全部'
}
},
created() {
// 取得表头数据
packages/ncform-theme-elementui/src/components/layout-comps/array.vue
+13 -2
View File
@@ -44,8 +44,8 @@
<!-- 列表控制按钮 -->
<div v-show="!mergeConfig.collapsed" class="el-button-group" v-if="!mergeConfig.disableAdd || !mergeConfig.disableDel">
<button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="el-button el-button--mini"><i class="el-icon-circle-plus-outline"></i> {{mergeConfig.addTxt}}</button>
<button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="el-button el-button--danger el-button--mini"><i class="el-icon-remove"></i> {{mergeConfig.delAllTxt}}</button>
<button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="el-button el-button--mini"><i class="el-icon-circle-plus-outline"></i> {{mergeConfig.addTxt || $t('add')}}</button>
<button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="el-button el-button--danger el-button--mini"><i class="el-icon-remove"></i> {{mergeConfig.delAllTxt || $t('delAll')}}</button>
</div>
</div>
@@ -98,6 +98,17 @@
mixins: [layoutArrayMixin],
i18nData: {
en: {
add: 'Add',
delAll: 'Delete All'
},
zh_cn: {
add: '增加',
delAll: '删除全部'
}
},
created() {
this._supportItemsCollapse();
},
packages/ncform/examples/components/vue-ncform/base-array-use.html
+6 -2
View File
@@ -18,6 +18,7 @@
<ncform :form-schema="formSchema" v-model="formSchema.value" :form-name="'formname_' + idx"></ncform>
<button class="btn btn-primary" @click="submit(formSchema.value, 'formname_' + idx)">提交</button>
<button class="btn btn-primary" @click="changeLang()">切换语言</button>
</div>
</div>
@@ -58,8 +59,8 @@
// disableAdd: true,
// disableDel: true,
// disableReorder: true,
addTxt: '增加',
delAllTxt: '删除全部',
addTxt: '加一个',
delAllTxt: '删全部',
// disableItemCollapse: false,
// itemCollapse: true
@@ -216,6 +217,9 @@
console.log(JSON.stringify(value, null, 2));
}
});
},
changeLang() {
this.$ncformSetLang('en');
}
}
});
packages/ncform/examples/components/vue-ncform/ext-components-use.html
+21 -2
View File
@@ -16,6 +16,7 @@
<ncform :form-schema="formSchema" v-model="formSchema.value"></ncform>
<button class="btn btn-primary" @click="submit()">提交</button>
<button class="btn btn-primary" @click="changeLang()">切换语言</button>
</div>
<script type="text/javascript" src="../../../node_modules/vue/dist/vue.js"></script>
@@ -27,7 +28,15 @@
let extComponents = {
'sayHi': {
mixins: [ncformCommon.mixins.vue.controlMixin],
template: '<div>hi {{modelVal}}</div>',
template: '<div>{{$t("hi", {msg: modelVal})}} {{modelVal}}</div>',
i18nData: {
en: {
hi: 'Hi <%= msg %>'
},
zh_cn: {
hi: '你好 <%= msg %>'
}
},
props: {
value: {
type: [String]
@@ -36,11 +45,18 @@
}
}
Vue.use(vueNcform, { extComponents });
// You can add your custom widget while registering ncform
// Vue.use(vueNcform, { extComponents });
Vue.use(vueNcform);
// Bootstrap the app
new Vue({
el: '#demo',
created() {
// You can add your custom widget after registering ncform as follow:
this.$ncformAddWidget({name: 'sayHi', widget: extComponents.sayHi});
},
data: {
formSchema: {
type: 'object',
@@ -68,6 +84,9 @@
methods: {
submit() {
console.log(JSON.stringify(this.$data.formSchema.value, null, 2));
},
changeLang() {
this.$ncformSetLang('en');
}
}
});
packages/ncform/examples/components/vue-ncform/ext-rule-use.html
+20 -11
View File
@@ -34,25 +34,34 @@
}
validateLogic(val, ruleVal) {
this.errMsg = "dynamic error"
return new Promise((rs, rj)=>{
const rd = parseInt(Math.random()*20+1)*100;
console.log('request', rd);
setTimeout(()=>{
rs(val === 'daniel');
console.log('==>',rd)
},rd);
});
// return val === 'daniel';
// this.errMsg = "dynamic error"
// return new Promise((rs, rj)=>{
// const rd = parseInt(Math.random()*20+1)*100;
// console.log('request', rd);
// setTimeout(()=>{
// rs(val === 'daniel');
// console.log('==>',rd)
// },rd);
// });
this.errMsg = "must fill in 'daniel'"
return val === 'daniel';
}
}
Vue.use(vueNcform, { extRules: [{myCustom: MyCustomRule}] });
// You can add your custom rule while registering ncform
// Vue.use(vueNcform, { extRules: [{myCustom: MyCustomRule}] });
Vue.use(vueNcform);
// Bootstrap the app
new Vue({
el: '#demo',
created() {
// You can add your custom rule after registering ncform as follow:
this.$ncformAddRule({name: 'myCustom', rule: MyCustomRule});
},
data: {
formSchema: {
type: 'object',
packages/ncform/examples/components/vue-ncform/table-array-use.html
+4
View File
@@ -18,6 +18,7 @@
<ncform :form-schema="formSchema" v-model="formSchema.value"></ncform>
<button class="btn btn-primary" @click="submit(formSchema.value)">提交</button>
<button class="btn btn-primary" @click="changeLang()">切换语言</button>
</div>
</div>
@@ -209,6 +210,9 @@
methods: {
submit(value) {
console.log(JSON.stringify(value, null, 2));
},
changeLang() {
this.$ncformSetLang('en');
}
}
});
packages/ncform/src/components/vue-ncform/index.js
+15
View File
@@ -59,6 +59,21 @@ module.exports = {
return vm.reset();
};
Vue.prototype.$ncformAddWidget = function({name, widget}) {
Vue.component(`ncform-${_kebabCase(name)}`, widget)
}
Vue.prototype.$ncformAddRule = function({name, rule}) {
let ruleItem = {};
ruleItem[name] = rule;
window.__$ncform.__ncformRegularValidation.registerRule(ruleItem);
}
window.__$ncform.eventHub = window.__$ncform.eventHub || new Vue();
Vue.prototype.$ncformSetLang = function(lang) {
window.__$ncform.eventHub.$emit('ncform set lang', lang);
}
Vue.component("ncform", ncform);
}
};
packages/ncform/src/components/vue-ncform/layout-comps/array-table.vue
+16 -3
View File
@@ -20,7 +20,7 @@
</small>
</th>
<th v-if="!mergeConfig.disableDel || !mergeConfig.disableReorder">操作</th>
<th v-if="!mergeConfig.disableDel || !mergeConfig.disableReorder">{{$t('action')}}</th>
</tr>
</thead>
<tbody>
@@ -44,8 +44,8 @@
<td :colspan="renderSchemas.length + 1">
<!-- 列表控制按钮 -->
<div class="btn-group btn-group-sm" v-if="!mergeConfig.disableAdd || !mergeConfig.disableDel">
<button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="btn btn-secondary">Add</button>
<button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="btn btn-danger btn-secondary">Del All</button>
<button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="btn btn-secondary">{{mergeConfig.addTxt || $t('add')}}</button>
<button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="btn btn-danger btn-secondary">{{mergeConfig.delAllTxt || $t('delAll')}}</button>
</div>
</td>
</tr>
@@ -79,6 +79,19 @@
mixins: [layoutArrayMixin],
i18nData: {
en: {
action: 'Action',
add: 'Add',
delAll: 'Delete All'
},
zh_cn: {
action: '操作',
add: '增加',
delAll: '删除全部'
}
},
created() {
// 取得表头数据
packages/ncform/src/components/vue-ncform/layout-comps/array.vue
+13 -2
View File
@@ -40,8 +40,8 @@
<!-- 列表控制按钮 -->
<div v-show="!mergeConfig.collapsed" class="btn-group btn-group-sm" v-if="!mergeConfig.disableAdd || !mergeConfig.disableDel">
<button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="btn btn-secondary">{{mergeConfig.addTxt}}</button>
<button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="btn btn-danger btn-secondary">{{mergeConfig.delAllTxt}}</button>
<button @click="addItem()" v-if="!mergeConfig.disableAdd" type="button" class="btn btn-secondary">{{mergeConfig.addTxt || $t('add')}}</button>
<button @click="delAllItems()" v-if="!mergeConfig.disableDel" type="button" class="btn btn-danger btn-secondary">{{mergeConfig.delAllTxt || $t('delAll')}}</button>
</div>
</div>
@@ -68,6 +68,17 @@
mixins: [layoutArrayMixin],
i18nData: {
en: {
add: 'Add',
delAll: 'Delete All'
},
zh_cn: {
add: '增加',
delAll: '删除全部'
}
},
created() {
this._supportItemsCollapse();
},