@less-is-more/less-uni
v1.0.0
Published
uniapp 构件。简化常用功能的使用。
Downloads
3
Readme
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
}]
},
]