通用组件

数据列表加载 lg-api

主要用于分页列表查询，组件内置上拉监听分页查询操作

参数	说明	类型	必须	默认值
listApi	列表api函数	Function	否
afterData	列表请求前钩子函数	Function	否
limit	每页数量	Number	否	20
noData	是否关闭页面初始化加载	Boolean	否	false

可调用事件

名称	说明	参数
initData	加载数据	请求参数

回调事件

名称	说明	返回值
change	成功回调
error	失败回调

案例：

<template>
	<view>
 <lgApi :listApi='getList' :afterData="afterData" @change='onChange' ></lgApi>
	</view>
</template>
<script setup>
 import  {getList} from '../api/unify.js'
 const afterData = (e) =>{
     return {...e,type:'img'}
 }   
 const onChange = (res)=>{
     console.log('????');
 }   	
</script>

表单 lg-from

参数	说明	类型	必须	默认值
mode	提示方法（toast/tips）	Boolean/String	否	toast

可调用事件

名称	说明	返回值
validate	校验表单	true/false

rules

类型：Object

rules：{
    name:[
        ['required','请输入姓名'],//传入数组类型，默认第一个为验证类型第二个为自定义提示信息
        'telephone' //传入字符串则使用系统规则
    ] ,
	 	  list:{
	 		   type: 'array',
	 		      required: true,
	 			  message: '数据格式错误',
	 		  defaultField: {
                   type: 'object',
	 		       required: true,
				   message: '数据格式错误', 
	 				  fields:{
	 			 name:[ { required:true,message:'请输入手机号'},//传入对象类型则表示自定义校验规则
                     'telephone'
                      ]
	 				  }
	 				}
	 	  }
}  

嵌套类型

类型：Array/String

描述：嵌套类型示例

//对象类型
 list:{
	 		 type: 'object',
	 		 required: true,
	 		 message: '数据格式错误',
	 		 fields:{
	 		 name:[{ required: true,message: '请输入手机号'},'telephone']
	 		}
	 	  }
//数组类型
   list:{
	 		   type: 'array',
	 		      required: true,
	 			  message: '数据格式错误',
	 		  defaultField:[{
	 		       required: true,
				   message: '请输入', 
	 				}]
	 	  }

案例1：

<template>
	<view>
		<button @click="onchange">点击</button>
	</view>
</template>
<script setup>
import { useForm } from '/src/utils/form/useForm.js';
let { form, rules, validate } = useForm();
form.value = { name: '', list: [{ name: '222' }] };
rules.value = {
    name: [['required', '请输入手机号'], 'telephone'],
    list: {
        type: 'array',
        required: true,
        message: '数据格式错误',
        defaultField: {
            required: true,
            message: '数据格式错误',
            type: 'object',
            fields: {
                name: [{ required: true, message: '请输入手机号' }, 'telephone']
            }
        }
    }
};
const onchange=()=>{
	validate().then(res=>{
			 console.log('验证成功');
	}).catch((err) => {
			 console.log('失败');
			 })
}
</script>

案例2：

<template>
	<view>
		<button @click="onchange">点击</button>
	</view>
</template>
<script setup>
import { useForm } from '/src/utils/form/useForm.js';
let {validate } = useForm();

const onchange=()=>{
	 const rules = {
	 	  name:[['required','请输入手机号'],'telephone'] ,
	 	  list:{
	 		   type: 'array',
	 		      required: true,
	 			  message: '数据格式错误',
	 		  defaultField: {
	 		       required: true,
				   message: '数据格式错误', 
	 				 type: 'object',
	 				  fields:{
	 					  name:[{ required: true,message: '请输入手机号'},'telephone']
	 				  }
	 				},
	 	  }
	 	}
validate({name:'',list:[{name:'222'}]},rules).then(res=>{
			 console.log('验证成功');
	}).catch((err) => {
			 console.log('失败');
			 })
}
</script>

可选正则 rules

名称	说明
required	必填
telephone	电话号码
userName	用户账号
password	密码
passwordPowerful	强密码
path	路径
card	卡号
ip	ip地址
idCard	身份证
email	邮箱
fullName	姓名
postalCode	邮政编码
carNum	车牌号
chinese	汉字
number	数字
ordinaryString	英文数字下划线
floating	正浮点数
decimal	浮点数
englishNumbers	英文和数字
object	对象
array	数组

图片上传 lg-image-upload

参数	说明	类型	必须	默认值
action	服务器上传地址	String	否
header	上传携带的头信息，对象形式	Object	否
modelValue/v-model	图片数据(需与类型一致)	Array/String	否
type	数据类型（String/Array）	String	否	Array
maxCount	最大上传数量

可调用事件

名称	说明	返回值
change	成功回调

案例：

<template>
	<view>
 <lg-image-upload v-model="form.img" :maxCount="3"></lg-image-upload>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
                 img:[]  
                }
			}
		}
</script>

按钮 lg-button

注：改按钮同wd-button，仅添加节流属性，提交表单时必须使用节流

参数	说明	类型	必须	默认值
throttleTime	节流时间	Number	否	500

案例：

<template>
	<view>
 <lg-button :throttleTime='800'></lg-button>
	</view>
</template>

弹窗输入框 lg-popup-input

主要用于表单位置低的输入区域，避免键盘将输入框遮住

参数	说明	类型	必须	默认值
modelValue/v-model	节流时间	Number	否	500
label	左侧文案	String	否
labelWidth	设置左侧标题宽度	String	否	33%
alignRight	值靠右展示	boolean	否	false
placeholder	占位符	String	否	请输入

案例：

<template>
	<view>
 <lgPopupInput label="输入框："  v-model='text'></lgPopupInput>
	</view>
</template>
<script setup>
import { ref } from 'vue';
    let text=ref()
</script>