npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

easy-form-design

v1.0.0

Published

easy-form-design是一个基于 vue2, element-ui,vuedraggable 的自定义表单设计器

Downloads

6

Readme

easy-form-design

简介

easy-form-design 是一个基于 vue2, element-ui,vuedraggable 的自定义表单设计器。主要功能是能通过简单操作来生成配置表单,生成可保存的 JSON 数据,并能将 JSON 还原成表单,使表单开发更简单更快速。

组件

  • EasyFormDesign 表单设计器(基于可视化操作快速设计出表单页面,生成配置 json 或页面)
  • EasyFormBuild 表单构建器(根据设计器中获取的配置 json 数据,快速构建出表单页面)

安装

// use npm
npm install easy-form-design -S

// use yarn
yarn add easy-form-design

// use pnpm
pnpm add easy-form-design

使用

使用前请确认已安装配置了 element-ui

文档还未完善,先凑活看吧。或者看源码的 EasyFormBuild 和 EasyFormDesign 文件夹

全局注册

// main.js
import Vue from 'vue';
import 'easy-form-design/lib/easyFormDesign.css';
import EasyFormDesign from 'easy-form-design';

Vue.use(EasyFormDesign);

局部注册

import 'easy-form-design/lib/easyFormDesign.css'; // 这个可在项目入口文件引入
import { EasyFormDesign, EasyFormBuild } from 'easy-form-design';

export default {
  components: {
    EasyFormDesign,
    EasyFormBuild,
  },
};

集成源码

git 上下载源码,把 src/components 拷贝到自己的项目下,index.js 为入口文件可以通过 Vue.use 的方式注册或者局部注册。

使用方法

<!-- 表单设计器 -->
<template>
  <div>
    <EasyFormDesign ref="formDesign"></EasyFormDesign>
  </div>
</template>
export default {
  methods: {
    /* 初始化已有表单,例如已编辑过表单设计器导出json的,可以用这个方法还原 */
    initForm() {
      this.$refs.formDesign.initForm(fromJson); //fromJson导出的json
    },
    /* 导出表单json方法 */
    exportForm() {
      this.$refs.formDesign.exportForm();
    },
    /* 表单预览方法 */
    preViewForm() {
      this.$refs.formDesign.preViewForm();
    },
  },
};
<!-- 表单构建器 -->
<template>
  <div>
    <EasyFormBuild ref="formBuild" @validateSuccess="validateSuccess"></EasyFormBuild>
  </div>
</template>
export default {
  methods: {
    initForm() {
      // 初始化表单构建器
      this.$refs.formBuild.initForm(data); //data是表单设计器导出的json

      // 给表单构建器的组件设置默认的值
      this.$nextTick(() => {
        this.$refs.formBuild.setFormData(json); //json是个对象{组件uuid:默认值,组件uuid:默认值}
      });
    },
    /* 校验成功 */
    validateSuccess(ruleForm, formJsonList) {
      // ruleForm 用户填写的表单值json, formJsonList 原始表单json
    },
    /* 表单重置 */
    resetForm() {
      this.$refs.formBuild.resetForm();
    },
  },
};

EasyFormDesign

props

| 参数 | 类型 | 默认值 | 说明 | | ------ | ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | | fields | Array | 全部组件 - ['BaseInput', 'BaseTextarea', 'BaseRadio', 'BaseCheckbox', 'BaseSelect', 'BaseCascader' ,'BaseColorPicker', 'BaseDatePicker', 'BaseDateRangePicker', 'BaseInputNumber'] | 自定义左侧控件列表 |

Methods

| 名称 | 说明 | 入参 | 回调参数 | | ----------- | ---------- | ------------- | --------- | | exportForm | 导出 JSON | - | JSON 数组 | | preViewForm | 表单预览 | - | - | | initForm | 初始化表单 | Array or 不传 | - |

Attributes

| 名称 | 说明 | | -------- | -------------------------------------------------------- | | formBtns | 表单设计器按钮组区域(默认展示按钮 预览表单、导出 JSON) |

EasyFormBuild

Events

| 名称 | 说明 | 回调参数 | | --------------- | ---------------- | -------- | | validateSuccess | 表单校验成功回调 | Object |

Methods

| 名称 | 说明 | 入参 | 回调参数 | | ------------ | ---------- | --------------------------- | -------- | | validateForm | 表单校验 | - | Object | | resetForm | 表单重置 | - | - | | initForm | 初始化表单 | 表单 JSON | - | | setFormData | 设置表单值 | JSON ({组件 uuid: value}) | - |

slots

| 名称 | 说明 | | ---- | ------------------------------------------------------- | | btns | 表单构造器按钮组(默认展示按钮 表单校验、表单重置按钮) |