行业包文档管理
  • 前端手册
  • 移动端前端从0开始
sie
2025-06-17
目录

移动端公共组件

# 组件使用

根据常见业务需求封装了一些通用组件。组件已全局配置，可直接使用。

注意

  • 需要sass依赖。
  • 可在uniapp中，sass依赖uniapp项目的uni.scss。
  • 在vue2中使用。

# 组件清单

# app-bottom-picker

底部弹出选择抽屉。

# 示例

<template>
  <div>
    <app-bottom-picker></app-bottom-picker>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
value/v-model String 搜索框输入值
defaultData Object | String | Array 默认选中值，单选时为Object或String，多选时为Array
idKey String 选中值与列表数据的idKey值是否相同，用于显示选中项
show Boolean 是否显示抽屉选择框
list Array 显示的数据列表: [{ [labelField]?: String }]或[]: String
labelField String 列表中显示的字段
showSearch Boolean 是否显示搜索框
showBtns Boolean 是否显示按钮组
placeholder String 搜索框占位提示符
align String 文字对齐方向: center(left/right)
finished Boolean 是否加载完成（加载完成不显示“加载更多按钮”
clearable Boolean 是否显示清空按钮，默认false
multiple Boolean 是否多选：false(true)

# 事件

名称 参数 说明
close picker关闭事件
blur (value) => {} 输入框失焦
focus (value) => {} 输入框聚焦
search (value) => {} 输入框回车搜索
loadmore 点击加载更多
click (item) => {} 点击选项，回传选中值
confirm (item) => {} 点击确认，回传选中值
clear 点击清空按钮，清除已选择的选项
cancel 点击取消按钮
inputClear showSearch = true情况下，输入框的清空的清空事件

# 插槽

名称 参数 说明
- - -

# app-cell-vue

cell组件、选项栏。

# 示例

<template>
  <div>
    <app-cell-vue></app-cell-vue>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
value/v-model String | Number 右侧value值
title String 标题
placeholder String 占位文字，input、textarea时同placeholder，没有value时为右侧提示文字
name String 点击时返回的值
type String cell类型: 默认为空，可选input(u-input)/textarea(u-textarea)
disabled Boolean type为input或textarea时禁用: true(false)
editable Boolean type为input或textarea时可编辑: true(false)
autoHeight Boolean type为textarea时自动高度，默认: true(false)
inputType String u-input的type类型

# 事件

名称 参数 说明
click - cell点击事件
input - input的输入事件
focus - input的聚焦事件

# 插槽

名称 参数 说明
default - 右侧value

# app-collapse

折叠面板组件。

# 示例

<template>
  <div>
    <app-collapse></app-collapse>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
maxHeight String 折叠组件最大高度，默认200px
showBtn Boolean 组件的显示隐藏折叠按钮是否显示

# 事件

名称 参数 说明
- - -

# 插槽

名称 参数 说明
default - 折叠状态默认显示的内容
content - 被折叠的内容

# app-image-vue

图片组件。

# 示例

<template>
  <div>
    <app-image-vue></app-image-vue>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
src String 图片url
width String 图片宽度: 100rpx
height String 图片高度: 100rpx
radius String | Number 图片圆角值
mode String 图片占满类型，根据uniapp定义：aspectFill保持纵横比缩放图片

# 事件

名称 参数 说明
click - 图片点击事件
error - 图片错误发生时
load - 图片载入完毕时

# 插槽

名称 参数 说明
- - -

# app-level-picker

组件未回归。

# 示例

# 参数

# 事件

# 插槽


# app-list-vue

列表组件。

警告

  • 后续不再提供传入value参数。
  • 后续移除在默认插槽中获取每条for循环的数据。

# 示例

<template>
  <div>
    <app-list-vue></app-list-vue>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
（废弃）value Array 列表数据: []
loading Boolean 加载中: false(true)
finished Boolean 加载完成（到底了）: true(false)
refreshable Boolean 是否可下拉刷新: false(true)
refreshing Boolean 刷新中: false(true)
enableBackToTop Boolean 是否允许点击标题返回列表顶部: false(true)

