form-create-desniger 自定义拖拽表单
Vue自定义拖拽表单(自定义组件及菜单)
引用
今天我们学习一个非常厉害的组件,没错就是自定义拖拽表单formCreateDesigner
- 首先我们肯定要先npm下载引用啥的, 这里就不细说了链接: 官方文档
- 当我们配置好main.js这些东西,我们就可以在vue里引用了
<template><div class="video-wrapper"><fc-designer ref="designer" height="800px" id="designer"><template slot="handle"><ElButton @click="getJson">生成JSON</ElButton></template></fc-designer></div>
</template>
- 这样页面就会有置顶图片效果
自定义
首先我们要知道自定义组件,其实就是自定义一个js文件,好了,目标很明确,先写好一个js文件,然后在vue里面引用,然后再用form-create-desniger自带的方法直接add进去就可以了(ok,开搞)
- 首先我们先写js文件,例如需要注意的是js我们的作用要导出东西,我们可以参考一下源码里面的组件js文件,记得下面要写成export default的格式
//文件名字为checkbox.js
import FcDesigner from '@form-create/designer';const label = '我自定义组件';
const name = 'checkbox';
let i = 1;
const uniqueId = ()=>`uni${i++}`; // 唯一field IDexport default {//拖拽组件的图标icon: 'icon-checkbox',//拖拽组件的名称label,//拖拽组件的 keyname,//拖拽组件的生成规则rule() {//如果在 props 方法中需要修改 rule 的属性,需要提前在 rule 上定义对应的属性return {//生成组件的名称type: name,//field 自定不能重复,所以这里每次都会生成一个新的field: uniqueId(),title: label,info: '',effect: {fetch: ''},//这里设置组件的默认props配置项, 在下面的 props 方法里面设置无效props: {},options: [{value: '1', label: '选项1'},{value: '2', label: '选项2'},{value: '3', label: '选项3'},{value: '4', label: '选项4'},]};},//拖拽组件配置项(props)的生成规则props() {return [//生成`checkbox`组件的`options`配置规则FcDesigner.makeOptionsRule('options'),{type: 'switch',field: 'type',title: '按钮类型',props: {activeValue: 'button', inactiveValue: 'default'}}, {type: 'switch', field: 'disabled', title: '是否禁用'}, {type: 'inputNumber',field: 'min',title: '可被勾选的 checkbox 的最小数量'}, {type: 'inputNumber', field: 'max', title: '可被勾选的 checkbox 的最大数量'}, {type: 'input',field: 'textColor',title: '按钮形式的 Checkbox 激活时的文本颜色'}, {type: 'input', field: 'fill', title: '按钮形式的 Checkbox 激活时的填充色和边框色'}];}
};
- 第二步就是在我们的vue文件里面引用该js
import checkbox from '../js/checkbox.js'; // 先是要引用一个js文件
- 添加到左侧指定的菜单内,官方给了三个指定的菜单,
main,aide,layout
,我们这里添加到layout记得要写自定义规则(addComponent)
created(){this.$nextTick(() => {this.$refs.designer.addComponent(checkbox); // 添加生成规则 一定要有这一个,就是js的rule()this.$refs.designer.appendMenuItem('layout', { // 添加自定义组件至指定的三个列表内 main/aide/layouticon: checkbox.icon,name: checkbox.name,label: checkbox.label})})
4. 自定义组件添加到左侧的自定义菜单记得写addComponent
created(){this.$nextTick(() => {this.$refs.designer.addComponent(checkbox); // 添加生成规则 一定要有这一个,就是js的rule()this.$refs.designer.addMenu({ // 自定义左侧菜单title: "自定义组件左侧菜单",name: "custom",list: [{icon: checkbox.icon,name: checkbox.name,label: checkbox.label}]});})
}
form-create-desniger 自定义拖拽表单相关推荐
- 布局器 拖拽拖拽表单设计器 厉害了
码农苦码农懂! 您是否有过以下想法: 我是一名element初学者,我想以最短的时间快速进入 element 的大门 我是一名后端工程师,虽能熟练掌握 JS 的写法,但是页面样式布局让我很头疼 我是一 ...
- html5拖拽表单设计器,require+jquery+backbone实现拖拽式报表设计器-拖拽式表单设计器...
HTML我帮您-拖拽式报表设计器-拖拽式表单设计器是一个可视化设计器,基于require+jquery+backbone+underscore+bootstrap实现的表单设计器.思想来源于 Layo ...
- 【转】4.2使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录-- 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是 今天我想介绍的是一款jQuery的插件:Jquery.form. ...
- Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了 拖拽添加组件 的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下 本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...
- Android-------RecycleView自定义拖拽、侧滑的实现
Android-------RecycleView自定义拖拽.侧滑的实现 关于recycleView的拖拽和侧滑的实现,android原生已经为我们提供了实现方法,个人认为原生实现的方法其实已经很强大 ...
- Vue 实现拖拽模块(三)自定义拖拽组件的样式
上文介绍了 自定义拖拽组件位置 的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下 本文主要介绍了 Vue 自定义拖拽组件的样式,具体 ...
- Joolun uniapp商城源码实现商城自定义拖拽装修_Java二开源码
前一阵子,Joolun uniapp商城源码系统应广大开发者的需求,把开发者们想要的商城自定义拖拽装修给安排上了,拖拽装修也在V1.0.2版本发布的时候正式上线,实现商城首页自定义动态拖拽装修(支持不 ...
- 基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
本人在开发中遇到实现一个基于vue的悬浮框拖动效果,经过努力研究最终实现了功能,一下是我的方法和部分代码,希望对您有所帮助,如有不对的地方还请指出.谢谢!下面步入正题: 首先展示一下功能的效果图: 要 ...
- vue element form 自定义校验1(表单校验)
通过ref属性获得表单对象,调用表单对象的validate函数进行表单的整体校验 <template><!--model绑定整个form对象的的数据--><!--rule ...
最新文章
- 意念打字、梦境重现如何成真,张钹、李路明等知名专家共话脑机接口最新进展 | 首届脑科学开放日...
- TCP/IP详解--第九章
- Linux入门(9)——Ubuntu16.04安装flash player
- Java 基础知识 练习
- 在word文档的后面开始页码编
- A1032. 画三角形2
- 小米4刷CM13系统
- pycharm 远程调试图文_pycharm远程调试openstack的图文教程
- iOS应用支持IPV6及阿里云相关配置
- 2017数学建模b题回顾_年度回顾:2017年的Java
- (转)一个偷食禁果的女孩--一件我亲眼目睹的真实感人故事
- 快牙网传——轻松传文件
- 李宏毅机器学习 02回归
- windows控制面板卸载程序失败(等待。。。)
- 【玩转腾讯云】免费搭建你的微信机器人!24小时在线!上云!
- 函数中的arguments
- 三维向量类Vector类封装,包含三维向量一些基本运算
- 手机如何借用笔记本网络上网
- DOM4J_VisitorSupport
- HDU 4082	 Hou Yi's secret