0.0.5 • Published 3 years ago
yyhht-form-design v0.0.5
简介
本项目是一款基于 Avue 的单据表单设计器,拖拽式操作让你快速构建一个表单。
更新日志
文档及demo项目
依赖
element-ui 2.13.2+
$ npm i element-ui
@smallwei/avue 2.6.16+
$ npm i @smallwei/avue
或自行引入cdn
安装
组件
$ npm i yyhht-form-design
或
$ yarn add yyhht-form-design
$ yarn
$ yarn serve
html
详见examples
使用
import HhtFormDesign from 'yyhht-form-design'
Vue.use(HhtFormDesign)
<hht-form-design style="height: 86vh;"
:options="options"
storage
@submit="handleSubmit"></hht-form-design>
属性
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
options | 字段配置 | Object/String | { column: [] } |
storage | 开启本地存储功能,防止浏览器刷新丢失json | Boolean | false |
asideLeftWidth | 左工具栏宽度 | String/Number | '270px' |
asideRightWidth | 右工具栏宽度 | String/Number | '380px' |
showAvueDoc(已废弃,请使用toolbar) | 是否显示Avue文档 | Boolean | false |
showGithubStar | 是否显示GitHub Star | Boolean | true |
toolbar | 顶部工具栏 | Array | 'avue-doc', 'import', 'generate', 'preview', 'clear' |
undoRedo | 是否开启撤销重做功能 | Boolean | true |
includeFields | 左侧展示字段 | Array | fieldsConfig.js中配置的字段 |
customFields | 自定义组件 | Array | 使用方法 |
options字段配置
Avue文档
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
column | Avue字段 | Array | - | [] |
labelPosition | 字段位置 | String | 'left'/'center'/'right' | - |
labelWidth | 字段宽度 | Number | - | - |
gutter | 字段间隔 | Number | - | 0 |
menuBtn | 表单按钮 | Boolean | true/false | true |
submitBtn | 显示提交按钮 | Boolean | true/false | true |
submitText | 提交按钮文本 | String | - | '提交' |
emptyBtn | 显示清空按钮 | Boolean | true/false | true |
emptyText | 清空按钮文本 | String | - | '清空' |
tabs | 多分组转标签 | Boolean | true/false | false |
detail | 详情模式 | Boolean | true/false | false |
readonly | 全局只读 | Boolean | true/false | false |
disabled | 全局禁用 | Boolean | true/false | false |
hide | 是否隐藏列 | Boolean | true/false | false |
showColumn | 是否加入动态现隐列 | Boolean | true/false | true |
overHidden | 是否文字超出隐藏 | Boolean | true/false | true |
search | 是否支持搜索 | Boolean | true/false | false |
searchSpan | 搜索框栅列 | Number | - | 8 |
addBtn | 显示新增按钮 | Boolean | true/false | true |
addBtnText | 新增按钮文字 | String | - | '新增' |
menu | 显示操作菜单栏 | Boolean | true/false | true |
viewBtn | 显示查看按钮 | Boolean | true/false | true |
viewBtnText | 查看按钮文字 | String | - | '查看' |
editBtn | 显示编辑按钮 | Boolean | true/false | true |
editBtnText | 编辑按钮文字 | String | - | '编辑' |
delBtn | 显示删除按钮 | Boolean | true/false | true |
delBtnText | 删除按钮文字 | String | - | '删除' |
事件
名称 | 说明 | 回调参数 |
---|---|---|
submit | 生成json回调 | 当前配置的json |
方法
名称 | 说明 | 参数 | 返回 |
---|---|---|---|
getData | 获取当前编辑器的JSON | type: 'string'/'json' | Promise |
插槽
名称 | 说明 |
---|---|
toolbar | 顶部工具栏右侧插槽 |
toolbar-left | 顶部工具栏左侧插槽 |
Avue插件
富文本
import AvueUeditor from 'avue-plugin-ueditor'
Vue.use(AvueUeditor)
打包
组件
$ yarn lib
源码
$ yarn build