# ayq-layui-labelGeneration

**Repository Path**: ayq947/ayq-layui-label-generation

## Basic Information

- **Project Name**: ayq-layui-labelGeneration
- **Description**: 标签
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 25
- **Forks**: 8
- **Created**: 2021-07-02
- **Last Updated**: 2025-09-24

## Categories & Tags

**Categories**: layui-components

**Tags**: None

## README

# ayq-layui-labelGeneration


#### 介绍
基于layui的表单设计器产生的标签组件，通过我其他组件form-designer需要标签组件，而inputTag样式写死了，无法复用，引入导致样式混乱，故开发一个标签组件，此组件可对标签进行颜色更改，可拖动标签移动位置改变顺序，可选择通过回车或者按钮生成标签，有兴趣的也可以去form-designer表单设计器里看，后续会把这个组件引入表单设计器中

#### 演示地址
[http://www.ayq.com/](http://116.62.237.101:8009/labelGeneration/index.html)

#### 使用说明

1. 本项目基于Layui、Jquery、Sortable
2. 项目已经基本实现了回车生成标签或者按钮生成标签，能够拖动标签，改变标签顺序

#### 声明：基本代码已经上传，可以在上面玩一玩，测试一下BUG，希望大家提出问题，也希望大家参与进来，提供一些有趣的想法，开发和编写文档不易，要求不多，给个Star支持一下，需要一些开发动力，嘿嘿

#### 开发计划

1.  支撑表单设计器

#### 入门案例


```
var render = labelGeneration.render({
                elem:'#formdesigner'，
                data:[],//数据
                isEnter:true //
            });

//重新渲染数据
render.reload(options)

//获取相关配置信息
render.getOptions() 

//获取标签数据
render.getData()
```

#### 基础参数

| 参数  | 类型  | 说明  |  示例值 |
|---|---|---|---|
|  elem |  String | 指定原始 table 容器的选择器，方法渲染方式必填  | "#elem"  |
|  data |  Array | 直接赋值数据  |  [{},{},...] |
|  isEnter |  Boolean | 是否回车生成标签，不回车通过按钮  |  true,false |

#### 更新日志
- 2021-07-19 
    1. 解决标签过多导致样式混乱问题

#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)