app_input
APP表单部分 组件库
Recommended IDE Setup
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
Customize configuration
See Vite Configuration Reference.
Project Setup
npm install
Compile and Hot-Reload for Development
npm run dev
Compile and Minify for Production
npm run build
依赖包：
npm 依赖包
, "publishConfig" : { "registry" : "http://192.168.0.135:8081/repository/npmhost/" }
"@element-plus/icons-vue": "^2.1.0",
"element-plus": "^2.3.7",
在项目环境中执行
npm i element-plus
npm i @element-plus/icons-vue
项目环境配置
project/src/main.js
import './assets/main.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { createApp,h } from 'vue'
import App from './App.vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus)
app.mount("#app")
安装当前包(默认安装最新版本)
切换本地依赖包
npm config set registry https://repository.genostack.com/repository/npm-group/
下载
npm i app_input
引用
import AppForm from 'app_input'
<AppForm msg="ass"></AppForm>
整体参数以及回调
参数名称--key
参数名称(显示名称)--show_name
表单类型--form_type input（文本框）|radio（单选框）|select（下拉选择）|cascader（级联选择）|checkbox（多选）|switch（开关））|upload（上传文件）|slider（滑块）
文本框类型（仅input、upload使用）--input：type:text（单行文本）|textarea（文本域）|number（数字）|color（颜色）|password（密码）,upload：''（单文件）、multiple（多文件）、folder（文件夹）
是否必选--required:true|false
参数注解--note
文本框提示（仅input、select、cascader使用）--placeholder
默认数据--default_value
是否显示--is_show:true|false
参数数据（select,cascader,checkbox,radio）--data 和callback_field_data二选一
上传成功后的数据字段（select,cascader,checkbox,radio）---callback_field_data 和data二选一
显示条件--condition
上传文件使用的字段（仅upload使用）--upload_name（默认为file）
文件上传接口（仅upload使用）--action
上传文件个数（仅upload使用）--limit
接受上传的（仅upload使用）--accept（多个逗号分割）
上传成功后回调获取文件内容接口（仅upload使用）--callback
上传成功后回调对应的处理数方法（仅upload使用）--callback_function
上传成功后回调获取文件内容（仅upload使用）--callback_data
上传成功后回调获取参数（仅upload使用）--callback_name
目前上传接口
--filepath
--file_dir
{
"file1":{
action:"http://www.www.com",
limit:0,
upload_name:"file",
accept:".txt,.png",
show_name:"文件1",
is_show:true,
form_type:"upload",
data_path:'filepath',
type:"",
default_value:"path/fasfa.txt",
note: "文件提示",
required:true,
callback:"http://www.www.com",
callback_function:"", // return_type: {"dict", "list", "series", "split", "tight", "records", "index"}
callback_name:"",
callback_data:"",
callback_data_path:'data',
},
"slider":{
show_name:"Z-score 标准化",
is_show:true,
form_type:"slider",
default_value:"1", //如果是数组类型就是范围值
note: "基于原始数据的均值（mean）",
required:true,
data:{
max:100,
min:0
}
},
"Z-score":{
show_name:"Z-score 标准化",
is_show:true,
form_type:"input",
type:"text",
default_value:"测试数据",
note: "基于原始数据的均值（mean）",
required:true,
placeholder:"请输入"
},
"select":{
show_name:"选择框",
is_show:true,
form_type:"select",
type:"text",
default_value:"测试数据",
note: "基于原始数据的均值（mean）",
data:{
"input1":"参数1",
"input2":"参数2",
"input3":"参数3",
"input4":"参数4"
},
required:true,
placeholder:"请输入"
},
"checkbox":{
show_name:"选择框",
is_show:true,
form_type:"checkbox",
type:"text",
default_value:[],
note: "基于原始数据的均值（mean）",
data:{
"input1":"参数1",
"input2":"参数2",
"input3":"参数3",
"input4":"参数4"
},
required:true,
placeholder:"请输入"
},
"switch":{
show_name:"开关",
is_show:true,
form_type:"switch",
type:"text",
default_value:[],
note: "switch的均值（mean）",
required:true,
placeholder:"请输入"
},
"select1":{
show_name:"选择框",
is_show:true,
form_type:"select",
type:"text",
default_value:"测试数据",
note: "基于原始数据的均值（mean）",
callback_field_data:'file1',
required:true,
placeholder:"请输入"
},
"radio1":{
show_name:"单选框",
is_show:true,
form_type:"radio",
type:"text",
default_value:"input1",
note: "基于原始数据的均值（mean）",
data:{
"input1":"参数1",
"input2":"参数2",
"input3":"参数3",
"input4":"参数4"
},
required:true
},
"cascader":{
show_name:"级联选择",
is_show:true,
form_type:"cascader",
type:"text",
default_value:"input1",
note: "基于原始数据的均值（mean）",
data:[ {
value: 'guide',
label: 'Guide',
children: [
{
value: 'disciplines',
label: 'Disciplines',
children: [
{
value: 'consistency',
label: 'Consistency',
},
{
value: 'feedback',
label: 'Feedback',
},
{
value: 'efficiency',
label: 'Efficiency',
},
{
value: 'controllability',
label: 'Controllability',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'side nav',
label: 'Side Navigation',
},
{
value: 'top nav',
label: 'Top Navigation',
},
],
},
],
},
{
value: 'component',
label: 'Component',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout',
},
{
value: 'color',
label: 'Color',
},
{
value: 'typography',
label: 'Typography',
},
{
value: 'icon',
label: 'Icon',
},
{
value: 'button',
label: 'Button',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio',
},
{
value: 'checkbox',
label: 'Checkbox',
},
{
value: 'input',
label: 'Input',
},
{
value: 'input-number',
label: 'InputNumber',
},
{
value: 'select',
label: 'Select',
},
{
value: 'cascader',
label: 'Cascader',
},
{
value: 'switch',
label: 'Switch',
},
{
value: 'slider',
label: 'Slider',
},
{
value: 'time-picker',
label: 'TimePicker',
},
{
value: 'date-picker',
label: 'DatePicker',
},
{
value: 'datetime-picker',
label: 'DateTimePicker',
},
{
value: 'upload',
label: 'Upload',
},
{
value: 'rate',
label: 'Rate',
},
{
value: 'form',
label: 'Form',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table',
},
{
value: 'tag',
label: 'Tag',
},
{
value: 'progress',
label: 'Progress',
},
{
value: 'tree',
label: 'Tree',
},
{
value: 'pagination',
label: 'Pagination',
},
{
value: 'badge',
label: 'Badge',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert',
},
{
value: 'loading',
label: 'Loading',
},
{
value: 'message',
label: 'Message',
},
{
value: 'message-box',
label: 'MessageBox',
},
{
value: 'notification',
label: 'Notification',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'Menu',
},
{
value: 'tabs',
label: 'Tabs',
},
{
value: 'breadcrumb',
label: 'Breadcrumb',
},
{
value: 'dropdown',
label: 'Dropdown',
},
{
value: 'steps',
label: 'Steps',
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog',
},
{
value: 'tooltip',
label: 'Tooltip',
},
{
value: 'popover',
label: 'Popover',
},
{
value: 'card',
label: 'Card',
},
{
value: 'carousel',
label: 'Carousel',
},
{
value: 'collapse',
label: 'Collapse',
},
],
},
],
}],
required:true
},
"input":{
show_name:"输入1",
is_show:true,
form_type:"input",
type:"text",
default_value:"input1",
note: "基于原始数据的均值（mean）",
required:true,
placeholder:"请输入",
condition:[
{
field:"radio1",
way:"==",
value:"input1",
}
]
}
}
使用updateInputData 方法来监听组件中的数据回调参数。
这个方法会返回表单数据,提交后台使用。