npm package: @less-is-more/less-uni
Description: uniapp 构件。简化常用功能的使用。
Latest version: 1.0.0

# less-uni

## 介绍

uniapp 前端构件。简化常用功能的使用。

## 软件架构
软件架构说明


## 安装教程

直接uniapp官方插件市场安装。或者使用npm。
```js
npm i @less-is-more/less-uni
```

## 组件使用

### ui-modal

弹出框。

```vue
<ui-modal :show='true' title="标题">
    ...
    实际代码
</ui-modal>
```

**属性**

| 属性名 | 类型    | 默认值 | 可选值 | 说明                                       |
| ------ | ------- | ------ | ------ | ------------------------------------------ |
| show   | Boolean | false  | true   | 控制改组件是否显示，必填                   |
| title  | String  |        |        | 要显示的标题                               |
| bottom | Boolean | false  | true   | 显示方式，默认为中间显示，true为从底部显示 |
| zIndex | Number  | 10     | 0-1000 | 层级，数字越大，层级越高                   |

### ui-add-update

添加或者修改组件。直接传入数据就可以生成表单处理。

**属性**

| 属性名 | 类型    | 默认值 | 可选值 | 说明                     |
| ------ | ------- | ------ | ------ | ------------------------ |
| show   | Boolean | false  | true   | 控制改组件是否显示，必填 |
| title  | String  |        |        | 要显示的标题             |
| del    | Boolean | false  | true   | 是否显示删除图标         |
| info   | Array   |        |        | 传入的数据               |
| data   | Object  |        |        | 传入的数据               |

如果没有data属性 生成的表单是空白表单，也可以使用下方`ui-form`的格式使用

**事件**

```vue
<ui-add-update title="添加" :info="addItems" :data="data" :show="addShow" @close="addShow=false" @submit="add" />
```

```js
addItems: [{
				name: ' 输入框左侧名字',
				key: 'key1',
				type: 'date'
			},
			{
				name: ' 输入框左侧名字',
				key: 'key2'
			},
           {
				name: '状态',
				key: 'status',
				value: 0,
				type: 'singleChoice',
				options: [{
							text: '无效',
							value: 0
						}, {
							text: '有效',
							value: 1
						}]
			},
   	]
  //data属性的格式
data:{
        'key1':222,
         'key2':6666,
         'status':1
        }
```



**type 可选 属性**

| 名称         | 说明           |
| ------------ | -------------- |
| hidden       | 输入框会隐藏   |
| text         | 默认，输入文本 |
| textarea     | 文本域         |
| date         | 时间           |
| digit        | 输入数字       |
| file         | 选择文件       |
| multiChoice  | 多选框         |
| singleChoice | 单选           |
| dataPicker   | 选择框         |

**事件**

| 方法名		| 参数	| 说明							|
| ------------	| ----	| ----------------------------	|
| submit()		|		| 点击提交触发，会传出一个数据	|
| close()		|		| 点击关闭，会传出两个数据		|
| uploadFile()	|		| 上传文件触发，会传出两个数据	|

### ui-form

传入数据生成表单

| 属性名 | 类型  | 默认值 | 可选值 | 说明       |
| ------ | ----- | ------ | ------ | ---------- |
| data   | Array |        |        | 传入的数据 |

| 方法名       | 参数 | 说明                         |
| ------------ | ---- | ---------------------------- |
| submit()     |      | 点击提交触发，会传出一个数据 |
| close()      |      | 点击关闭，会传出两个数据     |
| uploadFile() |      | 上传文件触发，会传出两个数据 |



```vue
<ui-form :data="list" @submit="submit" @uploadFile='uploadFile'></ui-form>
```

```js
list=[{
    name: ' 输入框左侧名字',
	key: 'key1',
	type: 'text',
    value: 555
},{
	name: '状态',
	key: 'status',
	value: 0,
	type: 'singleChoice',
	options: [{
			text: '无效',
			value: 0
		}, {
			text: '有效',
			value: 1
		}]
	},
   ]
```