@less-is-more/less-uni NPM

less-uni

介绍

uniapp 前端构件。简化常用功能的使用。

软件架构

软件架构说明

安装教程

直接uniapp官方插件市场安装。或者使用npm。

npm i @less-is-more/less-uni

组件使用

ui-modal

弹出框。

<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的格式使用

事件

<ui-add-update title="添加" :info="addItems" :data="data" :show="addShow" @close="addShow=false" @submit="add" />

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()		上传文件触发，会传出两个数据

<ui-form :data="list" @submit="submit" @uploadFile='uploadFile'></ui-form>

list=[{
    name: ' 输入框左侧名字',
	key: 'key1',
	type: 'text',
    value: 555
},{
	name: '状态',
	key: 'status',
	value: 0,
	type: 'singleChoice',
	options: [{
			text: '无效',
			value: 0
		}, {
			text: '有效',
			value: 1
		}]
	},
   ]

表单构件快速简化前端

@tbmp/mp-cloud-sdk querystring

@everything-registry/sub-chunk-544

1.0.0

3 years ago