# 事件

名称 参数 说明
scrolltolower - 滚动到底事件
refresherrefresh - 下拉刷新事件

# 插槽

名称 参数 说明
default - 内容【由于小程序不支持在for循环内写插槽，因此需要在业务代码中写for循环渲染标签模板】
loading - 加载中...
finished - 没有更多数据

# app-nav-bar

顶部导航栏组件。

# 示例

<template>
  <div>
    <app-nav-bar></app-nav-bar>
  </div>
</template>
1
2
3
4
5

# 参数

# 事件

# 插槽


# app-picker-vue

根据列表渲染的cell组合选择组件。

# 示例

<template>
  <div>
    <app-picker-vue></app-picker-vue>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
list Array 列配置数组: [{ key: String, title: String, type: String, value: String, defaultValue: String, labelWidth: String, required: Boolean }]。key唯一字段; title左边标题; type默认有点击效果，none无点击效果; value右边显示值; defaultValue显示默认值; labelWidthlabel宽度; required右边必填红色星号
labelWidth String 左边title宽度，默认: 150rpx

# 事件

名称 参数 说明
click item cell项点击事件, 返回item: (item) => {}

# 插槽

名称 参数 说明
（废弃）{key} data （废弃原因：uniapp打包小程序不支持动态插槽）右边value插槽，可接收data(当前项数据)

# app-popup-picker

右侧抽屉弹出选择组件。

# 示例

<template>
  <div>
    <app-popup-picker></app-popup-picker>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
value Array 选中值
unitKey String 作为唯一标识符，默认为空，如不填则将选中对象与value比较，若有值，则那对应key的值作比较
show String | Boolean popup-picker显示或隐藏: false
list Array 数据，列表: () => []
labelField String 列表中显示的字段，位于cell左边
valueField String 列表中显示的字段，位于cell右边
descField String 列表中显示的字段，位于cell下面的灰色
emptyText String 无数据时显示的文字: 暂无数据
showSearch Boolean 是否显示筛选搜索框: false(true)
filter Boolean 是否使用组件的筛选方法，需开启showSearch: false(true)

# 事件

名称 参数 说明
scrolltolower 滚动到底部
click item 点击item事件，并返回点击项
close 关闭事件
change queryData 筛选搜索框输入改变事件
search queryData 搜索输入框回车事件

# 插槽

名称 参数 说明
- - -

# app-prompt-vue

uview-ui的prompt输入确认框封装。

# 示例

<template>
  <div>
    <app-prompt-vue></app-prompt-vue>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
value(v-model) String 输入值
show Boolean prompt显示
title String prompt标题
confirmText String prompt确认按钮文本
label String item的label
labelWidth String .label-value的label的宽
maxlength Number textarea的文字长度限制
placeholder String textarea的文字提示占位

# 事件

名称 参数 说明
confirm (value) => {} 确认事件，返回输入值
cancel () => {} 取消事件

# 插槽

名称 参数 说明
default - 默认插槽，弹框中的内容

# app-scan-bar

结合扫描、输入框功能的组件。

# 示例

<template>
  <div>
    <app-scan-bar></app-scan-bar>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
value/v-model String 输入框绑定值
placeholder String 输入框占位符
focus Boolean 输入框聚焦: true(false)
align String 对齐方式: left(center, right)
maxLength String | Number input最大输入长度，-1不限制
round String 输入框是否圆角: false(true)
disabled Boolean 输入框是否禁用: false(true)
readonly Boolean 输入框是否只读: false(true)
clearable Boolean 是否显示清除控件：true(false)

# 事件

名称 参数 说明
focus (value) => void 输入框聚焦事件，并返回输入框值
blur (value) => void 失焦事件，并返回输入框值
search (value) => void 回车事件，并返回输入框值
scan (value) => void 扫码后触发并返回扫码结果，disabled为true时不能触发
click (value) => void readonly为true时，点击搜索图标触发
clear () => void 输入框清空事件

