ncform是什么
ncform是vipshop开源的js动态表单，使用了element前端风格
ncform的html用法
<html>
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.3/lib/theme-chalk/index.css">-->
<link rel="stylesheet" href="css/ncform_index.cssA">
</head>
<body>
<div id="demo">
<ncform :form-schema="formSchema" form-name="form-1" v-model="formSchema.value" @submit="submit()"></ncform>
<el-button @click="submit()">Submit</el-button>
</div>
<!--<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@ncform/ncform/dist/vueNcform.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="https://unpkg.com/@ncform/ncform-theme-elementui/dist/ncformStdComps.min.js"></script>-->
<script type="text/javascript" src = "js/axios.min.js"></script>
<script type="text/javascript" src = "js/vue.min.js"></script>
<script type="text/javascript" src = "js/ncformCommon.min.js"></script>
<script type="text/javascript" src = "js/vueNcform.min.js"></script>
<script type="text/javascript" src = "js/ncform_index.js"></script>
<script type="text/javascript" src = "js/ncformStdComps.min.js"></script>
<script type="text/javascript">
//const axios = require('axios');
Vue.use(vueNcform, { extComponents: ncformStdComps });
// Bootstrap the app
new Vue({
el: '#demo',
data: {
formSchema: {
type: 'object',
properties: {
name: {
type: 'string',
rules: {
required: true,
maxLength: 10,
},
ui: {
columns: 12, // 占用列数，一共12列。6代表占一半
label: 'First Name', // 标签内容
showLabel: false, // 是否显示标签（当为false不显示时，依然占着空间）
noLabelSpace: false, // 标签是否不占空间，优先级比showLabel高
legend: '', // 标题内容，当对象，数组布局数据类型时有效
showLegend: false, // 是否显示标题
placeholder: '请输入用户名', // 占位内容【支持dx表达式】
disabled: false, // 是否禁用【支持dx表达式】
readonly: false, // 是否只读【支持dx表达式】
hidden: false, // 是否隐藏【支持dx表达式】
itemClass: '', // 给表单项添加的样式名
},
},
"email": {
"type": "string",
ui: {
columns: 6, // 占用列数，一共12列。6代表占一半
label: 'First Name', // 标签内容
showLabel: false, // 是否显示标签（当为false不显示时，依然占着空间）
noLabelSpace: false, // 标签是否不占空间，优先级比showLabel高
legend: '', // 标题内容，当对象，数组布局数据类型时有效
showLegend: false, // 是否显示标题
placeholder: '请输入邮箱', // 占位内容【支持dx表达式】
disabled: false, // 是否禁用【支持dx表达式】
readonly: false, // 是否只读【支持dx表达式】
hidden: false, // 是否隐藏【支持dx表达式】
itemClass: '', // 给表单项添加的样式名
},
},
"age": {
"type": "integer",
ui: {
columns: 6, // 占用列数，一共12列。6代表占一半
label: 'First Name', // 标签内容
showLabel: false, // 是否显示标签（当为false不显示时，依然占着空间）
noLabelSpace: false, // 标签是否不占空间，优先级比showLabel高
legend: '', // 标题内容，当对象，数组布局数据类型时有效
showLegend: false, // 是否显示标题
placeholder: '请输入年龄', // 占位内容【支持dx表达式】
disabled: false, // 是否禁用【支持dx表达式】
readonly: false, // 是否只读【支持dx表达式】
hidden: false, // 是否隐藏【支持dx表达式】
itemClass: '', // 给表单项添加的样式名
},
},
"adult": {
"type": "boolean",
ui: {
columns: 6, // 占用列数，一共12列。6代表占一半
label: 'First Name', // 标签内容
showLabel: false, // 是否显示标签（当为false不显示时，依然占着空间）
noLabelSpace: false, // 标签是否不占空间，优先级比showLabel高
legend: '', // 标题内容，当对象，数组布局数据类型时有效
showLegend: false, // 是否显示标题
placeholder: 'test', // 占位内容【支持dx表达式】
disabled: false, // 是否禁用【支持dx表达式】
readonly: false, // 是否只读【支持dx表达式】
hidden: false, // 是否隐藏【支持dx表达式】
itemClass: '', // 给表单项添加的样式名
},
}
},
}
},
methods: {
submit() {
this.$ncformValidate('form-1').then(data => {
if (data.result) {
param_dict = {}
param_dict["name"] = this.$data.formSchema.value.name
param_dict["email"] = this.$data.formSchema.value.email
param_dict["age"] = this.$data.formSchema.value.age
console.log(param_dict)
axios.get('/user?param='+ param_dict)
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function (data) {
// always executed
console.log("")
});
}
});
}
}
});
</script>
</body>
</html>
request 请求使用的是axios
效果
image.png
ncform使有总结
对使用bootstrap或单独使用vue的表单校验，真是方便大多了
并且对一些校验，提示都已经帮做好了样式，而且还挺好看的。
https://github.com/ncform/ncform/blob/master/CONFIG_CN.md
-
Standard Components Preview Version | [Text Version] 各组件的使用办法(https://github.com/ncform/ncform/blob/master/STD-COMP.md)
网友评论