# lenye_design

> lenye_design

Latest version **0.0.1** (published 2020-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install lenye_design
pnpm add lenye_design
yarn add lenye_design
bun add lenye_design
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-09-23 |
| First published | 2020-09-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 15 |
| Unpacked size | 14 MB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | chenld |
| Keywords | vue-ele-form, vue-ele-form-generator, form-schema, vue-form, form-designer, form-design, element-ui, form-generator, for-generate, vue-form-generator, form schema |

## Links

- npm: https://www.npmjs.com/package/lenye_design
- npm.io page: https://npm.io/package/lenye_design

## Dependencies (15)

- [fuzzy](https://npm.io/package/fuzzy.md) ^0.1.3
- [lodash](https://npm.io/package/lodash.md) ^4.17.20
- [prismjs](https://npm.io/package/prismjs.md) ^1.21.0
- [lenye_base](https://npm.io/package/lenye_base.md) ^0
- [vuedraggable](https://npm.io/package/vuedraggable.md) ^2.24.0
- [indent-string](https://npm.io/package/indent-string.md) ^4.0.0
- [vue-multipane](https://npm.io/package/vue-multipane.md) ^0.9.5
- [clipboard-copy](https://npm.io/package/clipboard-copy.md) ^3.1.0
- [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) ^3.1.3
- [lenye_component](https://npm.io/package/lenye_component.md) ^0.0.46
- [vue-prism-editor](https://npm.io/package/vue-prism-editor.md) ^1.2.2
- [serialize-javascript](https://npm.io/package/serialize-javascript.md) ^4.0.0
- [vue-ele-form-dynamic](https://npm.io/package/vue-ele-form-dynamic.md) ^0.4.2
- [vue2-perfect-scrollbar](https://npm.io/package/vue2-perfect-scrollbar.md) ^1.5.0
- [vue-ele-form-data-editor](https://npm.io/package/vue-ele-form-data-editor.md) ^0.1.4

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2020-09-23

## README

# 设计器
## 注意

注意，此设计器不是独立存在的，是依托于 [vue-ele-form](https://github.com/dream2023/vue-ele-form)，在使用前请务必阅读 [vue-ele-form 的文档](https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd)。

## 特性

- 组件方式：以组件方式接入，1 分钟轻松接入；
- 体积小：Gzip 压缩后 `200k` 以内；
- 易扩展：可以在`不更改源码`的情况下增删改属性、组件；


## 安装 & 注册

```bash
yarn add element-ui  # npm install element-ui
yarn add vue-ele-form # npm install vue-ele-form
yarn add f-render # npm install f-render
```

```js
// vue-ele-form 的注册可参考：https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd
import EleForm from "vue-ele-form";
import FRender from "f-render";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);
Vue.use(EleForm);
Vue.component("f-render", FRender);
```

## 使用简介

使用分为两个部分，首先是进行表单拖拽设计，然后再已纯表单的形式使用

### 表单设计

```html
<template>
  <f-render
    @save="handleSave"
    :loading="loading"
    height="calc(100vh - 60px)"
    :config="formConfig"
  />
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        formConfig: {}
      };
    },
    methods: {
      handleSave(res) {
        // 这里是保存到 localStorage，你可以保存到服务器
        localStorage.setItem("form-config", res);
        this.$message.success("保存成功啦~");
      }
    },
    mounted() {
      // 模拟异步加载
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.formConfig = localStorage.getItem("form-config") || "";
      }, 1000);
    }
  };
</script>
```

### 表单使用

#### 基于 f-render 使用

通过属性 `pure`, 可以直接做为表单使用，其数据提交方式同 `vue-ele-form` 一样，具体可查看[文档](https://www.yuque.com/chaojie-vjiel/vbwzgu/zbu9mn)。

```html
<template>
  <f-render
    v-model="formData"
    :request-fn="handleSubmit"
    @request-success="handleSuccess"
    :config="formConfig"
    pure
  />
</template>

<script>
  export default {
    data() {
      return {
        formData: {},
        formConfig: ""
      };
    },
    methods: {
      handleSubmit(data) {
        // eslint-disable-next-line no-console
        console.log(data);
        return Promise.resolve();
      },
      handleSuccess() {
        this.$message.success("创建成功");
      }
    },
    mounted() {
      // 模拟异步加载
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.formConfig = localStorage.getItem("form-config") || "";
      }, 1000);
    }
  };
</script>
```

#### 基于 vue-ele-form 使用

如果你的可视化设计和表单使用，不再一个系统，可以直接使用 `vue-ele-form`，不必安装 `f-render`，具体如下：

```html
<template>
  <ele-form
    v-model="formData"
    :request-fn="handleSubmit"
    @request-success="handleSuccess"
    v-if="formConfig"
    v-bind="formConfig"
  />
</template>

<script>
  export default {
    data() {
      return {
        formData: {},
        formConfig: null
      };
    },
    methods: {
      handleSubmit(data) {
        // eslint-disable-next-line no-console
        console.log(data);
        return Promise.resolve();
      },
      handleSuccess() {
        this.$message.success("创建成功");
      }
    },
    mounted() {
      // 模拟异步加载
      setTimeout(() => {
        try {
          // 这里必须对字符串进行反序列化
          this.formConfig = eval(`(${localStorage.getItem("form-config")})`);
        } catch {
          this.$message.error("数据解析失败");
        }
      }, 1000);
    }
  };
</script>
```

## 定制化

### 新增官方扩展组件（以富文本扩展为例）

#### 安装组件

```bash
yarn add vue-ele-form-quill-editor
```

#### 注册组件

```js
Vue.component("quill-editor", EleFormQuillEditor);
```

#### 配置属性

```html
<template>
<!-- 省略其它属性 -->
<f-render
  :comps="comps"
/>
</template>

<script>
// 默认配置
import comps from "f-render/fixtures/comps";
// 富文本配置
import quillEditor from "f-render/fixtures/extends/quill-editor";
// 可以更改显示组件位置，默认为 10
// 这里更改为 2，显示更靠前
quillEditor.sort = 2

export default {
  data() {
    return {
      // 拼接上即可
      comps: comps.concat(quillEditor),
    }
  }
}
</scirpt>
```

### 新增自定义组件

#### 创建组件并全局注册

需要根据 vue-ele-form 文档[创建自定义组件](https://www.yuque.com/chaojie-vjiel/vbwzgu/ugumna)，并注册。

#### 书写配置

你可以参考[源码中的配置]('./src/fixtures/comps.js')，一下是范例和属性说明：

```js
// custom-url.js
export default {
  // 假如这个组件叫 url（必填）
  type: "custom-url",
  // 默认标签名（必填）
  label: "URL",
  // 用于排序，值越小，越靠前
  sort: 1,
  // 属性配置
  config: {
    // 属性配置说明地址（可省略）
    url: "https://www.xxx.com",
    // 组件属性配置（不知道啥是组件属性，可以看一下界面右侧）
    attrs: {
      // config 配置 参考 FormDesc:
      // https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#KOPkD
      config: {
        // max 为属性名
        max: {
          type: "number",
          label: "最大输入长度"
        },
        name: {
          type: "input",
          label: "原生 name",
          // 必填
          required: true
        }
        // ....
      },
      // 默认值
      // 如果在保存时，默认值未更改，则会被剔除，保持数据的简洁性
      defaultData: {
        max: 255
      },
      // 必须值
      // 在保存时，必填值无论是否更改，都会保留，用作一些属性是必填的
      requiredData: {
        name: "url"
      }
    },
    // 通用配置，是 FormDesc 中非 attrs 的其它配置，
    // 具体可看：https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#hl4pm
    common: {
      config: {
        // 默认值
        default: {
          type: "input",
          label: "默认值"
        }
      },
      // 这两个和上面一个意思，分别是 common 的默认值和必填值
      defaultData: {},
      requiredData: {}
    }
  }
};
```

#### 合并配置并传入

```html
<template>
  <!-- 省略其它属性 -->
  <f-render :comps="comps" />
</template>

<script>
  import comps from "f-render/fixtures/comps";
  import customUrl from "some/path/custom-url";
  export default {
    data() {
      return {
        comps: comps.concat(customUrl)
      };
    }
  };
</script>
```

### 定制化原组件配置 & 表单配置

- 组件配置目录：`src/fixtures/comps.js`
- 表单配置目录：`src/fixtures/form-props.js`
- 表单项通用属性配置：`src/fixtures/form-item-common.js`
- 扩展组件目录：`src/fixtures/extends`

如果你想修改组件属性或者表单的属性，减少或者增加组件，可以将上述文件`拷贝到自己的项目`目录，参考上述配置说明，进行更改，并传入即可：

```html
<!-- formProps 是表单属性 -->
<!-- comps 是组件列表和属性 -->
<!-- formItemCommon 是表单项通用属性配置 -->
<f-render
  :form-props="formProps"
  :comps="comps"
  :form-item-common="formItemCommon"
/>
```

### 样式定制化

直接进行样式覆盖即可，注意不要加 `scoped`，否则覆盖不成功

## 二次开发

如果仅通过`属性`和`样式`定制化已无法满足的你和你产品经理的要求，那就需要进行定制化开发，我个人觉得代码整体还是非常简单的，你可以 `clone` 代码或者下载后（建议用[gitee](https://gitee.com/dream2023/f-render)），进行相应的更改，更改后有两种处理方式:

- 直接放到项目目录里，并将安装 `dependencies` 的依赖复制到项目，进行开发即可；
- 直接开发，然后发布到公司[私服](https://www.npmjs.com/package/verdaccio)，如果是开源，则可以发到 GitHub 或者 gitee，然后安装自己的即可

如果你或者你的公司需要`付费`源码讲解和答疑，可加我微信：`dream10nian`。当然也有也有免费的交流群，也是加这个微信。

## f-render 不能做什么？

由于 `vue-ele-form` 原因，

- f-render 不支持嵌套的子表单
- 布局由于使用了 `el-row` 和 `el-col`，所以仅支持行布局

## Props 说明

```js
props: {
  // 表单内容
  config: {
    type: [Object, String],
    required: true
  },
  // 设计器整体高度
  height: {
    type: [String, Number],
    default: "400px"
  },
  // 保存格式
  saveFormat: {
    type: String,
    default: "string",
    validator(val) {
      return ["object", "string"].includes(val);
    }
  },
  // 是否纯净（用于显示表单）
  pure: Boolean,
  // 表单配置
  formProps: {
    type: Object,
    default: () => formProps
  },
  // 表单项通用配置
  formItemCommon: {
    type: Object,
    default: () => formItemCommonDefault
  },
  // 组件列表
  comps: {
    type: Array,
    default: () => comps
  },
  // 操作配置
  operations: {
    type: Array,
    default: () => ["preview", "data", "code", "batch", "clear"]
  },
  // 是否在加载
  loading: Boolean,

  // 表单相关（pure 为 true 时）, 同 vue-ele-form
  // https://www.yuque.com/chaojie-vjiel/vbwzgu/zbu9mn
  value: Object,
  requestFn: Function,
  isLoading: Boolean,
  formError: Object
},
```


# 说明


表单组件配置文件

- url: 属性的说明地址
- common: 代表通用配置, 例如 `default`、`options`等, 具体参考: [formDesc 表单描述](https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf)
- attrs: 组件自身属性, 例如 `input` 组件有`maxlength`、`clearable`、`prefix-icon`等, 具体各个属性, 请参考[type 类型列表 第三列属性说明](https://www.yuque.com/chaojie-vjiel/vbwzgu/kz163g)
- attrsDefaultData: 组件自身属性的默认值
- commonDefaultData: 通用配置的默认值
- assistProperty: 辅助属性, 用于判断类型, 展示数据时, 当删除此属性


> tip: `attrs` 默认值, 有两个`attrsData`和`attrsDefaultData`, 原因是当默认值未发生变化时, 有的无需向用户展示, 需要删除, 有的必须有, 所有才区分两者, 同理 `common` 也是

---
_Source: https://npm.io/package/lenye_design · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._