# 插槽

名称 参数 说明
- - -

# 方法

方法名 参数 说明
select (start: Number, end: Number) => void 选中输入框文本，start：开始选中的位置，end：结束选中的位置

# app-slide2del

滑动删除组件。

# 示例

<template>
  <div>
    <app-slide2del></app-slide2del>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
- - -

# 事件

名称 参数 说明
del - 点击删除

# 插槽

名称 参数 说明
default - 内容

# app-table-vue

vue2移动端表格组件。

注意

  • 关于列和表格内容：若打包小程序，不能使用动态插槽；只打包app或web，可以使用动态插槽。
  • 单选、多选需要自行在表格外包u-radio-group、u-checkbox-group标签。

# 示例

<template>
  <div>
    <app-table-vue></app-table-vue>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
columns Array 列配置: columnsItem[]
columns[].label String 列标签，表头名称
columns[].field String 列字段
columns[].width String 列宽
columns[].minWidth String 列最小宽度
columns[].maxWidth String 列最大宽度
columns[].align String 文本对齐方式
columns[].className String 列class类名
columns[].style Object 列style样式
columns[].selectable Boolean 列是否可选
columns[].selectType String selectable=true时，列是单选(radio)或多选(checkbox)
columns[].disabled Boolean selectable=true时，列是否禁用选择
columns[].checkedValue Array selectable=true时，选中值的数组
columns[].disabledValue Array selectable=true时，选项框不可点击
data Array 表格数据: []
align String 表格对齐方式: center(left/right)
border Boolean 表格边框: true(false)
wrap Boolean 换行: false(true)
thWrap Boolean th换行: false(true)
thFixed Boolean 表头固定: false(true)
hideTh Boolean 表头隐藏: false(true)
tdStyleFunc Function | null 表格td样式函数: (row, field, rowIndex) => {}

# 事件

名称 参数 说明
- - -

# 插槽

名称 参数 说明 平台支持情况
th_{field} - （uniapp打包小程序不支持动态插槽）表头插槽 APP-PLUS、WEB
{field} {row,field,rowIndex} （uniapp打包小程序不支持动态插槽）列插槽, row: 当前行对象, field: 当前列字段, rowIndex: 当前行index APP-PLUS、WEB

# app-tree-table

vue2移动端树表组件。

# 示例

<template>
  <div>
    <app-tree-table></app-tree-table>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
columns Array 表头列表
data Array 树表数据
idName String 唯一字段名
childName String 子集字段名
border Boolean （未支持）
thFixed Boolean （未测试）表头固定
hideTh Boolean （未测试）隐藏表头

# 事件

名称 参数 说明
- - -

# 插槽

名称 参数 说明
- - -

# app-upload-dme

dme的图片上传组件。

# 示例

<template>
  <div>
    <app-upload-dme></app-upload-dme>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
value Array 图片列表
max
disabled
multiple
beforeRead Function 上传前方法处理

# 事件

名称 参数 说明
afterRead (files: Array) => {} 触发上传回调
delete ({ deleteItems: Array, files: Array }) => {} 删除回调.deleteItems：被删除的文件数组；files：当前文件数组。

# 插槽

名称 参数 说明 平台支持情况
- - - -

# app-upload-vue

图片上传组件。

# 示例

<template>
  <div>
    <app-upload-vue></app-upload-vue>
  </div>
</template>
1
2
3
4
5

# 参数

名称 类型 说明
list Array 图片列表
max
disabled
multiple
beforeRead Function 上传前方法处理

# 事件

名称 参数 说明
afterRead (files:Array) => {} 触发上传回调
delete (index:Number) => {} 删除回调

# 插槽

名称 参数 说明 平台支持情况
- - - -

在线编辑 (opens new window)
最近更新
01
交付人员二开
09-16
02
业务集成二开
09-16
03
事务集成
07-09
更多文章>
Theme by Vdoing | Copyright © 2023-2026 SIE