Product
Socket Now Supports uv.lock Files
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
By Trevor Norris - Jan 09, 2025
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@icreate/ics-basic-form-builder
Advanced tools
说明
这是一个表单设计器
安装
npm i @icreate/ics-basic-form-builder # 安装包
在vue使用
- 在vue项目的main.js中引入
import VForm from '@icreate/ics-basic-form-builder' //引入VForm库
import '@icreate/ics-basic-form-builder/styles/form-builder.css' //引入VForm样式
import IcsUI from '@icreate/ics-ui' //引入ics-ui
import '@icreate/ics-ui/lib/ics-ui.css'
Vue.use(IcsUI) //全局注册ics-ui
Vue.use(VForm) //全局注册VForm(同时注册了v-form-designer和v-form-render组件)
- 在Vue模板中使用表单设计器组件
<v-form-designer
ref="vfDesignerRef"
:designer-config="designerConfig"
:basicFieldsTransfer="basicFieldsTransfer"
:formJson="formJson"
:formTemplateJson="formTemplateJson"
@saveFormTemplateHandler="saveFormTemplateHandler"
></v-form-designer>
- 在Vue模板中使用表单渲染器组件
<v-form-render
ref="vFormRef"
:form-json="formJson"
:form-data="formData"
:option-data="optionData"
@appendButtonClick="appendButtonClickHandler"
@formChange="handleFormChange"
>
</v-form-render>
<ics-button type="primary" @click="submitForm">Submit</ics-button>
数据格式：
v-form-designer 表单设计器
designerConfig ：表单设计器配置 （必传） basicFieldsTransfer ： 基础字段组件（必传） formJson： 显示上次编辑的设计器页面 （选传） formTemplateJson ：显示保存的模板 （选传） saveFormTemplateHandler ：保存模板后的回调函数，可以获取到模板的json数据
v-form-render 表单渲染器 formJson：需要渲染的表单的json数据（从设计器复制json数据）（必传） formData：需要渲染的表单数据（选传） optionData：动态传入的选项数据（例如：多选框的选项）（选传） appendButtonClickHandler ： 输入框后置按钮的回调函数（选传） handleFormChange: 表单数据改变时触发 submitForm: 可以获取到表单数据formData
export default {
data() {
return {
designerConfig: {
resetFormJson: false,
toolbarMaxWidth: 490,
},
basicFieldsTransfer: [
{
type: "input", //表单组件类型（必传）
options: {
label: "输入框", //组件label（必传）
name: "inputtext", //组件name（必传，而且必须是唯一值）
type: "text", //input 输入框的类型（可传）
defaultValue:"", //默认值（可传）
required: true, //是否必填（可传）
requiredHint:'', //必填提示（可传）
validation: "/^[\u4e00-\u9fa5]+$/", //组件的正则校验规则 （可传）
validationHint: "只能输入中文哦", //校验提示语（可传）
reverseValidation:'/[^\u4e00-\u9fa5]/g', //数据格式：正则取反+g (需要限制输入时，必传)
max:"" ,//限制输入的最大值 (限制输入是数字的情况)
readOnlyNoBorder: true, //只读时的样式 不要边框
},
},
{
type: "input",
options: {
label: "输入框",
name: "inputpsw",
type: "password",
},
},
{
type: "textarea",
options: {
label: "文本域",
name: "textarea",
},
},
{
type: "radio",
options: {
name: "radio",
label: "单选项",
optionItems: [ //选项列表（必传）
{
label: "选项1",
value: "1",
},
{
label: "选项2",
value: "2",
},
],
},
},
{
type: "checkbox",
options: {
name: "checkbox",
label: "多选框",
max: 1, // 可被勾选的 checkbox 的最大数量
optionItems: [ //选项列表（必传）
{
label: "选项1",
value: "1",
},
{
label: "选项2",
value: "2",
},
{
label: "选项3",
value: "3",
},
],
},
},
{
type: "number",
options: {
name: "number",
label: "计数器",
min: 0, //最小值（可传）
max: 100000, //最大值（可传）
precision: 0, //精度（可传）
step: 1, //增减步长（可传）
},
},
{
type: "select",
options: {
name: "select",
label: "下拉框",
labelAndValue: true, // 获取选项数据的格式（例如：选中下拉框，是否需要获取label值，默认不获取）
optionItems: [ //下拉列表（必传）
{
id:"", // 唯一key值 （如果value值不唯一，id必传）
label: "select 1",
value: 1,
},
{
label: "select 2",
value: 2,
},
{
label: "select 3",
value: 3,
},
],
},
},
{
type: "select-plus",
options: {
name: "select-plus",
label: "下拉框加强版",
optionItems: [
{
label: "select 1",
value: 1,
},
{
label: "select 2",
value: 2,
},
{
label: "select 3",
value: 3,
},
],
},
},
{
type: "time",
options: {
name: "time",
label: "时间",
format: "HH:mm:ss", //时间格式（可传）
},
},
{
type: "time-range",
options: {
name: "time-range",
label: "时间范围",
format: "HH:mm:ss", //时间格式（可传）
},
},
{
type: "date",
options: {
name: "date",
label: "日期",
format: "yyyy-MM-dd", //日期显示格式（可传）
valueFormat: "yyyy-MM-dd", //日期对象格式（可传）
},
},
{
type: "date-range",
options: {
name: "date-range",
label: "日期范围",
format: "yyyy-MM-dd", //日期显示格式（可传）
valueFormat: "yyyy-MM-dd", //日期对象格式（可传）
},
},
{
type: "datetime",
options: {
name: "datetime",
label: "日期时间",
format: "yyyy-MM-dd HH:mm:ss", //日期显示格式（可传）
valueFormat: "yyyy-MM-dd HH:mm:ss", //日期对象格式（可传）
},
},
{
type: "switch",
options: {
name: "switch",
label: "开关",
},
},
{
type: "rate",
options: {
name: "rate",
label: "评分",
},
},
{
type: "button",
options: {
name: "button",
label: "按钮",
},
},
{
type: "cascader",
options: {
name: "cascader",
label: "级联选择",
optionItems: [ //级联选择选项（必传）
{
label: "select 1",
value: 1,
children: [{ label: "child 1", value: 11 }],
},
{ label: "select 2", value: 2 },
{ label: "select 3", value: 3 },
],
},
},
{
type: "combo-grid",
options: {
name: "comboGrid",
label: "组合网格",
labelColumn: "name", //name列对应label
valueColumn: "id", //id列对应value(选中列表，获取的值)
valueKey:"", //添加表格数据的唯一key值属性（不传，默认是valueColumn）
labelAndValue: true, //true: 绑定的值是对象(含label) 默认为false
customFilter: ["id", "name"], //自定义搜索字段
optionItems: { //选项值：表头字段+表格数据 （必传）
thOptions: [
//表头
{
label: "日期",
value: "date",
width: "180",
},
{
label: "姓名",
value: "name",
width: "180",
},
{
label: "地址",
value: "address",
width: "260",
},
],
tbodyOptions: [
//表格内容
{
id: "111111",
date: "2016-05-02",
name: "王小虎1",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: "111112",
date: "2016-05-04",
name: "王小虎2",
address: "上海市普陀区金沙江路 1517 弄",
},
{
id: "111113",
date: "2016-05-01",
name: "王小虎3",
address: "上海市普陀区金沙江路 1519 弄",
},
],
},
},
},
],
formTemplateJson:
JSON.parse(localStorage.getItem("saveFormTemplateJson")) || null,
formJson: {
widgetList: [
{
type: "input",
options: {
labelAlign: "",
defaultValue: "",
placeholder: "",
columnWidth: "200px",
size: "",
labelWidth: null,
labelHidden: false,
readonly: false,
disabled: false,
hidden: false,
clearable: true,
showPassword: false,
required: true,
requiredHint: "",
validation: "/^[一-龥]+$/",
validationHint: "只能输入中文哦",
minLength: null,
maxLength: null,
showWordLimit: false,
appendButton: true,
appendButtonDisabled: false,
buttonIcon: "el-icon-search",
label: "用户名",
name: "username",
type: "text",
},
icon: "text-field",
formItemFlag: true,
id: "username",
},
{
type: "input",
options: {
labelAlign: "",
defaultValue: "",
placeholder: "",
columnWidth: "200px",
size: "",
labelWidth: null,
labelHidden: false,
readonly: false,
disabled: false,
hidden: false,
clearable: true,
showPassword: false,
required: false,
requiredHint: "",
validation: "",
validationHint: "",
minLength: null,
maxLength: null,
showWordLimit: false,
appendButton: false,
appendButtonDisabled: false,
buttonIcon: "el-icon-search",
label: "密码",
name: "password",
type: "password",
},
icon: "text-field",
formItemFlag: true,
id: "password",
},
{
type: "textarea",
options: {
labelAlign: "",
defaultValue: "",
placeholder: "",
columnWidth: "200px",
size: "",
labelWidth: null,
labelHidden: false,
readonly: false,
disabled: false,
hidden: false,
clearable: true,
showPassword: false,
required: false,
requiredHint: "",
validation: "",
validationHint: "",
minLength: null,
maxLength: null,
showWordLimit: false,
appendButton: false,
appendButtonDisabled: false,
buttonIcon: "el-icon-search",
label: "留言板",
name: "message",
rows: 3,
},
icon: "text-field",
formItemFlag: true,
id: "message",
},
],
formConfig: {
labelWidth: 80,
labelPosition: "left",
size: "",
labelAlign: "label-left-align",
cssCode: "",
customClass: "",
functions: "",
layoutType: "PC",
modelName: "formData",
refName: "vForm",
rulesName: "rules",
onFormCreated: "",
onFormMounted: "",
onFormDataChange: "",
},
},
formData: {},
optionData: { //动态传入的选项数据
checkbox: [ //checkbox 是name名称
{
label: "动态选项1",
value: "1",
},
{
label: "动态选项2",
value: "2",
},
{
label: "动态选项3",
value: "3",
},
],
},
};
},
methods: {
submitForm() {
this.$refs.vFormRef
.getFormData()
.then((formData) => {
// Form Validation OK
alert(JSON.stringify(formData));
})
.catch((error) => {
// Form Validation failed
this.$message.error(error);
});
},
saveFormTemplateHandler(data) {
//保存模板json数据
localStorage.setItem("saveFormTemplateJson", data);
this.$message.success("模板保存成功");
},
appendButtonClickHandler(data) {
//输入框添加后置按钮，回调函数
console.log("appendButtonClickHandler=======", data.$data.fieldModel);
},
handleFormChange(
fieldName,
newValue,
oldValue,
formDataModel,
subFormName,
subFormRowIndex，
comboGridItem
) {
//fieldName name
//newValue 新值
//oldValue 旧值
//formDataModel 表单数据
//comboGridItem 组合网格组件，传过来的对象
console.log(this.$refs["vFormRef"].widgetRefList) //获取每个组件的属性方法
this.$refs["vFormRef"].widgetRefList["select"].setRequired(true); //设置select组件必填属性为true
this.$refs["vFormRef"].widgetRefList["select"].setValue("1"); //设置select组件值为1
this.$refs["vFormRef"].widgetRefList["input"].setWidgetOption("max",newValue) //设置input组件的最大值为newValue
this.$refs["vFormRef"].widgetRefList["comboGrid"].setValueNotEmitHandler(newValue); //给组合网格赋值（赋值不会触发handleFormChange） //改变组合网格选项,会触发
this.$refs["vFormRef"].widgetRefList["select"].$refs.fieldEditor.toggleMenu(); //select组件 自动展开下拉框
},
},
}
FAQs
The npm package @icreate/ics-basic-form-builder receives a total of 45 weekly downloads. As such, @icreate/ics-basic-form-builder popularity was classified as not popular.
We found that @icreate/ics-basic-form-builder demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Package last updated on 22 Jul 2022
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Security News
Gmail For Exfiltration: Malicious npm Packages Target Solana Private Keys and Drain Victims' Wallets
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.
By Kirill Boychenko - Jan 08, 2025
Security News
New Python Packaging Proposal Aims to Solve Phantom Dependency Problem with SBOMs
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
By Sarah Gooding - Jan 07, 2025