# uView UI uni-app Vue2 组件库完整文档

> 来源: https://www.uviewui.com/
> 生成日期: 2026-06-24
> 基于 Vue 2.x 的 uni-app 生态框架，使用 u- 前缀

---

<!-- ============================================ -->
<!-- 类别: 指南 -->
<!-- ============================================ -->

## [guide/demo] demo
> 官方文档: https://www.uviewui.com/guide/demo.html

---

## [#](#演示) 演示

uView 会将各个版本的演示在此展示，目前演示的版本有 H5，安卓，微信小程序，其他版本的演示将会陆续添加。

### [#](#使用方法) 使用方法

-   H5 版本可以用微信或者手机浏览器扫描二维码即可
-   微信小程序只能通过微信扫码查看
-   安卓版本只能在安卓使用，可以用安卓浏览器或者 QQ 扫码进行安装(**微信中不能扫码安装**)，安装过程中您可能需要勾选相应的提示，允许安装来自非应用市场的 APP，或者您需要在`设置`中打开 [允许安装来自未知来源的应用 (opens new window)](https://www.pc841.com/shoujijiqiao/45848.html)

### [#](#说明) 说明

文档中也有相应的演示示例，但它是通过`iframe`嵌入到网页的，所以可能会造成某些 uni-appAPI 在网页上(浏览器 F12 手机调试模式无问题)无法使用，造成组件有 BUG 的错觉。

**注意：** 建议您只在浏览文档时使用文档右侧的演示功能，电脑示例由于分辨率和 uni-app 用`rpx`单位的问题，显示可能会不够细致，请通过微信扫码小程序体验最佳的效果。

### [#](#扫码) 扫码

![](https://www.uviewui.com/common/weixin_mini_qrcode.png)

微信小程序

只能微信扫码

![](https://uviewui.com/resources/1546181654815455.png)

H5

微信或浏览器扫码

![](https://uviewui.com/resources/168415644515.png)

安卓

浏览器扫码安装(微信扫码无效)

[HBuilder X 代码提示](https://www.uviewui.com/guide/codeHint.html) →




---
## [guide/design] design
> 官方文档: https://www.uviewui.com/guide/design.html

---

## [#](#设计理念) 设计理念

#### [#](#导航栏) 导航栏

uniapp可以通过配置`pages.json`生成原生元素的导航栏，简要说明如下：

-   优点是可以快速渲染，配置便捷，还可以带入一部分原生内容(针对App Store)
-   缺点是配置不够灵活，遮罩无法覆盖导航栏等

建议：

-   如果开发者使用nvue，可以直接自定义导航栏，无需使用uniapp自带的
-   如果是普通的vue页面，直接使用uniapp自带导航栏。如果自带的不能满足，条件允许就用`subNVue`绘制，否则就用普通元素绘制

说明：uni官方有关于导航栏的详细说明，请参见[自定义导航栏 (opens new window)](https://uniapp.dcloud.io/collocation/pages?id=customnav)

#### [#](#关于nvue) 关于nvue

nvue源自于uniapp引入的阿里weex开源原生渲染引擎，单weex来说，是不推荐使用的，因为它没有周边的生态和第三方的功能。
uniapp引入weex之后，一直在整合，但也没有对weex进行定制开发，在APP端某些需要性能相关的可以使用nvue，以下是我们对nvue的一些见解：

-   nvue具有媲美`react native`的性能，uniapp一直在打通vue和nvue的壁垒
-   nvue页面中还不能像写vue一样便利，比如对样式的限制，api还不能和vue完全互通等

建议：uniapp一直在强化vue，重心不在nvue，如果不是特别复杂的应用，可以直接使用vue开发，应用的首页(V3版本)使用`nvue`，渲染的速度会有显著的提升， 如果有需要进一步了解，请参见[nvue开发与vue开发的常见区别 (opens new window)](https://uniapp.dcloud.io/use-weex?id=nvue%E5%BC%80%E5%8F%91%E4%B8%8Evue%E5%BC%80%E5%8F%91%E7%9A%84%E5%B8%B8%E8%A7%81%E5%8C%BA%E5%88%AB)

#### [#](#关于单位) 关于单位

我们在web中，常用的是`px`，`rem`等单位，`rem`在uniapp中不推荐使用，我们分别做如下阐述：

web中： 可以使用`px`，它属于静态单位，它的最终呈现尺寸不会和屏幕尺寸有关系

uniapp中(vue和nvue)：
`px`属于静态单位，uni中还有`upx`和`rpx`单位，`upx`为uniapp成立之初的动态单位，后来各家小程序跟随微信小程序，都使用 `rpx`单位，使它成为了既定的事实标准，uniapp也就提倡并官宣使用`rpx`单位，但是`upx`也一样能使用，和`rpx`效果相同。
另外：uniapp，vh和vw也完全可以使用的，一般我们需要让某个元素高度铺满整个屏幕时，可以设置高度为`100vh`。

weex中： 这里说的是阿里的weex，而不是uniapp改良后的nvue版本中的weex，它的`px`单位和uniapp中的`rpx`或者`upx`是一样的，也属于 动态单位，它自创了个`wx`单位，和web中的`px`一样，属于静态单位。
说明：uniapp的nvue版本中，虽然也是引入weex，但是改良后，没有了`wx`，`nvue`的`rpx`(`upx`)与`px`和uniapp的vue版本单位效果一致。

建议：开发中，只需谨记两个单位，`px`和`rpx`，一般情况下，我们推荐字体和宽高等，都使用`rpx`单位，如果真的需要固定尺寸，就是用`px`。 如果关于各单位和他们的由来历史，还需要进一步了解，可以参见[尺寸单位 (opens new window)](https://uniapp.dcloud.io/frame?id=%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D)

#### [#](#布局) 布局

为兼容多端运行，我们建议开发者使用`flex`，不要使用`float`布局。移动端使用`flex`是没有顾虑的，而`flex`布局，可以达到事半功倍的效果。
如果不熟悉`flex`，可以参考[阮一峰的flex教程 (opens new window)](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

#### [#](#简要介绍vue-use的原理) 简要介绍Vue.use的原理

uView的引用，用到了`Vue.use`的，我们想借此机会，向您解释一下`Vue.use`的原理，详见[简要介绍Vue.use的原理](https://www.uviewui.com/components/vueuse.html)




---
## [guide/theme] theme
> 官方文档: https://www.uviewui.com/guide/theme.html

---

## [#](#自定义主题) 自定义主题

uView目前可以自定主题色，字体颜色，边框颜色等，所有组件内部的样式，都基于同一套主题，比如您修改了`primary`主题色，所有用到了`primary`颜色 的组件都会受影响。

### [#](#教程) 教程

1.  可以在打开的颜色拾取器中输入或者选择颜色，再点"确定"按钮即可。
2.  颜色配置完后，在页面底部下载文件，会得到一个名为`uview.theme.scss`的文件。
3.  将文件复制到项目的公共目录(视情况而定)中，再在项目根目录的`uni.scss`中引入即可。
4.  删除`uni.scss`文件中原来引入的`@import 'uview-ui/theme.scss';`(旧的内置主题文件引入语句)。
5.  重新编译项目或者重启HX即可生效。

### [#](#主题色) 主题色

目前有五个主题色，每个主题色又分别有对应的`light`(淡色)、`dark`(深色)、`disabled`(禁止状态时的颜色)：

primary

#2979ff

清空 确定

success

#19be6b

清空 确定

error

#fa3534

清空 确定

warning

#ff9900

清空 确定

info

#909399

清空 确定

primary-dark

#2b85e4

清空 确定

success-dark

#18b566

清空 确定

error-dark

#dd6161

清空 确定

warning-dark

#f29100

清空 确定

info-dark

#82848a

清空 确定

primary-disabled

#a0cfff

清空 确定

success-disabled

#71d5a1

清空 确定

error-disabled

#fab6b6

清空 确定

warning-disabled

#fcbd71

清空 确定

info-disabled

#c8c9cc

清空 确定

primary-light

#ecf5ff

清空 确定

success-light

#dbf1e1

清空 确定

error-light

#fef0f0

清空 确定

warning-light

#fdf6ec

清空 确定

info-light

#f4f4f5

清空 确定

### [#](#文字颜色) 文字颜色

内置的文字颜色有：主要文字、常规文字，次要文字、占位文字颜色，如需更详细的，详见：[Color 色彩](https://www.uviewui.com/components/color.html)章节。

main-color

#303133

清空 确定

content-color

#606266

清空 确定

tips-color

#909399

清空 确定

light-color

#c0c4cc

清空 确定

### [#](#边框颜色) 边框颜色

uView所有组件边框相关的(特别说明的除外)，用的都是这一个颜色。

border-color

#e4e7ed

清空 确定

### [#](#背景颜色) 背景颜色

这个颜色是uView推荐的背景色，目前内置组件中使用的场景不多。

bg-color

#f3f4f6

清空 确定

### [#](#input边框颜色) Input边框颜色

此颜色用于在`u-input`组件显示边框时的边框颜色。

form-item-border-color

#dcdfe6

清空 确定

重置 下载主题文件




---
## [guide/customIcon] customIcon
> 官方文档: https://www.uviewui.com/guide/customIcon.html

---

## [#](#customicon-扩展自定义图标库) CustomIcon 扩展自定义图标库

uView已通过大量的实践中，收集了用户最有可能需要用到的图标，见[Icon 图标](https://www.uviewui.com/components/icon.html)，但我们也相信，它肯定无法覆盖所有的场景和需求。

用户也可以使用标签的方式，自行引入字体图标，为何要通过扩展的方式集成呢？
这是因为uView有统一的字体图标组件，使用方便，配置灵活，且风格统一。

说明

以下说明和演示，均针对[阿里字体图标库 (opens new window)](https://www.iconfont.cn/)，其他字体库源同理

总的来说，我们要实现的效果如下：

```
@font-face {

	font-family: "custom-icon";
	src: url('data:application/x-font-woff2;charset=utf-8;base64,xxxxxxxx') format('woff2');
}

.custom-icon {

	font-family: "custom-icon" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.custom-icon-copy:before {
  content: "\e641";
}
```

通过如下方式引用：

通过`custom-prefix`指定类名为`custom-icon`

```
<u-icon name="copy" custom-prefix="custom-icon"></u-icon>
```

### [#](#基础说明) 基础说明

我们假定您一个项目中，需要扩展多个图标，所以您应该把各个图标收集进一个阿里图标库的项目中，即使您后面不断的扩展图标，也能让它们在同一个库中。

一般情况下，我们建议您在收藏的项目中，使用"下载至本地"的功能，而后解压，复制文件夹中的"iconfont.css"至uni-app目中(其余的文件可忽略)

下面的操作默认您已进入阿里图标库的"图标管理"栏目中

1.  我们建议，您应该修改这个图标的前缀，这样以后有新图标加入的时候，不用每次频繁修改前缀，在右上角的"更多操作"中，进入"编辑项目"：

![](https://www.uviewui.com/custom_icon/custom_icon_3.png)

2.  修改"FontClass/Symbol 前缀"项为"custom-icon-"，修改"Font Family"为"custom-icon"，如下图：

![](https://www.uviewui.com/custom_icon/custom_icon_4.png)

3.  下载项目至本地

![](https://www.uviewui.com/custom_icon/custom_icon_1.png)

4.  复制"iconfont.css"至项目，一般放在根目录的`static`文件夹下

![](https://www.uviewui.com/custom_icon/custom_icon_2.png)

5.  复制"iconfont.css"文件到uni-app目根目录的`static`目录后(也可以为其他目录)，打开"iconfont.css"，内部如下：

删掉下图圈出的部分，记得把"src: url('data:application/x-font-woff2......"最后的逗号`,`改成分号`;`。

![](https://www.uviewui.com/custom_icon/custom_icon_8.png)

6.  最终如下图：

![](https://www.uviewui.com/custom_icon/custom_icon_9.png)

7.  在项目根目录的"App.vue"中，引入上述的"iconfont.css"，注意自己存放的路径，且通过"@import"引入的外部样式，为了兼容性建议使用相对路径， 且引入的样式，需要写在`style`标签有效内容中的最前面，如下：

```

<style>

@import "./static/iconfont.css";

.view {
	......
}

</style>
```

8.  在页面通过uView的[Icon](https://www.uviewui.com/components/icon.html)组件使用图标，图标名称为您在阿里图标库中点击"编辑图标"时的"Font Class / Symbol"(该值可修改，每次修改都需重新下载"iconfont.css"放到uni-app目中， 覆盖原来的"iconfont.css")

![](https://www.uviewui.com/custom_icon/custom_icon_7.png)

如上图，我们得到"backspace"值，使用如下：

```
<u-icon name="backspace" custom-prefix="custom-icon" size="30" color="#888888"></u-icon>
```

从上可以看出，相比uView内置的图标使用，多了一句固定的`custom-prefix="custom-icon"`，其余使用方法完全相同

**注意**：执行完上面的操作后，您就可以随心所欲的扩展自己的图标了，最重要的是第二步，修改了它，就免了以后每次都要修改"iconfont.css"的多处细节。 当然，每次新增图标，当您把"iconfont.css"复制至项目中覆盖原来的"iconfont.css"后，都需要执行一遍第5步删掉多余的内容，别忘了修改最后的`,`为`;`。

最后提一下，为了多平台兼容性，您应该仅把单色图标添加到阿里图标库的项目中，即使添加了多色的图标，在使用中，也会被转成单色。

祝您使用愉快！




---
## [guide/customStyle] customStyle
> 官方文档: https://www.uviewui.com/guide/customStyle.html

---

![](https://www.uviewui.com/common/404.png)

抱歉!

当前页面不存在...

请检查您输入的网址是否正确，或点击下面的按钮返回首页。

[返回首页](https://www.uviewui.com/)




---
## [guide/faq] faq
> 官方文档: https://www.uviewui.com/guide/faq.html

---

![](https://www.uviewui.com/common/404.png)

抱歉!

当前页面不存在...

请检查您输入的网址是否正确，或点击下面的按钮返回首页。

[返回首页](https://www.uviewui.com/)




---
## [guide/note] note
> 官方文档: https://www.uviewui.com/guide/note.html

---

## [#](#注意事项) 注意事项

#### [#](#u-被占用) "$u"被占用

uView有很多的自带的js工具函数，挂载在`$u`对象中，而`$u`又挂载在`Vue.prototype`中，所以，请勿占用`$u`变量名并 挂载到`Vue.prototype`。

#### [#](#uview对nvue的支持) uView对nvue的支持

什么是`nvue`？见[关于nvue](https://www.uviewui.com/guide/design.html#%E5%85%B3%E4%BA%8Envue)
在uview2.0中，我们为兼容`nvue`做了不懈的努力，终于在无数个日夜后将`vue`和`nvue`打通在uview2.0的版本中，我们相信： 您在使用2.0版本的uview开发`nvue`时将会如鱼得水，信手拈来。

#### [#](#对vue3的支持) 对VUE3的支持

目前uView尚未支持`VUE3.0`版本(`nvue`也尚未支持`VUE3.0`)，在nvue支持 `VUE3.0`之后，我们会迅速跟对`VUE3.0`的兼容。

#### [#](#技术点要求) 技术点要求

1.  uView依赖`SCSS`预处理器，所以您需要给HBuilder X安装 “sass/scss编译” 插件，详见[快速上手](https://www.uviewui.com/components/quickstart.html)
2.  uView基于HX的最新版本开发，旧版本可能会不兼容，如遇问题，请升级HX尝试是否可解决
3.  uView要求项目开启uniapp的V3版本，V3有很大的优势，详见[V3版本介绍 (opens new window)](https://ask.dcloud.net.cn/article/36599)
4.  HX2.5.5稳定版正式引入`easycom`，建议开发者升级HX到2.5.1及以上的稳定版，详见[关于easycom](https://www.uviewui.com/components/quickstart.html#_3-%E9%85%8D%E7%BD%AEeasycom%E7%BB%84%E4%BB%B6%E6%A8%A1%E5%BC%8F)

#### [#](#关于hbuilder-x) 关于Hbuilder X

uniapp依赖于HX，uniapp经过这两年发展(2018-2020)，势头强劲，茁壮成长。我们目睹了整个过程，陪着uniapp一起成长，感慨能有 一家良心企业能扎根技术，埋头苦干，把APP，H5还有各家小程序做到大一统，同时也愤慨各家大厂的小程序各自为营，仿佛倒退到多年前 各家[浏览器大战 (opens new window)](https://tatrck.com/h/0Hu30uVO1IJy?url=https%3A%2F%2Fbaike.baidu.com%2Fitem%2F%25E6%25B5%258F%25E8%25A7%2588%25E5%2599%25A8%25E5%25A4%25A7%25E6%2588%2598%2F8488119%3Ffr%3Daladdin)的时代，让人唏嘘不已。
根据我们的经验，我们强烈建议:

-   开发者在开发线上项目的时候只使用HX的稳定版
-   初学者不要使用HX内测版，不然会碰到莫名其妙的问题，会挫败学习信心
-   每当HX更新大功能的时候，比如以往的自定义组件模式，近来的V3版本，还是目前的uniCloud，或者以后可能关于nuve的大功能，线上项目请过一段时间再使用。
-   建议喜欢尝鲜并熟悉uniapp的用户，在电脑分别安装HX的稳定版和内测版，尝鲜使用内测版，开发使用稳定版，二者分别更新，互不干扰

#### [#](#编译调试) 编译调试

开发的时候，特别是写布局的时候，我们建议使用chrome或者HX内置的浏览器，需要说明的是，电脑浏览器的预览效果是不精细的， 写完之后，可以手机连上电脑同一局域网的WiFi，在手机浏览器上再进行细微的调整。
写完布局再写逻辑的时候，如果还需要兼容小程序和APP，一定要每写完一个页面，就用APP基座和小程序真机进行调试，这能及早发现问题，否则会剪不断理还乱。

#### [#](#内网穿透) 内网穿透

有时候需要通过花生壳等工具，进行内网穿透，让外部的人可以访问到本地的调试网页，这时由于`webpack-dev-server`会默认检查`hostname`， 去掉此限制即可，在uniapp项目根目录下新建`vue.config.js`文件(如果有，不用创建)，修改如下内容：

```
module.exports = {
	configureWebpack: {
		devServer: {
			disableHostCheck: true
		}
	}
}
```

#### [#](#安全区适配-针对app) 安全区适配(针对APP)

在iPhone X等机型，底部带有指示条，如果配置了`safearea`则会在底部生成一个原生的白色区块，好处是不会导致 误触，缺点是颜色无法修改，有时候也影响美观。
uView在各个可能会受到指示条影响的地方都做了特别处理，比如弹窗，键盘组件等，详见[底部安全区适配](https://www.uviewui.com/components/safeAreaInset.html)

#### [#](#为什么uview的源码中会有那么多的注释) 为什么uView的源码中会有那么多的注释？

很多开源项目，发布的时候都会刻意去掉注释，这可能是为了干净整洁，也可能是为了减少体积，还可能是出品方认为用户不会，也没必要去阅读源码。
相反，uView不这么认为，我们会一直将注释保留在发行的版本中，这些注释不是为了给我们自己看的，而是为了给用户看的。
我们希望用户在使用的过程中，能通过阅读源码，既能提升工作效率，还能学到知识。因为uView的理念是"挣脱束缚，向往自由"，我们也希望您在阅读 源码的过程中，如果发现问题，或者有更好的实现方式和想法，可以反馈给我们，进而构建一个更强健的UI框架。

← [HBuilder X 代码提示](https://www.uviewui.com/guide/codeHint.html)




---
## [guide/i18n] i18n
> 官方文档: https://www.uviewui.com/guide/i18n.html

---

## [#](#i18n-多语言切换) I18n 多语言切换

本教程旨在指导您在uni-app(小程序，H5，APP(不含NVUE)等)中从0开始，到熟练使用多语言切换功能，在这里，我们使用的是`vue-i18n`插件，请您务必按照我们提供的步骤，完整的做好每一步的配置。

前言：

-   `i18n`是一个专门用于处理多语言的插件，其义来自于`internationalization`(国际化)，取其首尾两个字母`i`和`n`，中间部分`nternationalizatio`刚好18个字母， 故被起名`i18n`。
-   此插件非uView内置功能，您需要通过`npm`下载方可使用。

温馨提示

uView精心为您准备了一个多语言切换的工程，包含了本文的所有演示功能，在下载页找到对应资源下载运行即可：[资源下载 (opens new window)](http://uviewui.com/components/resource.html)

### [#](#安装vue-i18n) 安装vue-i18n

您需要通过`npm`安装此插件：

```

npm install vue-i18n
```

### [#](#在main-js中引用vue-i18n) 在main.js中引用vue-i18n

```

import Vue from 'vue'
import App from './App'

import zh from '@/common/locales/zh.js';
import en from '@/common/locales/en.js';

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({

	locale: 'zh',

	messages: {

		'zh': zh,
		'en': en,
	}
})

Vue.prototype._i18n = i18n

const app = new Vue({

	i18n,
	store,
    ...App
})
```

注意

别忘了上面的最后处，需要在`new Vue`构造器中写入`i18n`

### [#](#定义语言包) 定义语言包

上面我们在`main.js`通过`import`引入了两个语言包，一般来说，需要多少种语言，就要有多少个语言包，建议语言包中通过定义不同的字段划分不同页面 所属的素材：

```

export default {

	lang: {
		title: 'uView UI',
		intro: '多平台快速开发的UI框架',
	},
	common: {

	},
	index: {

	}
}
```

### [#](#使用) 使用

在实际场景中，我们可能在js中，也有可能在模板中使用，需通过`$t('lang.title')`的形式引用，这里的`lang`是我们上一步`zh.js`中定义的`lange`字段，`title` 自然而然就是`lang`对象的`title`属性了。

```
<template>
	<view style="margin-top: 200rpx;">
		{{$t('lang.intro')}}
	</view>
</template>

<script>
	export default {
		onLoad() {
			console.log(this.$t('lang.intro'));
		}
	}
</script>
```

### [#](#语言切换) 语言切换

当我们点击语言切换的时候，通过`this.$i18n.locale`来设置新的语言，这个语言是我们定义在`main.js`中的`message`属性：

回顾：我们上面第二步在`main.js`中进行了如下设置，其中的`message`对象的`zh`和`en`就是我们所能切换的语言：

```

const i18n = new VueI18n({

	locale: 'zh',

	messages: {

		'zh': Chinese,
		'en': English,
	}
})
```

语言切换：

```
<template>
	<view style="margin-top: 200rpx;">
		{{$t('lang.intro')}}
		<u-button @click="switchLang">切换语言</u-button>
	</view>
</template>

<script>
	export default {
		onLoad() {
			console.log(this.$t('lang.intro'));
		},
		methods: {
			switchLang() {

				this.$i18n.locale = 'en';
			}
		}
	}
</script>
```

### [#](#双向绑定的陷阱) 双向绑定的陷阱

有时候，我们可能需要给`data`中的属性赋值多语言的值，很遗憾当您切换语言时会发现这是无法双向绑定的，体现在语言切换了，但是视图并没有更新。 这本质上是因为`data`中的属性是一次性赋值的，解决办法是在`computed`中定义相关的变量。

```
<template>
	<view style="margin-top: 200rpx;">
		{{intro}}
		<u-button @click="switchLang">切换语言</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		computed: {

			intro() {
				return this.$t('lang.intro')
			}
		},
		methods: {
			switchLang() {
				this.$i18n.locale = 'en';
			}
		}
	}
</script>
```

### [#](#难点) 难点

上面我们解决了如何引入插件，定义和使用语言包，但是我们依然会碰到如下几个难点：

-   如果我需要在js中判断当前语言，进行不同的页面跳转怎么办？
-   如何修改导航栏的标题？
-   如何修改底部Tabbar导航的文字？

没关系，uView已经为您提供了完善的解决方案：

#### [#](#_1-如果我需要在js中判断当前语言-进行不同的页面跳转怎么办) 1. 如果我需要在js中判断当前语言，进行不同的页面跳转怎么办？

这个其实很简单，我们只需通过`this.$i18n.locale`就能获取当前的语言名称。当然，您也可以将当前的语言变量放到一个全局变量中， 关于全局变量，详见我们的另一个专题：[全局变量的实现方式](https://www.uviewui.com/guide/globalVariable.html)

#### [#](#_2-如何修改导航栏的标题) 2. 如何修改导航栏的标题？

修改原生导航栏，我们需要通过`uni.setNavigationBarTitle()`进行，既然是调用uni的接口，意味着我们无法通过双向绑定，切换语言时自动更新导航栏标题，所以 我们需要在`onShow`生命周期调用此接口，当每次页面出现在窗口时，重新设置导航栏(不管语言是否切换)：

```
<template>
	<view style="margin-top: 200rpx;">
		{{$t('lang.intro')}}
		<u-button @click="switchLang">切换语言</u-button>
	</view>
</template>

<script>
	export default {

		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('lang.title')
			});
		},
		methods: {
			switchLang() {
				this.$i18n.locale = 'en';

				uni.setNavigationBarTitle({
					title: this.$t('lang.title')
				});
			}
		}
	}
</script>
```

#### [#](#_3-如何修改底部tabbar导航的文字) 3. 如何修改底部Tabbar导航的文字？

我们可以通过`uni.setTabBarItem()`设置单个的Tabbar Item，这很简单，我们在切换语言的地方，将所有的`item`设置一遍即可：

```
<template>
	<view style="margin-top: 200rpx;">
		<u-button @click="switchLang">切换语言</u-button>
	</view>
</template>

<script>
	export default {
		methods: {
			switchLang() {
				this.$i18n.locale = 'en';

				uni.setTabBarItem({
					index: 0,
					text: this.$t('tabbar.index'),
				})
				uni.setTabBarItem({
					index: 1,
					text: this.$t('tabBar.news'),
				})
				uni.setTabBarItem({
					index: 2,
					text: this.$t('tabBar.center'),
				})
			}
		}
	}
</script>
```

### [#](#写在最后) 写在最后

通过上面的教程，相信您已经对多语言切换有了全面的认识，但不止于此，因为uView对您的爱是无微不至的，我们为您准备了一个完整的示例，下载运行即可，快试试吧！

点击下载：[https://download.uviewui.com/i18n.zip (opens new window)](https://download.uviewui.com/i18n.zip)




---

<!-- ============================================ -->
<!-- 类别: 开发指南 -->
<!-- ============================================ -->

## [dev-guide/intro] intro
> 官方文档: https://www.uviewui.com/components/intro.html

---

## [#](#介绍) 介绍

![uView](https://www.uviewui.com/common/logo.png)

### uView

多平台快速开发的UI框架

#### [#](#来由) 来由

uView2.0是继`1.0`以来的一次重大更新，`2.0`已全面兼容`nvue`，为了这个最初的梦想，我们曾日以夜继，挑灯夜战，闻鸡起舞。您能看到屏幕上的字，却看不到我们洒在键盘上的泪。

uView来源于社区，也回归到社区，正是有一群热爱`uni-app`生态的同学推着它前行，而我们也一如既往的承诺，uView永久开源，永远免费。

关于uView的取名来由，首字母`u`来自于`uni-app`首字母，`uni-app`是基于`Vue.js`，`Vue`和`View`(延伸为UI、视图之意)同音，同时`view`组件是`uni-app`中 最基础，最重要的组件，故取名uView，表达源于`uni-app`和`Vue`之意，同时在此也对它们表示感谢。

#### [#](#适用领域) 适用领域

uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序，其它小程序平台的兼容可能存在一些问题，后续会针对这方面持续优化。

#### [#](#关于pr) 关于PR

> 我们非常乐意接受各位的优质PR，但在此之前我希望您了解uView2.0是一个需要兼容多个平台的（小程序、h5、ios app、android app）包括nvue页面、vue页面。 所以希望在您修复bug并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！（为了方便管理，目前只接受Github Pull Request）

#### [#](#版权信息) 版权信息

uView遵循[MIT (opens new window)](https://tatrck.com/h/0Hu30uVO1IJy?url=https%3A%2F%2Fbaike.baidu.com%2Fitem%2FMIT%2F10772952)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。

注意：这并不意味着您可以将uView应用到非法的领域，比如涉及赌博，暴力等方面。如因此产生纠纷或法律问题，uView相关方及言信科技不承担任何责任。

### [#](#捐赠uview的研发) 捐赠uView的研发

做一个UI框架是一项庞大的工作，尤其是要多端适配，并且迅速跟进uniapp官方的更新，uView作者经常为此工作到深夜……
uView文档和源码全部开源免费，如果您认为uView帮到了您的开发工作，您可以捐赠uView的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。

![](https://www.uviewui.com/common/wechat.png)

![](https://www.uviewui.com/common/alipay.png)

以下为历史捐赠者名单，无论金额多少，我们都铭记在心，感谢您的支持！
如有遗漏，请及时联系QQ（1416956117），我们将及时更新。

-   按日期排序
-   按金额排序

|
姓名

 |

头像

 |

金额(元)

 |

日期

 |

平台

 |

留言

 |
| --- | --- | --- | --- | --- | --- |

<table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 949px;"><colgroup><col name="el-table_2_column_7" width="159"><col name="el-table_2_column_8" width="158"><col name="el-table_2_column_9" width="158"><col name="el-table_2_column_10" width="158"><col name="el-table_2_column_11" width="158"><col name="el-table_2_column_12" width="158"></colgroup><tbody><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">r*r</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a8269999b705626b43f2.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-10-31</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">c*b</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a85f9999b705626b4410.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-10-30</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">请一杯可乐</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*样</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905b0239999b705626b4774.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-10-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*挞</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905b0569999b705626b4790.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-10-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">lzj说 太好用了</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*锋</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905c70a9999b705626b53aa.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.84</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-10-22</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">张*c</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905c7429999b705626b53c3.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-10-22</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">uview捐赠</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*微</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905c77a9999b705626b53cf.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">8.88</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-10-21</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">j*y</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905c79e9999b705626b53d9.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">50</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-10-20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">继续加油</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*🐟</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a6bd9999b705626b42e8.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-10-10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**洹</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905c8e79999b705626b548f.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">100</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-10-08</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">真心感谢码兄的付出</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*雄</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a6e29999b705626b431b.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-30</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">大佬，picker能不能支持多选啊，头都大了</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*y</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a3de9999b705626b4114.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-28</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">y越来越好</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*西</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a40d9999b705626b4133.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-26</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">拼*！</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a43e9999b705626b414c.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">。*Z</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a46f9999b705626b415e.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">18.8</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*🧭</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a5bd9999b705626b423b.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*祥</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a6079999b705626b4255.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">50</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-16</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">加油</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*w</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a6499999b705626b4298.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">8.8</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-15</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">感谢uview让我从实习期走到现在，感谢大佬，大佬辛苦了</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">0*0</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/690574269999b705626b3065.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-11</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">a*i</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/690574559999b705626b3086.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-09</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*力</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/690574949999b705626b30bb.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-08</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*然</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/690574cf9999b705626b30d0.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.99</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-06</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*水</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/690574ff9999b705626b310a.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-05</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">技术无价，略表心意</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">n*i</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/690575459999b705626b312d.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-04</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">原来这是个人项目啊...用了好久，恩情没齿难忘</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*乐</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905758e9999b705626b314f.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-03</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">致敬开发者，用爱发电太不容易了</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*海</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/690575d29999b705626b317d.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-02</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">四季要开演唱会</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**蕾</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905c9319999b705626b54d3.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1.5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-09-02</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">B*1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a2679999b705626b408e.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-30</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*I</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905a2929999b705626b40ad.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">2</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-29</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">很方便</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">Y*g</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6905730f9999b705626b2fe2.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">谢谢您的组件库。</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*络</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/690573529999b705626b3017.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">30</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*成</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/690573879999b705626b3033.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.88</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-21</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*优</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/690573ac9999b705626b3045.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">2.7</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-21</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*子</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68a2a0689999b705622e010f.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-17</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*。</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68a2a01c9999b705622e0055.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">代小张捐 uview帮了小张很多忙</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*宏</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68a2a0479999b705622e00b4.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*安</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68a29f6b9999b705622dfe7b.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-13</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">辛苦了</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*树</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68a29fd49999b705622dff7b.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-13</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">很好用的组件库</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*🦈</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68a29f3c9999b705622dfe34.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-11</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*霖</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68a29e7c9999b705622dfc6f.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">29.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-08</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*证</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68917a929999b70562216d07.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-04</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*住</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68917ab49999b70562216d73.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-04</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">e*n</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68917a5f9999b70562216c48.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-03</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*吃</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68917a419999b70562216c00.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-08-02</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*然</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68917b4b9999b70562216e8b.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">30</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-31</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">m*e</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68917b819999b70562216eba.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.88</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-31</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*公</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68917b1a9999b70562216e29.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-29</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">致敬大佬</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*跑</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/689179a09999b70562216ab0.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">8.8</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-27</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**海</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68919a8f9999b7056221896a.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">19.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-26</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">未*.</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6891797f9999b70562216a30.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-25</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*画</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6881dd959999b70562167575.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">出个vue3版本吧</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*夏</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6881ddb59999b705621675ce.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">8.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">D*O</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6881dde09999b7056216763d.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">祝uview越来越好</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*柒</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6881de139999b705621676b5.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*磊</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6881de459999b7056216771f.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">UI框架很好用</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*噔</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6881deb19999b7056216784c.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-22</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**利</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68917cb29999b705622170f8.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-22</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*y</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c70ab9999b7056211ba8d.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-17</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">感谢感谢，希望越做越好</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">B*k</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c70db9999b7056211ba99.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-17</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*霞</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c76639999b7056211bc8e.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">8.8</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-15</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*山</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c70479999b7056211ba6b.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">祝好</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*潮</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c707b9999b7056211ba7a.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">火前留名🥳</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*媛</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c763b9999b7056211bc86.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*洋</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6fba9999b7056211ba3f.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-11</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">希望uview坚持下去</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*葉</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6fff9999b7056211ba53.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-11</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">3*o</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c701b9999b7056211ba58.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-11</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*子</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6f289999b7056211ba1b.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1.88</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*澜</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6f4c9999b7056211ba2c.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*豆</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6f6e9999b7056211ba33.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">w*a</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6efd9999b7056211ba0c.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-09</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">uView开发的非常丰富，第一次要用，辛苦了</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*哈</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6e129999b7056211b9bd.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-08</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*琦</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c76119999b7056211bc61.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-08</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*伟</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6df39999b7056211b9b8.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-07</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*聪</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c75c29999b7056211bc52.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-07</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">o*e</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6da09999b7056211b991.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-03</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">祝uview团队越来越棒，身体健康</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">w*i</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6dca9999b7056211b9ac.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1.68</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-03</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">挺好用的，感谢</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**玉</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c75879999b7056211bc30.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">2</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-03</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">R*x</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6d609999b7056211b97e.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-07-02</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">-*r</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6c929999b7056211b936.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-27</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">很棒的框架</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*脏</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6cc89999b7056211b958.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-27</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">4*3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6cf19999b7056211b964.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5.2</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-27</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*仙</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6c6a9999b7056211b91f.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-25</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*贵</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6c489999b7056211b914.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*渡</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6bed9999b7056211b8fa.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">2</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">少了点，祝好</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*学</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6c2a9999b7056211b90c.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*峰</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6bb39999b7056211b8ea.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*茹</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6b829999b7056211b8d8.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">辛苦了，感恩感谢</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*萧</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6b559999b7056211b8c2.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-17</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">支持下😃</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*头</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c69449999b7056211b80f.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">100</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-11</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">uView框架的萤火虫们，辛苦了，感谢你们！满分💯。</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*夏</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c69869999b7056211b831.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-11</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">感谢分享，继续加油</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">(*0</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c6b2e9999b7056211b8b3.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-11</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*根</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c754a9999b7056211bc2b.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*梦</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c680d9999b7056211b7bb.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-09</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">乔*&amp;</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c67d09999b7056211b7af.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-06</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">祝越来越好，加油</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">* PERVEJ</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c74c19999b7056211bbed.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-06-03</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*条</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c677e9999b7056211b783.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-29</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">尽一份薄力</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*士</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c67159999b7056211b773.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">36</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-27</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">支持</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*起</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c67389999b7056211b77b.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">2</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-27</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">财务研发二部 ✔</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*继</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c74919999b7056211bbe2.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">L*x</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c66999999b7056211b73e.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1.88</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">一代版本一代神，代代版本玩锐雯！</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*oo</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c66d99999b7056211b767.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*子</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c66539999b7056211b715.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-22</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">崂山可乐天下第一</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c662f9999b7056211b6fb.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">感谢</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*山</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c65a59999b7056211b6bf.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*子</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c657c9999b7056211b6b3.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-15</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*特</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c65499999b7056211b699.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**涛</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/687c744f9999b7056211bbda.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*🇻</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6821eda59999b70562c9aeac.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-12</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">希望uView越来越好</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**东</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6821efb69999b70562c9b065.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">50</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">T*N</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6821ee5f9999b70562c9af27.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-08</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">等我有钱了我一定赞助一波大的，感谢可以白嫖</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*"</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6821ee909999b70562c9af54.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-08</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">😊</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">S*y</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6821eef69999b70562c9afd2.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-08</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">very 好</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*人</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6821ef4a9999b70562c9b01f.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-06</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*清</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6818caea9999b70562c1e4ae.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-05</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*근</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/681781369999b70562c1880d.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">50</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-04</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">uView很棒</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*新</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6817818a9999b70562c18843.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">50</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-05-04</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">祝越来越好！</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**瑞</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/681780769999b70562c187cf.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-29</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*子</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/681783329999b70562c188b6.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-29</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*漉</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680f542c9999b70562bdebd9.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-28</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*🌙</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680e16f29999b70562bc96be.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-27</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680e17129999b70562bc96c8.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-27</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">***烁</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680b47c99999b70562ba8ac7.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-25</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*随</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680b495d9999b70562ba8e63.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-25</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*糖</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680b49829999b70562ba8ebd.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">2</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-25</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*力</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6809ab639999b70562b898a4.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">8.88</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*七</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6809ab959999b70562b89923.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**杰</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680b48039999b70562ba8b4c.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">50</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*鹏</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6809abbb9999b70562b89968.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-22</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**蕾</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680b48329999b70562ba8bb3.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.81</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-22</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*光</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68060eaf9999b70562b4e892.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-21</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">感谢大佬们，祝大佬们永远年轻、永远快乐</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*辉</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68060efa9999b70562b4e9a3.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-21</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*荷</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/68060f199999b70562b4ea10.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-21</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">L*x</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680075f09999b70562b07374.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-17</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*。</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680076289999b70562b073fd.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-16</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">n*l</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680076559999b70562b0747d.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-16</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*萌</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680094bc9999b70562b093b3.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-15</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*鹏</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680076829999b70562b07536.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*富</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680076ff9999b70562b07656.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">60</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-12</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">s*y</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/6800772e9999b70562b076a7.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">W*r</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680077a89999b70562b0778e.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.68</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-09</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*歌</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/680077e99999b70562b07805.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-09</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">越来越好，加油</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*口</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67f5d5e8a24c9a8bc6987ce7.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.99</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-08</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">越来越好</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*／</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67f35bc9a24c9a8bc695c8cb.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-07</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*酸</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67f34749a24c9a8bc695b481.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-06</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">请输入留言</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">o*n</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67eea94fa24c9a8bc6944a63.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-03</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">捐赠uView，加油！</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*鱼</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67eea9afa24c9a8bc6944a77.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-03</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*金</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67eea9d8a24c9a8bc6944a8e.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-03</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*风</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67eeaa4ea24c9a8bc6944aab.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-03</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*不</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67eeaa9ea24c9a8bc6944ac3.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">2</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-02</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">我一直再用这个框架，希望uView越来越好</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*成</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67eeaacda24c9a8bc6944ad6.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-02</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">-*-</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67eeab38a24c9a8bc6944b04.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-04-01</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">什么时候出一个vue3版本啊</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*三</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67ea4e74927ce709a719cb7a.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-31</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">D*n</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67ea4e9b927ce709a719cc46.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">11</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-31</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">开开心心 快快乐乐</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">E*n</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67eeab70a24c9a8bc6944b1c.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-31</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">步履不停</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*凯</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67eeac13a24c9a8bc6944b50.png" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-31</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*生</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67e6472d927ce709a7173069.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-28</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">😁</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*孩</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67e64774927ce709a717311b.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-28</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*书</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67e647c8927ce709a7173214.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-27</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67e64868927ce709a71733ca.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-26</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">李楠 我爱你</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*莫</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67e6498e927ce709a717376e.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*溺</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67e649c2927ce709a71737f9.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1.88</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">加油，越来越好 ～张霁龙实名捐赠</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*酸</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67df99b9927ce709a7100e23.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*我</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67dfab04927ce709a7101659.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*杰</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67df99c6927ce709a7100e28.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">99</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-22</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*恒</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67df9837927ce709a7100d92.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-21</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*员</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67dbb950927ce709a70d3aa8.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">L*r</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67da58eb927ce709a70b8dcb.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">2</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">uView很棒的一款UI框架，加油～</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*叶</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d8d8db927ce709a709a95a.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">感谢</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*幻</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d8d8ef927ce709a709a9b2.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*想</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d8d8fb927ce709a709a9f4.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">感谢</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**金</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d90ff0927ce709a70a134f.png" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">2.5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">祝作者永远年轻，永远热泪盈眶</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**艺</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d90ec8927ce709a70a0ffc.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1.68</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-16</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">干翻友商，uView天下第一</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">T*u</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d8d8bf927ce709a709a8f3.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-15</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">继续加油！</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">B*i</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d4228c927ce709a706a32c.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*界</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d422a8927ce709a706a331.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">y*u</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d422f3927ce709a706a362.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">15</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">感谢，奶茶奉上</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*丁</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d42332927ce709a706a38e.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">啥时候能出一个瀑布流组件</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">L*a</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d423dc927ce709a706a40c.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">希望能兼容1.0系列</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*饼</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d24094927ce709a7041c34.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.55</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-13</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*悬</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d240e9927ce709a7041d3c.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-13</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">祝我的鸽们hzx-qyq-zyk-gym-ljh-xw永远没有 bug</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">M*t</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d16e91927ce709a70399d6.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-12</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*风</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d16eb0927ce709a7039a06.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-12</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*子</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67d16ebe927ce709a7039a0e.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-12</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*斯</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67cfa198927ce709a700f988.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">8.88</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-11</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*天</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67ca56ca927ce709a7fcfec9.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">8.88</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-07</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*多</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67cd2baf927ce709a7fece38.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-07</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**任</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67cd2c13927ce709a7fece55.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-07</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*天</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67c58dbc927ce709a7f7d813.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-03</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*兵</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67c41f68927ce709a7f64fc0.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-02</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*明</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67c58b98927ce709a7f7d6d0.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-03-02</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">W*T</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67c11b32927ce709a7f464eb.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-28</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">助力作者加油更新，奶茶奉上</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*梁</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67c169c5927ce709a7f508d3.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-28</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*梁</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67c169e0927ce709a7f50938.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-28</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*梁</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67c169ec927ce709a7f5095f.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-28</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*梁</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67c169f4927ce709a7f50970.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">2</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-28</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">何*凡</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67c05933927ce709a7f3fc6a.PNG" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.01</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-27</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">我爱老婆莫雪娟~</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*🍓</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67c02f3435f392b1cbe7a82e.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-27</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*踪</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67be90ad35f392b1cbe58f90.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">16</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-26</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">r*e</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67bee9b835f392b1cbe6495f.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-26</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">一杯可乐🥤</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*底</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67bd7b8635f392b1cbe485a6.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-25</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">A*P</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67bda00735f392b1cbe4d0f8.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-25</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*🌞</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67bc197a35f392b1cbe2c7f1.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">2.5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">一杯可乐</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*孟</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67bc19df35f392b1cbe2c916.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*天</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67bc1a0735f392b1cbe2c9bd.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*极</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67baed3735f392b1cbe1cc5e.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">25</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*仔</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="" class="el-avatar el-avatar--circle" style="height: 40px; width: 40px; line-height: 40px;"><img src="https://api.uviewui.com/uploads/67bafaae35f392b1cbe1d50a.jpeg" style="object-fit: cover;"></span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.88</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">A*y</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-21</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">a*a</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*山</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*莫</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*年</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.65</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**泽</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**草</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*只</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**帅</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**飞</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">11</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*黄</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1.2</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*影</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">uView</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*善</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">2</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*钉</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*手</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">加油加油！！！这个UI框架对我很有用！</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*波</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-17</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*坏</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-17</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">s*t</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.66</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-14</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**文</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">6.6</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-13</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">K*.</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-12</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*雨</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-12</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*事</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-07</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">空*</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-06</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">E*I</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-02-04</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">uview</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*翔</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-01-26</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*程</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.59</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-01-23</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">bovod</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-01-21</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*卍</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-01-21</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*诗</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-01-20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*安</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-01-10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*新</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-01-06</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*时</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-01-06</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**臻</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2025-01-05</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*库</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">5</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-12-27</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*羽</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-12-13</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**烽</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-11-26</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*嘻</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">3</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-11-20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*秋</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1.1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-11-20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">聊表心意</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*墨</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-11-05</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*🍎</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-10-25</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**然</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-10-24</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*斗</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-10-17</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*梦</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">9.9</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-10-17</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">微信</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">**燕</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">8.8</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-09-03</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">* AVINASH SHRIRAM</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">15</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-07-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">*婷</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">0.1</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-07-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">* KUDDUS</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">115</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-07-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">* KUDDUS</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">20</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-07-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">* BHARATI SHRIRAM</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-07-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">* KUDDUS</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">201</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-07-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">* KUDDUS</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">12</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-07-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">* ADNAN</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-07-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">* PERVEJ</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">8</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-07-19</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">* DINESH</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-07-18</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr><tr class="el-table__row"><td rowspan="1" colspan="1" class="el-table_2_column_7   el-table__cell"><div class="cell">* PERVEJ</div></td><td rowspan="1" colspan="1" class="el-table_2_column_8   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_9   el-table__cell"><div class="cell">10</div></td><td rowspan="1" colspan="1" class="el-table_2_column_10   el-table__cell"><div class="cell">2024-07-17</div></td><td rowspan="1" colspan="1" class="el-table_2_column_11   el-table__cell"><div class="cell"><span data-v-40f8097f="">支付宝</span></div></td><td rowspan="1" colspan="1" class="el-table_2_column_12   el-table__cell"><div class="cell"><span data-v-40f8097f="">--</span></div></td></tr></tbody></table>

← [加 QQ 群交流反馈](https://www.uviewui.com/components/addQQGroup.html) [安装](https://www.uviewui.com/components/install.html) →




---
## [dev-guide/install] install
> 官方文档: https://www.uviewui.com/components/install.html

---

## [#](#安装) 安装

### [#](#hbuilder-x方式) Hbuilder X方式

[下载方式配置文档](https://www.uviewui.com/components/downloadSetting.html)

如果您是使用`Hbuilder X`开发的用户，您可以在`uni-app`插件市场通过`uni_modules`的形式进行安装，此安装方式可以方便您后续在`uni_modules`对uView进行一键升级。

-   在uni-app插件市场右上角选择`uni_modules版本`下的`使用HBuilderX导入插件`，导入到对应的项目中即可。

**注意：** 此安装方式必须要按照[下载方式安装的配置](https://www.uviewui.com/components/downloadSetting.html)中的说明配置了才可用。

下载地址：[https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593)

### [#](#npm方式) NPM方式

[npm方式配置文档](https://www.uviewui.com/components/npmSetting.html)

在项目根目录执行如下命令即可：

```

npm install uview-ui@2.0.38

```

**注意：** 此安装方式必须要按照[npm方式安装的配置](https://www.uviewui.com/components/npmSetting.html)中的说明配置了才可用，且项目名称不能有**中文**字符。

### [#](#版本查询) 版本查询

有两种方式可以查询到正在使用的uView的版本：

```

console.log(uni.$u.config.v);

/uview-ui/libs/config/config.js
```

← [介绍](https://www.uviewui.com/components/intro.html) [配置](https://www.uviewui.com/components/setting.html) →




---
## [dev-guide/setting] setting
> 官方文档: https://www.uviewui.com/components/setting.html

---

## [#](#配置) 配置

### [#](#安装配置) 安装配置

由于uView支持`npm`和`下载`的方式安装，二者配置几乎一致，因为某些平台的兼容性，在配置easycom稍有不同，为了不造成混淆，这里将两种 方式分开说明：

-   [NPM方式安装的配置](https://www.uviewui.com/components/npmSetting.html)
-   [下载方式安装的配置](https://www.uviewui.com/components/downloadSetting.html)

### [#](#默认单位配置) 默认单位配置2.0.12

**温馨提示：** 2.0.25版本后，建议通过下方的`setCofig`方法进行设置。

在uView1.x中，组件参数如果为数值的话，默认为`rpx`单位，但是`rpx`在平板上会导致尺寸超大，为了更高的可用性，所以uView2.x将单位默认改为`px`，如果您出于 某些需求，需要将单位改为`rpx`，可以在`main.js`中进行如下配置即可：

```

import uView from 'uview-ui'
Vue.use(uView)

uni.$u.config.unit = 'rpx'
```

### [#](#修改uview内置配置方案) 修改uView内置配置方案 2.0.25

我们可以通过`setCofig`方法配置uView内部的各项内置配置，目前可配置的有`config`、`props`、`zIndex`、`color`属性，目前只建议修改`config`、`props`属性， 除非您清楚知道自己的修改所带来的影响。

```

import uView from 'uview-ui'
Vue.use(uView)

uni.$u.setConfig({

	config: {

		unit: 'rpx'
	},

	props: {

		radio: {
			size: 15
		}

	}
})
```

← [安装](https://www.uviewui.com/components/install.html) [快速上手](https://www.uviewui.com/components/quickstart.html) →




---
## [dev-guide/quickstart] quickstart
> 官方文档: https://www.uviewui.com/components/quickstart.html

---

## [#](#快速上手) 快速上手

### [#](#如何使用) 如何使用

通过npm和下载方式的配置之后，在某个页面可以直接使用组件，无需通过`import`引入组件。

```
<template>
	<view>
		<u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true">打开ActionSheet</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'标题',
			list: [
				{
					name:'选项一',
					subname:"选项一描述",
					color:'#ffaa7f',
					fontSize:'20'
				},
				{
					name: '选项二禁用',
					disabled:true
				},
				{
					name: '开启load加载',
					loading:true
				}
			],
			show: false
		};
	}
};
</script>
```

### [#](#关于uni-u) 关于uni.$u

从`1.7.9`开始，uView将`$u`对象同时挂载到了`uni`对象上，这意味着您可以在外部的`js`文件中，通过`uni.$u.xxx`的形式去调用uView提供的一些工具方法，而不再像从前一样必须在`*.vue`中通过`uni.$u.xxx`的形式调用。

### [#](#如何不使用easycom而单独引用某一个组件) 如何不使用easycom而单独引用某一个组件

某些情况下，您可能不想通过easycom引用组件(虽然我们极力推荐您使用easycom)，那么您可以使用`import`这个常规的引入方式，如下：

```
<template>
	<u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>

<script>
	import uActionSheet from "uView-ui/components/u-action-sheet/u-action-sheet.vue";
	export default {
		components: {
			uActionSheet
		},
		data() {
			return {
				list: [{
					text: '点赞',
					color: 'blue',
					fontSize: 28
				}, {
					text: '分享'
				}, {
					text: '评论'
				}],
				show: true
			}
		}
	}
</script>
```

### [#](#关于uview组件的esaycom规则可能和其他组件引入名称冲突的问题) 关于uView组件的esaycom规则可能和其他组件引入名称冲突的问题

uView的组件引入是通过easycom形式的，写在pages.json中，以`u-`开头，这可能和其他UI组件，或者uni-app插件市场的[uParse修复版-html富文本加载 (opens new window)](https://ext.dcloud.net.cn/plugin?id=364)组件名冲突而**报错**， 原因是此`uParse`的组件引用名为`u-parse`，也是`u-`开头，即使您在页面中显式地配置了组件引入，但uni-app仍认为easycom配置的规则优先级比页面引入的组件规则高。

以下为`uParse`第三方插件的官方写法：

```
<template>
    <u-parse :content="xxx"></u-parse>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		 components: {
			uParse
		 }
	}
</script>
```

可以看到，上方虽然通过`import`声明了此组件，最终引用的组件名称为`<u-parse>`("u-"开头)，但是uni-app仍然忽视了，而认为uView在`pages.json`配置的easycom规则的优先级更高，因而去uView的组件库 中查找`u-parse`，因为找不到而报错，这是不合理的。

解决办法也很简单，给冲突的插件换一个名字即可，比如上面的`uParse`插件，我们在`import`和`components`声明的时候换一个名字即可，比如这里让其为字母`a`开头：

```
<template>
    <a-parse :content="xxx"></a-parse>
</template>

<script>

	import aParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		 components: {
			aParse
		 }
	}
</script>
```

← [配置](https://www.uviewui.com/components/setting.html) [内置样式](https://www.uviewui.com/components/common.html) →




---
## [dev-guide/common] common
> 官方文档: https://www.uviewui.com/components/common.html

---

## [#](#内置样式) 内置样式

### [#](#说明) 说明

uView组件功能的实现，并不依赖全局样式，内置的一些类名，只是提供一些基础且常用的样式，仅此而已。
注意：请根据[快速上手](https://www.uviewui.com/components/quickstart.html)中的说明，引入uView提供的scss文件。

温馨提示

由于uView的内置样式均是写在scss文件中的，您在使用的时候，请确保要给页面的`style`标签加上`lang="scss"`属性，否则可能会报错。

### [#](#文字省略) 文字省略

`u-line-1`,`u-line-2`,`u-line-3`,`u-line-4`,`u-line-5`五个类名在文字超出内容盒子时，分别只显示一行、两行、三行、四行、五行+省略号。

```
<text class="u-line-1">是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛</text>
```

### [#](#重置按钮样式) 重置按钮样式

我们知道，uni-app和微信小程序的`button`按钮是自带样式的，比如边框，内边距，行高等。在某些特殊场景，我们可能会需要清除这些样式，仅仅只留下按钮文本，就像 单纯的`view`元素一样，不带预置样式，场景：
在微信小程序中，我们知道`button`设置`open-type`参数为`getUserInfo`(或者分享场景)，点击按钮可以弹出让用户授权的系统弹窗，有时候我们可能需要按钮形式展现，但也有时候我们仅仅需要 "点击登录/授权/分享"几个字，同时具备获取相应的功能，就需要清除按钮的样式了，只需要给`button`加上`u-reset-button`类名即可。

```
<button class="u-reset-button">点击登录</button>
```

提示：

1.  此种场景，不建议使用uView的`u-button`组件，使用原生的`button`即可
2.  有时候，我们可能弹出询问用户是否想授权，可以用`u-modal`组件，此组件有一个`confirm-button`的`slot`用于替换`确定`按钮，用户点击确定，即可授权。

```
/* 请在微信开发工具中运行此代码 */
<template>
	<view>
		<u-modal v-model="show" content="点击确定进行授权">
			<button open-type="getUserInfo" class="u-reset-button" slot="confirm-button" @getuserinfo="getuserinfo">确定</button>
		</u-modal>
		<u-button @click="show = true">打开modal</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		},
		methods: {
			getuserinfo(res) {
				console.log(res);
			}
		}
	}
</script>
```

### [#](#边框) 边框

uni-app，iOS和少数设备使用`1rpx`是能够得到类似`0.5px`的半像素宽度的，但是某些情况下是不兼容的， 故uView提供了一套兼容的css类名，方便用户使用。
`u-border`表示给元素添加四周的边框，`u-border-top`为上边框，`u-border-right`为右边框， `u-border-bottom`为下边框，`u-border-left`为左边框。
说明：如果想调整边框与内容的距离，修改元素的内边距即可。

```
<view class="u-border-bottom">
	夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外
</view>
```

### [#](#文字颜色) 文字颜色

uView提供了四个关于文字的颜色，具体详见文档的[Color 色彩](https://www.uviewui.com/components/color.html)部分，分别是：

-   `main-color`主要颜色，可以用于标题等需要重颜色的场景
-   `content-color`内容颜色，可以用于一般性内容的场景
-   `tips-color`提示颜色，可以用于浅颜色的提示语的场景
-   `light-color`为比`tips-color`更浅的颜色，可以和`tips-color`搭配使用

举个例子：
我们平时看到的APP的新闻列表，标题颜色可以用`$u-main-color`，简介部分颜色可以用`$u-content-color`，底部的发布时间文字等可以用`$u-tips-color`。

uView提供了四个关于文字颜色的scss变量名，具体详见文档的[Color 色彩](https://www.uviewui.com/components/color.html)部分，分别是：

-   `$u-main-color`
-   `$u-content-color`
-   `$u-tips-color`
-   `$u-light-color`

```

<style lang="scss" scoped>
	.box {
		color: $u-main-color;
	}

	.count {
		border-color: $u-light-color;
	}
</style>
```

### [#](#主题色) 主题色

uView提供五个关于主题的scss颜色变量，如有需要，可合理使用。具体详见文档的[Color 色彩](https://www.uviewui.com/components/color.html)部分，分别是：

-   `$u-primary`为蓝色，uView的主色彩，代表热情，友好，积极，向上之意。
-   `$u-warning`为黄色，代表警告之意。
-   `$u-success`为绿色，代表成功之意。
-   `$u-error`为红色，代表错误之意。
-   `$u-info`为灰色，代表一般信息之意。

```
<style lang="scss" scoped>
	.item {
		color: $u-primary;
	}
</style>
```

← [快速上手](https://www.uviewui.com/components/quickstart.html) [注意事项](https://www.uviewui.com/components/feature.html) →




---
## [dev-guide/feature] feature
> 官方文档: https://www.uviewui.com/components/feature.html

---

## [#](#注意事项) 注意事项

由于uni-app支持多端开发，而各端，特别是各小程序平台，没有统一的标准，加重了开发者和企业的成本，幸好uni-app使用Vue标准，对各端进行了写法的统一， 推动了生态的发展，但是由于某些小程序平台自身的原因，仍然会出现某些兼容性问题，我们会将制作uView过程中遇到，和平时收集的兼容性问题呈现在本专题，希望能 帮助到uni-app开发者。

### [#](#微信小程序) 微信小程序

注意

微信小程序基础库需要设置在2.19.2及以上

### [#](#支付宝小程序) 支付宝小程序

注意

uView需要开启了`component2`模式才支持支付宝小程序

1.  支付宝在很早前，已升级为`component2`模式，此模式支持更多的功能和特性，uni-app上，很多的特性，如`provide/inject`、`$slots`等，需要开启此模式才能支持， 而此模式在uni-app新建项目中默认是关闭的，因而需要在项目根目录的`manifest.json`中开启，如没有`alipay`属性节点，新增即可：

```
......
"mp-alipay" : {
	"component2": true
},
......
```

2.  uView的`waterfall`瀑布流组件使用了`$scoped slot`特性，由于hx的问题，在hx2.8.2修正了此问题，所以瀑布流组件需要hx2.8.2及以上才支持支付宝小程序。

### [#](#vue特性在各平台支持度) Vue特性在各平台支持度

1.  以下特性，uView已对各小程序开发工具，H5浏览器，APP(不含NVUE)进行过实测，均获得支持，其中支付宝小程序需要开启`component2`模式。

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

-   provide / inject
-   $slots
-   v-model / sync
-   $parent / $children

### [#](#设置页面背景颜色) 设置页面背景颜色

一般情况下，我们给页面的`page`节点或者给页面的最外层`view`设置背景颜色，二者分别有如下需要注意点：

#### [#](#_1-通过page节点设置) 1. 通过`page`节点设置

这个方式全端有效，但是需要注意的是，在微信小程序，或者某些安卓机型上，该节点如果写在带`scoped`属性的样式标签内是无效的，所以我们建议 您可以在页面多加一个不带scoped属性的样式标签，如下：

```

<style lang="scss">
page {
	background-color: $u-bg-color;
}
</style>

<style lang="scss" scoped>
.box {
	......
}
</style>
```

#### [#](#_2-通过页面外层view设置) 2. 通过页面外层`view`设置

相比`page`节点，`view`的高度默认为内容高度，所以如果页面内容不足一屏高度时，底部剩余部分依然为默认的白色，所以我们给需要这个`view`设置一个 最低高度，让它等于窗口高度：

```
<template>
	<view class="wrap">
		......
	</view>
</template>

<style scoped lang="scss">
.wrap {
	background-color: $u-bg-color;
	min-height: 100vh;
}
</style>
```

### [#](#全局赋值设备信息的陷阱) 全局赋值设备信息的陷阱

我们都知道，可以通过`uni.getSystemInfoSync()`获取设备信息，但是每次用到时都写一遍是很繁琐的，所以很多同学们都会突发奇想，比如在`main.js`或者 在`App.vue`中将`uni.getSystemInfoSync()`的结果赋值给`Vue.prototype`，如下：

```

Vue.prototype.system = uni.getSystemInfoSync();
```

上面的写法没有问题，我们可以任意地方通过`this.system`得到设备的信息，但是这里有一个陷阱，写在`main.js`，意味着赋值代码只会被执行一次，且是APP启动的时候， 但是uni-app中，设备信息的`windowHeight`属性是不含APP的导航栏和tabbar高度在内的，当我们进入首页时，`windowHeight`不含tabbar高度在内，高度可能为 '700px'，但是进入内页后，没有tabbar，这时的`windowHeight`高度依然为700px(少掉了tabbar的50px高度)，显然是不正确的。
上面说的只是对`windowHeight`属性有影响，其他的属性无碍，如果是需要获取高度，建议每次都执行`uni.getSystemInfoSync()`，或者通过uView提供的快捷工具 `uni.$u.sys()`方法获取即可。

### [#](#小程序主包太大无法预览和发布) 小程序主包太大无法预览和发布

我们都知道微信小程序预览和发布的主包大小都不能超过`2M`，否则无法真机预览和上传发布，经常有同学反馈刚使用uView，调试时候主包就超过了`2M`而无法真机预览， 我们在这里做一个说明，uView是`按需引入`的，在发行时，HX会自动剔除您没有使用组件，即使您使用了uView的全部组件，整个uView的大小也只有500K左右，但是有如下两点前提：

-   **调试**
    在调试阶段，为了调试的友好效果和编译速度等，HX默认是没有对JS进行压缩和去除注释，也没有进行组件按需引入的，所以会导致JS文件都很大，我们需要在 HBuilder X进行如下操作，再重新编译即可：

```
HBuilderX   运行->运行到小程序模拟器->勾选 运行时是否压缩代码
```

-   **发布**
    在HX中进行发布时，uView的组件会按需引入(使用uView所有组件的情况下，占用空间500k左右)，如果主包依然超出`2M`，您需要从多个方面着手：

1.  [小程序分包 (opens new window)](https://uniapp.dcloud.io/collocation/pages?id=subpackages)
2.  将静态资源放到服务器进行引用
3.  取消"ES6转ES5"设置

### [#](#uni-scss的优缺点) uni.scss的优缺点

`uni.scss`为uni-app新建项目自带工程文件，使用的预处理器为`sass/scss`，由此可见，uni-app官方推荐的是`scss`，同时我们uView也是`scss`的坚定推崇者，不建议在 uni-app中使用`less`、`stylus`等。

`uni.scss`具有如下一些特点：

-   无需引入，uni-app在编译时，会自动引入此文件
-   在此中定义的`scss`变量，可以全局使用，可以在此定义一些颜色，主题，尺寸等变量
-   **`uni.scss`会编译到每个`scss`文件中**(请着重理解这一句话)

综上所述，我们可以得知，`uni.scss`主要是利用`scss`的特性，定义一些全局变量，供各个写了`lang=scss`的style标签引用，但是这引出了一个重要的问题：
`uni.scss`中所写的一切内容，都会注入到每个声明了`scss`的文件中，这意味着，如果您的`uni.scss`如果有几百行，大小10k左右，那么这个10k都会被注入所有的 其他`scss`文件(页面)中，如果您的应用有50个页面，那么有可能因此导致整体的包体积多了50 \* 10 = 500k的大小，这可能会导致小程序包太大而无法预览和发布， 所以，我们建议您只将`scss`变量相关的内容放到`uni.scss`中。

### [#](#样式覆盖兼容性) 样式覆盖兼容性

为了避免样式被用户覆盖，或者被污染，一般组件或者页面都会给`style`标签加上`scoped`属性，如下演示为一个组件的内部构造：

```
/* item.vue */
<template>
	<view class="item"></view>
</template>

<style scoped>
	.item {
		border: 1px solid red;
	}
</style>
```

我们在页面中引入上方的`item`组件，并且想修改它的`border`边框为颜色(blue)，一般通过`v-deep`或`/deep/`指令修改，如下写法：

```
<template>
	<item></item>
</template>

<style scoped>
::v-deep .item {
	border: 1px solid blue;
}
</style>
```

上面的写法，在`App`和`H5`正常，但是在微信小程序无效，它要求`::v-deep`或`/deep/`前面必须还要有父元素的类名存在，如下：

```
<template>
	<view class="wrap">
		<item></item>
	</view>
</template>

<style scoped>
.wrap ::v-deep .item {
	border: 1px solid blue;
}
</style>
```

如果是在支付宝小程序中，写在组件上的类名和内联样式，都是无效的，如下：

```
<template>
	/* 在支付宝小程序，组件标签上的任何class和style都会被剔除，不会添加到组件内部的根元素中 */
	<item style="border: 1px solid blue" class="item"></item>
</template>
```

← [内置样式](https://www.uviewui.com/components/common.html) [对比 1.X](https://www.uviewui.com/components/diff1.x.html) →




---
## [dev-guide/diff1.x] diff1.x
> 官方文档: https://www.uviewui.com/components/diff1.x.html

---

## [#](#对比1-x) 对比1.X

uView2.0与uView1.x之间，是有非常大差异的，`1.x`不能升级到`2.x`版本。
造成这个问题的根本原因是，`2.x`是一个重构版本，对`1.x`进行了整个架构的改造升级，摒弃了`1.x`中一些不合理的理念和做法，同时引入很多优秀的新特性，让`2.0`更加 健壮和稳定。
下面列出一些`1.x`与`2.x`的差异，让您能更好的对`2.x`有整体的认识，了解该使用哪个版本，以及是否值得升级到`2.0`版本。

#### [#](#_1-对nvue的支持) 1. 对nvue的支持

众所周知，`1.x`是不支持`nvue`的，所以`2.x`立项的首要目标就是对`nvue`的兼容，目前uView2.0也全面实现了兼容`nvue`。
我们也知道，`nvue`的背后其实是`weex`，在渲染上有出色的效果，但是其也有很多无法填平的兼容问题，导致某些情况下费尽心思依然无法实现理想的效果。

#### [#](#_2-form表单校验的加强) 2. form表单校验的加强

在`1.x`中，`prop`参数不支持`a.b.c`的写法，`2.x`实现了支持，同时对`form`组件引入了`validateField、resetFields、clearValidate`等方法，从各个方面对表单功能 进行了加强，让您在移动端依然能对表单校验游刃有余。

#### [#](#_3-优化popup弹窗组件) 3. 优化popup弹窗组件

在`2.x`中，我们对弹窗进行了优化，有如下：

-   修复了`1.x`中快速切换可能会卡死；
-   移除了内置的`scroll-view`组件，让`popup`内的内容可以超出边界；
-   优化弹窗的响应速度
-   处理了由于uni-app的问题，导致微信小程序内，弹窗内无法准确获取元素尺寸而导致某些内嵌组件失效的问题；
-   提供一个`bgColor`参数，设置为`transparent`可以方便去掉背景色，实现个性化的中部弹窗；

#### [#](#_4-提供通用性的customstyle参数) 4. 提供通用性的customStyle参数

我们为每个组件都提供了一个`customStyle`，一般作用于组件内部的根节点，可以方便设置一些基础样式，它同时能接受对象或者字符串的样式形式，如下：

```

<u-badge :customStyle="{backgroundColor: 'red'}"></u-badge>

<u-badge customStyle="background-color: red;"></u-badge>
```

#### [#](#_5-优化在微信小程序上的差异) 5. 优化在微信小程序上的差异

微信小程序中，默认情况下，自定义组件本身的那个节点是一个“普通”的节点，使用时可以在这个节点上设置`class style 、动画、 flex`布局等，但是在复杂的 布局下，这可能会导致我们无法控制组件的整体布局，所以在`2.x`中，我们统一将所有组件设置为“虚拟的”，让其能更好的按我们的预期进行工作。

```

options: {
	virtualHost: true
}

```

#### [#](#_6-加强calendar日历组件) 6. 加强calendar日历组件

在`2.x`中，我们加入了多个控制参数，让您能够对日历进行各个方面进行细致的操作，如通过`formatter`参数，可以自定义日历提示语，角标等；允许控制日期最大和最小范围； 可以通过滚动的形式，同时展示多个月份；总之，相比`1.x`，我们从每个方面进行了细致的考虑，并提供了对应的处理方法。

#### [#](#_7-picker组件的调整) 7. picker组件的调整

在`1.x`中，我们提供了`picker`和`select`组件，这些组件存在一些不足与混乱，同时可能无法配置出我们想要的场景，在`2.x`中，我们对此进行了梳理，拆分为典型的`picker`组件， 用于普通的非时间类型选择，同时提供`datetime-picker`组件，用于专门的时间选择，并针对时间的格式化，最小和最大时间等方面，提供了多样化的控制参数。

#### [#](#_8-加强numberbox组件) 8. 加强numberBox组件

在`1.x`上，由于历史原因，此组件存在更新值时可能会有异常的问题。在`2.x`中，我们对此组件进行了重构和加强，加入异步控制，以及样式完全自定义的特性，让它能适用于 任何您需要它的场景。

#### [#](#_9-优化upload组件) 9. 优化upload组件

在`1.x`中，我们将上传的核心功能集成在组件内，导致在某些特殊返回状态，以及有前端直传`oss`时，可能会操作不方便的问题。
所以，在`2.x`中，我们重构了此组件，此后，组件内部只提供图片(新增了视频和文件类型)的选择与展示，将上传的步骤交由外部用户自定义的逻辑进行操作，实现更好的解耦。

#### [#](#_10-优化radio和checkbox组件) 10. 优化radio和checkbox组件

在`1.x`中，我们没法控制这两个组件的排列形式，所以在`2.x`中，我们提供了一个`placement`参数，可以对调图片与文本的位置，用于在特殊场景的布局，同时我们在组件内部进行了 特殊处理，让他们能更好的配合`form`组件进行表单校验。

#### [#](#_11-switch组件细节优化) 11. switch组件细节优化

在`1.x`中，该组件能够满足正常使用，在`2.x`中，我们对它进行优化，比如加入更好的`loading`效果、切换动画、以及提供`space`参数让您配置出另一种风格的样式。

#### [#](#_12-优化countdown倒计时组件) 12. 优化countDown倒计时组件

在`2.x`中，我们对此组件进行如下优化：

-   加入毫秒级的功能
-   提供完全自定义的样式配置，让它能适用于任何场景。

#### [#](#_13-优化swipeaction滑动单元格组件) 13. 优化swipeAction滑动单元格组件

在`2.x`中，我们针对不同的平台，采用不同的方案去实现此组件的效果，在`nvue`上，我们采用了`BindingX`方案，在APP和微信小程序，H5上，我们采用了`wxs`的方案， 这些优化 ，能让我们滑动单元格时，有丝滑和细腻的效果。

#### [#](#_14-组件内部获取尺寸时机的优化) 14. 组件内部获取尺寸时机的优化

在`1.x`中，普遍的做法是在组件初始化完成后获取内部元素的尺寸，这导致在内容变化而导致尺寸变化后，可能导致不准确，或者需要通过调用组件的方法重新进行初始化。
而在`2.x`中，我们对此进行了反思，采用的方法为每次需要进行操作的时候，重新获取元素的尺寸，典型的为`collapse`折叠面板组件，在每次打开的时候，组件都会重新 计算该展示的高度。

#### [#](#_15-父子嵌套组件调用的优化) 15. 父子嵌套组件调用的优化

在uView中，有很多组件都采用父子嵌套的做法，比如`radio`组件，就由`u-radio-group`和`u-radio`组件，`1.x`中对类似的组件采用了统一的处理方法，该方法存在一定的缺陷， 导致反复操作一些子组件时，重复加入一些实例到管理状态中，从而导致卡顿或者混乱。在`2.x`中，我们对类似的问题进行了优化，保证了状态的正确性，以及在组件被卸载的时候，进行移除。

#### [#](#_16-骨架屏组件重构) 16. 骨架屏组件重构

在`1.x`中，我们需要给骨架屏组件提供类名，以及初始的模拟数据，让组件内部进行尺寸获取以及在对应的位置绘制占位图，在便捷性的同时，舍弃了可控性。
所以，在`2.x`中，我们采用了另一种实现方式，让用户可以通过参数的形式，配置出想要的占位图信息，可以获得更强的自定义性。

#### [#](#_17-加强http请求) 17. 加强http请求

在`1.x`中，我们提供了基本可用的`http`支持，它也存在一些缺陷，比如不支持`upload、download`，其他各项配置不够细化等。
在`2.x`中，我们引入更专业的`luch-request`插件，它能全面的支持一个企业应用在各种复杂场景下的请求配置需求，我们对此插件进行了进一步的封装，并提供了详细实践用例， 您可以在[Http请求 (opens new window)](https://www.uviewui.com/js/http.html)章节中查阅更多关于它的用法。

#### [#](#_18-提供全局性的组件默认参数配置) 18. 提供全局性的组件默认参数配置

我们知道，每个组件都有很多的`props`参数，在调用组件的时候，通过修改对应的参数，可以覆盖组件的默认值。但是在对于某个常用的组件来说，如果组件的某个参数 默认值不符合自己的需求，就需要在每次调用的时候，都去覆盖它。
在`2.x`中，我们对此提供了一个解决方案，假设`u-text`的`color`为`#333333`，而您应用的默认色值为`#555555`，就需要每次使用`u-text`组件时，都去修改它，如下：

```

<u-text color="#555555" text="列表内容"></u-text>

<u-text color="#555555" text="详情内容"></u-text>
```

在`2.x`中，我们可以通过`uni.$u.props.组件名.参数名`的形去对组件的某个默认参数进行全局覆盖，比如我们我要修改`u-text`组件`color`参数：

```

uni.$u.props.text.color = '#555555'
```

在进行如上设置后，整个应用中，任意调用`u-text`的地方，`color`参数的默认值都成为了`#555555`。

#### [#](#_19-优化demo演示效果-以及移除了模板和js的模块) 19. 优化demo演示效果，以及移除了模板和js的模块

为了让组件库更加专注和简洁，我们在演示demo中，移除了`1.x`中关于`模板`和`js`的模块，同时优化了组件的演示效果，不再使用`1.x`切换按钮的形式去动态切换效果， 而是提供更直观的形式对组件的重要效果进行罗列演示。
同时，在官网中，我们也移除了`模板`模块。

#### [#](#_20-加强tag组件) 20. 加强tag组件

在`2.x`中，我们对`tag`组件进行了加强，相较`1.x`，它具有如下优势：

-   可以配置关闭功能
-   可以配置图标
-   可以适用于进行多选和单选的场景

#### [#](#_21-加强swiper轮播图组件) 21. 加强swiper轮播图组件

在`2.x`中，我们对`swiper`组件进行了加强，让它可以配置出更加灵活的指示器样式，同时加入加载中的状态，以及可以嵌入视频播放的特性。

#### [#](#_22-优化sticky吸顶组件) 22. 优化sticky吸顶组件

在`1.x`中，我们采用的是监听元素状态的形式，通过`js`方案进行吸顶，但是随着时代的进步以及设备的升级，大部分设备以及某些平台已经实现了对`css sticky`支持， 所以在`2.x`中，我们采用了两种方案，在各个平台，比如`nvue, App, Ios，Android，微信小程序，H5`等，通过各种手段，去判断当前平台或者设备是否支持`css sticky`， 如果支持则优先使用`css`方案以获得更细腻的效果。如果不支持`css`方案，则自动降级为`js`方案。

#### [#](#_23-优化tabs组件) 23. 优化tabs组件

在`1.x`，可能会存在动态增减菜单下，底部滑块位置可能会错乱的问题，得益于`2.x`的整体架构调整，我们在每次移动滑块时，都会重新获取菜单的尺寸，再进行移动，保证了滑块 能准确移动到如期的位置。同时，我们对此组件还进行其他细节优化，比如可以禁用某个菜单，显示角标，可以配合`u-sticky`进行吸顶等。

← [注意事项](https://www.uviewui.com/components/feature.html) [更新日志](https://www.uviewui.com/components/changelog.html) →




---
## [dev-guide/changelog] changelog
> 官方文档: https://www.uviewui.com/components/changelog.html

---

## [#](#更新日志) 更新日志

-   ## 2.0.38

    `2024-10-29`

    -   修复 修复\`picker\`组件和\`datetime-picker\`组件的头条小程序循环引用问题 [#1040](https://github.com/umicro/uView2.0/pull/1040)
    -   修复 修复\`image\`组件的\`bgColor\`属性不生效问题 [#1076](https://github.com/umicro/uView2.0/pull/1076)
    -   修复 修复\`textarea\`组件部分回调事件参数丢失问题 [#797](https://github.com/umicro/uView2.0/pull/797)
    -   修复 修复\`input\`组件部分回调事件参数丢失问题
    -   添加 \`datetime-picker\`组件支持\`immediateChange\`属性 [#1098](https://github.com/umicro/uView2.0/pull/1098)
    -   修复 修复\`datetime-picker\`组件\`v-model\`绑定异步设置无效问题 [#803](https://github.com/umicro/uView2.0/pull/803)
    -   修复 修复\`popup\`组件设置\`duration\`属性为字符串值时，遮罩的打开、关闭很缓慢问题 [#1097](https://github.com/umicro/uView2.0/pull/1097)
    -   修复 修复\`radio\`参数\`iconColor\`属性不生效问题 [#941](https://github.com/umicro/uView2.0/pull/941)
    -   修复 修复\`tooltip\`组件\`size\`属性不生效的问题 [#1070](https://github.com/umicro/uView2.0/pull/1070)
    -   修复 修复\`image\`组件当\`src\`为空时，loading状态问题 [#910](https://github.com/umicro/uView2.0/pull/910)
    -   修复 其他一些修复

-   ## 2.0.37

    `2024-03-17`

    -   修复 表单校验trigger触发器参数无效问题 [#546](https://github.com/umicro/uView2.0/pull/546)
    -   修复 u-input组件的password属性在动态切换为false时失效的问题 [#1009](https://github.com/umicro/uView2.0/pull/1009)
    -   添加 添加微信小程序用户同意隐私协议事件回调 [#992](https://github.com/umicro/uView2.0/pull/992)
    -   修复 修复支付宝小程序picker样式问题 [#955](https://github.com/umicro/uView2.0/pull/955)
    -   添加 u-modal添加duration字段控制动画过度时间 [#1023](https://github.com/umicro/uView2.0/pull/1023)
    -   修复 修复picker lastIndex异常导致的column异常问题 [#1028](https://github.com/umicro/uView2.0/pull/1028)
    -   添加 tabs增加长按事件支持 [#1029](https://github.com/umicro/uView2.0/pull/1029)
    -   修复 修复u-avatar square属性在小程序open-data下无效问题 [#1030](https://github.com/umicro/uView2.0/pull/1030)
    -   修复 其他一些修复

-   ## 2.0.36

    `2023-03-27`

    -   优化 重构deepClone & deepMerge
    -   修复 路由在部分情况下不能跳转问题
    -   修复 其他一些修复

-   ## 2.0.35

    `2022-10-29`

    -   修复 修复$u.route()方法type参数无效问题

-   ## 2.0.34

    `2022-09-24`

    -   修复 修复route方法调用可能报错的问题
    -   添加 u-input、u-textarea增加ignoreCompositionEvent属性
    -   修复 修复u-no-network组件z-index无效的问题
    -   修复 修复textarea组件在h5上confirmType=""报错的问题
    -   优化 u-rate适配nvue
    -   优化 优化验证手机号码的正则表达式(根据工信部发布的《电信网编号计划（2017年版）》进行修改。)
    -   添加 form-item添加labelPosition属性
    -   修复 u-calendar修复maxDate设置为当前日期，并且当前时间大于08：00时无法显示日期列表的问题 [#724](https://github.com/umicro/uView2.0/pull/724)
    -   添加 u-radio增加一个默认插槽用于自定义修改label内容 [#680](https://github.com/umicro/uView2.0/pull/680)
    -   修复 修复timeFormat函数在safari重的兼容性问题 [#664](https://github.com/umicro/uView2.0/pull/664)

-   ## 2.0.33

    `2022-06-17`

    -   修复 修复loadmore组件lineColor类型错误问题
    -   修复 修复u-parse组件imgtap、linktap不生效问题

-   ## 2.0.32

    `2022-06-16`

    -   添加 u-loadmore新增自定义颜色、虚/实线
    -   修复 修复u-swiper-action组件部分平台不能上下滑动的问题
    -   修复 修复u-list回弹问题
    -   修复 修复notice-bar组件动画在低端安卓机可能会抖动的问题
    -   添加 u-loading-page添加控制图标大小的属性iconSize
    -   修复 修复u-tooltip组件color参数不生效的问题
    -   修复 修复u--input组件使用blur事件输出为undefined的bug
    -   添加 u-code-input组件新增键盘弹起时，是否自动上推页面参数adjustPosition
    -   修复 修复image组件load事件无回调对象问题
    -   修复 修复button组件loadingSize设置无效问题
    -   修复 其他修复

-   ## 2.0.31

    `2022-04-19`

    -   修复 修复upload在vue页面上传成功后没有成功标志的问题
    -   修复 解决演示项目中微信小程序模拟上传图片一直出于上传中问题
    -   修复 修复u-code-input组件在nvue页面编译到app平台上光标异常问题（app去除此功能）
    -   修复 修复actionSheet组件标题关闭按钮点击事件名称错误的问题
    -   修复 其他修复

-   ## 2.0.30

    `2022-04-04`

    -   添加 u-rate增加readonly属性
    -   添加 tabs滑块支持设置背景图片
    -   修复 修复u-subsection mode为subsection时，滑块样式不正确的问题
    -   添加 u-code-input添加光标效果动画
    -   修复 修复popup的open事件不触发的问题
    -   修复 修复u-flex-column无效的问题
    -   修复 修复u-datetime-picker索引在特定场合异常问题
    -   修复 修复u-datetime-picker最小时间字符串模板错误问题
    -   添加 u-swiper添加m3u8验证
    -   优化 u-swiper修改判断image和video逻辑
    -   修复 修复swiper无法使用本地图片问题，增加type参数
    -   修复 修复u-row-notice格式错误问题
    -   修复 修复u-switch组件当unit为rpx时,nodeStyle消失的问题
    -   修复 修复datetime-picker组件showToolbar与visibleItemCount属性无效的问题
    -   修复 修复upload组件条件编译位置判断错误，导致previewImage属性设置为false时，整个组件都会被隐藏的问题
    -   修复 修复u-checkbox-group设置shape属性无效的问题
    -   修复 修复u-upload的capture传入字符串的时候不生效的问题
    -   修复 修复u-action-sheet组件，关闭事件逻辑错误的问题
    -   修复 修复u-list触顶事件的触发错误的问题
    -   修复 修复u-text只有手机号可拨打的问题
    -   修复 修复u-textarea不能换行的问题
    -   修复 其他修复

-   ## 2.0.29

    `2022-03-13`

    -   修复 修复u--text组件设置decoration属性未生效的问题
    -   修复 修复u-datetime-picker使用formatter后返回值不正确
    -   修复 修复u-datetime-picker intercept 可能为undefined
    -   修复 修复已设置单位 uni..config.unit = 'rpx'时，线型指示器 transform 的位置翻倍，导致指示器超出宽度
    -   修复 修复mixin中bem方法生成的类名在支付宝和字节小程序中失效
    -   修复 修复默认值传值为空的时候，打开u-datetime-picker报错，不能选中第一列时间的bug
    -   修复 修复u-datetime-picker使用formatter后返回值不正确
    -   修复 修复u-image组件loading无效果的问题
    -   修复 修复config.unit属性设为rpx时，导航栏占用高度不足导致塌陷的问题
    -   修复 修复u-datetime-picker组件itemHeight无效问题
    -   修复 其他修复

-   ## 2.0.28

    `2022-02-22`

    -   添加 search组件新增searchIconSize属性
    -   修复 兼容Safari/Webkit中传入时间格式如2022-02-17 12:00:56
    -   修复 修复text value.js 判断日期出format错误问题
    -   修复 priceFormat格式化金额出现精度错误
    -   修复 priceFormat在部分情况下出现精度损失问题
    -   修复 优化表单rules提示
    -   修复 修复avatar组件src为空时，展示状态不对
    -   修复 其他修复

-   ## 2.0.27

    `2022-01-28`

    -   修复 样式修复

-   ## 2.0.25

    `2022-01-27`

    -   添加 添加$u.setConfig()方法，可设置uView内置的config, props, zIndex, color属性
    -   优化 优化遗留的通过正则判断rpx单位的问题
    -   修复 修复text组件mode=price时，可能会导致精度错误的问题
    -   修复 修复$u.addUnit()对配置默认单位可能无效的问题
    -   修复 其他修复

-   ## 2.0.24

    `2022-01-25`

    -   修复 修复swiper在current指定非0时缩放有误
    -   修复 修复u-icon添加stop属性的时候报错
    -   优化 优化遗留的通过正则判断rpx单位的问题
    -   优化 优化Layout布局 vue使用gutter时，会超出固定区域
    -   优化 优化search组件高度单位问题（rpx -> px）
    -   修复 修复u-image slot 加载和错误的图片失去了高度
    -   修复 修复u-index-list中footer插槽与header插槽存在性判断错误
    -   修复 修复部分机型下u-popup关闭时会闪烁
    -   修复 修复u-image在nvue-app下失去宽高
    -   修复 修复u-popup运行报错
    -   修复 修复u-tooltip报错
    -   修复 修复box-sizing在app下的警告
    -   修复 修复u-navbar在小程序中报运行时错误
    -   修复 其他修复

-   ## 2.0.0

    `2021-11-15`

    -   添加 包含50+组件
    -   添加 众多JS工具库

← [对比 1.X](https://www.uviewui.com/components/diff1.x.html) [升级指南](https://www.uviewui.com/components/changeGuide.html) →




---
## [dev-guide/changeGuide] changeGuide
> 官方文档: https://www.uviewui.com/components/changeGuide.html

---

## [#](#升级指南) 升级指南

### [#](#_2-0升级说明) 2.0升级说明

uView2.0相较于`1.x`版本，进行了整个架构的重构，组件Api，以及请求方法等方方面面，都与`1.x`有很大差异，我们不建议将`1.x`升级到`2.x`版本，而是建议您在新项目中使用uView2.0。

← [更新日志](https://www.uviewui.com/components/changelog.html) [2.X 常见问题整理 (opens new window)](https://www.kancloud.cn/uview/uview-ui_v2/2593659) →




---
## [dev-guide/resource] resource
> 官方文档: https://www.uviewui.com/components/resource.html

---

## [#](#资源下载) 资源下载

我们会在这里为您提供一些跟 uView UI 设计相关的资源和设计工具的下载，更多设计资源正在整理和完善中。

### [#](#设计资源) 设计资源

这里我们提供组件的 Sketch 和 Axure 设计资源，您可以根据需要进行下载。

-   ![](https://cdn.uviewui.com/uview/docs/b4b910e7f5919defa0b936c4fe03f4d.png)

    ### Sketch Template

    通过在Sketch中导入uView组件库，可以在交互设计阶段方便地调用常用的组件(Sketch版本：78)

    [下载](https://cdn.uviewui.com/uview/resources/uView2.0.sketch)

-   ![](https://cdn.uviewui.com/uview/docs/9d24f116e345f13d2fc46734fbcd7a9.png)

    ### Axure Template

    通过在Axure中导入uView组件库，可以在交互设计阶段方便地调用常用的组件(Axure版本：9.0)

    [下载](https://download.uviewui.com/uView2.0.rp)

### [#](#框架资源) 框架资源

这里我们提供了一些跟组件，或者框架相关的下载资源，您可以根据需求进行下载。

-   ![](https://cdn.uviewui.com/uview/docs/425b2a05e181894a8e3f09f4d95af4e.png)

    ### Empty组件配套占位图

    我们的专业设计师精心为您做了一套精美的缺省图，涵盖各个场景，文件内含图片和Sketch源文件

    [下载](https://yanxincloudplatform.oss-cn-beijing.aliyuncs.com/cloudplatform/Empty.zip)

-   ![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8f7e1d02-dcb1-46ba-90db-ae32fea44f22/918be742-1a59-4981-9d9b-ccf45104fc3b.jpg)

    ### uView2.0 icon

    基于字体的图标集，包含了大多数常见场景的图标。

    [下载](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8f7e1d02-dcb1-46ba-90db-ae32fea44f22/5d3fabe3-464a-4fcd-b354-a35daed18eef.zip)




---
## [dev-guide/addQQGroup] addQQGroup
> 官方文档: https://www.uviewui.com/components/addQQGroup.html

---

## [#](#加qq群) 加QQ群

#### [#](#点击群号跳转qq窗口) 点击群号跳转QQ窗口：

uView QQ 频道： [点击进入](https://pd.qq.com/s/1ljuh7)

官方15群： [691550458](https://jq.qq.com/?_wv=1027&k=TcQ177ZA)

官方14群： [965190918](https://jq.qq.com/?_wv=1027&k=qWgiooZx)

官方13群： [879811455](https://jq.qq.com/?_wv=1027&k=zM5u0Obf)

官方12群： [229707069](https://jq.qq.com/?_wv=1027&k=raoExfcm)

官方11群： [364463526](https://jq.qq.com/?_wv=1027&k=rkETT6yH)

官方10群： [232041042](https://jq.qq.com/?_wv=1027&k=KMIsn0WW)

官方9群： [828504448](https://jq.qq.com/?_wv=1027&k=qL5ss9od)

官方8群： [496409492](https://jq.qq.com/?_wv=1027&k=Xr6nOg4D)

官方7群： [627867855](https://jq.qq.com/?_wv=1027&k=pVlVMMbJ)

官方6群： [745721078](https://jq.qq.com/?_wv=1027&k=BFWjkCiA)

官方5群： [863820668](https://jq.qq.com/?_wv=1027&k=TOxIt2Ga)

官方4群： [1084514613](https://jq.qq.com/?_wv=1027&k=9N8XXkLk)

官方3群： [1129077272](https://jq.qq.com/?_wv=1027&k=EPxWGXa9)

官方2群： [249718512](https://jq.qq.com/?_wv=1027&k=kMJ5BR1V)

官方1群： [1042987248](https://jq.qq.com/?_wv=1027&k=TNVbK65v)

[介绍](https://www.uviewui.com/components/intro.html) →




---

<!-- ============================================ -->
<!-- 类别: 基础组件 -->
<!-- ============================================ -->

## [basic/color] color
> 官方文档: https://www.uviewui.com/components/color.html

---

## [#](#color-色彩) Color 色彩

uView经过大量调试和研究，得出一套专有的调色板，在各个组件内部，使用统一的配色，为您的产品带来统一又鲜明的视觉效果。

注意

uView为了更好编写css，使用了scss预处理器，使用uView之前，请确认您的Hbuilder X已经安装了scss预处理器，一般情况下，相信您已经安装了。如果没有安装， 请在 Hbuilder X->工具->插件安装 中找到找到"scss/sass编译"安装即可，安装完毕如果不生效，请重启Hbuilder X。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#主题色) 主题色

`primary`，`success`，`error`，`warning`，`info`是uView的主题色，他们给人在视觉感受上分别对应于蓝色，绿色，红色，黄色，灰色。 而他们又有对应的`disabled`、`dark`和`light`状态，分别表示对应的禁止，加深和变浅的对应颜色。举例uView的`button`组件来说：

1.  设置`type`参数为`primary`时，按钮显示蓝色。
2.  按钮被按下时，使用的是`primary`的加深颜色，也即`dark`状态。
3.  按钮设置为镂空状态(`plain`为`true`)时，背景色为`primary`的变浅颜色，也即`light`状态。
4.  按钮处于禁止状态时，使用的是`primary`的稍浅颜色，也即`disabled`状态。

### [#](#主色) 主色

蓝色作为uView主色调，表示一种鲜明，积极的态度

Primary
#2979ff

Dark
#2b85e4

Disabled
#a0cfff

Light
#ecf5ff

我们在全局样式中，通过`scss`提供了对应的颜色变量名，方便您在任何可写css的地方，调用这些变量，如下：

```

$u-primary: #3c9cff;
$u-warning: #f9ae3d;
$u-success: #5ac725;
$u-error: #f56c6c;
$u-info: #909399;

.title {
	color: $u-primary;
	......
}
```

### [#](#辅助色) 辅助色

除了主色外的场景色，需要在不同的场景中使用，如绿色代表成功，红色代表错误，黄色代表警示。

Error
#fa3534

Dark
#dd6161

Disabled
#fab6b6

Light
#fef0f0

Warning
#ff9900

Dark
#f29100

Disabled
#fcbd71

Light
#fdf6ec

Success
#19be6b

Dark
#18b566

Disabled
#71d5a1

Light
#dbf1e1

Info
#909399

Dark
#82848a

Disabled
#c8c9cc

Light
#f4f4f5

我们在全局样式中，通过`scss`提供了对应的颜色变量名，方便您在任何可写css的地方，调用这些变量，如下：

```

$u-primary: #3c9cff;
$u-primary-dark: #398ade;
$u-primary-disabled: #9acafc;
$u-primary-light: #ecf5ff;

$u-warning: #f9ae3d;
$u-warning-dark: #f1a532;
$u-warning-disabled: #f9d39b;
$u-warning-light: #fdf6ec;

$u-success: #5ac725;
$u-success-dark: #53c21d;
$u-success-disabled: #a9e08f;
$u-success-light: #f5fff0;

$u-error: #f56c6c;
$u-error-dark: #e45656;
$u-error-disabled: #f7b2b2;
$u-error-light: #fef0f0;

$u-info: #909399;
$u-info-dark: #767a82;
$u-info-disabled: #c4c6c9;
$u-info-light: #f4f4f5;

.title {
	color: $u-type-info;
	......
}
```

### [#](#文字颜色) 文字颜色

uView中，分别提炼了4种用于文字颜色，分别是：主要文字、常规文字、次要文字、占位文字颜色。

-   主要文字颜色一般用于内容的标题等，如新闻列表的标题
-   常规文字颜色一般用于内容的主体，如新闻列表的概要
-   次要文字颜色一般用于内容的提示部分，如新闻列表底部的时间，评论数量的提示文字
-   占位文字颜色属于更浅的灰色，看场景选择使用

主要文字
#303133

常规文字
#606266

次要文字
#909399

占位文字
#c0c4cc

```

$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909193;
$u-light-color: #c0c4cc;
$u-border-color: #dadbde;
$u-bg-color: #f3f4f6;
$u-disabled-color: #c8c9cc;

.title {
	color: $u-main-color;
}
```

### [#](#背景颜色) 背景颜色

uView中，定义了一个背景颜色，如下：

背景颜色
#f3f4f6

我们在全局样式中，通过`scss`提供了对应的颜色变量名，方便您在任何可写css的地方，调用这个变量，如下：

```

$u-bg-color: #f3f4f6;

.title {
	color: $u-bg-color;
}
```

### [#](#边框颜色) 边框颜色

uView自定义了一个边框的颜色，值为`#e4e7ed`，如果想使用，如下：

```

$u-border-color: #e4e7ed;

.item {
	border: 1px solid $u-border-color;
}
```

← [2.X 常见问题整理 (opens new window)](https://www.kancloud.cn/uview/uview-ui_v2/2593659) [Icon 图标](https://www.uviewui.com/components/icon.html) →




---
## [basic/icon] icon
> 官方文档: https://www.uviewui.com/components/icon.html

---

## [#](#icon-图标) Icon 图标 [![](https://www.uviewui.com/common/to_api.png)](#api)

基于字体的图标集，包含了大多数常见场景的图标。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

注意

因为在`nvue`下暂时无法解决自定义图标的问题，所以此功能暂缓推出。

[icon 下载地址](https://www.uviewui.com/components/resource.html)

通过`<u-icon>`形式来调用，设置`name`参数为图标名即可。其中`color`默认为`#606266`，`size`默认为`16px`

```
<u-icon name="photo"></u-icon>
```

### [#](#修改图标的样式) 修改图标的样式

-   通过`color`参数修改图标的颜色
-   通过`size`参数修改图标的大小，单位为 px

```
<u-icon name="photo" color="#2979ff" size="28"></u-icon>
```

### [#](#图片图标) 图片图标

这里说的图片图标，指的是小图标，起作用定位为"icon"图标作用，而非大尺寸的图片展示场景，理论上，这个小图标应该为`png`格式的正方形图标。

上面说到，给组件的`name`参数传入一个图片的名称即可显示字体图标，这些名称中不能带有`/`斜杠符号，否则会被认为是传入了图片图标，同时，`size`参数 也被设置为这个图片图标的宽度，由于是图片，诸如颜色`color`等参数都会失效。

```
<u-icon
  label="uView"
  size="40"
  name="https://uviewui.com/example/button.png"
></u-icon>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/icon/icon.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/icon/icon.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| name | 图标名称，见示例图标集，如名称带有`/`，会被认为是图片图标 | String | \- | \- |
| color | 图标颜色 | String | color\['u-content-color'\] | \- |
| size | 图标字体大小，单位默认 px | String | Number | 16px | \- |
| bold | 是否显示粗体 | Boolean | false | \- |
| index | 一个用于区分多个图标的值，点击图标时通过`click`事件传出 | String | Number | \- | \- |
| hoverClass | 图标按下去的样式类，用法同 uni 的`view`组件的`hover-class`参数，详见：[hover-class (opens new window)](https://uniapp.dcloud.io/component/view) | String | \- | \- |
| customPrefix（暂不可用） | 自定义字体图标库时，需要写上此值，详见：[扩展自定义图标库 (opens new window)](https://www.uviewui.com/guide/customIcon.html) | String | uicon | \- |
| label | 图标右侧/下方的 label 文字 | String | Number | \- | \- |
| labelPos | `label`相对于图标的位置 | String | right | bottom / top / left |
| labelSize | `label`字体大小，单位默认 px | String | Number | 15px | \- |
| labelColor | `label`字体颜色 | String | color\['u-content-color'\] | \- |
| space | `label`与图标的距离，单位默认 px | String | Number | 3px | \- |
| imgMode | 图片裁剪、缩放的模式，image 组件原生属性，详见：[image (opens new window)](https://uniapp.dcloud.io/component/image?id=image) | String | \- | \- |
| width | `name`为图片路径时图片的宽度，单位默认 px | String | Number | \- | \- |
| height | `name`为图片路径时图片的高度，单位默认 px | String | Number | \- | \- |
| top | 图标到顶部的距离，如果某些场景，如果图标没有垂直居中，可以调整此参数，单位默认 px | String | Number | 0 | \- |
| stop | 是否阻止事件传播 | Boolean | false | \- |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| click | 点击图标时触发 | index: 通过`props`传递的`index`值 | \- |

### [#](#图标集) 图标集

level

woman

man

arrow-left-double

arrow-right-double

chat

chat-fill

red-packet

red-packet-fill

order

checkbox-mark

arrow-up-fill

arrow-down-fill

backspace

photo

photo-fill

lock

lock-fill

lock-open

lock-opened-fill

hourglass

hourglass-half-fill

home

home-fill

fingerprint

cut

star

star-fill

share

share-fill

volume

volume-fill

volume-off

volume-off-fill

trash

trash-fill

rewind-right

rewind-right-fill

rewind-left

rewind-left-fill

shopping-cart

shopping-cart-fill

question

question-circle

question-circle-fill

plus

plus-circle

plus-circle-fill

tags

tags-fill

pause

pause-circle

pause-circle-fill

play-circle

play-circle-fill

map

map-fill

phone

phone-fill

list

list-dot

man-delete

man-add

man-add-fill

person-delete-fill

info

info-circle

info-circle-fill

minus

minus-circle

minus-circle-fill

mic

mic-off

grid

grid-fill

eye

eye-fill

eye-off

file-text

file-text-fill

edit-pen

edit-pen-fill

email

email-fill

download

checkmark

checkmark-circle

checkmark-circle-fill

clock

clock-fill

close

close-circle

close-circle-fill

calendar

calendar-fill

car

car-fill

bell

bell-fill

bookmark

bookmark-fill

attach

play-right

play-right-fill

play-left

play-left-fill

error

error-circle

error-circle-fill

wifi

wifi-off

skip-back-left

skip-forward-right

search

setting

setting-fill

more-dot-fill

more-circle

more-circle-fill

bag

bag-fill

arrow-upward

arrow-downward

arrow-leftward

arrow-rightward

arrow-up

arrow-down

arrow-left

arrow-right

rmb

rmb-circle

rmb-circle-fill

thumb-up

thumb-up-fill

thumb-down

thumb-down-fill

coupon

coupon-fill

kefu-ermai

server-fill

server-man

scan

warning

warning-fill

google

google-circle-fill

chrome-circle-fill

ie

IE-circle-fill

github-circle-fill

android-fill

android-circle-fill

apple-fill

camera

camera-fill

pushpin

pushpin-fill

minus-square-fill

plus-square-fill

heart

heart-fill

reload

account

account-fill

minus-people-fill

plus-people-fill

integral

integral-fill

zhihu

zhihu-circle-fill

gift

gift-fill

zhifubao

zhifubao-circle-fill

weixin-fill

weixin-circle-fill

twitter

twitter-circle-fill

taobao

taobao-circle-fill

weibo

weibo-circle-fill

qq-fill

qq-circle-fill

moments

moments-circel-fill

qzone

qzone-circle-fill

facebook

facebook-circle-fill

baidu

baidu-circle-fill

share-square

← [Color 色彩](https://www.uviewui.com/components/color.html) [Image 图片](https://www.uviewui.com/components/image.html) →




---
## [basic/image] image
> 官方文档: https://www.uviewui.com/components/image.html

---

## [#](#image-图片) Image 图片 [![](https://www.uviewui.com/common/to_api.png)](#api)

此组件为 uni-app 的`image`组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
**我们推荐您在任何使用图片场景的地方，都优先考虑使用这个小巧，精致而实用的组件。**

注意：

由于在`nvue`下，`u-image`名称被 uni-app 官方占用，在`nvue`页面中请使用`u--image`名称，在`vue`页面中使用`u--image`或者`u-image`均可。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

配置图片的`width`宽和`height`高，以及`src`路径即可使用。

```
<template>
  <u--image
    :showLoading="true"
    :src="src"
    width="80px"
    height="80px"
    @click="click"
  ></u--image>
</template>

<script>
  export default {
    data() {
      return {
        src: "https://uviewui.com/album/1.jpg",
      };
    },
  };
</script>
```

### [#](#裁剪模式) 裁剪模式

通过`mode`参数配置填充模式，此模式用法与 uni-app 的`image`组件的`mode`参数完全一致，详见：[Image (opens new window)](https://uniapp.dcloud.io/component/image)

```
<u--image src="https://uviewui.com/album/1.jpg" mode="widthFix"></u--image>
```

### [#](#图片形状) 图片形状

-   通过`shape`参数设置图片的形状，`circle`为圆形，`square`为方形
-   如果为方形时，还可以通过`radius`属性设置圆角值

```
<u--image src="https://uviewui.com/album/1.jpg" shape="circle"></u--image>
```

### [#](#懒加载) 懒加载

注意：此功能只对微信小程序、App、百度小程序、字节跳动小程序有效，默认开启。

```
<u-image src="https://uviewui.com/album/1.jpg" :lazy-load="true"></u-image>
```

### [#](#加载中提示) 加载中提示

图片加载过程中，为加载中状态(默认显示一个小图标)，可以通过`loading`自定义插槽，结合 uView 的`u-loading`组件，实现加载的动画效果。

```
<u--image src="https://uviewui.com/album/1.jpg">
  <template v-slot:loading>
    <u-loading-icon color="red"></u-loading-icon>
  </template>
</u--image>
```

### [#](#加载错误提示) 加载错误提示

图片加载失败时，默认显示一个错误提示图标，可以通过`error`自定义插槽，实现个性化的提示方式。

```
<u--image src="https://uviewui.com/album/1.jpg">
  <view slot="error" style="font-size: 24rpx;">加载失败</view>
</u--image>
```

### [#](#淡入动画) 淡入动画

组件自带了加载完成时的淡入动画效果：

-   通过`fade`参数配置是否开启动画效果
-   通过`duration`参数配置动画的过渡时间，单位 ms

```
<u--image
  src="https://uviewui.com/album/1.jpg"
  :fade="true"
  duration="450"
></u--image>
```

### [#](#事件冒泡) 事件冒泡

默认情况下，组件是允许内部向外事件冒泡的，因为很多情况下，我们都希望点击图片，同时图片所在的父元素的点击事件也能触发。
如果您想避免事件冒泡，那么您可以在组件外面嵌套一个`view`，同时给它加上`@tap.stop`即可。

```

<view @tap="clickHandler">
  <view @tap.stop>
    <u--image src="https://uviewui.com/album/1.jpg"></u--image>
  </view>
</view>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/image/image.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/image/image.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| src | 图片地址，**强烈建议**使用绝对或者网络路径 | String | \- | \- |
| mode | 裁剪模式，见上方说明 | String | aspectFill | \- |
| width | 宽度，单位任意，如果为数值，默认单位 px | String | Number | 300 | \- |
| height | 高度，单位任意，如果为数值，默认单位 px | String | Number | 225 | \- |
| shape | 图片形状，circle-圆形，square-方形 | String | square | square |
| radius | 圆角，默认单位 px | String | Number | 0 | \- |
| lazyLoad | 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 | Boolean | true | \- |
| showMenuByLongpress | 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 | Boolean | true | \- |
| loadingIcon | 加载中的图标，或者小图片 | String | photo | \- |
| errorIcon | 加载失败的图标，或者小图片 | String | error-circle | \- |
| showLoading | 是否显示加载中的图标或者自定义的 slot | Boolean | true | false |
| showError | 是否显示加载错误的图标或者自定义的 slot | Boolean | true | false |
| fade | 是否需要淡入效果 | Boolean | true | false |
| webp | 只支持网络资源，只对微信小程序有效 | Boolean | false | true |
| duration | 搭配`fade`参数的过渡时间，单位 ms | String | Number | 500 | \- |
| bgColor | 背景颜色，用于深色页面加载图片时，为了和背景色融合 | String | #f3f4f6 | \- |

### [#](#slot) Slot

| 名称 | 说明 |
| --- | --- |
| loading | 自定义加载中的提示内容 |
| error | 自定义失败的提示内容 |

### [#](#cellitem-events) CellItem Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击图片时触发 | \- |
| error | 图片加载失败时触发 | err: 错误信息 |
| load | 图片加载成功时触发 | \- |

← [Icon 图标](https://www.uviewui.com/components/icon.html) [Button 按钮](https://www.uviewui.com/components/button.html) →




---
## [basic/button] button
> 官方文档: https://www.uviewui.com/components/button.html

---

## [#](#button-按钮) Button 按钮 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件内部实现以uni-app`button`组件为基础，进行二次封装，主要区别在于：

-   按钮`type`值有更多的主题颜色
-   按钮`size`值有更多的尺寸可选

注意

1.  此组件内部使用uni-app`button`组件为基础，除了开头中所说的增加的功能，另外暴露出来的props属性和官方组件的属性完全一致， uni-app`button`组件比较特殊，因为它有一些其他小程序平台的特定能力，请参考文档后面的参数列表，更详细说明请参uni-app方文档：
    [uni-app方button组件 (opens new window)](https://uniapp.dcloud.io/component/button)
2.  由于微信小程序的限制，在微信小程序中设置了`form-type`的`u-button`无法触发`form`组件的`submit`事件(H5和APP正常)，详见微信小程序文档[Bug & Tip部分 (opens new window)](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

文字内容通过`text`传入

```
<u-button text="月落"></u-button>
```

### [#](#设置按钮的多种形态) 设置按钮的多种形态

-   `type`值可选的有`default`(默认)、`primary`、`success`、`info`、`warning`、`error`
-   通过`plain`值设置是否镂空
-   通过`hairline`值设置是否细边
-   通过`disabled`值设置是否禁用
-   通过`loading`值设置是否开启加载图标，`loadingText`设置加载中文字
-   通过`icon`值设置是否显示图标
-   通过`shape`值设置按钮形状，circle为圆角
-   通过`color`值设置按钮渐变颜色
-   通过`size`值设置按钮的大小

```
<template>
	<view style="padding: 20px;">
		<u-button type="primary" text="确定"></u-button>
		<u-button type="primary" :plain="true" text="镂空"></u-button>
		<u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>
		<u-button type="primary" :disabled="disabled" text="禁用"></u-button>
		<u-button type="primary" loading loadingText="加载中"></u-button>
		<u-button type="primary" icon="map" text="图标按钮"></u-button>
		<u-button type="primary" shape="circle" text="按钮形状"></u-button>
		<u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
		<u-button type="primary" size="small" text="大小尺寸"></u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			disabled: true
		};
	}
};
</script>
```

### [#](#定义需要用到的外部样式) 定义需要用到的外部样式

1.  针对非微信小程序平台，组件的根元素就是uni-app`button`组件，所以修改按钮的样式很容易，直接给组件定义`类名`或者嵌入`内联样式`即可。
2.  如果是微信小程序，编译后页面会有组件同名的元素存在，导致样式传递有问题。
3.  如果是为了修改按钮与其他元素之间的距离或者宽度等，可以给按钮外面套一个`view`元素，控制这个`view`与其他元素的距离或者宽度，即可达到同等效果。

所以：我们提供了一个`custom-style`参数，推荐用户可以用对象形式传递样式给组件内部，注意驼峰命名。

```
<template>
	<view style="padding: 20px;">

		<u-button class="custom-style" text="雪月夜"></u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			disabled: true,
			customStyle: {
				marginTop: '20px',
				color: 'red'
			}
		};
	}
};
</script>

<style lang="scss" scoped>
	.custom-style {
		color: #ff0000;
		width: 400rpx;
	}
</style>
```

### [#](#各家小程序开放能力的对接) 各家小程序开放能力的对接

uView已对接uni-app档关于[uni-app方button组件 (opens new window)](https://uniapp.dcloud.net.cn/component/button)的所有开放能力(截止2020-04-14)uni-app-app文档说明使用即可，如果有发现遗漏的地方，请加群反馈。

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/button/button.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/button/button.nvue)

### [#](#api) API

### [#](#props) Props

| 属性名 | 说明 | 类型 | 默认值 | 可选值 | 平台差异说明 |
| --- | --- | --- | --- | --- | --- |
| hairline | 是否显示按钮的细边框 | Boolean | true | false | \- |
| type | 按钮的样式类型 | String | info | info / primary / error/ warning / success | \- |
| size | 按钮的大小 | String | normal | large / mini | \- |
| shape | 按钮外观形状，见上方说明 | String | square | circle | \- |
| plain | 按钮是否镂空，背景色透明 | Boolean | false | true | \- |
| disabled | 是否禁用 | Boolean | false | true | \- |
| loading | 按钮名称前是否带 loading 图标 | Boolean | false | true | App-nvue 平台，在 ios 上为雪花，Android上为圆圈 |
| loadingText | 加载中提示文字 | String | \- | \- | \- |
| loadingMode | 加载状态图标类型 | String | spinner | \- | \- |
| loadingSize | 加载图标大小 | String | Number | 15 | \- | \- |
| openType | 开放能力，具体请看uniapp稳定关于button组件部分说明 | String | \- | \- | \- |
| formType | 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 | String | \- | \- | \- |
| appParameter | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效） | String | \- | \- | \- |
| hoverStopPropagation | 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true） | Boolean | true | false | \- |
| lang | 指定返回用户信息的语言，zh\_CN 简体中文，zh\_TW 繁体中文，en 英文 | String | en | \- | \- |
| sessionFrom | 会话来源，openType="contact"时有效 | String | \- | \- | \- |
| sendMessageTitle | 会话内消息卡片标题，openType="contact"时有效 | String | \- | \- | \- |
| sendMessagePath | 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 | String | \- | \- | \- |
| sendMessageImg | 会话内消息卡片图片，openType="contact"时有效 | String | \- | \- | \- |
| showMessageCard | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 | String | \- | \- | \- |
| dataName | 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 | String | \- | \- | \- |
| throttleTime | 节流，一定时间内只能触发一次，单位毫秒 | String | Number | 0 | \- | \- |
| hoverStartTime | 按住后多久出现点击态，单位毫秒 | String | Number | 0 | \- | \- |
| hoverStayTime | 手指松开后点击态保留时间，单位毫秒 | String | Number | 200 | \- | \- |
| text | 按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式） | String | Number | \- | \- | \- |
| icon | 按钮图标 | String | \- | \- | \- |
| iconColor | 按钮颜色 | String | 在`plain=true`镂空状态下，颜色与边框保持一致，否则为白色（主题为info时为黑色#000000） | \- | \- |
| color | 按钮颜色，支持传入linear-gradient渐变色 | String | \- | \- | \- |
| customStyle | 定义需要用到的外部样式,详细见上方文档 | Object | \- | \- | \- |

### [#](#events) Events

**说明**：目前经测试(Hbuilder X 2.6.8)，在H5，APP，可以直接对组件监听`tap`事件，等同组件内部发出的`click`事件效果，某些HX版本上， 微信小程序对组件使用`tap`事件可能无效，故建议对按钮组件的点击事件监听统一使用组件内部发出的`click`事件。

| 属性名 | 说明 | 类型 | 默认值 | 可选值 | 平台差异说明 |
| --- | --- | --- | --- | --- | --- |
| click | 按钮点击，请勿使用`@tap`点击事件，微信小程序无效，返回值为点击事件及参数 | Handler | \- | \- | \- |
| getphonenumber | open-type="getPhoneNumber"时有效 | Handler | 微信小程序 | \- | \- |
| getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo | Handler | 微信小程序 | \- | \- |
| error | 当使用开放能力时，发生错误的回调 | Handler | 微信小程序 | \- | \- |
| opensetting | 在打开授权设置页并关闭后回调 | Handler | 微信小程序 | \- | \- |
| launchapp | 打开 APP 成功的回调 | Handler | 微信小程序 | \- | \- |
| agreeprivacyauthorization 2.0.37 | 用户同意隐私协议事件回调 | Handler | 微信小程序 | \- | \- |

← [Image 图片](https://www.uviewui.com/components/image.html) [Text 文本](https://www.uviewui.com/components/text.html) →




---
## [basic/text] text
> 官方文档: https://www.uviewui.com/components/text.html

---

## [#](#text-文本) Text 文本 [![](https://www.uviewui.com/common/to_api.png)](#api)

此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，\*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。

注意：

由于在`nvue`下，`u-text`名称被uni-app官方占用，在`nvue`页面中请使用`u--text`名称，在`vue`页面中使用`u--text`或者`u-text`均可。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`text`参数设置文本内容。推荐您使用`:text='value'`的形式

```
<u--text text="我用十年青春,赴你最后之约"></u--text>
```

### [#](#设置主题) 设置主题

-   通过`type`参数设置文本主题，我们提供了五类属性。
-   `primary error success warning info`

```
<u--text type="primary" text="主色"></u--text>
<u--text type="error"   text="错误"></u--text>
<u--text type="success" text="成功"></u--text>
<u--text type="warning" text="警告"></u--text>
<u--text type="info"    text="信息"></u--text>
```

### [#](#拨打电话) 拨打电话

-   通过将`mode`属性设置为`phone`即可调用拨打电话，提供加密值`encrypt`
-   除此之外还有格式化日期，姓名脱敏，超链接，千分位金额等属性，将在以下实例中展示

```
<u--text mode="phone" text="15019479320"></u--text>
```

### [#](#日期格式化) 日期格式化

```
<u--text mode="date" text="1612959739"></u--text>
```

### [#](#姓名脱敏) 姓名脱敏

```
<u--text mode="name" text="张三三" format="encrypt"></u--text>
```

### [#](#超链接) 超链接

添加`href`指定链接地址

```
<u--text mode="link" text="Go to uView docs" href="https://www.uviewui.com" ></u--text>
```

### [#](#显示金额) 显示金额

```
<u--text mode="price" text="728732.32"></u--text>
```

### [#](#前后图标) 前后图标

添加`prefixIcon,suffixIcon`指定图标和位置，`iconStyle`设置图标大小

```
<u--text prefixIcon="baidu" iconStyle="font-size: 19px" text="百度一下,你就知道"></u--text>
<u--text suffixIcon="arrow-leftward" iconStyle="font-size: 18px" text="查看更多"></u--text>
```

### [#](#超出隐藏) 超出隐藏

内置了文字超出隐藏样式，设置`lines`属性表明几行后隐藏

```
<u--text :lines="2" text="关于uView的取名来由，首字母u来自于uni-app首字母，
uni-app是基Vuejs，Vue和View(延伸为UI、视图之意)同音，同时view组件uni-app中
最础最重要的组件，故取名uView，表达源于uni-app和Vue之意，同时在此也对它示感谢。"></u--text>
```

### [#](#小程序开放能力) 小程序开放能力

针对小程序开放能力，我们提供了分享，请在小程序环境下使用

```
<u--text text="分享到微信" openType="share" type="success" @click="clickHandler"></u--text>
<script>
	export default {
		onLoad() {},
		methods: {
			clickHandler() {

				uni.$u.toast('请在微信小程序内查看效果')

			}
		},
	}
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/text/text.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/text/text.nvue)

### [#](#api) API

### [#](#list-props) List Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| type | 主题颜色 | String | \- | \- |
| show | 是否显示 | Boolean | true | false |
| text | 显示的值 | String | Number | \- | \- |
| prefixIcon | 前置图标 | String | \- | \- |
| suffixIcon | 后置图标 | String | \- | \- |
| mode | 文本处理的匹配模式text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接 | String | \- |  |
| href | mode=link下，配置的链接 | String | \- | \- |
| format | 格式化规则 | String | Function | \- | \- |
| call | mode=phone时，点击文本是否拨打电话 | Boolean | false | true |
| openType | 小程序的打开方式 | String | \- | \- |
| bold | 是否粗体，默认normal | Boolean | false | true |
| block | 是否块状 | Boolean | false | true |
| lines | 文本显示的行数，如果设置，超出此行数，将会显示省略号 | String | Number | \- | \- |
| color | 文本颜色 | String | #303133 | \- |
| size | 字体大小 | String | Number | 15 | \- |
| iconStyle | 图标的样式 | Object | String | 15px | \- |
| decoration | 文字装饰，下划线，中划线等 | String | none | underline/line-through |
| margin | 外边距，对象、字符串，数值形式均可 | Object | Number | String | \- | \- |
| lineHeight | 文本行高 | Number | String | \- | \- |
| align | 文本对齐方式 | String | left | center/right |
| wordWrap | 文字换行 | String | normal | break-word/anywhere |

### [#](#list-events) List Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击触发事件 | \- |

← [Button 按钮](https://www.uviewui.com/components/button.html) [Layout 布局](https://www.uviewui.com/components/layout.html) →




---
## [basic/layout] layout
> 官方文档: https://www.uviewui.com/components/layout.html

---

## [#](#layout-布局) Layout 布局 [![](https://www.uviewui.com/common/to_api.png)](#api)

通过基础的 12 分栏，迅速简便地创建布局

注意

如需实现类似宫格的布局，请使用uView的[Grid宫格组件](https://www.uviewui.com/components/grid.html)，可以设置角标，功能更完善和灵活

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

通过`col`组件的`span`设置需要分栏的比例

```
<template>
    <view class="u-page">
        <view class="u-demo-block">
            <text class="u-demo-block__title">基础使用</text>
            <view class="u-demo-block__content">
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="6">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 10px">
                    <u-col span="4">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                    <u-col span="4">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="4">
                        <view class="demo-layout bg-purple-dark"></view>
                    </u-col>
                </u-row>
                <u-row justify="space-between">
                    <u-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                </u-row>
            </view>
        </view>
    </view>
</template>

<style lang="scss">
    .wrap {
        padding: 12px;
    }

    .demo-layout {
        height: 25px;
        border-radius: 4px;
    }

    .bg-purple {
        background: #CED7E1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>
```

### [#](#分栏间隔) 分栏间隔

通过设置`row`组件的`gutter`参数，来指定每一栏之间的间隔(最终表现为左边内边距各为gutter/2)，默认间隔为0

```
<view class="u-demo-block__content">
    <u-row
            justify="space-between"
            gutter="10"
    >
        <u-col span="3">
            <view class="demo-layout bg-purple"></view>
        </u-col>
        <u-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col span="3">
            <view class="demo-layout bg-purple"></view>
        </u-col>
        <u-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
    </u-row>
</view>

<style lang="scss">
    .wrap {
        padding: 12px;
    }

    .demo-layout {
        height: 25px;
        border-radius: 4px;
    }

    .bg-purple {
        background: #CED7E1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>
```

### [#](#混合布局) 混合布局

通过指定`col`组件的`span`属性，指定不同的值，达到不同的比例

```
<view class="u-demo-block__content">
    <u-row
        justify="space-between"
        gutter="10"
    >
        <u-col span="2">
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col span="4">
            <view class="demo-layout bg-purple"></view>
        </u-col>
        <u-col span="6">
            <view class="demo-layout bg-purple-dark"></view>
        </u-col>
    </u-row>
</view>

<style lang="scss">
    .wrap {
        padding: 12px;
    }

    .demo-layout {
        height: 25px;
        border-radius: 4px;
    }

    .bg-purple {
        background: #CED7E1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>
```

### [#](#分栏偏移) 分栏偏移

通过指定`col`组件的`offset`属性可以指定分栏偏移的栏数。

```
<view class="u-demo-block__content">
    <u-row
            justify="space-between"
            customStyle="margin-bottom: 10px"
    >
        <u-col
                span="3"
                offset="3"
        >
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col
                span="3"
                offset="3"
        >
            <view class="demo-layout bg-purple"></view>
        </u-col>
    </u-row>
    <u-row>
        <u-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col
                span="3"
                offset="3"
        >
            <view class="demo-layout bg-purple"></view>
        </u-col>
    </u-row>
</view>
```

### [#](#对齐方式) 对齐方式

通过`row`组件的`justify`来对分栏进行灵活的对齐， 可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)， 其最终的表现类似于css的`justify-content`属性。

**注意**：由于持微信小程序编译后的特殊结构，此方式不支持微信小程序。

```
<view class="u-demo-block__content">
    <u-row
            justify="space-between"
            customStyle="margin-bottom: 10px"
    >
        <u-col
                span="3"
        >
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col
                span="3"
        >
            <view class="demo-layout bg-purple"></view>
        </u-col>
    </u-row>
    <u-row>
        <u-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col
                span="3"
        >
            <view class="demo-layout bg-purple"></view>
        </u-col>
    </u-row>
</view>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/layout/layout.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/layout/layout.nvue)

### [#](#api) API

### [#](#row-props) Row Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| gutter | 栅格间隔，左右各为此值的一半，单位任意 | String | Number | 0 | \- |
| justify | 水平排列方式(微信小程序暂不支持) | String | `start`(或`flex-start`) | `end`(或`flex-end`) / `center` / `around`(或`space-around`) / `between`(或`space-between`) |
| align | 垂直排列方式 | String | center | top / bottom |

### [#](#col-props) Col Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| span | 栅格占据的列数，总12等分 | String | Number | 0 | 1-12 |
| offset | 分栏左边偏移，计算方式与`span`相同 | String | Number | 0 | \- |
| justify | 水平排列方式 | String | start | `start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) |
| align | 垂直对齐方式 | String | stretch | `top`、`center`、`bottom`、`stretch` |
| textAlign | 文字水平对齐方式 | String | left | center / right |

### [#](#row-events) Row Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | `row`被点击 | \- |

### [#](#col-events) Col Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | `col`被点击，会阻止事件冒泡到`row` | \- |

← [Text 文本](https://www.uviewui.com/components/text.html) [Cell 单元格](https://www.uviewui.com/components/cell.html) →




---
## [basic/cell] cell
> 官方文档: https://www.uviewui.com/components/cell.html

---

## [#](#cell-单元格) Cell 单元格 [![](https://www.uviewui.com/common/to_api.png)](#api)

cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基础功能) 基础功能

-   该组件需要搭配`cell-group`使用，并由它实现列表组的上下边框，如不需要上下边框，配置`cellGroup`的`border`参数为`false`即可。
-   通过`title`设置左侧标题，`value`设置右侧内容。
-   通过`icon`字段设置图标，，或者图片链接(本地文件建议使用绝对地址)。

**注意：** 由于`cell`组件需要由`cellGroup`组件提供参数值，这些父子组件间通过Vue的"provide/inject"特性注入依赖， 所以您必须使用`cellGroup`包裹`cell`组件才能正常使用。

```
<template>
	<u-cell-group>
		<u-cell icon="setting-fill" title="个人设置"></u-cell>
		<u-cell icon="integral-fill" title="会员等级" value="新版本"></u-cell>
	</u-cell-group>
</template>
```

### [#](#自定义内容) 自定义内容

-   通过插槽`icon`可以自定义图标，内容会替换左边图标位置
-   通过插槽`title`定义左边标题部分
-   通过插槽`right-icon`定义右边内容部分

```
<u-cell-group>
	<u-cell  title="夕阳无限好" arrow-direction="down">
		<u-icon slot="icon" size="32" name="search"></u-icon>

		<u-switch slot="right-icon" v-model="checked"></u-switch>
	</u-cell>
	<u-cell icon="setting-fill" title="只是近黄昏"></u-cell>
</u-cell-group>
```

如上所示，可以给`cell`组件通过`slot="right-icon"`设定右边uView自带的`badge`或者`switch`组件：

-   如果搭配的是`badge`组件，注意设置`absolute`参数为`false`去掉绝对定位，否则其位于右侧的恰当位置，详见[Badge 徽标数](https://www.uviewui.com/components/badge.html)。
-   如果搭配的是`switch`组件，注意要通过`v-model`绑定一个内容为布尔值的变量，否则无法操作`switch`，详见[Switch 开关选择器](https://www.uviewui.com/components/switch.html)。

### [#](#自定义大小) 自定义大小

设置`size`可自定义大小

```

<u-cell-group>
	<u-cell
	    size="large"
	    title="单元格"
	    value="内容"
	    isLink
	></u-cell>
	<u-cell
	    size="large"
	    title="单元格"
	    value="内容"
	    label="描述信息"
	></u-cell>
</u-cell-group>
```

### [#](#展示右箭头) 展示右箭头

设置`isLink`为`true`，将会显示右侧的箭头，可以通过arrow-direction控制箭头的方向

```
<u-cell-group>
	<u-cell icon="share" title="停车坐爱枫林晚" :isLink="true" arrow-direction="down"></u-cell>
	<u-cell icon="map" title="霜叶红于二月花" :isLink="false"></u-cell>
</u-cell-group>
```

### [#](#跳转页面) 跳转页面

设置`isLink`为`true`，单元格点击可跳转页面,传入`url`设置跳转地址

```
<u-cell-group>
	<u-cell
	    title="打开标签页"
	    isLink
	    url="/pages/componentsB/tag/tag"
	></u-cell>
	<u-cell
	    title="打开徽标页"
	    isLink
	    url="/pages/componentsB/badge/badge"
	></u-cell>
</u-cell-group>
```

### [#](#右侧内容垂直居中) 右侧内容垂直居中

设置`center`为`true`，可将右侧内容垂直居中

```
<u-cell-group>
    <u-cell
        title="单元格"
        value="内容"
        label="描述信息"
        center
    ></u-cell>
</u-cell-group>
```

### [#](#自定义插槽) 自定义插槽

设置`slot`为`title`，可自定义左侧区域内容 设置`slot`为`value`，可自定义右侧区域内容

```
<u-cell-group>
    <u-cell value="内容">
    	<view
    	    slot="title"
    	    class="u-slot-title"
    	>
    		<text class="u-cell-text">单元格</text>
    		<u-tag
    		    text="标签"
    		    plain
    		    size="mini"
    		    type="warning"
    		>
    		</u-tag>
    	</view>
    </u-cell>
    <u-cell
        title="单元格"
    	isLink
    >
    	<text
    	    slot="value"
    	    class="u-slot-value"
    	>99</text>
    </u-cell>
</u-cell-group>
```

```

.cell-hover-class {
	background-color: rgb(235, 237, 238);
}

.cell-hover-class {
	opacity: 0.5;
}
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/cell/cell.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/cell/cell.nvue)

### [#](#api) API

### [#](#cellgroup-props) CellGroup Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| title | 分组标题 | String | \- | \- |
| border | 是否显示外边框 | Boolean | true | false |
| customStyle | 用户自定义外部样式，对象形式，如{'font-size': '12px'} 或 {'fontSize': '12px'} | object | \- | \- |

### [#](#cell-props) Cell Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| title | 左侧标题 | String | Number | \- | \- |
| label | 标题下方的描述信息 | String | Number | \- | \- |
| value | 右侧的内容 | String | Number | \- | \- |
| icon | 左侧图标名称，或者图片链接(本地文件建议使用绝对地址) | String | \- | \- |
| disabled | 是否禁用cell | Boolean | false | true |
| border | 是否显示下边框 | Boolean | true | false |
| center | 内容是否垂直居中(主要是针对右侧的value部分) | Boolean | false | true |
| url | 点击后跳转的URL地址 | String | \- | \- |
| linkType | 链接跳转的方式，内部使用的是uView封装的route方法，可能会进行拦截操作 | String | navigateTo | \- |
| clickable | 是否开启点击反馈(表现为点击时加上灰色背景) | Boolean | false | true |
| isLink | 是否展示右侧箭头并开启点击反馈 | Boolean | false | true |
| required | 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) | Boolean | false | true |
| rightIcon | 右侧的图标箭头 | String | arrow-right | \- |
| arrowDirection | 右侧箭头的方向，可选值为：left，up，down | String | right | left|up|down |
| iconStyle | 左侧图标样式 | Object | String | \- | \- |
| rightIconStyle | 右侧箭头图标的样式 | Object | String | \- | \- |
| titleStyle | 标题的样式 | Object | String | \- | \- |
| size | 单位元的大小，可选值为large | String | \- | \- |
| stop | 点击cell是否阻止事件传播 | Boolean | true | false |
| name | 标识符，用于在`click`事件中进行返回 | String | Number | \- | \- |

### [#](#cell-slot) Cell Slot

| 名称 | 说明 |
| --- | --- |
| title | 自定义左侧标题部分的内容，如需使用，请勿定义`title`参数，或赋值`null`即可 |
| value | 自定义右侧标题部分的内容，如需使用，请勿定义`value`参数，或赋值`null`即可 |
| icon | 自定义左侧的图标 |
| right-icon | 自定义右侧图标内容，需设置`arrow`为`false`才起作用 |
| label | 自定义`label`内容 |

### [#](#cell-event) Cell Event

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击cell列表时触发 | name: `props`的`name`参数标识符 |

← [Layout 布局](https://www.uviewui.com/components/layout.html) [Badge 徽标数](https://www.uviewui.com/components/badge.html) →




---
## [basic/badge] badge
> 官方文档: https://www.uviewui.com/components/badge.html

---

## [#](#badge-徽标数) Badge 徽标数 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`value`参数定义徽标内容
-   通过`type`设置主题。重申一次，uView中，所有组件的`type`参数都只有5个固定的可选值，分别是`primary`(蓝色-主色)，`warning`(黄色-警告)， `error`(红色-错误)，`success`(绿色-成功)，`info`(灰色-信息)
-   通过`max`参数控制最大值，超过最大值会显示 '{max}+'

注意

此组件内部默认为`absolute`绝对定位，所以需要给`badge`父组件(元素)设置`position: relative`相对定位， 再通过调整`offset`偏移值(数组，两个元素，第一个元素为`top`值，第二个元素为`right`值，单位rpx，可为负值，如"\[-10, -10\]")设置到合适的位置即可。
如果不需要组件内容默认的自动绝对定位，设置`absolute`参数为`false`即可。

```
<template>
	<view style="padding: 20px;">
		<view class="box">
			 <u-badge :type="type" max="99" :value="value"></u-badge>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type:"warning",
			value:100
		}
	}
};
</script>

<style lang="scss" scoped>
	.box{
		width: 100px;
		height: 100px;
		background-color: #909193;
		border-radius: 15px;
	}
</style>
```

### [#](#设置徽标的类型为一个圆点) 设置徽标的类型为一个圆点

通过`isDot`参数设置，该形式组件没有内容，只显示一个圆点

```
<u-badge :isDot="true" type="success"></u-badge>
```

### [#](#设置数字的显示方式-overflow-ellipsis-limit) 设置数字的显示方式 overflow|ellipsis|limit

-   overflow会根据max字段判断，超出显示`${max}+`
-   ellipsis会根据max判断，超出显示`${max}...`
-   limit会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数

```
<template>
	<view style="padding: 20px;">
		<view class="box">
			 <u-badge numberType="overflow" :type="type" max="99" :value="value"></u-badge>
		</view>
		<view class="box">
			 <u-badge numberType="ellipsis" :type="type" max="99" :value="value"></u-badge>
		</view>
		<view class="box">
			 <u-badge numberType="limit" :type="type" max="99" :value="value"></u-badge>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type:"warning",
			value:99999
		}
	}
};
</script>

<style lang="scss" scoped>
	.box{
		width: 100px;
		height: 100px;
		background-color: #909193;
		border-radius: 15px;
	}
</style>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/badge/badge.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/badge/badge.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| isDot | 不展示数字，只有一个小点 | Boolean | false | true |
| value | 展示的数字，大于 `overflowCount` 时显示为 `${overflowCount}+`，为`0`且`show-zero`为`false`时隐藏 | String | Number | \- | \- |
| show | 组件是否显示 | Boolean | true | false |
| max | 最大值，超过最大值会显示 '{max}+' | String | Number | 99 | \- |
| type | 主题类型 | String | error | warning / success / primary / info |
| showZero | 当数值为 0 时，是否展示 Badge | Boolean | false | true |
| bgColor | 背景颜色，优先级比`type`高，如设置，`type`参数会失效 | String | \- | \- |
| color | 字体颜色 | String | #ffffff | \- |
| shape | 徽标形状，circle-四角均为圆角，horn-左下角为直角 | String | circle | horn |
| numberType | 置数字的显示方式，详细见上方文档 | String | overflow | ellipsis / limit |
| offset | 设置badge的位置偏移，格式为 \[x, y\]，也即设置的为`top`和`right`的值，`absolute`为`true`时有效 | Array | \- | \- |
| inverted | 是否反转背景和字体颜色 | Boolean | false | true |
| absolute | 组件是否绝对定位，为`true`时，`offset`参数才有效 | Boolean | false | true |

← [Cell 单元格](https://www.uviewui.com/components/cell.html) [Tag 标签](https://www.uviewui.com/components/tag.html) →




---
## [basic/tag] tag
> 官方文档: https://www.uviewui.com/components/tag.html

---

## [#](#tag-标签) Tag 标签 [![](https://www.uviewui.com/common/to_api.png)](#api)

tag 组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`type`参数设置主题类型，默认为`primary`
-   属性`text`设置标签内容

```
<u-tag text="标签" plain size="mini" type="warning"></u-tag>
```

### [#](#自定义主题) 自定义主题

```
<u-tag text="标签"></u-tag>
<u-tag text="标签" type="warning"></u-tag>
<u-tag text="标签" type="success"></u-tag>
<u-tag text="标签" type="error"></u-tag>
```

### [#](#圆形标签) 圆形标签

-   类似胶囊形状

```
<u-tag text="标签" plain shape="circle"></u-tag>
<u-tag text="标签" type="warning" shape="circle"></u-tag>
```

### [#](#镂空标签) 镂空标签

```
<u-tag text="标签" plain> </u-tag>
<u-tag text="标签" type="warning" plain></u-tag>
<u-tag text="标签" type="success" plain></u-tag>
<u-tag text="标签" type="error" plain></u-tag>
```

### [#](#镂空带背景色) 镂空带背景色

-   添加`plainFill`属性镂空带背景色

```
<u-tag text="标签" plain> </u-tag>
<u-tag text="标签" type="warning" plain plainFill></u-tag>
<u-tag text="标签" type="success" plain plainFill></u-tag>
<u-tag text="标签" type="error" plain plainFill></u-tag>
```

### [#](#自定义尺寸) 自定义尺寸

-   `size`属性为您提供了三种规格的标签大小，默认中等。

```
<u-tag text="标签" plain size="mini"></u-tag>
<u-tag text="标签" type="warning"></u-tag>
<u-tag text="标签" type="success" plain size="large"></u-tag>
```

### [#](#可关闭标签) 可关闭标签

-   `tag`在右上角提供了删除标签的样式

```
<u-tag
  text="标签"
  size="mini"
  closable
  :show="close1"
  @close="close1 = false"
></u-tag>
<u-tag
  text="标签"
  type="warning"
  closable
  :show="close2"
  @close="close2 = false"
></u-tag>
<u-tag
  text="标签"
  type="success"
  plain
  size="large"
  closable
  :show="close3"
  @close="close3 = false"
></u-tag>

<script>
  export default {
    data() {
      return {
        close1: true,
        close2: true,
        close3: true,
        radios: [
          {
            checked: true,
          },
          {
            checked: false,
          },
          {
            checked: false,
          },
        ],
        checkboxs: [
          {
            checked: true,
          },
          {
            checked: false,
          },
          {
            checked: false,
          },
        ],
      };
    },
  };
</script>
```

### [#](#带图片和图标) 带图片和图标

```
<u-tag text="标签" size="mini" icon="map" plain></u-tag>
<u-tag text="标签" type="warning" icon="tags-fill"></u-tag>
<u-tag
  text="标签"
  type="success"
  plain
  size="large"
  icon="https://uviewui.com/example/tag.png"
></u-tag>
```

### [#](#单选标签-和-多选标签) 单选标签 和 多选标签

-   我们为您提供了单选和多选的事件，您可以在事件中获取参数列表

```
<template>

  <view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
    <u-tag
      :text="`选项${index + 1}`"
      :plain="!item.checked"
      type="warning"
      :name="index"
      @click="radioClick"
    >
    </u-tag>
  </view>

  <view
    class="u-page__tag-item"
    v-for="(item, index) in checkboxs"
    :key="index"
  >
    <u-tag
      :text="`选项${index + 1}`"
      :plain="!item.checked"
      type="warning"
      :name="index"
      @click="checkboxClick"
    >
    </u-tag>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        radios: [
          {
            checked: true,
          },
          {
            checked: false,
          },
          {
            checked: false,
          },
        ],
        checkboxs: [
          {
            checked: true,
          },
          {
            checked: false,
          },
          {
            checked: false,
          },
        ],
      };
    },
    methods: {
      radioClick(name) {
        this.radios.map((item, index) => {
          item.checked = index === name ? true : false;
        });
      },
      checkboxClick(name) {
        this.checkboxs[name].checked = !this.checkboxs[name].checked;
      },
    },
  };
</script>
<style lang="scss">
  .u-page__tag-item {
    margin-right: 20px;
  }
</style>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/tag/tag.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/tag/tag.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| type | 主题类型 | String | primary | success / info / warning / error |
| disabled | 不可用 | Boolean | String | false | \- |
| size | 标签大小 | String | medium | large、mini |
| shape | 标签形状 | String | square | circle |
| text | 标签的文字内容 | String | Number | \- | \- |
| bgColor | 背景颜色，默认为空字符串，即不处理 | String | #C6C7CB | \- |
| color | 标签字体颜色，默认为空字符串，即不处理 | String | \- | \- |
| borderColor | 标签的边框颜色 | String | \- | \- |
| closeColor | 关闭按钮图标的颜色 | String | \- | \- |
| name | 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了 | String | Number | \- | \- |
| plainFill | 镂空时是否填充背景色 | Boolean | false | true |
| plain | 是否镂空 | Boolean | false | true |
| closable | 是否可关闭，设置为`true`，文字右边会出现一个关闭图标 | Boolean | false | true |
| show | 标签显示与否 | Boolean | true | false |
| icon | 内置图标，或绝对路径的图片 | String | \- | \- |

### [#](#event) Event

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| click | 点击标签触发 | index: 传递的`index`参数值 | \- |
| close | `closable`为`true`时，点击标签关闭按钮触发 | index: 传递的`index`参数值 | \- |

← [Badge 徽标数](https://www.uviewui.com/components/badge.html) [LoadingIcon 加载动画](https://www.uviewui.com/components/loadingIcon.html) →




---
## [basic/loadingIcon] loadingIcon
> 官方文档: https://www.uviewui.com/components/loadingIcon.html

---

## [#](#loadingicon-加载动画) LoadingIcon 加载动画 [![](https://www.uviewui.com/common/to_api.png)](#api)

此组件为一个小动画，目前用在uView的[loadMore加载更多](https://www.uviewui.com/components/loadMore.html)等组件的正在加载状态场景。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

通过`mode`设定动画的类型，`circle`为圆圈的形状，`flower`为经典类似花朵的形状

```
<template>
	<view>
		<u-loading-icon></u-loading-icon>
	</view>
</template>
```

### [#](#动画文字) 动画文字

`text`可以指定文字内容 `textSize`可以指定文字大小

```
<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
```

### [#](#模式类型) 模式类型

`mode`可以指定模式

```
<u-loading-icon text="花朵形"></u-loading-icon>
<u-loading-icon mode="semicircle" text="半圆"></u-loading-icon>
<u-loading-icon mode="circle" text="圆型"></u-loading-icon>
```

### [#](#排列类型) 排列类型

`vertical`可以指定文字和图标是否垂直排列

```
<u-loading-icon :vertical="true"></u-loading-icon>
```

### [#](#动画模式) 动画模式

`timing-function`可以指定`mode`为`semicircle`或`circle`时动画里css中`animation-timing-function`的属性，默认为`ease-in-out`

```
<u-loading-icon timing-function="linear"></u-loading-icon>
```

### [#](#动画运行时间) 动画运行时间

`duration`可以指定动画的运行周期时间

```
<u-loading-icon duration="2000"></u-loading-icon>
```

### [#](#图标颜色) 图标颜色

`color`可以指定动画活动区域的颜色, `inactive-color`可以制定`mode`为`circle`时的暗边颜色

```
<u-loading-icon color="red"></u-loading-icon>

<u-loading-icon mode="circle" inactive-color="red"></u-loading-icon>
```

### [#](#图标尺寸) 图标尺寸

通过`size`设定尺寸，单位rpx，组件内把`size`值体现为组件的宽和高

```
<u-loading-icon size="36"></u-loading-icon>
```

### [#](#显示或隐藏动画) 显示或隐藏动画

通过`show`设置为`true`或`false`，来显示或隐藏动画

```
<u-loading-icon :show="true"></u-loading-icon>

/* 等价于 */
<u-loading-icon show></u-loading-icon>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/loading-icon/loading-icon.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/loading-icon/loading-icon.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| show | 是否显示动画 | Boolean | true | false |
| color | 图标颜色 | String | color\['u-tips-color'\] | \- |
| textColor | 提示文本颜色 | String | color\['u-tips-color'\] | \- |
| vertical | 图标和文字是否垂直排列 | Boolean | false | true |
| mode | 模式选择，见上方说明 | String | circle | circle \\ semicircle |
| size | 加载图标的大小，单位px | String | Number | 24 | \- |
| textSize | 加载文字的大小，单位px | String | Number | 15 | \- |
| text | 文字内容 | String | \- | \- |
| timingFunction | 指定`animation-timing-function`的css属性，但只支持`mode`为`circle`或`semicircle`才有效 | String | ease-in-out | \- |
| duration | 动画执行周期时间，单位ms | string | Number | 1200 | \- |
| inactiveColor | 图标的暗边颜色, `mode`为`circle` 模式有效 | String | transparent | \- |

← [Tag 标签](https://www.uviewui.com/components/tag.html) [LoadingPage 加载页](https://www.uviewui.com/components/loadingPage.html) →




---
## [basic/loadingPage] loadingPage
> 官方文档: https://www.uviewui.com/components/loadingPage.html

---

## [#](#loadingpage-加载页) LoadingPage 加载页 [![](https://www.uviewui.com/common/to_api.png)](#api)

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

```
<template>
	<view>
		<u-loading-page></u-loading-page>
	</view>
</template>
```

### [#](#显示或隐藏) 显示或隐藏

`loading`可以指定是否显示加载页

```
<u-loading-page :loading="true"></u-loading-page>
```

### [#](#文字内容) 文字内容

`loading-text`可以指定提示内容

```
<u-loading-page loading-text="loading..."></u-loading-page>
```

### [#](#动画模式) 动画模式

`loading-mode`可以指定加载动画的模式, 默认为`circle`

```
<u-loading-page loading-mode="spinner"></u-loading-page>
<u-loading-page loading-mode="semicircle"></u-loading-page>
```

### [#](#动画图片) 动画图片

`image`可以指定文字上方用于替换loading动画的图片

```
<u-loading-page image="/static/logo.png"></u-loading-page>
```

### [#](#文字颜色) 文字颜色

`color`可以指定文字颜色

```
<u-loading-page color="#666"></u-loading-page>
```

### [#](#文字大小) 文字大小

`font-size`可以指定文字大小

```
<u-loading-page font-size="24"></u-loading-page>
```

### [#](#图标大小) 图标大小 2.0.32

`icon-size`可以指定图标大小

```
<u-loading-page icon-size="36"></u-loading-page>
```

### [#](#背景颜色) 背景颜色

`bg-color`可以指定背景颜色

```
<u-loading-page bg-color="#e8e8e8"></u-loading-page>
```

### [#](#图标颜色) 图标颜色

`loading-color`可以指定加载中图标的颜色

```
<u-loading-page loading-color="#000000"></u-loading-page>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/loading-page/loading-page.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/loading-page/loading-page.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| loadingText | 提示内容 | String | Number | 正在加载 | \- |
| image | 文字上方用于替换loading动画的图片 | String | \- | \- |
| loadingMode | 加载动画的模式 | String | circle | spinner \\ semicircle |
| loading | 是否加载中 | boolean | false | true |
| bgColor | 背景颜色 | String | #ffffff | \- |
| color | 文字颜色 | String | #C8C8C8 | \- |
| fontSize | 文字大小 | String | Number | 19 | \- |
| iconSize 2.0.32 | 图标大小 | String | Number | 28 | \- |
| loadingColor | 加载中图标的颜色 | String | #C8C8C8 | \- |

← [LoadingIcon 加载动画](https://www.uviewui.com/components/loadingIcon.html) [Form 表单](https://www.uviewui.com/components/form.html) →




---
## [basic/gap] gap
> 官方文档: https://www.uviewui.com/components/gap.html

---

## [#](#gap-间隔槽) Gap 间隔槽 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

直接引入即可使用

-   通过`height`配置高度，单位px
-   通过`bgColor`配置背景颜色

```
<u-gap height="80" bgColor="#bbb"></u-gap>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/gap/gap.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/gap/gap.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| bgColor | 背景颜色 | String | transparent(背景透明) | \- |
| height | 间隔槽高度，单位px | String | Number | 20 | \- |
| marginTop | 与前一个元素的距离，单位px | String | Number | 0 | \- |
| marginBottom | 与后一个元素的距离，单位px | String | Number | 0 | \- |

← [ReadMore 展开阅读更多](https://www.uviewui.com/components/readMore.html) [Avatar 头像](https://www.uviewui.com/components/avatar.html) →




---
## [basic/avatar] avatar
> 官方文档: https://www.uviewui.com/components/avatar.html

---

## [#](#avatar-头像) Avatar 头像 [![](https://www.uviewui.com/common/to_api.png)](#api)

本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

通过`src`指定头像的路径即可简单使用，如果传递了`text`参数，`text`将会优先起作用

**注意：** 请保证传递给`src`的是绝对地址，而不是相对地址，为什么呢？因为传入`avatar`组件的相对地址，是相对于组件的，而不是父组件(页面)，所以相对址可能会出错。

```
<template>
  <view>
    <u-avatar :src="src"></u-avatar>
    <u-avatar :text="text"></u-avatar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        src: "http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg",
        text: "无头像",
      };
    },
  };
</script>
```

### [#](#头像形状) 头像形状

-   `shape`参数指定头像的形状，取值`circle`为圆形，取值`square`为圆角方形

```
<template>
  <u-avatar :src="src" shape="square"></u-avatar>
</template>

<script>
  export default {
    data() {
      return {
        src: "http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg",
      };
    },
  };
</script>
```

### [#](#图标头像) 图标头像

-   `icon`参数指定头像的图标，图标可参考`icon`组件

```
<view class="u-demo-block__content">
  <view class="u-avatar-item">
    <u-avatar icon="red-packet-fill" fontSize="22"></u-avatar>
  </view>
  <view class="u-avatar-item">
    <u-avatar icon="star-fill" fontSize="22"></u-avatar>
  </view>
</view>

<style lang="scss">
  .u-demo-block__content {
    @include flex;
    align-items: center;
  }

  .u-avatar-item {
    margin-right: 30px;
  }
</style>
```

### [#](#文字头像-自动背景色) 文字头像（自动背景色）

-   `randomBgColor`参数开启头像的自动背景色

```
<template>
  <u-avatar text="北" fontSize="18" randomBgColor></u-avatar>
</template>
```

### [#](#默认头像) 默认头像

如果头像加载失败，导致加载图片失败，将会显示一个默认的灰色头像

### [#](#头像组) 头像组

使用`u-avatar-group`实现头像组

```
<template>
  <u-avatar-group :urls="urls" size="35" gap="0.4"></u-avatar-group>
</template>

<script>
  export default {
      data() {
          return {
              urls: [
                  'https://uviewui.com/album/1.jpg',
                  'https://uviewui.com/album/2.jpg',
                  'https://uviewui.com/album/3.jpg',
                  'https://uviewui.com/album/4.jpg',
                  'https://uviewui.com/album/7.jpg',
                  'https://uviewui.com/album/6.jpg',
                  'https://uviewui.com/album/5.jpg'
              ]
          }
      }
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/avatar/avatar.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/avatar/avatar.nvue)

### [#](#api) API

### [#](#avatar-props) Avatar Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| src | 头像路径，如加载失败，将会显示默认头像(不能为相对路径) | String | \- | \- |
| shape | 头像形状 | String | circle | square |
| size | 头像尺寸，可以为指定字符串(large, default, mini)，或者数值 | String | Number | 40 | \- |
| mode | 头像图片的裁剪类型，与 uni 的`image`组件的`mode`参数一致，如效果达不到需求，可尝试传`widthFix`值 | String | scaleToFill | \- |
| text | 用文字替代图片，级别优先于`src` | String | \- | \- |
| bg-color | 背景颜色，一般显示文字时用 | String | #c0c4cc | \- |
| color | 文字颜色 | String | #ffffff | \- |
| font-size | 文字大小 | String | Number | 18 | \- |
| icon | 显示的图标 | String | \- | \- |
| mp-avatar | 显示小程序头像，只对百度，微信，QQ 小程序有效 | Boolean | false | true |
| random-bg-color | 是否使用随机背景色 | Boolean | false | true |
| default-url | 加载失败的默认头像(组件有内置默认图片) | String | \- | \- |
| color-index | 如果配置了 randomBgColor 为 true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值 0-19 之间 | String | Number | \- | \- |
| name | 组件标识符 | String | level | \- |

### [#](#avatar-event) Avatar Event

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 头像被点击 | index: 用户传递的标识符 |

### [#](#avatargroup-props) AvatarGroup Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| urls | 头像图片组 | Array | \[\] | \- |
| maxCount | 最多展示的头像数量 | String | Number | 5 | \- |
| shape | 头像形状 | String | circle | square |
| mode | 图片裁剪模式 | String | aspectFill | \- |
| showMore | 超出 maxCount 时是否显示查看更多的提示 | Boolean | true | \- |
| size | 头像大小 | String | Number | 40 | \- |
| keyName | 指定从数组的对象元素中读取哪个属性作为图片地址 | String | \- | \- |
| gap | 头像之间的遮挡比例（0.4 代表遮挡 40%） | String | Number | 0.5 | \- |
| extraValue | 需额外显示的值，如设置则优先于内部的`urls.length - maxCount`值 | String | Number | \- | \- |

### [#](#avatargroup-event) AvatarGroup Event

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| showMore | 头像组更多点击 | \- |

← [Gap 间隔槽](https://www.uviewui.com/components/gap.html) [Link 超链接](https://www.uviewui.com/components/link.html) →




---
## [basic/link] link
> 官方文档: https://www.uviewui.com/components/link.html

---

## [#](#link-超链接) Link 超链接

该组件为超链接组件，在不同平台有不同表现形式：

-   在APP平台会通过`plus`环境打开内置浏览器
-   在小程序中把链接复制到粘贴板，同时提示信息
-   在H5中通过`window.open`打开链接

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`href`设置打开的链接，`text`设置显示的内容

```
<template>
	<u-link href="https://uviewui.com/" text="打开uView UI文档" @click="click"></u-link>
</template>

<script>
	export default {
		methods: {
			click() {
				console.log('click');
			}
		}
	}
</script>
```

### [#](#下划线) 下划线

通过`under-line`设置是否显示链接的下划线

```
<template>
	<u-link href="https://uviewui.com/" text="打开uView UI文档" :under-line="true"></u-link>
</template>
```

### [#](#自定义颜色) 自定义颜色

-   通过`color`设置文字颜色
-   通过`line-color`设置下划线颜色

```
<template>
	<u-link href="https://uviewui.com/" text="打开uView UI文档" color="#19be6b" line-color="#19be6b"></u-link>
</template>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/link/link.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/link/link.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| color | 文字颜色 | String | color\['u-primary'\] | \- |
| fontSize | 字体大小，默认单位px | String | Number | 15 | \- |
| underLine | 是否显示下划线 | Boolean | false | true |
| href | 跳转的链接，要带上http(s) | String | \- | \- |
| mpTips | 各个小程序平台把链接复制到粘贴板后的提示语 | String | 链接已复制，请在浏览器打开 | \- |
| lineColor | 下划线颜色，默认同`color`参数颜色 | String | \- | \- |
| text | 超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色 | String | \- | \- |

← [Avatar 头像](https://www.uviewui.com/components/avatar.html) [Transition 动画](https://www.uviewui.com/components/transition.html) →




---
## [basic/line] line
> 官方文档: https://www.uviewui.com/components/line.html

---

## [#](#line-线条) Line 线条 [![](https://www.uviewui.com/common/to_api.png)](#api)

此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

组件内部有预置的参数，直接使用即可，有如下几个参数需要了解：

-   `color`为线条的颜色
-   `direction`为线条的方向，默认为横向
-   `length`参数需要特别留意，它需要带上单位，比如设置为"50%"，"500rpx"等，在线条为横向时，表现为线条的长度；在线条为竖向时，表现为线条的高度。

```
<template>
	/* 基础使用 */
	<u-line></u-line>

	/* 自定义颜色 */
	<u-line color="#2979ff"></u-line>

	/* 自定义线条方向 */
	<u-line direction="col"></u-line>

	/* 自定义线条长度 */
	<u-line length="50%"></u-line>
</template>
```

### [#](#是否虚线) 是否虚线

-   `dashed`控制线条是否虚线：

```
<template>
	<u-line dashed></u-line>
</template>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/line/line.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/line/line.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| color | 线条的颜色 | String | #d6d7d9 | \- |
| length | 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等 | String | Number | 100% | \- |
| direction | 线条的方向，`row`\-横向，`col`\-竖向 | String | row | col |
| hairline | 是否显示细边框 | Boolean | true | false |
| margin | 线条与上下左右元素的间距，字符串形式，如"30rpx"、"20rpx 30rpx"，默认单位px | String | Number | 0 | \- |
| dashed | 是否虚线，false-实线，true-虚线 | Boolean | false | true |

← [ScrollList 横向滚动列表](https://www.uviewui.com/components/scrollList.html) [Overlay 遮罩层](https://www.uviewui.com/components/overlay.html) →




---
## [basic/divider] divider
> 官方文档: https://www.uviewui.com/components/divider.html

---

## [#](#divider-分割线) Divider 分割线 [![](https://www.uviewui.com/common/to_api.png)](#api)

区隔内容的分割线，一般用于页面底部"没有更多"的提示。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

文字内容通过`text`传入

```
<u-divider text="分割线"></u-divider>
```

### [#](#设置虚线) 设置虚线

可以通过`dashed`指定虚线

```
<u-divider text="分割线" :dashed="true"></u-divider>
```

### [#](#设置细线) 设置细线

可以通过`hairline`指定细线

```
<u-divider text="分割线" :hairline="true"></u-divider>
```

### [#](#设置以点代替文字) 设置以点代替文字

可以通过`dot`指定以点代替文字

```
<u-divider text="分割线" :dot="true"></u-divider>
```

### [#](#设置文本靠左靠右) 设置文本靠左靠右

可以通过`textPosition`指定文字靠左靠右

```
<u-divider text="靠左" textPosition="left"></u-divider>
<u-divider text="靠右" textPosition="right"></u-divider>
```

### [#](#设置文本颜色和线条颜色) 设置文本颜色和线条颜色

可以通过`textColor`和`lineColor`指定文字刚线条颜色

```
<u-divider
        text="分割线"
        textColor="#2979ff"
        lineColor="#ff0000"
></u-divider>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/divider/divider.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/divider/divider.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| dashed | 是否虚线 | Boolean | false | true |
| hairline | 是否细线 | Boolean | true | false |
| dot | 是否以点替代文字，优先于text字段起作用 | Boolean | false | true |
| textPosition | 内容文本的位置 | String | center | left、right |
| text | 文本内容 | String | Number | \- | \- |
| textSize | 文本大小 | String | Number | 14 | \- |
| textColor | 文本颜色 | String | #909399 | \- |
| lineColor | 线条颜色 | String | #dcdfe6 | \- |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| click | divider组件被点击时触发 | \- | \- |

← [Sticky 吸顶](https://www.uviewui.com/components/sticky.html) [Tabbar 底部导航栏](https://www.uviewui.com/components/tabbar.html) →




---

<!-- ============================================ -->
<!-- 类别: 表单组件 -->
<!-- ============================================ -->

## [form/form] form
> 官方文档: https://www.uviewui.com/components/form.html

---

## [#](#form-表单) Form 表单 [![](https://www.uviewui.com/common/to_api.png)](#api)

此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。

注意：

由于在`nvue`下，`u-form`名称被uni-app官方占用，在`nvue`页面中请使用`u--form`名称，在`vue`页面中使用`u--form`或者`u-form`均可。

注意：

需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。 如。

```
onReady() {
		//onReady 为uni-app支持的生命周期之一
    	this.$refs.uForm.setRules(this.rules)
},
```

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

此组件一般是用于表单验证使用，每一个表单域由一个`u-form-item`组成，表单域中可以放置`u-input`、`u-checkbox`、`u-radio`、`u-switch`等。

-   在表单组中，通过`model`参数绑定一个对象，这个对象的属性为各个`u-form-item`内组件的对应变量。
-   由于表单验证和绑定表单规则时，需要通过`ref`操作，故这里需要给`form`组件声明`ref="uForm"`属性。
-   关于`u-from-item`内其他可能包含的诸如`input`、`radio`等组件，请见各自组件的相关文档说明。

```
<template>
	<view>

		<u--form
				labelPosition="left"
				:model="model1"
				:rules="rules"
				ref="uForm"
		>
			<u-form-item
					label="姓名"
					prop="userInfo.name"
					borderBottom
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.name"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item
					label="性别"
					prop="userInfo.sex"
					borderBottom
					@click="showSex = true; hideKeyboard()"
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.sex"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择性别"
						border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
		</u--form>
		<u-action-sheet
				:show="showSex"
				:actions="actions"
				title="请选择性别"
				description="如果选择保密会报错"
				@close="showSex = false"
				@select="sexSelect"
		>
		</u-action-sheet>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showSex: false,
			model1: {
				userInfo: {
					name: 'uView UI',
					sex: '',
				},
			},
			actions: [{
				name: '男',
				},
				{
					name: '女',
				},
				{
					name: '保密',
				},
			],
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.sex': {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择男或女',
					trigger: ['blur', 'change']
				},
			},
			radio: '',
			switchVal: false
		};
	},
	methods: {
		sexSelect(e) {
			this.model1.userInfo.sex = e.name
			this.$refs.uForm.validateField('userInfo.sex')
		},
	},
	onReady() {

    	this.$refs.uForm.setRules(this.rules)
    },
};
</script>
```

从上面的示例我们可以看到，`rules`中的属性名和`form`的属性名是一致的，同时传递给`u-form-item`的`prop`参数绑定的也是相同的属性名，注意这里`prop`参数绑定的是 字符串(属性名)，而不是一个变量。

### [#](#form-item组件说明) Form-item组件说明

此组件一般需要搭配`Form`组件使用，也可以单独搭配`Input`等组件使用，由于此组件参数较多，这里只对其中参数最简要介绍，其余请见底部的API说明：

-   `prop`为传入`Form`组件的`model`中的属性字段，如果需要表单验证，此属性是必填的。
-   `labelPosition`可以配置左侧"label"的对齐方式，可选为`left`和`top`。
-   `borderBottom`是否显示表单域的下划线，如果给`Input`组件配置了边框，可以将此属性设置为`false`，从而隐藏默认的下划线。
-   如果想在表单域配置左右的图标或小图片，可以通过`leftIcon`和`rightIcon`参数实现。

#### [#](#验证规则) 验证规则

组件验证部分采用了[async-validator (opens new window)](https://github.com/yiminghe/async-validator)，一个字段可以设置多个内置规则，以及自定义规则，触发方式等， 每个字段的验证规则为一个数组，数组的每一个元素对象为其中一条规则(一个字段的验证可以配置多个规则)，如下：

```
rules: {
	'userInfo.name': {
		type: 'string',
				required: true,
				message: '请填写姓名',
				trigger: ['blur', 'change']
	},
	code: {
		type: 'string',
				required: true,
				len: 4,
				message: '请填写4位验证码',
				trigger: ['blur']
	},
	'userInfo.sex': {
		type: 'string',
				max: 1,
				required: true,
				message: '请选择男或女',
				trigger: ['blur', 'change']
	},
	radiovalue1: {
		type: 'string',
				min: 1,
				max: 2,
				message: '生命是美好的，请不要放弃治疗',
				trigger: ['change']
	},
	checkboxValue1: {
		type: 'array',
				min: 2,
				required: true,
				message: '不能太宅，至少选两项',
				trigger: ['change']
	},
	intro: {
		type: 'string',
				min: 3,
				required: true,
				message: '不低于3个字',
				trigger: ['change']
	},
	hotel: {
		type: 'string',
				min: 2,
				required: true,
				message: '请选择住店时间',
				trigger: ['change']
	},
	'userInfo.birthday': {
		type: 'string',
				required: true,
				message: '请选择生日',
				trigger: ['change']
	},
},
```

#### [#](#验证规则属性) 验证规则属性

每一个验证规则中，可以配置多个属性，下面对常用的属性进行讲解，更具体的可以查看[async-validator (opens new window)](https://github.com/yiminghe/async-validator)的文档说明：

-   `trigger`{String | Array}：触发校验的方式有2种：

    -   change：字段值发生变化时校验
    -   blur：输入框失去焦点时触发
    -   如果同时监听两种方式，需要写成数组形式：`['change', 'blur']`
-   `type`{String}
    内置校验规则，如这些规则无法满足需求，可以使用正则匹配、或者使用`validator`自定义方法并结合uView自带[验证规则](https://www.uviewui.com/js/test.html)。

    -   string：必须是 `string` 类型，默认类型
    -   number：必须是 `number` 类型
    -   boolean：必须是 `boolean` 类型
    -   method：必须是 `function` 类型
    -   regexp：必须是 `regexp` 类型，这里的正则，指的是判断字段的内容是否一个正则表达式，而不是用这个正则去匹配字段值
    -   integer：必须是`整数`类型
    -   float：必须是`浮点数`类型
    -   array：必须是 `array` 类型
    -   object：必须是 `object` 类型
    -   enum：必须出现在 `enmu` 指定的值中
    -   date：必须是 `date` 类型
    -   url：必须是 `url` 类型
    -   hex：必须是 `16` 进制类型
    -   email：必须是 `email` 类型
    -   any：任意类型
-   `required`
    布尔值，是否必填，配置此参数不会显示输入框左边的必填星号，如需要，请配置`u-form-item`的`required`为`true`，注意：如需在`swiper`标签内显示星号，需要给予`swiper-item`第一个根节点一定的`margin`样式

-   `pattern`
    要求此参数值为一个正则表达式，如： /\\d+/，**不能**带引号，如："/\\d+/"，组件会对字段进行正则判断，返回结果。

-   `min`
    最小值，如果字段类型为字符串和数组，会取字符串长度与数组长度(length)与`min`比较，如果字段是数值，则直接与`min`比较。

-   `max`
    最大值，规则同`min`参数

-   `len`
    指定长度，规则同`min`，优先级高于`min`和`max`

-   `enum`{Array} 指定的值，配合 type: 'enum' 使用

-   `whitespace`{Boolean}
    如果字段值内容都为空格，默认无法通过`required: true`校验，如果要允许通过，需要将此参数设置为`true`

-   `transform`{Function}，校验前对值进行转换，函数的参数为当前值，返回值为改变后的值，参数如如下：

    -   `value`：当前校验字段的值
-   `message`
    校验不通过时的提示信息

-   `validator`{Function}：自定义**同步**校验函数，参数如下：

    -   `rule`：当前校验字段在 rules 中所对应的校验规则
    -   `value`：当前校验字段的值
    -   `callback`：校验完成时的回调，一般无需执行callback，返回`true`(校验通过)或者`false`(校验失败)即可
-   `asyncValidator`{Function}：自定义**异步**校验函数，参数如下：

    -   `rule`：当前校验字段在 rules 中所对应的校验规则
    -   `value`：当前校验字段的值
    -   `callback`：校验完成时的回调，执行完异步操作(比如向后端请求数据验证)，如果不通过，需要callback(new Error('提示错误信息'))，如果校验通过，执行callback()即可

#### [#](#uview自带验证规则) uView自带验证规则

uView在JS板块的[Test 规则校验](https://www.uviewui.com/js/test.html)中有大量内置的验证规则，这些规则对表单验证来说，属于**自定义规则**，故需要用到上方规则属性的 `validator`自定义验证函数，这里做一个详细说明。

我们知道uView有自带的判断手机号的验证方法`uni.$u.test.mobile(value)`，但是[async-validator (opens new window)](https://github.com/yiminghe/async-validator)没有 内置判断手机号的规则，所以将二者结合使用：

```
rules: {

	mobile: [
		{
			required: true,
			message: '请输入手机号',
			trigger: ['change','blur'],
		},
		{

			validator: (rule, value, callback) => {

				return uni.$u.test.mobile(value);
			},
			message: '手机号码不正确',

			trigger: ['change','blur'],
		}
	]
}
```

#### [#](#综合实战) 综合实战

上面讲述了[async-validator (opens new window)](https://github.com/yiminghe/async-validator)的规则和配置，以及uView内置规则的结合使用，下面我们进行一个综合 实战示例，要入对某一个字段进行如下验证(验证实现有多种方法，下方仅为引导示例，非唯一，或最优做法)：

1.  必填，同时可接受`change`和`blur`触发校验：配置`required`参数为`true`，同时配置`trigger`为`[change, blur]`
2.  必须为字母或字符串，校验前先将字段值转为字符串类型：通过`pattern`参数配置正则：/^\[0-9a-zA-Z\]\*$/g，通过`transform`参数在校验前对字段值转换为字符串
3.  长度6-8个字符之间：通过 配置`min`为6，`max`为8
4.  需要包含字母"A"：使用uView的`uni.$u.test.contains()`方法，并结合`validator`自定义函数实现
5.  异步校验，输入完账号，输入框失去焦点时，向后端请求该账号是否已存在：通过上方的`asyncValidator`异步函数进行验证。

综上，我们可以得出如下的一个配置规则(仅为综合演示，非最优做法)：

```
rules: {
	name: [

		{
			required: true,
			message: '此为必填字段',

			trigger: ['blur', 'change'],
		},

		{
			pattern: /^[0-9a-zA-Z]*$/g,

			transform(value) {
				return String(value);
			},
			message: '只能包含字母或数字'
		},

		{
			min: 6,
			max: 8,
			message: '长度在6-8个字符之间'
		},

		{
			validator: (rule, value, callback) => {
				return uni.$u.test.contains(value, "A");
			},
			message: '必须包含字母"A"'
		},

		{
			asyncValidator: (rule, value, callback) => {
				uni.$u.http.post('/xxx/xxx', {name: value}).then(res => {

					if(res.error) {
						callback(new Error('姓名重复'));
					} else {

						callback();
					}
				})
			},

		}
	]
}
```

#### [#](#校验错误提示方式) 校验错误提示方式

uView提供了多种校验的错误提示方式，传递给`Form`组件的`errorType`参数：

-   `message`：默认为输入框下方用文字进行提示
-   `none`：不会进行任何提示
-   `border-bottom`：配置作用域底部的下划线显示为红色，要求给form-item设置了borderBottom=true才有效
-   `toast`：以"toast"提示的方式弹出错误信息，每次只弹出最前面的那个表单域的错误信息

```
<template>
	<u--form :errorType="errorType">
		......
	</u--form>
</template>

<script>
export default {
	data() {
		return {

			errorType: 'message',

		};
	}
};
</script>
```

#### [#](#校验) 校验

进行了上方的配置和讲解后，进入到最后一步，执行验证：
需要通过`ref`调用`Form`组件的`validate`方法，该方法回调函数的参数为一个布尔值，`true`为校验通过，否则反之。

```
<template>
	<view class="">
		<u--form :model="form" ref="uForm">
			<u-form-item label="姓名" prop="name">
				<u-input v-model="form.name" />
			</u-form-item>
		</u--form>
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '',
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				]
			}
		};
	},
	methods: {
		submit() {
			this.$refs.uForm.validate().then(res => {
				uni.$u.toast('校验通过')
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		}
	},
};
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/form/form.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/form/form.nvue)

### [#](#api) API

### [#](#form-props) Form Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| model | 表单数据对象 | Object | \- | \- |
| rules | 通过`ref`设置，如果`rules`中有自定义方法等，需要使用`setRules`方法设置规则，见上方说明 | Object|Function|Array | \- | \- |
| errorType | 错误的提示方式，见上方说明 | String | message | none|toast|border-bottom|none |
| borderBottom | 是否显示表单域的下划线边框 | Boolean | true | \- |
| labelPosition | 表单域提示文字的位置，`left`\-左侧，`top`\-上方 | String | left | top |
| labelWidth | 提示文字的宽度，单位px | String | Number | 45 | 数值 / auto |
| labelAlign | lable字体的对齐方式 | String | left | center / right |
| labelStyle | lable的样式，对象形式 | Object | \- | \- |

### [#](#form-methods) Form Methods

此方法如要通过ref手动调用

| 名称 | 说明 | 参数 |
| --- | --- | --- |
| validate | 对整个表单进行校验的方法 | \- |
| setRules | 如果`rules`中有自定义方法等，需要用此方法设置`rules`规则，否则微信小程序无效 | Function(rules) |
| validateField | 对部分表单字段进行校验 | Function(value, Function(errorsRes)) |
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | \- |
| clearValidate | 清空校验结果 | Function(props) |

### [#](#form-item-props) Form-item Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| label | 左侧提示文字 | String | \- | \- |
| prop | 表单域`model`对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的 | String | \- | \- |
| borderBottom | 是否显示下边框，如不需要下边框，需同时将`u-form`的同名参数设置为`false` | String | Boolean | true | true / false |
| labelWidth | 提示文字的宽度，单位rpx，如设置，将覆盖`u-form`的同名参数 | String | Number | \- | \- |
| labelPosition 2.0.34 | label的位置 | String | \- | left / top |
| rightIcon | 右侧自定义字体图标(限uView内置图标)或图片地址 | String | \- | \- |
| leftIcon | 左侧自定义字体图标(限uView内置图标)或图片地址 | String | \- | \- |
| leftIconStyle | 左侧自定义字体图标的样式 | String | Object | \- | \- |
| required | 是否显示左边的"\*"号，这里仅起展示作用，如需校验必填，请通过`rules`配置必填规则，如需在`swiper`标签内显示星号，需要给予`swiper-item`内第一个根节点一定的`margin`样式 | Boolean | false | true |

### [#](#form-item-slot) Form-item Slot

| 名称 | 说明 |
| --- | --- |
| \- | Form Item 的内容 |
| right | 右侧自定义内容，可以在此传入一个按钮，用于获取验证码等场景 |
| error | 自定义传入校验错误时显示的信息，通过作用域插槽暴露了内部当前message错误信息 |

### [#](#form-item-events) Form-item Events

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| click | 点击时触发 | \- | \- |

← [LoadingPage 加载页](https://www.uviewui.com/components/loadingPage.html) [Calendar 日历](https://www.uviewui.com/components/calendar.html) →




---
## [form/input] input
> 官方文档: https://www.uviewui.com/components/input.html

---

## [#](#input-输入框) Input 输入框 [![](https://www.uviewui.com/common/to_api.png)](#api)

去除`fixed`、`showWordLimit`、`showConfirmBar`、`disableDefaultPadding`、`autosize`字段

此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件[u-form](https://www.uviewui.com/components/form.html)而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。

应该在`u-form`中嵌套`u-form-item`，再嵌套`u-input`去实现。

注意：

由于在`nvue`下，`u-input`名称被uni-app官方占用，在`nvue`页面中请使用`u--input`名称，在`vue`页面中使用`u--input`或者`u-input`均可。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`type`设置输入框的类型，默认text
-   通过`placeholder`设置输入框为空时的占位符
-   通过`border`配置是否显示输入框的边框
-   绑定`@change`事件

```
<template>
  <u--input
    placeholder="请输入内容"
    border="surround"
    v-model="value"
    @change="change"
  ></u--input>
</template>

<script>
	export default {
      data() {
        return {
          value: ''
        }
      },
      methods: {
        change(e) {
          console.log('change', e);
        }
      }
	}
</script>
```

### [#](#输入框的类型) 输入框的类型

综述：输入框的类型可通过配置`type`来设置：

1.  text-文本输入键盘。
2.  number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数。
3.  idcard-身份证输入键盘，微信、支付宝、百度、QQ小程序。
4.  digit-带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序。
5.  password-等同于设置`password`为`true`的效果

#### [#](#可清空字符) 可清空字符

将`clearable`设置为`true`，会在输入框后方增加一个清空按钮。

```
<template>
  <u--input
    placeholder="请输入内容"
    border="surround"
    clearable
  ></u--input>
</template>
```

#### [#](#下划线) 下划线

通过设置属性`border`为`bottom`即可变成一个下划线

```
<template>
  <u--input
    placeholder="请输入内容"
    border="bottom"
    clearable
  ></u--input>
</template>
```

#### [#](#前后图标) 前后图标

-   全后置图标可自由设置样式信息。

```
<template>
	<u--input
	    placeholder="前置图标"
	    prefixIcon="search"
	    prefixIconStyle="font-size: 22px;color: #909399"
	></u--input>
	<u--input
	    placeholder="后置图标"
	    suffixIcon="map-fill"
	    suffixIconStyle="color: #909399"
	></u--input>
</template>

<script>
</script>
```

### [#](#前后插槽) 前后插槽

通过设置`slot`为`prefix`或`suffix`来指定前后插槽

```
<template>
	<view class="u-demo-block">
		<text class="u-demo-block__title">前后插槽</text>
		<view class="u-demo-block__content">

			<u-input placeholder="前置插槽">

			<u--input placeholder="前置插槽">

				<u--text
					text="http://"
					slot="prefix"
					margin="0 3px 0 0"
					type="tips"
				></u--text>

			</u-input>

			</u--input>

		</view>
		<view
			class="u-demo-block__content"
			style="margin-top: 15px;"
		>

			<u-input placeholder="后置插槽">

			<u--input placeholder="后置插槽">

				<template slot="suffix">
					<u-code
						ref="uCode"
						@change="codeChange"
						seconds="20"
						changeText="X秒重新获取哈哈哈"
					></u-code>
					<u-button
						@tap="getCode"
						:text="tips"
						type="success"
						size="mini"
					></u-button>
				</template>

			</u-input>

			</u--input>

		</view>
	</view>
</template>

<script>
  export default {
    data() {
      return {
        tips: '',
        value: ''
      }
    },
    watch: {
      value(newValue, oldValue) {

      }
    },
    methods: {
      codeChange(text) {
        this.tips = text;
      },
      getCode() {
        if (this.$refs.uCode.canGetCode) {

          uni.showLoading({
            title: '正在获取验证码'
          })
          setTimeout(() => {
            uni.hideLoading();

            uni.$u.toast('验证码已发送');

            this.$refs.uCode.start();
          }, 2000);
        } else {
          uni.$u.toast('倒计时结束后再发送');
        }
      },
      change(e) {
        console.log('change', e);
      }
    }
  }
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/input/input.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/input/input.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| value | 输入的值 | Number | String | \- | \- |
| type | 输入框类型，见上方说明 | String | text | number | idcard | digit | password |
| disabled | 是否禁用输入框 | Boolean | false | true |
| disabledColor | 禁用状态时的背景色 | String | #f5f7fa | \- |
| clearable | 是否显示清除控件 | Boolean | false | true |
| password | 是否密码类型 | Boolean | false | true |
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | String | Number | \-1 | \- |
| placeholder | 输入框为空时的占位符 | String | \- | \- |
| placeholderClass | 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ | String | input-placeholder | \- |
| placeholderStyle | 指定placeholder的样式，字符串/对象形式，如"color: red;" | String | Object | color: #c0c4cc | \- |
| showWordLimit | 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效 | Boolean | false | true |
| confirmType | 设置右下角按钮的文字，兼容性详见uni-app文档 | String | done | send | search | next | go | done |
| confirmHold | 点击键盘右下角按钮时是否保持键盘不收起，H5无效 | Boolean | false | true |
| holdKeyboard | focus时，点击页面的时候不收起键盘，微信小程序有效 | Boolean | false | true |
| focus | 自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 | Boolean | false | true |
| autoBlur | 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 | Boolean | false | true |
| ignoreCompositionEvent 2.0.34 | 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件 | Boolean | true | false |
| disableDefaultPadding | 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效 | Boolean | false | true |
| cursor | 指定focus时光标的位置 | String | Number | \-1 | \- |
| cursorSpacing | 输入框聚焦时底部与键盘的距离 | String | Number | 30 | \- |
| selectionStart | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 | String | Number | \-1 | \- |
| selectionEnd | 光标结束位置，自动聚集时有效，需与selection-start搭配使用 | String | Number | \-1 | \- |
| adjustPosition | 键盘弹起时，是否自动上推页面 | Boolean | true | false |
| inputAlign | 输入框内容对齐方式 | String | left | left | center | right |
| fontSize | 输入框字体的大小 | String | Number | 15px | \- |
| color | 输入框字体颜色 | String | #303133 | \- |
| prefixIcon | 输入框前置图标 | String | \- | \- |
| prefixIconStyle | 前置图标样式，对象或字符串 | String | Object | \- | \- |
| suffixIcon | 输入框后置图标 | String | \- | \- |
| suffixIconStyle | 后置图标样式，对象或字符串 | String | Object | \- | \- |
| border | 边框类型，surround-四周边框，bottom-底部边框，none-无边框 | String | surround | bottom | none |
| readonly | 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 | Boolean | false | true |
| shape | 输入框形状，circle-圆形，square-方形 | String | square | circle |
| formatter | 输入过滤或格式化函数(如需兼容微信小程序，则只能通过`setFormatter`方法) | Function | null | \- |
| customStyle | 定义需要用到的外部样式 | Object | \- | \- |
| ignoreCompositionEvent | 是否忽略组件内对文本合成系统事件的处理 | Boolean | true | false |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| blur | 输入框失去焦点时触发 | value：内容值 | \- |
| focus | 输入框聚焦时触发 | \- | \- |
| confirm | 点击完成按钮时触发 | value：内容值 | \- |
| keyboardheightchange | 键盘高度发生变化的时候触发此事件 | \- | 微信小程序2.7.0+、App 3.1.0+ |
| input | 内容发生变化触发此事件 | value：内容值 | \- |
| change | 内容发生变化触发此事件 | value：内容值 | \- |
| clear | 点击清空内容 | \- | \- |

### [#](#methods) Methods

| 方法名 | 说明 |
| --- | --- |
| setFormatter | 为兼容微信小程序而暴露的内部方法，见上方说明 |

### [#](#slots) Slots

| 名称 | 说明 |
| --- | --- |
| prefix | 输入框前置内容，`nuve`环境需`u--input`有效，非`nvue`环境需`u-input`才有效 |
| suffix | 输入框后置内容，`nuve`环境需`u--input`有效，非`nvue`环境需`u-input`才有效 |

← [Code 验证码输入框](https://www.uviewui.com/components/code.html) [Textarea 文本域](https://www.uviewui.com/components/textarea.html) →




---
## [form/textarea] textarea
> 官方文档: https://www.uviewui.com/components/textarea.html

---

## [#](#textarea-文本域) Textarea 文本域 [![](https://www.uviewui.com/common/to_api.png)](#api)

文本域此组件满足了可能出现的表单信息补充，编辑等实际逻辑的功能，内置了字数校验等

注意：

由于在`nvue`下，`u-textarea`名称被uni-app官方占用，在`nvue`页面中请使用`u--textarea`名称，在`vue`页面中使用`u--textarea`或者`u-textarea`均可。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

```
<u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea>
<script>
	export default {
		data() {
			return {
				value1: '',
			}
		},
	}
</script>
```

### [#](#字数统计) 字数统计

设置`count`属性实现字数统计

```
<u--textarea v-model="value2" placeholder="请输入内容" count ></u--textarea>
<script>
	export default {
		data() {
			return {
				value2: '统计字数',
			}
		},
	}
</script>
```

### [#](#自动增高) 自动增高

设置`autoHeight`属性实现自动增高

```
<u--textarea v-model="value3" placeholder="请输入内容" autoHeight ></u--textarea>
<script>
	export default {
		data() {
			return {
				value3: '',
			}
		},
	}
</script>
```

### [#](#禁用状态) 禁用状态

设置`disabled`属性实现进行禁用，您也可以动态设置是否禁用

```
<u--textarea v-model="value4" placeholder="文本域已被禁用" disabled count></u--textarea>
<script>
	export default {
		data() {
			return {
				value4: '',
			}
		},
	}
</script>
```

### [#](#下划线模式) 下划线模式

设置`border="bottom"`属性单独设置底部下划线

```
<u--textarea v-model="value5" placeholder="请输入内容" border="bottom"></u--textarea>
<script>
	export default {
		data() {
			return {
				value5: '',
			}
		},
	}
</script>
```

### [#](#格式化处理) 格式化处理

如有需要，可以通过`formatter`参数编写自定义格式化规则。

注意：

微信小程序不支持通过`props`传递函数参数，所以组件内部暴露了一个`setFormatter`方法用于设置格式化方法，注意在页面的`onReady`生命周期获取`ref`再操作。

```
<template>
    <u-textarea v-model="value" :formatter="formatter" ref="textarea"></u-textarea>
</template>

<script>
    export default {
        data() {
            return {
                value: ''
            }
        },
		onReady() {

			this.$refs.textarea.setFormatter(this.formatter)
		},
        methods: {
            formatter(value) {

            	return value.replace(/[^0-9]/ig, "")
            }
        },
    }
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/textarea/textarea.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/textarea/textarea.nvue)

### [#](#api) API

### [#](#list-props) List Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| value | 输入框的内容 | String | String | \- | \- |
| placeholder | 输入框为空时占位符 | Number | String | \- | \- |
| height | 输入框高度 | String | Number | 70 | \- |
| confirmType | 设置键盘右下角按钮的文字，仅微信小程序，App-vue和H5有效 | String | done | \- |
| disabled | 是否禁用 | Boolean | false | true |
| count | 是否显示统计字数 | Boolean | false | true |
| focus | 是否自动获取焦点，nvue不支持，H5取决于浏览器的实现 | Boolean | false | true |
| autoHeight | 是否自动增加高度 | Boolean | false | true |
| ignoreCompositionEvent 2.0.34 | 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件 | Boolean | true | false |
| fixed | 如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true | Boolean | false | true |
| cursorSpacing | 指定光标与键盘的距离 | Number | 0 | \- |
| cursor | 指定focus时的光标位置 | Number | String | \- | \- |
| showConfirmBar | 是否显示键盘上方带有”完成“按钮那一栏， | Boolean | true | false |
| selectionStart | 光标起始位置，自动聚焦时有效，需与selection-end搭配使用 | Number | \-1 | \- |
| selectionEnd | 光标结束位置，自动聚焦时有效，需与selection-start搭配使用 | Number | \-1 | \- |
| adjustPosition | 键盘弹起时，是否自动上推页面 | Boolean | true | false |
| disableDefaultPadding | 是否去掉 iOS 下的默认内边距，只微信小程序有效 | Boolean | false | true |
| holdKeyboard | focus时，点击页面的时候不收起键盘，只微信小程序有效 | Boolean | false | true |
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | String | Number | 140 | \- |
| border | 边框类型，surround-四周边框，none-无边框，bottom-底部边框 | String | surround | bottom |
| placeholderClass | 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ | String | textarea-placeholder | \- |
| placeholderStyle | 指定placeholder的样式，字符串/对象形式，如"color: red;" | String | Object | color: #c0c4cc | \- |
| formatter | 输入过滤或格式化函数(如需兼容微信小程序，则只能通过`setFormatter`方法) | Function | null | \- |
| ignoreCompositionEvent | 是否忽略组件内对文本合成系统事件的处理 | Boolean | true | false |

### [#](#methods) Methods

| 方法名 | 说明 |
| --- | --- |
| setFormatter | 为兼容微信小程序而暴露的内部方法，见上方说明 |

### [#](#list-events) List Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| focus | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 | e |
| blur | 输入框失去焦点时触发，event.detail = {value, cursor} | e |
| linechange | 输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} | e |
| input | 当键盘输入时，触发 input 事件 | e.detail.value |
| confirm | 点击完成时， 触发 confirm 事件 | e |
| keyboardheightchange | 键盘高度发生变化的时候触发此事件 | e |

← [Input 输入框](https://www.uviewui.com/components/input.html) [Checkbox 复选框](https://www.uviewui.com/components/checkbox.html) →




---
## [form/checkbox] checkbox
> 官方文档: https://www.uviewui.com/components/checkbox.html

---

## [#](#checkbox-复选框) Checkbox 复选框 [![](https://www.uviewui.com/common/to_api.png)](#api)

复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

```
<template>
    <view>
        <u-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <u-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </u-checkbox>
        </u-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],

            checkboxList1: [{
                    name: '苹果',
                    disabled: false
                },
                {
                    name: '香蕉',
                    disabled: false
                },
                {
                    name: '橙子',
                    disabled: false
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>
```

### [#](#自定义形状) 自定义形状

-   通过`shape`可以设置选择形状

```
<template>
    <view>
        <u-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <u-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
            >
            </u-checkbox>
        </u-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],

            checkboxList1: [{
                    name: '苹果',
                    disabled: false
                },
                {
                    name: '香蕉',
                    disabled: false
                },
                {
                    name: '橙子',
                    disabled: false
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>
```

### [#](#禁用checkbox) 禁用checkbox

设置`disabled`为`true`，即可禁用某个组件，让用户无法点击，禁用分为两种状态，一是未勾选前禁用，这时只显示一个灰色的区域。二是已勾选后 再禁用，会有灰色的已勾选的图标，但此时依然是不可操作的。

```
<template>
    <view>
        <u-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            @change="checkboxChange"
        >
            <u-checkbox
                :customStyle="{marginBottom: '8px'}"
                v-for="(item, index) in checkboxList1"
                :key="index"
                :label="item.name"
                :name="item.name"
                :disabled="item.disabled"
            >
            </u-checkbox>
        </u-checkbox-group>
    </view>
</template>
<script>
export default {
    data() {
        return {
            checkboxValue1:[],

            checkboxList1: [{
                    name: '苹果',
                    disabled: false
                },
                {
                    name: '香蕉',
                    disabled: false
                },
                {
                    name: '橙子',
                    disabled: true
                }
            ],
        }

    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        }
    }
}
</script>
```

### [#](#自定义形状-2) 自定义形状

可以通过设置`shape`为`square`或者`circle`，将复选框设置为方形或者圆形

```
<u-checkbox-group>
	<u-checkbox v-model="checked" shape="circle" label="明月"></u-checkbox>
</u-checkbox-group>
```

### [#](#自定义颜色) 自定义颜色

此处所指的颜色，为`checkbox`选中时的背景颜色，参数为`activeColor`

```
<u-checkbox-group v-model="checked">
	<u-checkbox  activeColor="red" label="光影"></u-checkbox>
</u-checkbox-group>
```

### [#](#横向排列形式) 横向排列形式

可以通过设置`placement`为`row`或者`column`，将复选框设置为横向排列或者竖向排列

```
<u-checkbox-group v-model="checked" placement="row">
	<u-checkbox activeColor="red" label="红色"></u-checkbox>
	<u-checkbox activeColor="green" label="绿色"></u-checkbox>
</u-checkbox-group>
```

### [#](#横向两端排列形式) 横向两端排列形式

可以通过设置`iconPlacement`为`left`或者`right`，将复选框勾选图标的对齐设置为左对齐或者右对齐

```
<u-checkbox-group
    v-model="checked"
    iconPlacement="right"
    placement="row">
	<u-checkbox activeColor="red" label="红色"></u-checkbox>
	<u-checkbox activeColor="green" label="绿色"></u-checkbox>
</u-checkbox-group>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/checkbox/checkbox.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/checkbox/checkbox.nvue)

### [#](#api) API

### [#](#checkbox-props) Checkbox Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| name | checkbox的名称 | String \\ Number \\ Boolean | \- | \- |
| shape | 形状，square为方形，circle为圆型 | String | square | circle |
| size | 整体的大小 | String \\ Number | \- | \- |
| checked | 是否默认选中 | Boolean | false | true |
| disabled | 是否禁用 | String \\ Boolean | \- | \- |
| activeColor | 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值 | String | \- | \- |
| inactiveColor | 未选中的颜色 | String | \- | \- |
| iconSize | 图标的大小，单位px | String \\ Number | \- | \- |
| iconColor | 图标颜色 | String | \- | \- |
| label | label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式 | String \\ Number | \- | \- |
| labelSize | label的字体大小，px单位 | String \\ Number | \- | \- |
| labelColor | label的颜色 | String | \- | \- |
| labelDisabled | 是否禁止点击提示语选中复选框 | String \\ Boolean | \- | \- |

### [#](#checkboxgroup-props) CheckboxGroup Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| name | 标识符 | String | \- | \- |
| value | 绑定的值 | Array | \[\] | \- |
| shape | 形状，circle-圆形，square-方形 | String | square | circle |
| disabled | 是否禁用全部checkbox | Boolean | false | true |
| activeColor | 选中状态下的颜色，如子`Checkbox`组件设置此值，将会覆盖本值 | String | #2979ff | \- |
| inactiveColor | 未选中的颜色 | String | #c8c9cc | \- |
| size | 整个组件的尺寸，默认px | String | 18 | \- |
| placement | 布局方式，row-横向，column-纵向 | String | row | column |
| labelSize | label的字体大小，px单位 | String \\ Number | 14 | \- |
| labelColor | label的字体颜色 | String | #303133 | \- |
| labelDisabled | 是否禁止点击文本操作 | Boolean | false | true |
| iconColor | 图标颜色 | String | #ffffff | \- |
| iconSize | 图标的大小，单位px | String \\ Number | 12 | \- |
| iconPlacement | 勾选图标的对齐方式，left-左边，right-右边 | String | left | right |
| borderBottom | 竖向配列时，是否显示下划线 | Boolean | false | true |

### [#](#checkboxgroup-event) CheckboxGroup Event

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| change | 任一个`checkbox`状态发生变化时触发，回调为一个对象 | detail = array( \[元素为被选中的`checkbox`的`name`\] ) | \- |

← [Textarea 文本域](https://www.uviewui.com/components/textarea.html) [Radio 单选框](https://www.uviewui.com/components/radio.html) →




---
## [form/radio] radio
> 官方文档: https://www.uviewui.com/components/radio.html

---

## [#](#radio-单选框) Radio 单选框 [![](https://www.uviewui.com/common/to_api.png)](#api)

单选框用于有一个选择，用户只能选择其中一个的场景。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   该组件需要搭配`radioGroup`组件使用，以便用户进行操作时，获得当前单选框组的选中情况
-   通过`v-model`给`radioGroup`组件绑定一个变量，对应的`name`将会被选中

```
<template>
  <u-radio-group
    v-model="radiovalue1"
    placement="column"
    @change="groupChange"
  >
    <u-radio
      :customStyle="{marginBottom: '8px'}"
      v-for="(item, index) in radiolist1"
      :key="index"
      :label="item.name"
      :name="item.name"
      @change="radioChange"
    >
    </u-radio>
  </u-radio-group>
</template>

<script>
export default {
	data() {
		return {

          radiolist1: [{
            name: '苹果',
            disabled: false
          },
            {
              name: '香蕉',
              disabled: false
            },
            {
              name: '橙子',
              disabled: false
            }, {
              name: '榴莲',
              disabled: false
            }
          ],

          radiovalue1: '苹果',
		};
	},
	methods: {
      groupChange(n) {
        console.log('groupChange', n);
      },
      radioChange(n) {
        console.log('radioChange', n);
      }
	}
};
</script>
```

### [#](#自定义形状) 自定义形状

可以通过设置`shape`为`square`或者`circle`，将单选框设置为方形或者圆形

```
<u-radio-group v-model="value">
	<u-radio shape="circle" label="月明人倚楼"></u-radio>
</u-radio-group>
```

### [#](#禁用radio) 禁用radio

设置`disabled`为`true`，即可禁用某个组件，让用户无法点击

```
<u-radio-group v-model="value">
	<u-radio :disabled="true" label="明月几时有"></u-radio>
</u-radio-group>
```

### [#](#是否禁止点击提示语选中复选框) 是否禁止点击提示语选中复选框

设置`labelDisabled`为`true`，即可禁止点击提示语选中复选框

```
<u-radio-group v-model="value">
	<u-radio :labelDisabled="true" label="明月几时有"></u-radio>
</u-radio-group>
```

### [#](#自定义颜色) 自定义颜色

此处所指的颜色，为`radio`选中时的背景颜色，参数为`activeColor`

```
<u-radio-group v-model="value">
	<u-radio activeColor="red" label="思悠悠，恨悠悠，恨到归时方始休"></u-radio>
</u-radio-group>
```

### [#](#横向排列形式) 横向排列形式

可以通过设置`placement`为`row`或者`column`，将复选框设置为横向排列或者竖向排列

```
<u-radio-group
    v-model="value"
    placement="row">
	<u-radio activeColor="red" label="思悠悠，恨悠悠，恨到归时方始休"></u-radio>
</u-radio-group>
```

### [#](#横向两端排列形式) 横向两端排列形式

可以通过设置`iconPlacement`为`left`或者`right`，将复选框勾选图标的对齐设置为左对齐或者右对齐

```
<u-radio-group
    v-model="value"
    iconPlacement="right">
	<u-radio activeColor="red" label="思悠悠，恨悠悠，恨到归时方始休"></u-radio>
</u-radio-group>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/radio/radio.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/radio/radio.nvue)

### [#](#api) API

### [#](#radio-props) Radio Props

注意：`radio`和`radio-group`二者同名参数中，`radio`的参数优先级更高。

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| name | checkbox的名称 | String \\ Number | \- | \- |
| shape | 形状，square为方形，circle为圆型 | String | square | circle |
| disabled | 是否禁用 | Boolean | \- | \- |
| labelDisabled | 是否禁止点击提示语选中复选框 | String \\ Boolean | \- | \- |
| activeColor | 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值 | String | \- | \- |
| inactiveColor | 未选中的颜色 | String | \- | \- |
| iconSize | 图标的大小，单位px | String \\ Number | \- | \- |
| labelSize | label的字体大小，px单位 | String \\ Number | \- | \- |
| label | label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式 | String \\ Number | \- | \- |
| size | 整体的大小 | String \\ Number | \- | \- |
| iconColor | 图标颜色 | String | \- | \- |
| labelColor | label的颜色 | String | \- | \- |

### [#](#radiogroup-props) radioGroup Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| value | 绑定的值 | String\\Number\\Boolean | \[\] | \- |
| disabled | 是否禁用全部checkbox | Boolean | false | true |
| shape | 形状，circle-圆形，square-方形 | String | circle | square |
| activeColor | 选中状态下的颜色，如子`Checkbox`组件设置此值，将会覆盖本值 | String | #2979ff | \- |
| inactiveColor | 未选中的颜色 | String | #c8c9cc | \- |
| name | 标识符 | String | \- | \- |
| size | 整个组件的尺寸，默认px | String \\ Number | 18 | \- |
| placement | 布局方式，row-横向，column-纵向 | String | row | column |
| label | 文本 | String | \- | \- |
| labelColor | label的字体颜色 | String | #303133 | \- |
| labelSize | label的字体大小，px单位 | String \\ Number | 14 | \- |
| labelDisabled | 是否禁止点击文本操作 | Boolean | false | true |
| iconColor | 图标颜色 | String | #ffffff | \- |
| iconSize | 图标的大小，单位px | String \\ Number | 12 | \- |
| borderBottom | 竖向配列时，是否显示下划线 | Boolean | false | true |
| iconPlacement | 勾选图标的对齐方式，left-左边，right-右边 | String | left | right |

### [#](#radio-event) radio Event

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| change | 某个`radio`状态发生变化时触发(选中状态) | name: 通过`props`传递的`name`参数 | \- |

### [#](#radiogroup-event) radioGroup Event

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| change | 任一个`radio`状态发生变化时触发 | name: 值为`radio`通过`props`传递的`name`值 | \- |

← [Checkbox 复选框](https://www.uviewui.com/components/checkbox.html) [Switch 开关选择器](https://www.uviewui.com/components/switch.html) →




---
## [form/switch] switch
> 官方文档: https://www.uviewui.com/components/switch.html

---

## [#](#switch-开关选择器) Switch 开关选择器 [![](https://www.uviewui.com/common/to_api.png)](#api)

选择开关用于在打开和关闭状态之间进行切换。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基础使用) 基础使用

通过`v-model`绑定一个`布尔值`变量，这个变量是双向绑定的，当用户开或关选择器的时候，在父组件的该值也会相应的变为`true`或者`false`，也就是说， 您不用监听`change`事件，也能知道选择器当前处于**开**或者**关**的状态。

我们为其提供了`加载中 禁用 自定义尺寸 自定义颜色 自定义样式 异步控制`等六种能力，并在以下案例中为您展示

```
<u-switch v-model="value" @change="change"></u-switch>

change(e) {
	console.log('change', e);
},

```

### [#](#加载中) 加载中

设置`loading`属性，默认为`true`，可以让`switch`处于加载中的状态，这时`switch`是不可操作的，您可以通过`:loading='loading'`以动态设置加载状态

```
<u-switch v-model="value3" loading ></u-switch>
<u-switch v-model="value4" loading ></u-switch>

value3: false,
value4: true,
```

### [#](#禁用switch) 禁用switch

设置`disabled`属性,默认为`true`，即可禁用某个组件，让用户无法点击，禁用分为两种状态：

-   一是关闭情况下的禁用，这时只显示一个白色的区域。
-   二是打开后再禁用，这时会在原有的颜色上加一个`opacity`透明度，但此时依然是不可操作的。

```
<u-switch v-model="value" disabled ></u-switch>
```

### [#](#自定义尺寸) 自定义尺寸

设置`size`属性，可以让您自定义`switch`的尺寸，单位为`px`

```
<u-switch v-model="value3" size="28" ></u-switch>
<u-switch v-model="value4" size="20" ></u-switch>

value3: false,
value4: true,
```

### [#](#自定义颜色) 自定义颜色

设置`activeColor`属性，可以让您自定义`switch`的颜色，支持多种设置方式，如：`activeColor="#f56c6c" activeColor="red" activeColor="rgb(0,0,0)"`

```
<u-switch v-model="value" activeColor="#f56c6c" loading ></u-switch>
<u-switch v-model="value1" activeColor="#5ac725" loading ></u-switch>

value: true,
value1: true,
```

### [#](#自定义样式) 自定义样式

同时设置`activeColor`和`inactiveColor`属性，可以让您自定义`switch`的样式，同样支持多种设置方式

```
<u-switch
	space="2" v-model="value11" activeColor="#f9ae3d"
	inactiveColor="rgb(230, 230, 230)">
</u-switch>
<u-switch
	space="2" v-model="value12" activeColor="#f9ae3d"
	inactiveColor="rgb(230, 230, 230)">
</u-switch>

value11: false,
value12: true,
```

### [#](#异步控制) 异步控制

异步控制场景，一般发生在用户打开或者关闭选择器时，需要本地或者向后端请求判断，是否允许用户打开或者关闭的场景。
同时您也可以组合使用，例如根据接口结果添加`disabled`，`loading`属性等

注意

请添加`asyncChange`属性来支持异步控制操作，否则您将先操作`v-model`绑定的值，并失去控制效果

```
<template>
	<u-switch v-model="value13" asyncChange @change="asyncChange" ></u-switch>
</template>

<script>
	export default {
		data() {
			return {
				value13:true
			};
		},
		methods: {
			asyncChange(e) {
				uni.showModal({
					content: e ? '确定要打开吗' : '确定要关闭吗',
					success: (res) => {
						if (res.confirm) {
							this.value13 = e
						}
					}
				})
			}
		}
	};
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/switch/switch.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/switch/switch.nvue)

### [#](#api) API

### [#](#switch-props) Switch Props

注意：需要给`switch`组件通过`v-model`绑定一个布尔值，来初始化`switch`的状态，随后该值被双向绑定， 当用打开选择器时，该值在`switch`组件内部被修改为`true`，并反映到父组件，否则为`false`，换言之，您无需监听`switch`的`change`事件，也能 知道某一个`switch`是否被选中的状态

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| loading | 是否处于加载中 | Boolean | false | true |
| disabled | 是否禁用 | Boolean | false | true |
| size | 开关尺寸，单位rpx | String | Number | 25 | \- |
| activeColor | 打开时的背景色 | String | #2979ff | \- |
| inactiveColor | 关闭时的背景色 | String | #ffffff | \- |
| value | 通过v-model双向绑定的值 | Boolean | String | Number | false | \- |
| activeValue | switch打开时的值 | Boolean | String | Number | true | \- |
| inactiveValue | switch关闭时的值 | Boolean | String | Number | false | \- |
| asyncChange | 是否开启异步变更，开启后需要手动控制输入值 | Boolean | false | true |
| space | 圆点与外边框的距离 | String | Number | 0 | \- |

### [#](#switch-event) Switch Event

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 在`switch`打开或关闭时触发 | value：打开时为`activeValue`值，关闭时为`inactiveValue`值 |
| input | 在`switch`打开或关闭时触发（没开启异步） | value：打开时为`activeValue`值，关闭时为`inactiveValue`值 |

← [Radio 单选框](https://www.uviewui.com/components/radio.html) [Slider 滑动选择器](https://www.uviewui.com/components/slider.html) →




---
## [form/slider] slider
> 官方文档: https://www.uviewui.com/components/slider.html

---

## [#](#slider-滑动选择器) Slider 滑动选择器 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于表单中，手动选择一个区间范围的场景。

说明

该组件在`H5`，`微信小程序`和`APP-VUE`等平台上使用了`WXS`技术，在`NVUE`平台使用了`BindingX`技术， 故在滑动过程中可以获得细腻流畅的跟随效果。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

需要通过`v-model`绑定一个值，来初始化滑块的选择值(0到100之间)，这个值是双向绑定的，您可以通过这个值，实时地得知内部的滑动结果。

```
<template>
	<u-slider v-model="value"></u-slider>
</template>

<script>
	export default {
		data() {
			return {
				value: 30
			}
		}
	}
</script>
```

### [#](#设置最大和最小值) 设置最大和最小值

通过`min`和`max`，可以设置滑块所能选择的最大和最小值

```
<u-slider v-model="value" min="30" max="80"></u-slider>
```

### [#](#设置步进值) 设置步进值

通过`step`参数设置步进值，这个步进值为每次跳变的值，具体表现请见示例。

提示

需要注意的是，这个`step`必须要被`max`值整除，否则会出现无法无法滑动到最大值的情况

```
<u-slider v-model="value" step="20" min="30" max="100"></u-slider>
```

### [#](#禁用状态) 禁用状态

```
<u-slider v-model="value" disabled></u-slider>
```

### [#](#自定义按钮的内容和样式) 自定义按钮的内容和样式

-   `activeColor`，设置进度条的激活部分颜色
-   `inactiveColor`，进度条的激活部分颜色
-   `inactiveColor`，进度条的背景颜色
-   `blockColor`，滑块的背景颜色
-   `blockStyle`，用户对滑块的自定义样式(颜色)

```
<template>
	<u-slider v-model="value" activeColor="#3c9cff" inactiveColor="#c0c4cc">

	</u-slider>
</template>

<script>
	export default {
		data() {
			return {
				value: 30
			}
		}
	}
</script>
```

### [#](#自定义滑动选择器整体的样式) 自定义滑动选择器整体的样式

-   通过`inactive-color`配置底部滑动条背景颜色
-   通过`active-color`配置底部选择部分的背景颜色
-   通过`block-width`配置滑块宽度(高等于宽)
-   通过`block-color`配置滑动按钮按钮的颜色
-   通过`height`配置滑块条高度，单位rpx

其他更多参数详见底部API

```
<u-slider v-model="value" block-width="40" block-color="red"></u-slider>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/slider/slider.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/slider/slider.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| value | 双向绑定滑块选择值 | String | Number | 0 | \- |
| blockSize | 滑块的大小 | String | Number | 18 | 12 - 28 |
| min | 可选的最小值(0-100之间) | String | Number | 1 | \- |
| max | 可选的最大值(0-100之间) | String | Number | 100 | \- |
| step | 选择的步长 | String | Number | 1 | \- |
| activeColor | 进度条的激活部分颜色 | String | #2979ff | \- |
| inactiveColor | 进度条的背景颜色 | String | #c0c4cc | \- |
| blockColor | 滑块背景颜色 | String | #ffffff | \- |
| showValue | 是否显示当前 value | Boolean | false | true |
| blockStyle | 滑块按钮自定义样式，对象形式 | Object | String | \- | \- |

### [#](#slider-events) Slider Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| input | 更新v-model的（拖动过程中） | value：当前值 |
| changing | 触发事件（拖动过程中） | value：当前值 |
| input | 更新v-model的 | value：当前值 |
| change | 触发事件 | value：当前值 |

← [Switch 开关选择器](https://www.uviewui.com/components/switch.html) [Album 相册](https://www.uviewui.com/components/album.html) →




---
## [form/numberBox] numberBox
> 官方文档: https://www.uviewui.com/components/numberBox.html

---

## [#](#numberbox-步进器) NumberBox 步进器 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于商城购物选择物品数量的场景

注意：该输入框只能输入大于或等于0的整数

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

通过`v-model`绑定`value`初始值，此值是双向绑定的，**无需**在回调中将返回的数值重新赋值给`value`。

```
<template>
	<u-number-box v-model="value" @change="valChange"></u-number-box>
</template>

<script>
	export default {
		data() {
			return {
				value: 0
			}
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			}
		}
	}
</script>
```

### [#](#步长设置) 步长设置

-   通过`step`属性设置每次点击增加或减少按钮时变化的值，默认为1，下面示例每次都会加2或者减2

```
<u-number-box :step="2"></u-number-box>
```

### [#](#限制输入范围) 限制输入范围

通过`min`和`max`参数限制输的入值最小值和最大值

```
<u-number-box :min="1" :max="100"></u-number-box>
```

### [#](#限制只能输入整数) 限制只能输入整数

通过`integer`限制输入类型

```
<u-number-box integer></u-number-box>
```

### [#](#禁用) 禁用

```

<u-number-box :disabled="true"></u-number-box>

<u-number-box :disabledInput="true"></u-number-box>

<u-number-box :disablePlus="true"></u-number-box>

<u-number-box :disableMinus="true"></u-number-box>

<u-number-box :longPress="false"></u-number-box>
```

### [#](#固定小数位数) 固定小数位数

通过`step`设置步进长度，`decimal-length`设置显示小数位数

```
<u-number-box step="0.25" decimal-length="1" ></u-number-box>
```

### [#](#异步变更) 异步变更

通过`asyncChange`设置异步变更，开启后需要手动控制输入值 （默认 false ）

```
<template>
    <u-number-box v-model="value" :asyncChange="true" @change="onChange"></u-number-box>
</template>

<script>
export default {
    data(){
        return {
            value:1
        }
    },
    methods:{
        onChange(e){
            setTimeout(() => {
                this.value = this.value + 1;
            }, 3000)
        }
    }
}
</script>
```

### [#](#自定义颜色和大小) 自定义颜色和大小

-   通过`button-size`参数设置按钮大小
-   通过`icon-style`参数设置加减按钮图标的样式

```
<u-number-box
    button-size="36"
    color="#ffffff"
    bgColor="#2979ff"
    iconStyle="color: #fff"
></u-number-box>
```

### [#](#自定义-slot) 自定义 slot

```
<template>
    <u-number-box v-model="value">
        <view
            slot="minus"
            class="minus"
        >
            <u-icon
                name="minus"
                size="12"
            ></u-icon>
        </view>
        <text
            slot="input"
            style="width: 50px;text-align: center;"
            class="input"
        >{{value}}</text>
        <view
            slot="plus"
            class="plus"
        >
            <u-icon
                name="plus"
                color="#FFFFFF"
                size="12"
            ></u-icon>
        </view>
    </u-number-box>
</template>

<script>
export default {
    data(){
        return {
            value:1
        }
    }
}
</script>

<style lang="scss">
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;

		display: flex;

		justify-content: center;
		align-items: center;
	}
</style>

```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/numberBox/numberBox.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/numberBox/numberBox.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| name | 步进器标识符，在change回调返回 | String | Number | \- | \- |
| value | 用于双向绑定的值，初始化时设置设为默认min值(最小值) | String | Number | 1 | \- |
| min | 用户可输入的最小值 | String | Number | 1 | \- |
| max | 用户可输入的最大值 | String | Number | `Number.MAX_SAFE_INTEGER` | \- |
| step | 步长，每次加或减的值， 支持小数值，如需小数 | String | Number | 1 | \- |
| integer | 是否只能输入正整数 | Boolean | false | true |
| disabled | 是否禁用操作，包括输入框，加减按钮 | Boolean | false | true |
| disabledInput | 是否禁止输入框 | Boolean | false | true |
| asyncChange | 是否开启异步变更，开启后需要手动控制输入值 | Boolean | false | true |
| inputWidth | 输入框宽度，单位px | String | Number | 35 | \- |
| showMinus | 是否显示减少按钮 | Boolean | true | false |
| showPlus | 是否显示增加按钮 | Boolean | true | false |
| decimalLength | 显示的小数位数 | String | Number | \- | \- |
| longPress | 是否允许长按进行加减 | Boolean | true | false |
| color | 输入框文字和加减按钮图标的颜色 | String | #323233 | \- |
| buttonSize | 按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致 | String | Number | 30 | \- |
| bgColor | 输入框和按钮的背景颜色 | String | #EBECEE | \- |
| cursorSpacing | 指定光标于键盘的距离，避免键盘遮挡输入框，单位px | String | Number | 100 | \- |
| disablePlus | 是否禁用增加按钮 | Boolean | false | true |
| disableMinus | 是否禁用减少按钮 | Boolean | false | true |
| iconStyle | 加减按钮图标的样式 | String | \- | \- |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| focus | 输入框得到焦点触发(按钮可点击情况下)，对象形式 | value：输入框当前值，name：步进器标识符 |
| blur | 输入框失去焦点时触发，对象形式 | value：输入框当前值，name：步进器标识符 |
| change | 输入框内容发生变化时触发，对象形式 | value：输入框当前值，name：步进器标识符 |
| overlimit | 超过范围阈值时触发 | type：（`minus`已达最小值，`plus`已达最大值） |

### [#](#slots) Slots

| 名称 | 说明 |
| --- | --- |
| minus | 减少按钮 |
| input | 输入框 |
| plus | 增加按钮 |

← [Search 搜索](https://www.uviewui.com/components/search.html) [Upload 上传](https://www.uviewui.com/components/upload.html) →




---
## [form/rate] rate
> 官方文档: https://www.uviewui.com/components/rate.html

---

## [#](#rate-评分) Rate 评分 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于满意度调查，星型评分的场景。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`count`参数设置总共有多少颗星星可选择
-   通过`v-model`双向绑定初始化时默认选中的星星数量

```
<template>
	<u-rate :count="count" v-model="value"></u-rate>
</template>

<script>
	export default {
		data() {
			return {
				count: 4,
				value: 2
			}
		}
	}
</script>
```

### [#](#自定义样式) 自定义样式

-   通过`active-color`设置选中的星星的颜色
-   通过`inactive-color`设置未选中时星星的颜色
-   通过`gutter`设置星星的间距，左右内边距各占`gutter`的一半

```
<u-rate active-color="#FA3534" inactive-color="#b2b2b2" gutter="20"></u-rate>
```

### [#](#自定义图标) 自定义图标

-   通过`active-icon`设置激活的图标
-   通过`inactive-icon`设置未激活的图标

下方示例为使用心形图标替代默认的星星图标：

```
<u-rate activeIcon="heart-fill" inactiveIcon="heart"></u-rate>
```

### [#](#最少选中的数量) 最少选中的数量

```
<u-rate :minCount="5"></u-rate>
```

### [#](#禁用状态) 禁用状态

禁用下，无法点击或者滑动选择，但是可以通过`value`设置默认选中的数量，禁用状态下用来展示分数，允许出现半星

```
<u-rate :value="3.7" disabled></u-rate>
```

### [#](#只读状态) 只读状态

只读下，无法点击或者滑动选择，但是可以通过`value`设置默认选中的数量，禁用状态下用来展示分数，允许出现半星

```
<u-rate :value="3.7" readonly></u-rate>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/rate/rate.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/rate/rate.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| value | 双向绑定选择星星的数量 | String | Number | 1 | \- |
| count | 最多可选的星星数量 | String | Number | 5 | \- |
| disabled | 是否禁止用户操作 | Boolean | false | true |
| readonly 2.0.30 | 是否只读 | Boolean | false | true |
| size | 星星的大小，单位rpx | String | Number | 18 | \- |
| inactiveColor | 未选中星星的颜色 | String | #b2b2b2 | \- |
| activeColor | 选中的星星颜色 | String | #FA3534 | \- |
| gutter | 星星之间的距离 | String | Number | 4 | \- |
| minCount | 最少选中星星的个数 | String | Number | 1 | \- |
| allowHalf | 是否允许半星选择 | Boolean | false | true |
| activeIcon | 选中时的图标名，只能为uView的内置图标 | String | star-fill | \- |
| inactiveIcon | 未选中时的图标名，只能为uView的内置图标 | String | star | \- |
| touchable | 是否可以通过滑动手势选择评分 | Boolean | true | false |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 选中的星星发生变化时触发 | value：当前选中的星星的数量，如果使用`v-model`双向绑定方式，无需监听此事件 |

← [DatetimePicker 选择器](https://www.uviewui.com/components/datetimePicker.html) [Search 搜索](https://www.uviewui.com/components/search.html) →




---
## [form/picker] picker
> 官方文档: https://www.uviewui.com/components/picker.html

---

## [#](#picker-选择器) Picker 选择器 [![](https://www.uviewui.com/common/to_api.png)](#api)

此选择器用于单列，多列，多列联动的选择场景。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`show`绑定一个布尔值变量，用于控制组件的弹出与收起。
-   都通过传入数组`columns`配置选择项。

```
<template>
	<view>
		<u-picker :show="show" :columns="columns"></u-picker>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
                columns: [
                    ['中国', '美国', '日本']
                ],
			}
		}
	}
</script>
```

### [#](#多列模式与多列联动) 多列模式与多列联动

此模式通过传入`columns`参数，此参数为二维数组，通过`change`事件完成联动操作。

```
<template>
    <u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
                columns: [
                    ['中国', '美国'],
                    ['深圳', '厦门', '上海', '拉萨']
				],
                columnData: [
                    ['深圳', '厦门', '上海', '拉萨'],
                    ['得州', '华盛顿', '纽约', '阿拉斯加']
                ]
			}
		},
		methods: {
            changeHandler(e) {
                const {
                    columnIndex,
                    value,
                    values,
                    index,

                    picker = this.$refs.uPicker
                } = e

                if (columnIndex === 0) {

                    picker.setColumnValues(1, this.columnData[index])
                }
            },

			confirm(e) {
                console.log('confirm', e)
                this.show = false
			}
		}
	}
</script>
```

### [#](#加载状态) 加载状态

由于需要多列联动，此模式和上面的"多列模式"基本相同，在加载之前将`loading`设置为`true`，数据获取完成之后再置为`false`即可。

```
<template>
    <u-picker :show="show" ref="uPicker" :loading="loading" :columns="columns" @change="changeHandler"></u-picker>
</template>

<script>
    export default {
        data() {
            return {
                show: true,
                loading: false,
                columns: [
                    ['中国', '美国'],
                    ['深圳', '厦门', '上海', '拉萨']
                ],
                columnData: [
                    ['深圳', '厦门', '上海', '拉萨'],
                    ['得州', '华盛顿', '纽约', '阿拉斯加']
                ]
            }
        },
        methods: {
            changeHandler(e) {
                const {
                    columnIndex,
                    index,

					picker = this.$refs.uPicker
                } = e
                if (columnIndex === 0) {
                    this.loading = true

                    uni.$u.sleep(1500).then(() => {
                        picker.setColumnValues(1, this.columnData[index])
                        this.loading = false
                    })
                }
            }
        }
    }
</script>
```

### [#](#自定义选项值) 自定义选项值

参数`columns`可以传入自定义选项值，可以通过`keyName`参数控制对应的显示属性。

```
<template>
    <u-picker :show="show" :columns="columns" keyName="label"></u-picker>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
                columns: [
                    [{
                        label: '雪月夜',

                        id: 2021

                    }, {
                        label: '冷夜雨',
                        id: 804
                    }]
                ],
			}
		}
	}
</script>
```

### [#](#默认值) 默认值

此组件的所有模式，都可以设置默认值，通过`defaultIndex`数组参数配置，数组元素的0表示选中每列的哪个值(从0开始)，下面分别对几种模式进行说明：

**注意：** `defaultIndex`数组的长度，必须与列数相同，否则无效。

1.  单列模式

如设置`defaultIndex`为`[1]`表示默认选中第2个(从0开始)，`[5]`表示选中第6个。

2.  多列模式

如设置`defaultIndex`为`[1, 3]`表示第一列默认选中第2个，第二列默认选中第4个。

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/picker/picker.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/picker/picker.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| show | 用于控制选择器的弹出与收起 | Boolean | false | true |
| showToolbar | 是否显示顶部的操作栏 | Boolean | true | false |
| title | 顶部中间的标题 | String | \- | \- |
| columns | 设置每一列的数据，见上方说明 | Array | \- | \- |
| loading | 加载状态 | Boolean | false | true |
| itemHeight | 各列中，单个选项的高度 | String | Number | 44 | \- |
| cancelText | 取消按钮的文字 | String | 取消 | \- |
| confirmText | 确认按钮的文字 | String | 确认 | \- |
| cancelColor | 取消按钮的颜色 | String | #909193 | \- |
| confirmColor | 确认按钮的颜色 | String | #3c9cff | \- |
| visibleItemCount | 每列中可见选项的数量 | String | Number | 5 | \- |
| keyName | 自定义需要展示的`text`属性键名 | String | text | \- |
| closeOnClickOverlay | 是否允许点击遮罩关闭选择器（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调） | Boolean | false | true |
| defaultIndex | 各列的默认索引 | Array | \- | \- |
| immediateChange 2.0.22 | 是否在手指松开时立即触发`change`事件。若不开启则会在滚动动画结束后触发`change`事件，只在微信`2.21.1`及以上有效 | Boolean | false | true |

### [#](#methods) Methods

| 名称 | 说明 |
| --- | --- |
| setIndexs | (index, setLastIndex) 设置对应列的选择值 |
| setColumnValues | 多列联动时需要用到，见上方说明，注意`微信小程序`的特殊用法 |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| close | 关闭选择器时触发 | \- | \- |
| confirm | 点击确定按钮，返回当前选择的值 | Array: 见上方"回调参数"部分说明 | \- |
| change | 当选择值变化时触发 | Array: 见上方"回调参数"部分说明 | \- |
| cancel | 点击取消按钮 | \- | \- |

← [Keyboard 键盘](https://www.uviewui.com/components/keyboard.html) [DatetimePicker 选择器](https://www.uviewui.com/components/datetimePicker.html) →




---
## [form/datetimePicker] datetimePicker
> 官方文档: https://www.uviewui.com/components/datetimePicker.html

---

## [#](#datetimepicker-选择器) DatetimePicker 选择器 [![](https://www.uviewui.com/common/to_api.png)](#api)

此选择器用于时间日期

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`show`绑定一个布尔值变量，用于控制组件的弹出与收起。
-   通过`mode`配置选择何种日期格式。

```
<template>
	<view>
        <u-datetime-picker
                :show="show"
                v-model="value1"
                mode="datetime"
        ></u-datetime-picker>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
                value1: Number(new Date()),
			}
		}
	}
</script>
```

### [#](#年-月-日) 年 月 日

此模式通过`mode`设置为`date`。

```
<template>
    <view>
        <u-datetime-picker
                :show="show"
                v-model="value1"
                mode="date"
        ></u-datetime-picker>
        <u-button @click="show = true">打开</u-button>
    </view>
</template>

<script>
	export default {
        data() {
            return {
                show: false,
                value1: Number(new Date()),
            }
        }
	}
</script>
```

### [#](#格式化) 格式化

如有需要，可以通过`formatter`参数编写自定义格式化规则。

注意：

微信小程序不支持通过`props`传递函数参数，所以组件内部暴露了一个`setFormatter`方法用于设置格式化方法，注意在页面的`onReady`生命周期获取`ref`再操作。

```
<template>
    <view>
        <u-datetime-picker
			ref="datetimePicker"
			:show="show"
            v-model="value1"
			mode="datetime"
			:formatter="formatter"
        ></u-datetime-picker>
        <u-button @click="show = true">打开</u-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                value1: Number(new Date()),
            }
        },
		onReady() {

			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
        methods: {
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                }
                if (type === 'month') {
                    return `${value}月`
                }
                if (type === 'day') {
                    return `${value}日`
                }
                return value
            },
        },
    }
</script>
```

### [#](#限制最大最小值) 限制最大最小值

参数`minDate`和`maxDate`可以设置最大值和最小值（传入时间戳）。

```
<template>
    <view>
        <u-datetime-picker
                :show="show"
                v-model="value1"
                :minDate="1587524800000"
                :maxDate="1786778555000"
                mode="datetime"
        ></u-datetime-picker>
        <u-button @click="show = true">打开</u-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                value1: Number(new Date()),
            }
        }
    }
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/datetimePicker/datetimePicker.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/datetimePicker/datetimePicker.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| show | 用于控制选择器的弹出与收起 | Boolean | false | true |
| showToolbar | 是否显示顶部的操作栏 | Boolean | true | false |
| v-model | 绑定值 | String | Number | \- | \- |
| title | 顶部标题 | String | \- | \- |
| mode | 展示格式 | String | datetime | date为日期选择，time为时间选择，year-month为年月选择 |
| maxDate | 可选的最大时间（时间戳毫秒） | Number | 最大默认值为后10年 | \- |
| minDate | 可选的最小时间（时间戳毫秒） | Number | 最小默认值为前10年 | \- |
| minHour | 可选的最小小时，仅mode=time有效 | Number | 0 | \- |
| maxHour | 可选的最大小时，仅mode=time有效 | Number | 23 | \- |
| minMinute | 可选的最小分钟，仅mode=time有效 | Number | 0 | \- |
| maxMinute | 可选的最大分钟，仅mode=time有效 | Number | 59 | \- |
| filter | 选项过滤函数 | Function | null | \- |
| formatter | 输入过滤或格式化函数(如需兼容微信小程序，则只能通过`setFormatter`方法) | Function | null | \- |
| loading | 是否显示加载中状态 | Boolean | false | true |
| itemHeight | 各列中，单个选项的高度 | String | Number | 44 | \- |
| cancelText | 取消按钮的文字 | String | 取消 | \- |
| confirmText | 确认按钮的文字 | String | 确认 | \- |
| cancelColor | 取消按钮的颜色 | String | #909193 | \- |
| confirmColor | 确认按钮的颜色 | String | #3c9cff | \- |
| visibleItemCount | 每列中可见选项的数量 | String | Number | 5 | \- |
| closeOnClickOverlay | 是否允许点击遮罩关闭选择器（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调） | Boolean | false | true |
| defaultIndex | 各列的默认索引 | Array | \[\] | \- |
| immediateChange 2.0.38 | 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。 | Boolean | false | true |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| close | 关闭选择器时触发 | \- | \- |
| confirm | 点击确定按钮时触发 | value:返回所选时间戳，mode:当前模式 | \- |
| change | 当选择值变化时触发 | value:返回所选时间戳，mode:当前模式 | \- |
| cancel | 点击取消按钮 | \- | \- |

### [#](#methods) Methods

| 方法名 | 说明 |
| --- | --- |
| setFormatter | 为兼容微信小程序而暴露的内部方法，见上方说明 |

← [Picker 选择器](https://www.uviewui.com/components/picker.html) [Rate 评分](https://www.uviewui.com/components/rate.html) →




---
## [form/calendar] calendar
> 官方文档: https://www.uviewui.com/components/calendar.html

---

## [#](#calendar-日历) Calendar 日历 [![](https://www.uviewui.com/common/to_api.png)](#api)

此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。

**注意：** 此组件与[Picker 选择器](https://www.uviewui.com/components/picker.html)的日期选择模式有一定的重合之处，区别在于本组件为更专业的日期选择场景，能选择日期范围等。 另外`Picker`组件的日期模式可以配置更多的参数，如时、分、秒等，可以根据不同的使用场景进行选择。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`show`绑定一个布尔变量用于打开或收起日历弹窗。
-   通过`mode`参数指定选择日期模式，包含单选/多选/范围选择。

```
<template>
	<view>
		<u-calendar :show="show"></u-calendar>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
			}
		}
	}
</script>
```

### [#](#日历模式) 日历模式

-   `mode`为`single`只能选择单个日期
-   `mode`为`multiple`可以选择多个日期
-   `mode`为`range`可以选择日期范围

### [#](#单个日期模式) 单个日期模式

选择日期后，需要点击底部的`确定`按钮才能触发回调事件，回调参数为一个数组，有如下属性：

```
["2021-07-01"]
```

示例代码：

```
<template>
	<u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'single'
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>
```

### [#](#多个日期模式) 多个日期模式

选择日期后，需要点击底部的`确定`按钮才能触发回调事件，回调参数为一个数组，有如下属性：

```
 ["2021-07-27", "2021-07-29", "2021-07-30"]
```

示例代码：

```
<template>
	<u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'multiple'
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>
```

### [#](#日期范围模式) 日期范围模式

此模式用于选择一个日期范围，比如住酒店的入住到离店的日期范围，

此模式的返回参数如下：

```
["2021-07-27", "2021-07-28", "2021-07-29", "2021-07-30", "2021-07-31"]
```

示例代码：

```
<template>
	<u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'range'
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>
```

### [#](#自定义主题颜色) 自定义主题颜色

组件可传入`color`参数，更改组件主题色

示例代码：

```
<template>
	<u-calendar :show="show"
    color="#f56c6c" :mode="mode" @confirm="confirm"></u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'range'
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			}
		}
	}
</script>
```

### [#](#自定义文案) 自定义文案

组件可以通过`formatter`以函数的方式定义日期文案

注意：

微信小程序不支持通过`props`传递函数参数，所以组件内部暴露了一个`setFormatter`方法用于设置格式化方法，注意在页面的`onReady`生命周期获取`ref`再操作。

```
<template>
	<u-calendar
        startText="住店"
        endText="离店"
        confirmDisabledText="请选择离店日期"
        :formatter="formatter"
        :show="show"
        :mode="mode"
        @confirm="confirm"
		ref="calendar"
	>
    </u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'range'
			}
		},
		onReady() {

			this.$refs.calendar.setFormatter(this.formatter)
		},
		methods: {
			confirm(e) {
				console.log(e);
			},
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if(day.month == month && day.day == date + 3)
				{
					day.bottomInfo = '有优惠'
					day.dot = true
				}
				return day
		    }
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>
```

### [#](#日期最大范围) 日期最大范围

组件可以通过`maxDate`定义日期文案

```
<template>
	<u-calendar
        :maxDate="maxDate"
        :show="show"
        @confirm="confirm">
	</u-calendar>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				show: true,
				maxDate: `${year}-${month}-${date + 10}`,
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>
```

### [#](#是否显示农历) 是否显示农历

组件可以通过`showLunar`定义是否显示农历

```
<template>
	<u-calendar
        showLunar
        :show="show"
        @confirm="confirm">
	</u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>
```

### [#](#默认日期) 默认日期

组件可以通过`defaultDate`定义默认日期

```
<template>
	<u-calendar
        :defaultDate="defaultDateMultiple"
        :show="show"
        mode="multiple"
        @confirm="confirm">
	</u-calendar>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				show: true,
				defaultDateMultiple: [`${year}-${month}-${date}`, `${year}-${month}-${date + 1}`, `${year}-${month}-${date + 2}`],
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/calendar/calendar.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/calendar/calendar.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| title | 标题内容 | String | 日期选择 | \- |
| showTitle | 是否显示标题 | Boolean | true | false |
| showSubtitle | 是否显示副标题 | Boolean | true | false |
| mode | 日期类型选择 | String | single | multiple-可以选择多个日期，range-选择日期范围（多个月需配合`monthNum`属性使用） |
| startText | mode=range时，第一个日期底部的提示文字 | String | 开始 | \- |
| endText | mode=range时，最后一个日期底部的提示文字 | String | 结束 | \- |
| customList | 自定义列表 | Array | \[\] | \[\] |
| color | 主题色，对底部按钮和选中日期有效 | String | #3c9cff | \- |
| minDate | 最小的可选日期 | Number | String | 0 | \- |
| maxDate | 最大可选日期 | Number | String | 0 | \- |
| defaultDate | 默认选中的日期，mode为multiple或range是必须为数组格式 | Array | String | Date | null | \- |
| maxCount | mode=multiple时，最多可选多少个日期 | Number | String | Number.MAX\_SAFE\_INTEGER | \- |
| rowHeight | 日期行高 | Number |String | 56 | \- |
| formatter | 日期格式化函数(如需兼容微信小程序，则只能通过`setFormatter`方法) | Function | null | \- |
| showLunar | 是否显示农历 | Boolean | false | true |
| showMark | 是否显示月份背景色 | Boolean | true | false |
| confirmText | 确定按钮的文字 | String | 确定 | \- |
| confirmDisabledText | 确认按钮处于禁用状态时的文字 | String | 确定 | \- |
| show | 是否显示日历弹窗 | Boolean | false | true |
| closeOnClickOverlay | 是否允许点击遮罩关闭日历 （注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调） | Boolean | false | true |
| readonly | 是否为只读状态，只读状态下禁止选择日期 | Boolean | false | true |
| maxRange | 日期区间最多可选天数，默认无限制，mode = range时有效 | Number | String | 无限制 | \- |
| rangePrompt | 范围选择超过最多可选天数时的提示文案，mode = range时有效 | String | null | 选择天数不能超过 xx 天 | \- |
| showRangePrompt | 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 | Boolean | true | false |
| allowSameDay | 是否允许日期范围的起止时间为同一天，mode = range时有效 | Boolean | false | true |
| round | 圆角值，默认无圆角 | String | Number | 0 | \- |
| monthNum 2.0.17 | 最大展示的月份数量 | String | Number | 3 | \- |

### [#](#methods) Methods

| 方法名 | 说明 |
| --- | --- |
| setFormatter | 为兼容微信小程序而暴露的内部方法，见上方说明 |

### [#](#event) Event

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | 选择日期相关的返回参数 |
| close | 日历关闭时触发 | 可定义页面关闭时的回调事件 |

← [Form 表单](https://www.uviewui.com/components/form.html) [Keyboard 键盘](https://www.uviewui.com/components/keyboard.html) →




---
## [form/upload] upload
> 官方文档: https://www.uviewui.com/components/upload.html

---

## [#](#upload-上传) Upload 上传 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件用于上传图片场景

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基础用法) 基础用法

-   可以通过设置`fileList`参数(数组，元素为对象)，显示预置的图片。其中元素的`url`属性为图片路径

```
<template>
  <u-upload
    :fileList="fileList1"
    @afterRead="afterRead"
    @delete="deletePic"
    name="1"
    multiple
    :maxCount="10"
  ></u-upload>
</template>

<script>
  export default {
    data() {
      return {
        fileList1: [],
      };
    },
    methods: {

      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1);
      },

      async afterRead(event) {

        let lists = [].concat(event.file);
        let fileListLen = this[`fileList${event.name}`].length;
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: "uploading",
            message: "上传中",
          });
        });
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url);
          let item = this[`fileList${event.name}`][fileListLen];
          this[`fileList${event.name}`].splice(
            fileListLen,
            1,
            Object.assign(item, {
              status: "success",
              message: "",
              url: result,
            })
          );
          fileListLen++;
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: "http://192.168.2.21:7001/upload",
            filePath: url,
            name: "file",
            formData: {
              user: "test",
            },
            success: (res) => {
              setTimeout(() => {
                resolve(res.data.data);
              }, 1000);
            },
          });
        });
      },
    },
  };
</script>
```

### [#](#上传视频) 上传视频

-   通过设置`accept='video'`属性，将上传改为视频上传。

```
<u-upload
  :fileList="fileList2"
  @afterRead="afterRead"
  @delete="deletePic"
  name="2"
  multiple
  :maxCount="10"
  accept="video"
></u-upload>

data(){ return{ fileList2: [], } }
```

### [#](#文件预览) 文件预览

-   通过设置`:previewFullImage="true"`属性，达到文件预览的目的。

```
<u-upload
  :fileList="fileList3"
  @afterRead="afterRead"
  @delete="deletePic"
  name="3"
  multiple
  :maxCount="10"
  :previewFullImage="true"
></u-upload>

data(){ return{ fileList3: [{ url: 'https://uviewui.com/swiper/1.jpg', }], } }
```

### [#](#隐藏上传按钮) 隐藏上传按钮

-   上传数量等于`maxCount`所规定的数据时，隐藏上传按钮。

```
<u-upload
  :fileList="fileList4"
  @afterRead="afterRead"
  @delete="deletePic"
  name="4"
  multiple
  :maxCount="2"
></u-upload>

data(){ return{ fileList4: [{ url: 'https://uviewui.com/swiper/1.jpg', }, { url:
'https://uviewui.com/swiper/1.jpg', } ], } }
```

### [#](#限制上传数量) 限制上传数量

-   同上，规定`maxCount`的数据时。

```
<u-upload
  :fileList="fileList5"
  @afterRead="afterRead"
  @delete="deletePic"
  name="5"
  multiple
  :maxCount="3"
></u-upload>

data(){ return{ fileList5: [], } }
```

### [#](#自定义上传样式) 自定义上传样式

-   添加`image`以自定义上传样式，达到身份证，银行卡等不同场景需求。

```
<u-upload
  :fileList="fileList6"
  @afterRead="afterRead"
  @delete="deletePic"
  name="6"
  multiple
  :maxCount="1"
  width="250"
  height="150"
>
  <image
    src="https://uviewui.com/demo/upload/positive.png"
    mode="widthFix"
    style="width: 250px;height: 150px;"
  ></image>
</u-upload>

data(){ return{ fileList6: [], } }
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/upload/upload.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/upload/upload.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| accept | 接受的文件类型，`file`只支持`H5`（只有微信小程序才支持把 accept 配置为 all、media） | String | image | all | media | image | file | video |
| capture | 图片或视频拾取模式，当 accept 为 image 类型时，设置 capture 为 camera 可以直接调起摄像头 | String | Array | \['album', 'camera'\] | \- |
| compressed | 当 accept 为 video 时生效，是否压缩视频，默认为 true | Boolean | true | false |
| camera | 当 accept 为 video 时生效，可选值为 back 或 front | String | back | \- |
| maxDuration | 当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒 | Number | 60 | true |
| uploadIcon | 上传区域的图标，只能内置图标 | String | camera-fill | \- |
| uploadIconColor | 上传区域的图标的颜色 | String | #D3D4D6 | \- |
| useBeforeRead | 是否启用(显示/隐藏)组件 | Boolean | false | true |
| previewFullImage | previewFullImage | Boolean | true | false |
| maxCount | 最大选择图片的数量 | String | Number | 52 | \- |
| disabled | 是否启用(显示/隐藏)组件 | Boolean | false | true |
| imageMode | 预览上传的图片时的裁剪模式，和 image 组件 mode 属性一致 | String | aspectFill | \- |
| name | 标识符，可以在回调函数的第二项参数中获取 | String | file | \- |
| sizeType | original 原图，compressed 压缩图，默认二者都有，H5 无效 | Array<String> | \['original', 'compressed'\] | \- |
| multiple | 是否开启图片多选，部分安卓机型不支持 | Boolean | false | true |
| deletable | 是否显示删除图片的按钮 | Boolean | true | false |
| maxSize | 选择单个文件的最大大小，单位 B(byte)，默认不限制 | String | Number | Number.MAX\_VALUE | \- |
| fileList | 显示已上传的文件列表 | Array | \- | \- |
| uploadText | 上传区域的提示文字 | String | \- | \- |
| width | 内部预览图片区域和选择图片按钮的区域宽度，单位 rpx，不能是百分比，或者`auto` | String | Number | 80 | \- |
| height | 内部预览图片区域和选择图片按钮的区域高度，单位 rpx，不能是百分比，或者`auto` | String | Number | 80 | \- |
| previewImage | 是否在上传完成后展示预览图 | Boolean | true | false |

### [#](#methods) Methods

此方法如要通过 ref 手动调用

| 名称 | 说明 |
| --- | --- |
| afterRead | 读取后的处理函数 |
| beforeRead | 读取前的处理函数 |

### [#](#slot) Slot

slot 中您可以内置任何您所需要的样式。

| 名称 | 说明 |
| --- | --- |
| \-(default) | 自定义上传样式 |

### [#](#events) Events

回调参数中的`event`参数，为当前删除元素的所有信息，`index`为当前操作的图片的索引，`name`为删除名称，`file`包含删除的 url 信息

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| afterRead | 读取后的处理函数 | (file, lists, name)，错误信息 |
| beforeRead | 读取前的处理函数 | (file, lists, name)，错误信息 |
| oversize | 图片大小超出最大允许大小 | (file, lists, name), name 为通过`props`传递的`index`参数 |
| clickPreview | 全屏预览图片时触发 | (url, lists, name)，url 为当前选中的图片地址，index 为通过`props`传递的`index`参数 |
| delete | 删除图片 | (event), 回调 event 中包含`index，file，name` |

← [NumberBox 步进器](https://www.uviewui.com/components/numberBox.html) [Code 验证码输入框](https://www.uviewui.com/components/code.html) →




---
## [form/search] search
> 官方文档: https://www.uviewui.com/components/search.html

---

## [#](#search-搜索) Search 搜索 [![](https://www.uviewui.com/common/to_api.png)](#api)

提示

由于右侧的演示是通过iframe引入的，缺少移动端的@touchstart事件，故清除控件无效，请在真机演示中查看效果。

搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`placeholder`参数设置占位内容
-   通过`v-model`双向绑定一个**变量**值，设置初始化时搜索框的值，如果初始内容为空，那么请绑定一个值为空字符的变量。

**说明：** 因为是双向绑定的，所以当组件内容输入框内容变化时，也会实时的反映到绑定的`keyword`变量，这意味着，您**无需**监听`change`事件， 也能实时的得知输入框的内容。

```
<template>
	<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '遥看瀑布挂前川'
			}
		}
	}
</script>
```

### [#](#设置输入框形状) 设置输入框形状

通过`shape`设置输入框两端的形状，`square`\-方形带圆角，`round`(默认)-半圆形

```
<u-search shape="round"></u-search>
```

### [#](#是否开启清除控件) 是否开启清除控件

`clearabled`(默认为`true`)设置为`true`的话，输入框有内容时，右边会显示一个清除的图标

```
<u-search :clearabled="true"></u-search>
```

### [#](#是否开启右边控件) 是否开启右边控件

该控件为类似按钮形式，可以设置为"搜索"或者"取消"等内容，如果开启动画效果，用户确认搜索后，该控件会自动消失

-   `showAction`配置是否开启右边按钮控件
-   `actionText`配置控件内容
-   `animation`(默认为`false`)设置为`true`的话，失去焦点，或者点击控件按钮时，控件自动消失，并且带有动画效果

说明

1.  如果不想点击右侧控件时自动消失，请把`animation`设置为`false`
2.  右侧控件的默认文字为"搜索"(它本意为控件，碰巧内容为"搜索"二字，并非说它就是一个搜索按钮)，点击它的时候触发的是`custom`事件，而不是`search`事件

```
<u-search :showAction="true" actionText="搜索" :animation="true"></u-search>
```

### [#](#自定义样式) 自定义样式

-   通过`inputAlign`设置输入框内容的对其方式，和css的`text-align`同理
-   通过`borderColor`设置整个搜索组件的边框，只要配置了颜色，才会出现边框
-   通过`height`设置组件高度
-   通过`disabled`设置是否禁用输入框
-   通过`bgColor`设置是搜索组件背景颜色

```
<u-search inputAlign="center" height="70"></u-search>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/search/search.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/search/search.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| v-model | 双向绑定输入框搜索值 | String | \- | \- |
| shape | 搜索框形状，round-圆形，square-方形 | String | round | square |
| bgColor | 搜索框背景颜色 | String | #f2f2f2 | \- |
| placeholder | 占位文字内容 | String | 请输入关键字 | \- |
| clearabled | 是否启用清除控件 | Boolean | true | false |
| focus | 是否自动获得焦点 | Boolean | false | true |
| showAction | 是否显示右侧控件(右侧的"搜索"按钮) | Boolean | true | false |
| actionStyle | 右侧控件的样式，对象形式 | Object | \- | \- |
| actionText | 右侧控件文字 | String | 搜索 | \- |
| inputAlign | 输入框内容水平对齐方式 | String | left | center / right |
| inputStyle | 自定义输入框样式，对象形式 | Object | \- | \- |
| disabled | 是否启用输入框 | Boolean | false | true |
| borderColor | 边框颜色，配置了颜色，才会有边框 | String | transparent | \- |
| searchIconColor | 搜索图标的颜色，默认同输入框字体颜色 | String | #909399 | \- |
| searchIconSize | 搜索图标的大小 | Number | 22 | \- |
| color | 输入框字体颜色 | String | #606266 | \- |
| placeholderColor | placeholder的颜色 | String | #909399 | \- |
| searchIcon | 输入框左边的图标，可以为uView图标名称或图片路径 | String | search | \- |
| margin | 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法 | String | 0 | \- |
| animation | 是否开启动画，见上方说明 | Boolean | false | true |
| value | 输入框初始值 | String | \- | \- |
| maxlength | 输入框最大能输入的长度，-1为不限制长度 | String | Number | \-1 | \- |
| height | 输入框高度，单位rpx | String | Number | 64 | \- |
| label | 搜索左侧文本信息 | String | Number | \- | \- |

### [#](#events) Events

您可以通过监听`change`事件，在回调中将返回的结果绑定一个变量去获得用户的输入内容。
但如"基本使用"中的说明一样，您双向绑定了一个变量后，无需监听`change`事件也是可以的。

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| change | 输入框内容发生变化时触发 | value：输入框的值 | \- |
| search | 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发 | value：输入框的值 | \- |
| custom | 用户点击右侧控件时触发 | value：输入框的值 | \- |
| blur | 输入框失去焦点时触发 | value：输入框的值 | \- |
| focus | 输入框获得焦点时触发 | value：输入框的值 | \- |
| clear | 配置了`clearabled`后，清空内容时会发出此事件 | \- | \- |
| click | `disabled`为`true`时，点击输入框，发出此事件，用于跳转搜索页 | \- | \- |
| clickIcon | 左侧icon点击时候时触发 | \- | \- |

← [Rate 评分](https://www.uviewui.com/components/rate.html) [NumberBox 步进器](https://www.uviewui.com/components/numberBox.html) →




---
## [form/keyboard] keyboard
> 官方文档: https://www.uviewui.com/components/keyboard.html

---

## [#](#keyboard-键盘) Keyboard 键盘 [![](https://www.uviewui.com/common/to_api.png)](#api)

此为uView自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

通过`mode`参数定义键盘的类型，`show`绑定一个值为布尔值的变量控制键盘的弹出与收起：

-   mode = car (默认值)为汽车键盘，此时顶部工具条中间的提示文字为"车牌号键盘"
-   mode = number为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"
-   mode = card 为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"

```
<template>
	<view>
		<u-keyboard ref="uKeyboard" mode="car" :show="show"></u-keyboard>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		}
	}
</script>
```

### [#](#隐藏键盘-符号) 隐藏键盘"."符号

-   通过`dotDisabled`参数配置是否显示键盘"."符号，默认为`false`，只在"mode = number"时生效

```
<u-keyboard mode="number" :dotDisabled="true"></u-keyboard>
```

### [#](#是否打乱按键的顺序) 是否打乱按键的顺序

如果配置`random`参数为`true`的话，**每次**打开键盘，按键的顺序都是随机的，该功能默认是关闭的

```
<u-keyboard ref="uKeyboard" mode="number" :random="true" :show="show"></u-keyboard>
```

### [#](#如何控制键盘的打开和关闭) 如何控制键盘的打开和关闭？

```
<template>
	<u-keyboard mode="number" :show="show"></u-keyboard>
</template>

<script>
	export default {
		onReady() {

			this.show = true;
		},
		onLoad() {

		}
	}
</script>
```

### [#](#如何监听键盘按键被点击) 如何监听键盘按键被点击？

-   输入值是通过组件的`change`事件实现的，组件内部每个按键被点击的时候，组件就会发出一个`change`事件，回调参数为点击的按键的值。
-   通过`backspace`事件监听键盘退格键的点击，通过修改父组件的值实现退格的效果，见下方示例

注意：点击退格键(也即删除键)不会触发`change`事件

```
<template>
	<u-keyboard mode="number" @change="valChange" @backspace="backspace" :show="show"></u-keyboard>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				show: false
			}
		},
		methods: {

			valChange(val) {

				this.value += val;
				console.log(this.value);
			},

			backspace() {

				if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);
				console.log(this.value);
			}
		}
	}
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/keyboard/keyboard.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/keyboard/keyboard.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| mode | 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘 | String | car | number / card |
| dotDisabled | 是否显示"."按键，只在mode=number时有效 | Boolean | false | true |
| tooltip | 是否显示键盘顶部工具条 | Boolean | true | false |
| showTips | 是否显示工具条中间的提示 | Boolean | true | false |
| tips | 工具条中间的提示文字，见上方`基本使用`的说明 | String | \- | \- |
| showCancel | 是否显示工具条左边的"取消"按钮 | Boolean | true | false |
| showConfirm | 是否显示工具条右边的"完成"按钮 | Boolean | true | false |
| random | 是否打乱键盘按键的顺序 | Boolean | false | true |
| safeAreaInsetBottom | 是否开启[底部安全区适配](https://www.uviewui.com/components/safeAreaInset.html#%E5%85%B3%E4%BA%8Euview%E6%9F%90%E4%BA%9B%E7%BB%84%E4%BB%B6safe-area-inset%E5%8F%82%E6%95%B0%E7%9A%84%E8%AF%B4%E6%98%8E) | Boolean | false | true |
| closeOnClickOverlay | 是否允许点击遮罩收起键盘（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调） | Boolean | true | false |
| show | 控制键盘的弹出与收起 | Boolean | true | false |
| overlay | 是否显示遮罩 | Boolean | true | false |
| zIndex | 弹出键盘的`z-index`值 | String | Number | 1075 | \- |
| confirmText | 确认按钮的文字 | String | 确认 | \- |
| cancelText | 取消按钮的文字 | String | 取消 | \- |
| customStyle | 自定义样式，对象形式 | Object | {} | \- |
| autoChange | `mode`为`car`下，输入文字后，是否自动切换为字母模式 | Boolean | false | true |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| change | 按键被点击(不包含退格键被点击) | 按键的值，见上方说明和示例 | \- |
| close | 键盘关闭 | \- | \- |
| confirm | 键盘顶部工具条右边的"完成"按钮被点击 | \- | \- |
| cancel | 键盘顶部工具条左边的"取消"按钮被点击 | \- | \- |
| backspace | 键盘退格键被点击 | \- | \- |

### [#](#slot) Slot

| 名称 | 说明 | 版本 |
| --- | --- | --- |
| default | 内容将会显示键盘的工具条上面，可以结合[MessageInput 验证码输入](https://www.uviewui.com/components/messageInput.html)组件实现类似支付宝输入密码时，上方显示输入内容的功能 | \- |

← [Calendar 日历](https://www.uviewui.com/components/calendar.html) [Picker 选择器](https://www.uviewui.com/components/picker.html) →




---
## [form/code] code
> 官方文档: https://www.uviewui.com/components/code.html

---

## [#](#code-验证码输入框) Code 验证码输入框 [![](https://www.uviewui.com/common/to_api.png)](#api)

考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

通过ref获取组件对象，再执行后面的操作，见下方示例。

1.  通过`seconds`设置需要倒计的秒数(默认`60`)
2.  通过ref调用组件内部的`start`方法，开始倒计时
3.  通过监听`change`事件(从开始到结束之间，每秒触发一次)获得提示的文字，可能值如"获取验证码|12秒后重新获取|重新获取"，可以自定义

注意：用户可能在倒计时的过程中点击获取验证码的按钮，组件内部提供了通过ref获取的`canGetCode`变量，在倒计时 过程中，该值为`false`，如果为`false`应该给予提示并不要再次向后端请求验证码，如果为`true`，则为获取验证码 之前，或者倒计结束之后，可以再次向后端请求验证码。

以下为完整示例，见如下：

```
<template>
	<view class="wrap">
		<u-toast ref="uToast"></u-toast>
		<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
		@change="codeChange"></u-code>
		<u-button @tap="getCode">{{tips}}</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',

				seconds: 10,
			}
		},
		onReady() {

		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {

					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();

						uni.$u.toast('验证码已发送');

						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		padding: 24rpx;
	}
</style>
```

### [#](#自定义提示语) 自定义提示语

组件内部有内置的提示语，如获取验证码前的提示语为"获取验证码"，用户可以通过参数配置自定义的提示：

-   获取前，参数为`start-text`，默认值为"获取验证码"
-   倒计时期间，参数为`change-text`，默认为"X秒重新获取"，这里的"x"(大小写均可)，将会被倒计的秒数替代
-   倒计时结束，参数为`end-text`，默认值为"重新获取"

### [#](#保持倒计时) 保持倒计时

一般情况下，在H5刷新浏览器，或者各端返回再进入时，倒计时会消失，导致用户可以再次尝试获取验证码，虽然后端还会对此进行进一步的判断。
对于这种情况，uView给出了一个`keep-running`参数(默认为`false`)，为`true`的时候，即使刷新浏览器，或者返回上一个页面， 倒计时依然会继续(如果还在倒计时间内的话)。

**注意：** 如果您的一个页面或者多个页面同时使用了多个此组件，为了防止多个组件之间，保存在本地的多个继续倒计时的变量之间互相干扰，可以配置 各个组件的`unique-key`为一个不重复的字符串，以作区分：

```
/* A.vue */
<u-verification-code unique-key="page-a"></u-verification-code>

/* B.vue */
<u-verification-code unique-key="page-b"></u-verification-code>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/code/code.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/code/code.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| seconds | 倒计时所需的秒数 | Number | String | 60 | \- |
| startText | 开始前的提示语，见上方说明 | String | 获取验证码 | \- |
| changeText | 倒计时期间的提示语，必须带有字母"x"，见上方说明 | String | X秒重新获取 | \- |
| endText | 倒计结束的提示语，见上方说明 | String | 重新获取 | \- |
| keepRunning | 是否在H5刷新或各端返回再进入时继续倒计时 | Boolean | false | true |
| uniqueKey | 多个组件之间继续倒计时的区分`key`，见上方说明 | String | \- | \- |

### [#](#methods) Methods

需要通过ref获取验证码组件才能调用，见上方"基本使用"说明

| 名称 | 说明 |
| --- | --- |
| start | 开始倒计时 |
| reset | 结束当前正在进行中的倒计时，设置组件为可以重新获取验证码的状态 |

### [#](#event) Event

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| change | 倒计时期间，每秒触发一次 | text: 当前剩余多少秒的状态，见上方说明 | \- |
| start | 开始倒计时触发 | \- | \- |
| end | 结束倒计时触发 | \- | \- |

← [Upload 上传](https://www.uviewui.com/components/upload.html) [Input 输入框](https://www.uviewui.com/components/input.html) →




---

<!-- ============================================ -->
<!-- 类别: 数据展示 -->
<!-- ============================================ -->

## [display/grid] grid
> 官方文档: https://www.uviewui.com/components/grid.html

---

## [#](#grid-宫格布局) Grid 宫格布局 [![](https://www.uviewui.com/common/to_api.png)](#api)

宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件([badge](https://www.uviewui.com/components/badge.html))，或者图标等，也可以扩展为左右滑动的轮播形式。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   该组件外层为`u-grid`组件包裹，通过`col`设置内部宫格的列数
-   内部通过`u-grid-item`组件的`slot`设置宫格的内容
-   如果不需要宫格的边框，可以设置`border`为`false`

```
<template>
    <view>
        <u-grid
                :border="false"
                @click="click"
        >
            <u-grid-item
                    v-for="(baseListItem,baseListIndex) in baseList"
                    :key="baseListIndex"
            >
                <u-icon
                        :customStyle="{paddingTop:20+'rpx'}"
                        :name="baseListItem.name"
                        :size="22"
                ></u-icon>
                <text class="grid-text">{{baseListItem.title}}</text>
            </u-grid-item>
        </u-grid>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                baseList: [{
                    name: 'photo',
                    title: '图片'
                    },
                    {
                        name: 'lock',
                        title: '锁头'
                    },
                    {
                        name: 'star',
                        title: '星星'
                    },
                ]
            }
        },
        methods: {
            click(name) {
                this.$refs.uToast.success(`点击了第${name}个`)
            }
        }
    }
</script>

<style lang="scss">
    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;

        box-sizing: border-box;

    }
</style>
```

### [#](#绑定点击事件-自定义列数) 绑定点击事件&自定义列数

```
<template>
    <view>
        <u-grid
                :border="false"
                col="4"
        >
            <u-grid-item
                    v-for="(listItem,listIndex) in list"
                    :key="listIndex"
            >
                <u-icon
                        :customStyle="{paddingTop:20+'rpx'}"
                        :name="listItem.name"
                        :size="22"
                ></u-icon>
                <text class="grid-text">{{listItem.title}}</text>
            </u-grid-item>
        </u-grid>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    name: 'photo',
                    title: '图片'
                    },
                    {
                        name: 'lock',
                        title: '锁头'
                    },
                    {
                        name: 'star',
                        title: '星星'
                    },
                    {
                        name: 'hourglass',
                        title: '沙漏'
                    },
                    {
                        name: 'home',
                        title: '首页'
                    },
                    {
                        name: 'star',
                        title: '音量'
                    },
                ],
            }
        },
        methods: {
            click(name) {
                this.$refs.uToast.success(`点击了第${name}个`)
            }
        }
    }
</script>

<style lang="scss">
    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;

        box-sizing: border-box;

    }
</style>
```

### [#](#实现宫格的左右滑动) 实现宫格的左右滑动

结合uni的swiper组件可以实现宫格的左右滑动，因为`swiper`特性的关系，请指定`swiper`的高度 ，否则`swiper`的高度不会被内容撑开，可以自定义`swiper`的指示器，达到更高的灵活度

```
<template>
    <view>
        <swiper
                :indicator-dots="true"
                class="swiper"
        >
            <swiper-item>
                <u-grid :border="true">
                    <u-grid-item
                            :customStyle="{width:220+'rpx',height:220+'rpx'}"
                            v-for="(item, index) in swiperList"
                            :index="index"
                            :key="index"
                    >
                        <u-icon
                                :customStyle="{paddingTop:20+'rpx'}"
                                :name="item"
                                :size="22"
                        ></u-icon>
                        <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
                    </u-grid-item>
                </u-grid>
            </swiper-item>
            <swiper-item>
                <u-grid :border="true">
                    <u-grid-item
                            :customStyle="{width:220+'rpx',height:220+'rpx'}"
                            v-for="(item, index) in swiperList"
                            :index="index + 9"
                            :key="index"
                    >
                        <u-icon
                                :customStyle="{paddingTop:20+'rpx'}"
                                :name="item"
                                :size="22"
                        ></u-icon>
                        <text class="grid-text">{{ '宫格' + (index + 1) }}</text>
                    </u-grid-item>
                </u-grid>
            </swiper-item>
            <swiper-item>
                <u-grid :border="true">
                    <u-grid-item
                            :customStyle="{width:220+'rpx',height:220+'rpx'}"
                            v-for="(item, index) in swiperList"
                            :index="index + 18"
                            :key="index"
                    >
                        <u-icon
                                :customStyle="{paddingTop:20+'rpx'}"
                                :name="item"
                                :size="22"
                        ></u-icon>
                        <text class="grid-text">{{ "宫格" + (index + 1) }}</text>
                    </u-grid-item>
                </u-grid>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
	export default {
		data() {
			return {
                swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
			};
		}
	};
</script>

<style lang="scss">
    .swiper {
        height: 720rpx;
    }

    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;

        box-sizing: border-box;

    }
</style>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/grid/grid.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/grid/grid.nvue)

### [#](#api) API

### [#](#grid-props) Grid Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| col | 宫格的列数 | String | Number | 3 | \- |
| border | 是否显示宫格的边框 | Boolean | true | false |
| align | 宫格的对齐方式，用于控制只有一两个宫格时的对齐场景 | String | left | center / right |

### [#](#grid-item-props) Grid-item Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| name | 宫格的name | String | Number | \- | \- |
| bgColor | 宫格的背景颜色 | String | transparent(背景透明) | \- |

### [#](#grid-event) Grid Event

注意：请在`<u-grid></u-grid>`上监听此事件

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击宫格触发 | name |

### [#](#grid-item-event) Grid-item Event

注意：请在`<u-grid-item></u-grid-item>`上监听此事件

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击宫格触发 | name |

← [NoNetwork 无网络提示](https://www.uviewui.com/components/noNetwork.html) [Swiper 轮播图](https://www.uviewui.com/components/swiper.html) →




---
## [display/list] list
> 官方文档: https://www.uviewui.com/components/list.html

---

## [#](#list-列表) List 列表

该组件为高性能列表组件

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   配合组件`u-list-item`嵌套使用
-   参数`show-scrollbar`是否出现滚动条仅在 nvue 中有效
-   事件`@scrolltolower`滚动到底部触发事件

```
<template>
  <view class="u-page">
    <u-list @scrolltolower="scrolltolower">
      <u-list-item v-for="(item, index) in indexList" :key="index">
        <u-cell :title="`列表长度-${index + 1}`">
          <u-avatar
            slot="icon"
            shape="square"
            size="35"
            :src="item.url"
            customStyle="margin: -3px 5px -3px 0"
          ></u-avatar>
        </u-cell>
      </u-list-item>
    </u-list>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        indexList: [],
        urls: [
          "https://uviewui.com/album/1.jpg",
          "https://uviewui.com/album/2.jpg",
          "https://uviewui.com/album/3.jpg",
          "https://uviewui.com/album/4.jpg",
          "https://uviewui.com/album/5.jpg",
          "https://uviewui.com/album/6.jpg",
          "https://uviewui.com/album/7.jpg",
          "https://uviewui.com/album/8.jpg",
          "https://uviewui.com/album/9.jpg",
          "https://uviewui.com/album/10.jpg",
        ],
      };
    },
    onLoad() {
      this.loadmore();
    },
    methods: {
      scrolltolower() {
        this.loadmore();
      },
      loadmore() {
        for (let i = 0; i < 30; i++) {
          this.indexList.push({
            url: this.urls[uni.$u.random(0, this.urls.length - 1)],
          });
        }
      },
    },
  };
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/list/list.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/list/list.nvue)

### [#](#api) API

### [#](#list-props) List Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| showScrollbar | 控制是否出现滚动条，仅 nvue 有效 | Boolean | false | true |
| lowerThreshold | 距底部多少时触发 scrolltolower 事件 | String | Number | 50 | \- |
| upperThreshold | 距顶部多少时触发 scrolltoupper 事件，非 nvue 有效 | String | Number | 0 | \- |
| scrollTop | 设置竖向滚动条位置 | String | Number | 0 | \- |
| offsetAccuracy | 控制 onscroll 事件触发的频率，仅 nvue 有效 | String | Number | 10 | \- |
| enableFlex | 启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点，仅微信小程序有效 | Boolean | false | \- |
| pagingEnabled | 是否按分页模式显示 List，默认值 false | Boolean | false | \- |
| scrollable | 是否允许 List 滚动 | Boolean | true | \- |
| scrollIntoView | 值应为某子元素 id（id 不能以数字开头） | String | \- | \- |
| scrollWithAnimation | 在设置滚动条位置时使用动画过渡 | Boolean | false | \- |
| enableBackToTop | iOS 点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只对微信小程序有效 | Boolean | false | \- |
| height | 列表的高度 | String | Number | 0 | \- |
| width | 列表宽度 | String | Number | 0 | \- |
| preLoadScreen | 列表前后预渲染的屏数，1 代表一个屏幕的高度，1.5 代表 1 个半屏幕高度 | String | Number | 1 | \- |

### [#](#list-events) List Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| scroll | 滚动条滚动触发事件 | scrollTop: 滚动条位置 |
| scrolltolower | 滚动到底部触发事件 | \- |

### [#](#listitem-props) ListItem Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| anchor | 用于滚动到指定 item | String | Number | \- | \- |

← [Album 相册](https://www.uviewui.com/components/album.html) [LineProgress 线形进度条](https://www.uviewui.com/components/lineProgress.html) →




---
## [display/album] album
> 官方文档: https://www.uviewui.com/components/album.html

---

## [#](#album-相册) Album 相册 [![](https://www.uviewui.com/common/to_api.png)](#api)

本组件提供一个类似相册的功能，让开发者开发起来更加得心应手。减少重复的模板代码

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`urls`设置相册的图片地址，搭配 image 等做出更棒的效果！

```
<template>
  <view class="u-page">
    <view class="u-demo-block">
      <text class="u-demo-block__title">多图模式</text>
      <view class="u-demo-block__content">
        <view class="album">
          <view class="album__avatar">
            <image
              src="/static/uview/common/logo.png"
              mode=""
              style="width: 32px;height: 32px;"
            ></image>
          </view>
          <view class="album__content">
            <u--text text="uView UI" type="primary" bold size="17"></u--text>
            <u--text
              margin="0 0 8px 0"
              text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
            ></u--text>
            <u-album :urls="urls1" keyName="src2"></u-album>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        albumWidth: 0,
        urls1: [
          {
            src2: "https://uviewui.com/album/1.jpg",
          },
        ],
      };
    },
  };
</script>

<style lang="scss">
  .album {
    @include flex;
    align-items: flex-start;

    &__avatar {
      background-color: $u-bg-color;
      padding: 5px;
      border-radius: 3px;
    }

    &__content {
      margin-left: 10px;
      flex: 1;
    }
  }
</style>
```

### [#](#多图模式) 多图模式

-   通过`urls`传入更多的图片地址形成图片列表

```
<template>
  <view class="u-page">
    <view class="u-demo-block">
      <text class="u-demo-block__title">多图模式</text>
      <view class="u-demo-block__content">
        <view class="album">
          <view class="album__avatar">
            <image
              src="/static/uview/common/logo.png"
              mode=""
              style="width: 32px;height: 32px;"
            ></image>
          </view>
          <view class="album__content">
            <u--text text="uView UI" type="primary" bold size="17"></u--text>
            <u--text
              margin="0 0 8px 0"
              text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
            ></u--text>
            <u-album :urls="urls2"></u-album>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        albumWidth: 0,
        urls2: [
          "https://uviewui.com/album/1.jpg",
          "https://uviewui.com/album/2.jpg",
          "https://uviewui.com/album/3.jpg",
          "https://uviewui.com/album/4.jpg",
          "https://uviewui.com/album/5.jpg",
          "https://uviewui.com/album/6.jpg",
          "https://uviewui.com/album/7.jpg",
          "https://uviewui.com/album/8.jpg",
          "https://uviewui.com/album/9.jpg",
          "https://uviewui.com/album/10.jpg",
        ],
      };
    },
  };
</script>

<style lang="scss">
  .album {
    @include flex;
    align-items: flex-start;

    &__avatar {
      background-color: $u-bg-color;
      padding: 5px;
      border-radius: 3px;
    }

    &__content {
      margin-left: 10px;
      flex: 1;
    }
  }
</style>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/album/album.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/album/album.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| urls | 图片地址列表 支持 Array<String> | Array<Object>形式 | Array | \- | \- |
| keyName | 指定从数组的对象元素中读取哪个属性作为图片地址 | String | \- | \- |
| singleSize | 单图时，图片长边的长度 | String | Number | 180 | \- |
| multipleSize | 多图时，图片边长 | String | Number | 70 | \- |
| space | 多图时，图片水平和垂直之间的间隔 | String | Number | 6 | \- |
| singleMode | 单图时，图片缩放裁剪的模式 | String | scaleToFill | \- |
| multipleMode | 多图时，图片缩放裁剪的模式 | String | aspectFill | \- |
| maxCount | 最多展示的图片数量，超出时最后一个位置将会显示剩余图片数量 | String | Number | 9 | \- |
| previewFullImage | 是否可以预览图片 | Boolean | true | false |
| rowCount | 每行展示图片数量，如设置，singleSize 和 multipleSize 将会无效 | String | Number | 3 | \- |
| showMore | 超出 maxCount 时是否显示查看更多的提示 | Boolean | true | false |

### [#](#event) Event

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| albumWidth | 某些特殊的情况下，需要让文字与相册的宽度相等，这里事件的形式对外发送 | width |

← [Slider 滑动选择器](https://www.uviewui.com/components/slider.html) [List 列表](https://www.uviewui.com/components/list.html) →




---
## [display/swiper] swiper
> 官方文档: https://www.uviewui.com/components/swiper.html

---

## [#](#swiper-轮播图) Swiper 轮播图 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于导航轮播，广告展示等场景,可开箱即用，具有如下特点：

-   自定义指示器模式，可配置指示器样式
-   3D 轮播图效果，满足不同的开发需求
-   可配置显示标题，涵盖不同的应用场景
-   具有设置加载状态和嵌入视频的能力，功能齐全丰富

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

通过`list`参数传入轮播图列表值，该值为一个数组，键值为图片路径，例如：

```
<template>
  <u-swiper :list="list1" @change="change" @click="click"></u-swiper>
</template>

<script>
  export default {
    data() {
      return {
        list1: [
          "https://uviewui.com/swiper/swiper1.png",
          "https://uviewui.com/swiper/swiper2.png",
          "https://uviewui.com/swiper/swiper3.png",
        ],
      };
    },
  };
</script>
```

### [#](#带标题) 带标题

添加`showTitle`属性以展示标题，此时`list`的参数应为一个对象：例如：
（请注意：您期望使用对象作为参数时，需要配置`u-swiper`组件的`keyName`参数为`您当前对象的图片key`值）如：`keyName="image"`

```
<template>
  <u-swiper
    :list="list2"
    keyName="image"
    showTitle
    :autoplay="false"
    circular
  ></u-swiper>
</template>

<script>
  export default {
    data() {
      return {
        list2: [
          {
            image: "https://uviewui.com/swiper/swiper2.png",
            title: "昨夜星辰昨夜风，画楼西畔桂堂东",
          },
          {
            image: "https://uviewui.com/swiper/swiper1.png",
            title: "身无彩凤双飞翼，心有灵犀一点通",
          },
          {
            image: "https://uviewui.com/swiper/swiper3.png",
            title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
          },
        ],
      };
    },
  };
</script>
```

### [#](#带指示器) 带指示器

通过`indicator`属性添加指示器，例如：

```
<template>
  <u-swiper :list="list3" indicator indicatorMode="line" circular></u-swiper>
</template>

<script>
  export default {
    data() {
      return {
        list3: [
          "https://uviewui.com/swiper/swiper3.png",
          "https://uviewui.com/swiper/swiper2.png",
          "https://uviewui.com/swiper/swiper1.png",
        ],
      };
    },
  };
</script>
```

### [#](#加载中) 加载中

通过添加`loading`属性达到加载中的状态，例如：
您也可以动态的来控制加载状态，比如：`:loading='loading'`

```
<template>
  <u-swiper :list="list3" loading></u-swiper>
</template>

<script>
  export default {
    data() {
      return {
        list3: [
          "https://uviewui.com/swiper/swiper3.png",
          "https://uviewui.com/swiper/swiper2.png",
          "https://uviewui.com/swiper/swiper1.png",
        ],
      };
    },
  };
</script>
```

### [#](#嵌入视频) 嵌入视频

我们提供了嵌入视频的能力，为避免资源浪费，在您切换轮播的时候视频会停止播放，你可以设置`poster`指定视频封面，案例如下：

```
<template>
  <u-swiper :list="list4" keyName="url" :autoplay="false"></u-swiper>
</template>

<script>
  export default {
    data() {
      return {
        list4: [
          {
            url: "https://uviewui.com/resources/video.mp4",
            title: "昨夜星辰昨夜风，画楼西畔桂堂东",
            poster: "https://uviewui.com/swiper/swiper1.png",
          },
          {
            url: "https://uviewui.com/swiper/swiper2.png",
            title: "身无彩凤双飞翼，心有灵犀一点通",
          },
          {
            url: "https://uviewui.com/swiper/swiper3.png",
            title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
          },
        ],
      };
    },
  };
</script>
```

### [#](#指定类型) 指定类型 2.0.30

默认会根据链接自动判断`swiper-item`类型，但是在极端情况下可能会不准确，所以我们提供了指定`item`的类型，通过设置`type`为`video`或`image`即可：

```
<template>
  <u-swiper :list="list4" keyName="url" :autoplay="false"></u-swiper>
</template>

<script>
  export default {
    data() {
      return {
        list4: [
          {
            url: "https://uviewui.com/resources/video.mp4",
            title: "昨夜星辰昨夜风，画楼西畔桂堂东",
            poster: "https://uviewui.com/swiper/swiper1.png",
            type: "video",
          },
          {
            url: "https://uviewui.com/swiper/swiper2.png",
            title: "身无彩凤双飞翼，心有灵犀一点通",
            type: "image",
          },
          {
            url: "https://uviewui.com/swiper/swiper3.png",
            title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
          },
        ],
      };
    },
  };
</script>
```

### [#](#自定义指示器) 自定义指示器

如您需要以指示点或数字形式来自定义指示器，请参考如下案例：

```
<template>
  <view class="u-demo-block">
    <text class="u-demo-block__title">自定义指示器</text>
    <u-swiper
      :list="list5"
      @change="e => current = e.current"
      :autoplay="false"
    >
      <view slot="indicator" class="indicator">
        <view
          class="indicator__dot"
          v-for="(item, index) in list5"
          :key="index"
          :class="[index === current && 'indicator__dot--active']"
        >
        </view>
      </view>
    </u-swiper>
    <u-gap bgColor="transparent" height="15"></u-gap>
    <u-swiper
      :list="list6"
      @change="e => currentNum = e.current"
      :autoplay="false"
      indicatorStyle="right: 20px"
    >
      <view slot="indicator" class="indicator-num">
        <text class="indicator-num__text"
          >{{ currentNum + 1 }}/{{ list6.length }}</text
        >
      </view>
    </u-swiper>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list5: [
          "https://uviewui.com/swiper/swiper3.png",
          "https://uviewui.com/swiper/swiper2.png",
          "https://uviewui.com/swiper/swiper1.png",
        ],
        list6: [
          "https://uviewui.com/swiper/swiper2.png",
          "https://uviewui.com/swiper/swiper3.png",
          "https://uviewui.com/swiper/swiper1.png",
        ],
      };
    },
  };
</script>

<style lang="scss">
  .indicator {
    @include flex(row);
    justify-content: center;

    &__dot {
      height: 6px;
      width: 6px;
      border-radius: 100px;
      background-color: rgba(255, 255, 255, 0.35);
      margin: 0 5px;
      transition: background-color 0.3s;

      &--active {
        background-color: #ffffff;
      }
    }
  }

  .indicator-num {
    padding: 2px 0;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 100px;
    width: 35px;
    @include flex;
    justify-content: center;

    &__text {
      color: #ffffff;
      font-size: 12px;
    }
  }
</style>
```

### [#](#卡片式轮播) 卡片式轮播

在实际开发中，普通的轮播或许不能满足您的开发需求，`swiper`组件提供了卡片式轮播的 api，您可以参考以下案例实现此功能

```
<template>

  <view class="u-demo-block">
    <text class="u-demo-block__title">卡片式</text>
    <u-swiper
      :list="list3"
      previousMargin="30"
      nextMargin="30"
      circular
      :autoplay="false"
      radius="5"
      bgColor="#ffffff"
    ></u-swiper>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        list3: [
          "https://uviewui.com/swiper/swiper3.png",
          "https://uviewui.com/swiper/swiper2.png",
          "https://uviewui.com/swiper/swiper1.png",
        ],
      };
    },
  };
</script>
```

### [#](#控制轮播效果) 控制轮播效果

-   `autoplay`\-是否自动轮播，默认为`true`
-   `interval`\-前后两张图自动轮播的时间间隔
-   `duration`\-切换一张轮播图所需的时间
-   `circular`\-是否衔接滑动，即到最后一张时，是否可以直接转到第一张

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/swiper/swiper.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/swiper/swiper.nvue)

### [#](#api) API

### [#](#swiper-props) Swiper Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| list | 轮播图数据，见上方"基本使用"说明 | Array | \- | \- |
| indicator | 是否显示面板指示器 | Boolean | false | true |
| indicatorActiveColor | 指示器激活的颜色 | String | #FFFFFF | \- |
| indicatorInactiveColor | 指示器非激活颜色 | String | rgba(255, 255, 255, 0.35) | \- |
| indicatorStyle | 指示器样式，可通过 bottom，left，right 进行定位 | String | Object | \- | \- |
| indicatorMode | 指示器模式 | String | line | dot |
| autoplay | 是否自动切换 | Boolean | true | false |
| current | 当前所在滑块的 index | Number | String | 0 | \- |
| currentItemId | 当前所在滑块的 item-id ，不能与 current 被同时指定 | String | \- | \- |
| interval | 滑块自动切换时间间隔（ms） | String | Number | 3000 | \- |
| duration | 滑块切换过程所需时间（ms），nvue 不支持 | String | Number | 300 | \- |
| circular | 播放到末尾后是否重新回到开头 | Boolean | false | true |
| previousMargin | 前边距，可用于露出前一项的一小部分，nvue 和支付宝不支持 | String | Number | 0 | \- |
| nextMargin | 后边距，可用于露出后一项的一小部分，nvue 和支付宝不支持 | String | Number | 0 | \- |
| acceleration | 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持 | Boolean | false | true |
| displayMultipleItems | 同时显示的滑块数量，nvue、支付宝小程序不支持 | Number | 1 | \- |
| easingFunction | 指定 swiper 切换缓动动画类型， 只对微信小程序有效 | String | default | linear、easeInCubic、easeOutCubic、easeInOutCubic |
| keyName | list 数组中指定对象的目标属性名 | String | url | \- |
| imgMode | 图片的裁剪模式 | String | aspectFill | 详见图片裁剪 |
| height | 组件高度 | String | Number | 130 | \- |
| bgColor | 背景颜色 | String | #f3f4f6 | \- |
| radius | 组件圆角，数值或带单位的字符串 | String | Number | 4 | \- |
| loading | 是否加载中 | Boolean | false | true |
| showTitle | 是否显示标题，要求数组对象中有 title 属性 | Boolean | false | \- |

### [#](#swiper-events) Swiper Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击轮播图时触发 | index：点击了第几张图片，从 0 开始 |
| change | 轮播图切换时触发(自动或者手动切换) | index：切换到了第几张图片，从 0 开始 |

### [#](#swiperindicator-props) SwiperIndicator Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| length | 轮播的长度 | String | Number | 0 | \- |
| current | 当前处于活动状态的轮播的索引 | String | Number | 0 | \- |
| indicatorActiveColor | 指示器非激活颜色 | String | \- | \- |
| indicatorInactiveColor | 指示器的激活颜色 | String | \- | \- |
| indicatorStyle | 指示器的形式 | String | line | dot |

← [Grid 宫格布局](https://www.uviewui.com/components/grid.html) [Skeleton 骨架屏](https://www.uviewui.com/components/skeleton.html) →




---
## [display/skeleton] skeleton
> 官方文档: https://www.uviewui.com/components/skeleton.html

---

## [#](#skeleton-骨架屏) Skeleton 骨架屏 [![](https://www.uviewui.com/common/to_api.png)](#api)

骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。

说明

由于`VUE`和`NVUE`的特性不同，组件动画在`VUE`上为由左到右形式，在`NVUE`上为明暗显隐的形式。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

组件由`标题`，`段落`和`头像`组件组件，其中`段落`需要通过`rows`参数配置才显示，可以通过`title`和`avatar`是否显示`标题`和`头像` 。
该组件的使用，有几个需要注意的点，如下：

-   `title`(可选)，是否显示`标题`占位行，该占位行不布满全屏宽度，同时与`段落`的距离较大以做明显区分
-   `avatar`(可选)，是否在左上角位置显示圆形的`头像`占位区域
-   `rows`(可选)，`段落`的行数
-   `loading`(必选)，是否加载中状态，如果为\`true\`\`\`则显示骨架屏组件占位，否则显示插槽中的内容

数据请求完成后，将`loading`设置为`false`，会隐藏骨架组件

```
<template>
	<u-skeleton
	    rows="3"
	    title
		loading
	></u-skeleton>
</template>
```

### [#](#加载中动画) 加载中动画

设置`animate`为`true`，加载中的骨架块将会有一个动画效果，用以加强视觉效果。

```
<u-skeleton :loading="true" :animate="true"></u-skeleton>
```

### [#](#显示头像) 显示头像

```
<u-skeleton :loading="true" avatar rows="1"></u-skeleton>
```

### [#](#插槽内容) 插槽内容

可以通过插槽写入展示的内容，当请求结束，将`loading`设置为`false`，此时会隐藏骨架组件，同时展示插槽内容。

```
<template>
	<u-skeleton
	    rows="2"
		:loading="loading"
		avatar
		:title="false"
	>
		<u--text>loading为false时，将会展示此处插槽内容</u--text>
	</u-skeleton>
</template>

<script>
	export default {
		data() {
			return {
				loading: true
			}
		},
		onLoad() {

			uni.$u.sleep(2000).then(() => {
				this.loading = false
			})
		}
	}
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/skeleton/skeleton.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/skeleton/skeleton.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| loading | 是否显示骨架占位图，设置为`false`将会展示子组件内容 | Boolean | true | false |
| animate | 是否开启动画效果 | Boolean | true | false |
| rows | 段落占位图行数 | Number | String | 0 | \- |
| rowsWidth | 段落占位图的宽度，可以为百分比，数值，带单位字符串等，可通过数组传入指定每个段落行的宽度 | String | Array | Number | 100% | \- |
| rowsHeight | 段落的高度 | String | Array | Number | 18 | \- |
| title | 是否展示标题占位图 | Boolean | true | false |
| titleWidth | 标题的宽度 | String | Number | 50% | \- |
| titleHeight | 标题的高度 | String | Number | 18 | \- |
| avatar | 是否展示头像占位图 | Boolean | false | true |
| avatarSize | 头像占位图大小 | String | Number | 32 | \- |
| avatarShape | 头像占位图的形状，circle-圆形，square-方形 | String | circle | square |

← [Swiper 轮播图](https://www.uviewui.com/components/swiper.html) [Sticky 吸顶](https://www.uviewui.com/components/sticky.html) →




---
## [display/empty] empty
> 官方文档: https://www.uviewui.com/components/empty.html

---

## [#](#empty-内容为空) Empty 内容为空 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

提示

我们的专业设计师精心为您准备了一套精美默认图，带有图片和`Sketch`文件，您可以下载或修改后再使用：[资源下载](https://www.uviewui.com/components/resource.html)

-   通过`text`参数配置提示的文字内容
-   通过`mode`(默认为`data`)参数配置要显示的图标

```
<u-empty
        mode="car"
        icon="http://cdn.uviewui.com/uview/empty/car.png"
>
</u-empty>
```

### [#](#内置图标) 内置图标

这些图标已内置，直接通过`mode`参数引用即可

| 名称 | 说明 |
| --- | --- |
| car | 购物车为空 |
| page | 页面不存在 |
| search | 没有搜索结果 |
| address | 没有收货地址 |
| wifi | 没有WiFi |
| order | 订单为空 |
| coupon | 没有优惠券 |
| favor | 无收藏 |
| permission | 无权限 |
| history | 无历史记录 |
| news | 无新闻列表 |
| message | 消息列表为空 |
| list | 列表为空(通用) |
| data | 数据为空(默认，通用) |

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/empty/empty.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/empty/empty.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| icon | 内置图标名称，或图片路径，建议绝对路径 | String | \- | \- |
| text | 文字提示 | String | \- | \- |
| textColor | 文字颜色 | String | #c0c4cc | \- |
| textSize | 文字大小 | String | Number | 14 | \- |
| iconColor | 图标的颜色 | String | #c0c4cc | \- |
| iconSize | 图标的大小 | String | Number | 90 | \- |
| mode | 内置的图标，见上方说明 | String | data | \- |
| width | 图标的宽度，单位px | String | Number | 160 | \- |
| height | 图标的高度，单位px | String | Number | 160 | \- |
| show | 是否显示组件 | Boolean | true | false |
| marginTop | 组件到上一个元素的间距,单位px | String | Number | 0 | \- |

### [#](#slot) Slot

| 名称 | 说明 |
| --- | --- |
| \- | 给组件底部传入`slot`内容 |

← [Steps 步骤条](https://www.uviewui.com/components/steps.html) [Parse 富文本解析器](https://www.uviewui.com/components/parse.html) →




---
## [display/collapse] collapse
> 官方文档: https://www.uviewui.com/components/collapse.html

---

## [#](#collapse-折叠面板) Collapse 折叠面板 [![](https://www.uviewui.com/common/to_api.png)](#api)

通过折叠面板收纳内容区域

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

```
<template>
  <u-collapse
    @change="change"
    @close="close"
    @open="open"
  >
    <u-collapse-item
      title="文档指南"
      name="Docs guide"
    >
      <text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
    </u-collapse-item>
    <u-collapse-item
      title="组件全面"
      name="Variety components"
    >
      <text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
    </u-collapse-item>
    <u-collapse-item
      title="众多利器"
      name="Numerous tools"
    >
      <text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
    </u-collapse-item>
  </u-collapse>
</template>

<script>
	export default {
		methods: {
            open(e) {

            },
            close(e) {

            },
            change(e) {

            }
        }
	}
</script>
```

### [#](#控制面板的初始状态-以及是否可以操作) 控制面板的初始状态，以及是否可以操作

-   设置`u-collapse-item`的`name`参数，并在`u-collapse`中指定数组`value`可以让面板初始化时为打开状态
-   如果设置`u-collapse-item`的`disabled`参数，那么面板会保持被禁用状态

```
<template>
  <u-collapse
    :value="['2']"
  >
    <u-collapse-item
      title="文档指南"
    >
      <text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
    </u-collapse-item>
    <u-collapse-item
      disabled
      title="组件全面"
    >
      <text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
    </u-collapse-item>
    <u-collapse-item
      name="2"
      title="众多利器"
    >
      <text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
    </u-collapse-item>
  </u-collapse>
</template>

<script>
  export default {
    methods: {
      open(e) {

      },
      close(e) {

      },
      change(e) {

      }
    }
  }
</script>
```

### [#](#手风琴模式) 手风琴模式

-   将`u-collapse`的`accordion`设置为`true`，这样可以开启手风琴模式

```
<template>
    <view class="u-page__item">
        <text class="u-page__item__title">手风琴模式</text>
        <u-collapse
                accordion
        >
            <u-collapse-item
                    title="文档指南"
            >
                <text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
            </u-collapse-item>
            <u-collapse-item
                    title="组件全面"
            >
                <text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
            </u-collapse-item>
            <u-collapse-item
                    title="众多利器"
            >
                <text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
            </u-collapse-item>
        </u-collapse>
    </view>
</template>

<style lang="scss">
    .u-page {
        padding: 0;

        &__item {

            &__title {
                 color: $u-tips-color;
                 background-color: $u-bg-color;
                 padding: 15px;
                 font-size: 15px;

                &__slot-title {
                     color: $u-primary;
                     font-size: 14px;
                 }
            }
        }
    }

    .u-collapse-content {
        color: $u-tips-color;
        font-size: 14px;
    }
</style>
```

### [#](#自定义标题和内容) 自定义标题和内容

-   通过设置`slot`来自定义标题和内容

```
<template>
    <view class="u-page__item">
        <text class="u-page__item__title">自定义标题和内容</text>
        <u-collapse
                accordion
        >
            <u-collapse-item
            >
                <text slot="title" class="u-page__item__title__slot-title">文档指南</text>
                <text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
            </u-collapse-item>
            <u-collapse-item
                    title="组件全面"
            >
                <u-icon name="tags-fill" size="20" slot="icon"></u-icon>
                <text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
            </u-collapse-item>
            <u-collapse-item
                    title="众多利器"
            >
                <text slot="value" class="u-page__item__title__slot-title">自定义内容</text>
                <text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
            </u-collapse-item>
        </u-collapse>
    </view>
</template>

<style lang="scss">
    .u-page {
        padding: 0;

        &__item {

            &__title {
                 color: $u-tips-color;
                 background-color: $u-bg-color;
                 padding: 15px;
                 font-size: 15px;

                &__slot-title {
                     color: $u-primary;
                     font-size: 14px;
                 }
            }
        }
    }

    .u-collapse-content {
        color: $u-tips-color;
        font-size: 14px;
    }
</style>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/collapse/collapse.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/collapse/collapse.nvue)

### [#](#api) API

### [#](#collapse-props) Collapse Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| value | 当前展开面板的name，非手风琴模式：\[<String | Number>\]，手风琴模式：String | Number | String | Number | Array | \- | \- |
| accordion | 是否手风琴模式 | Boolean | false | true |
| border | 是否显示外边框 | Boolean | true | false |

### [#](#collapse-item-props) Collapse Item Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| title | 面板标题 | String | \- | \- |
| value | 标题右侧内容 | String | \- | \- |
| label | 标题下方的描述信息 | String | \- | \- |
| disabled | 面板是否可以打开或收起 | Boolean | false | true |
| isLink | 是否展示右侧箭头并开启点击反馈 | Boolean | true | false |
| clickable | 是否开启点击反馈 | Boolean | true | false |
| border | 是否显示内边框 | Boolean | true | false |
| align | 标题的对齐方式 | String | left | \- |
| name | 唯一标识符，如不设置，默认用当前`collapse-item`的索引值 | String | Number | \- | \- |
| icon | 标题左侧图片，可为绝对路径的图片或内置图标 | String | \- | \- |
| duration | 面板展开收起的过渡时间，单位`ms` | Number | 300 | \- |

### [#](#collapse-event) Collapse Event

注意：请在`<u-collapse></u-collapse>`上监听此事件

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 当前激活面板展开/关闭时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array) | activeNames: String | Array |
| open | 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array) | activeNames: String | Array |
| close | 当前激活面板关闭时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array) | activeNames: String | Array |

### [#](#collapse-methods) Collapse Methods

注意：此方法需要通过`ref`调用

| 方法 | 说明 |
| --- | --- |
| init | 重新初始化内部高度计算，用于异步获取内容的情形，请结合`this.$nextTick()`使用 |

### [#](#slot) Slot

微信小程序不支持`slot`写法

| 名称 | 说明 |
| --- | --- |
| \- | 主体部分的内容 |
| title | 标题内容 |
| icon | icon |
| value | 右侧value |
| right-icon | 右侧icon |

← [SwipeAction 滑动单元格](https://www.uviewui.com/components/swipeAction.html) [Popup 弹出层](https://www.uviewui.com/components/popup.html) →




---
## [display/steps] steps
> 官方文档: https://www.uviewui.com/components/steps.html

---

## [#](#steps-步骤条) Steps 步骤条 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

说明

由于安卓`nvue`下，`overflow`属性不支持`visible`值，故此组件暂不支持安卓`nvue`环境。

-   通过`current`参数标识目前处于第几步，从0开始

```
<template>
	<u-steps current="0">
		<u-steps-item title="已下单" desc="10:30">
		</u-steps-item>
		<u-steps-item title="已出库" desc="10:35" ></u-steps-item>
		<u-steps-item title="运输中" desc="11:40"></u-steps-item>
	</u-steps>
</template>
```

### [#](#错误状态) 错误状态

如果设置`u-steps-item`的`error`参数为`true`的话，当前步骤将会为“失败”的状态

```
<u-steps current="1">
	<u-steps-item title="已下单" desc="10:30"></u-steps-item>
	<u-steps-item error title="仓库着火" desc="10:35"></u-steps-item>
	<u-steps-item title="破产清算" desc="11:40"></u-steps-item>
</u-steps>
```

### [#](#步骤条模式) 步骤条模式

`u-steps`的`dot`参数设置为`true`的话，将会以点状的形式展示步骤条样式。

```
<u-steps current="1" dot>
	<u-steps-item title="已下单" desc="10:30"></u-steps-item>
	<u-steps-item title="已出库" desc="10:35"></u-steps-item>
	<u-steps-item title="运输中" desc="11:40"></u-steps-item>
</u-steps>
```

### [#](#竖向模式) 竖向模式

`u-steps`的`direction`参数设置为`column`的话，组件将会以竖向的形式展示步骤条内容。

```
<template>
	<u-steps current="1" direction="column">
		<u-steps-item title="已下单" desc="10:30">
		</u-steps-item>
		<u-steps-item title="已出库" desc="10:35">
		</u-steps-item>
		<u-steps-item title="运输中" desc="11:40"></u-steps-item>
	</u-steps>
</template>
```

### [#](#自定义图标) 自定义图标

-   通过`activeIcon`可以设置激活状态的图标
-   通过`inactiveIcon`可以设置非激活状态的图标

```
<u-steps
	current="1" activeIcon="checkmark" inactiveIcon="arrow-right">
	<u-steps-item title="已下单" desc="10:30"></u-steps-item>
	<u-steps-item title="已出库" desc="10:35"></u-steps-item>
	<u-steps-item title="运输中" desc="11:40"></u-steps-item>
</u-steps>
```

### [#](#通过插槽自定义样式) 通过插槽自定义样式

通过默认插槽，可以自定义某个步骤当前状态的特殊标识

```
<u-steps :current="1">
	<u-steps-item title="已下单" desc="10:30"></u-steps-item>
	<u-steps-item title="已出库" desc="10:35"></u-steps-item>
	<u-steps-item title="运输中" desc="11:40">
		<text class="slot-icon" slot="icon">运</text>
	</u-steps-item>
</u-steps>

<style lang="scss">
	.slot-icon {
		width: 21px;
		height: 21px;
		background-color: $u-warning;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 21px;
		text-align: center;
	}
</style>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/steps/steps.vue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/steps/steps.vue)

### [#](#api) API

### [#](#steps-props) Steps Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| direction | row-横向，column-竖向 | String | row | column |
| current | 设置当前处于第几步 | Number | String | 0 | \- |
| activeColor | 激活状态颜色 | String | #3c9cff | \- |
| inactiveColor | 未激活状态颜色 | String | #969799 | \- |
| activeIcon | 激活状态的图标 | String | \- | \- |
| inactiveIcon | 未激活状态图标 | String | \- | \- |
| dot | 是否显示点类型 | Boolean | false | true |

### [#](#steps-item-props) Steps Item Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| title | 标题文字 | String | \- | \- |
| desc | 描述文本 | String | \- | \- |
| iconSize | 图标大小 | String | Number | 17 | \- |
| error | 当前步骤是否处于失败状态 | Boolean | false | true |

### [#](#slot) Slot

| 名称 | 说明 |
| --- | --- |
| \- | 自定步骤状态内容 |

← [IndexList 索引列表](https://www.uviewui.com/components/indexList.html) [Empty 内容为空](https://www.uviewui.com/components/empty.html) →




---
## [display/indexList] indexList
> 官方文档: https://www.uviewui.com/components/indexList.html

---

## [#](#indexlist-索引列表) IndexList 索引列表 [![](https://www.uviewui.com/common/to_api.png)](#api)

通过折叠面板收纳内容区域

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

外层包裹一个`index-list`组件，锚点通过`index-anchor`组件传入，自定义列表内容通过`index-item`嵌套使用

-   nvue需要将`index-anchor`写在`index-item`的外部
-   非nvue需要将`index-anchor`嵌套在`index-item`的内部
-   可以通过`index-list`参数自定义索引字符列表
-   需要监听页面的onPageScroll事件，将当前滚动条高度传入`index-list`组件

```
<template>
	<u-index-list :index-list="indexList">
		<template v-for="(item, index) in itemArr">

			<u-index-anchor :text="indexList[index]"></u-index-anchor>

			<u-index-item>

				<u-index-anchor :text="indexList[index]"></u-index-anchor>

				<view class="list-cell" v-for="(cell, index) in item">
					{{cell}}
				</view>
			</u-index-item>
		</template>
	</u-index-list>
</template>

<script>
	export default {
		data() {
			return {
				indexList: ["A", "B", "C"],
				itemArr: [
					['列表A1','列表A2','列表A3'],
					['列表B1','列表B2','列表B3'],
					['列表C1','列表C2','列表C3']
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>
```

### [#](#自定义导航栏) 自定义导航栏

默认情况下，组件的锚点是吸附在导航栏下方的，如果您修改了导航栏，比如取消导航栏、或者自定义了导航栏，就需要指定吸顶的高度，也就是`custom-nav-height` 的值，注意这个值的单位为`px`：

-   如果自定义了导航栏，需要`custom-nav-height`设置为导航栏的高度

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/indexList/indexList.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/indexList/indexList.nvue)

### [#](#api) API

### [#](#indexbar-props) IndexBar Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| inactiveColor | 右边锚点状态非激活时的颜色 | String | #606266 | \- |
| activeColor | 右边锚点状态激活时的颜色 | String | #5677fc | \- |
| indexList | 索引字符列表，数组 | Array\[string | number\] | A-Z | \- |
| sticky | 是否开启锚点自动吸顶 | Boolean | true | false |
| customNavHeight | 自定义导航栏的高度，单位默认px | String | Number | 0 | \- |

### [#](#indexanchor-props) IndexAnchor Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| text | 列表锚点文本内容 | String | Number | \- | \- |
| color | 列表锚点文字颜色 | String | #606266 | \- |
| size | 列表锚点文字大小，单位默认px | String | Number | 14 | \- |
| bgColor | 列表锚点背景颜色 | String | #dedede | \- |
| height | 列表锚点高度，单位默认px | String | Number | 32 | \- |

### [#](#indexbar-events) IndexBar Events

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| select | 选中右边索引字符时触发 | index: 索引字符 | \- |

### [#](#indexitem-slots) IndexItem Slots

| 名称 | 说明 |
| --- | --- |
| default | 自定义列表内容 |

← [Subsection 分段器](https://www.uviewui.com/components/subsection.html) [Steps 步骤条](https://www.uviewui.com/components/steps.html) →




---
## [display/lineProgress] lineProgress
> 官方文档: https://www.uviewui.com/components/lineProgress.html

---

## [#](#lineprogress-线形进度条) LineProgress 线形进度条 [![](https://www.uviewui.com/common/to_api.png)](#api)

展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`percentage`设置当前的进度值，该值区间为0-100.
-   通过`activeColor`设置进度条的颜色

```
<template>
	<u-line-progress :percentage="30" activeColor="#ff0000"></u-line-progress>
</template>
```

### [#](#不显示百分比) 不显示百分比

不显示百分比值信息

-   `show-text`参数配置是否显示进度条内百分值

```
<template>
	<u-line-progress :percentage="30" :showText="false"></u-line-progress>
</template>
```

### [#](#自定义高度) 自定义高度

-   `height`进度条高度

```
<template>
	<u-line-progress :percentage="30" height="8"></u-line-progress>
</template>
```

### [#](#自定义样式-不支持安卓环境的nvue) 自定义样式(不支持安卓环境的nvue)

-   自定义的数值样式嵌套在默认插槽里

```
<template>
	<u-line-progress :percentage="30">
		<text class="u-percentage-slot">{{30}}%</text>
	</u-line-progress>
</template>

<style lang="scss" scoped>
.u-percentage-slot {
	padding: 1px 5px;
	background-color: $u-warning;
	color: #fff;
	border-radius: 100px;
	font-size: 10px;
	margin-right: -5px;
}
</style>
```

### [#](#手动加减) 手动加减

-   通过控制`percentage`参数数值达到增减

```
<template>
	<view style="margin-top: 50px;">
		<u-line-progress :percentage="percentage" />
		<view style="display: flex;margin-top: 100px;">
			<button @click="computedWidth('minus')">减少</button>
			<button @click="computedWidth('plus')">增加</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				percentage: 30,
			}
		},
		methods:{
			computedWidth(type) {
				if(type === 'plus') {
					this.percentage = uni.$u.range(0, 100, this.percentage + 10)
				} else {
					this.percentage = uni.$u.range(0, 100, this.percentage - 10)
				}
			}
		}
	}
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/progress/progress.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/progress/progress.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| activeColor | 进度条激活部分的颜色 | String | #19be6b | \- |
| inactiveColor | 进度条的底色，默认为灰色 | String | #ececec | \- |
| percentage | 进度百分比，数值 | String | Number | 0 | \- |
| showText | 是否在进度条内部显示百分比的值 | Boolean | true | false |
| height | 进度条的高度，默认单位px | String | Number | 12 | \- |

### [#](#slots) Slots

| 名称 | 说明 |
| --- | --- |
| default | 传入自定义的显示内容，将会覆盖默认显示的百分比值 |

← [List 列表](https://www.uviewui.com/components/list.html) [CountDown 倒计时](https://www.uviewui.com/components/countDown.html) →




---
## [display/countDown] countDown
> 官方文档: https://www.uviewui.com/components/countDown.html

---

## [#](#countdown-倒计时) CountDown 倒计时 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`time`参数设置倒计时间，单位为`ms`

```
<template>
	<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
</template>
```

### [#](#自定义格式) 自定义格式

-   说明：通过绑定`change`回调的值，进行自定义格式

```
<template>
    <u-count-down
        :time="30 * 60 * 60 * 1000"
        format="DD:HH:mm:ss"
        autoStart
        millisecond
        @change="onChange"
    >
        <view class="time">
            <text class="time__item">{{ timeData.days }}&nbsp;天</text>
            <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
            <text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
            <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
        </view>
    </u-count-down>
</template>

<script>
    export default {
        data() {
            return {
                timeData: {},
            }
        },
        methods: {
            onChange(e) {
                this.timeData = e
            }
        }
    }
</script>

<style lang="scss">
.time {
    @include flex;
    align-items: center;

    &__item {
         color: #fff;
         font-size: 12px;
         text-align: center;
     }
}
</style>
```

### [#](#毫秒级渲染) 毫秒级渲染

-   通过配置`millisecond`来开启毫秒级倒计时

```
<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss:SSS" autoStart millisecond></u-count-down>
```

### [#](#自定义样式) 自定义样式

-   说明：通过绑定`change`回调的值，进行自定义格式

```
<template>
    <u-count-down
            :time="30 * 60 * 60 * 1000"
            format="HH:mm:ss"
            autoStart
            millisecond
            @change="onChange"
    >
        <view class="time">
            <view class="time__custom">
                <text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
            </view>
            <text class="time__doc">:</text>
            <view class="time__custom">
                <text class="time__custom__item">{{ timeData.minutes }}</text>
            </view>
            <text class="time__doc">:</text>
            <view class="time__custom">
                <text class="time__custom__item">{{ timeData.seconds }}</text>
            </view>
        </view>
    </u-count-down>
</template>

<script>
    export default {
        data() {
            return {
                timeData: {},
            }
        },
        methods: {
            onChange(e) {
                this.timeData = e
            }
        }
    }
</script>

<style lang="scss">
.time {
    @include flex;
    align-items: center;

    &__custom {
         margin-top: 4px;
         width: 22px;
         height: 22px;
         background-color: $u-primary;
         border-radius: 4px;

         display: flex;

         justify-content: center;
         align-items: center;

        &__item {
             color: #fff;
             font-size: 12px;
             text-align: center;
         }
    }

    &__doc {
         color: $u-primary;
         padding: 0px 4px;
     }

    &__item {
         color: #606266;
         font-size: 15px;
         margin-right: 4px;
     }
}
</style>
```

### [#](#手动控制) 手动控制

-   说明：通过绑定`ref`进行手动控制重置、开始、暂停

```
<template>
    <u-count-down
        ref="countDown"
        :time="3* 1000"
        format="ss:SSS"
        :autoStart="false"
        millisecond
        @change="onChange"
    >
    </u-count-down>
    <u-button text="重置" size="normal" type="info" @click="reset"></u-button>
    <u-button text="开始" size="normal" type="success" @click="start"></u-button>
    <u-button text="暂停" size="normal" type="error" @click="pause"></u-button>
</template>

<script>
    export default {
        data() {
            return {
                timeData: {},
            }
        },
        methods: {

            start() {
                this.$refs.countDown.start();
            },

            pause() {
                this.$refs.countDown.pause();
            },

            reset() {
                this.$refs.countDown.reset();
            },
            onChange(e) {
                this.timeData = e
            }
        }
    }
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/countDown/countDown.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/countDown/countDown.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| time | 倒计时时长，单位ms | String | Number | 0 | \- |
| format | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | String | HH:mm:ss | \- |
| autoStart | 是否自动开始倒计时 | Boolean | true | false |
| millisecond | 是否展示毫秒倒计时 | Boolean | false | true |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 过程中，倒计时变化时触发 | time: 剩余的时间 |
| finish | 倒计时结束 | \- |

### [#](#methods) Methods

需要通过ref获取倒计时组件才能调用

| 名称 | 说明 |
| --- | --- |
| start | 开始倒计时 |
| pause | 暂停倒计时 |
| reset | 重置倒计时 |

← [LineProgress 线形进度条](https://www.uviewui.com/components/lineProgress.html) [CountTo 数字滚动](https://www.uviewui.com/components/countTo.html) →




---
## [display/countTo] countTo
> 官方文档: https://www.uviewui.com/components/countTo.html

---

## [#](#countto-数字滚动) CountTo 数字滚动 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。

注意

如果给组件的父元素设置`text-align: center`想让数字水平居中，可能是由于元素内容快速变化而导致渲染的问题，在APP上组件可能会有轻微的左右抖动现象， 解决办法是给父元素设置`padding-left`或者`margin-left`即可。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

通过`startVal`设置开始值，`endVal`设置结束值

```
<u-count-to :startVal="30" :endVal="500"></u-count-to>
```

### [#](#设置滚动相关参数) 设置滚动相关参数

-   通过`duration`设置从开始值到结束值整个滚动过程所需的时间，单位`ms`
-   通过`useEasing`设置滚动快结尾的时候，是否放慢滚动的速度，给用户更好的视觉效果

```
<u-count-to :start-val="30" :end-val="500" :duration="2000" :useEasing="false"></u-count-to>
```

### [#](#是否显示小数位) 是否显示小数位

通过`decimals`设置显示的小数位，如果设置了，在滚动过程中，小数位会一起变化。如果`startVal`和`endVal`是带小数的，应该设置`decimals`为 `startVal`和`endVal`一样的小数位数值，如`endVal`为1200.55，那么`decimals`应该设置为2。

```
<u-count-to :startVal="30" :endVal="500.55" :decimals="2"></u-count-to>
```

### [#](#千分位分隔符) 千分位分隔符

通过`separator`配置千分位分隔符，默认为空字符串，可以设置英文逗号","，此参数表现为`endVal`值超过1000时，比如为"1257"，那么滚动后会变成"1,245"，在金额数值时， 该参数可能会用上。

```
<u-count-to :endVal="1542" separator=","></u-count-to>
```

### [#](#滚动执行的时机) 滚动执行的时机

可以通过`autoplay`设置是否需要初始化时就开始滚动，默认为`true`，如果设置为`false`，可以通过组件的`ref`去控制组件内部的`start()`和`paused()` 方法来开始或暂停。

```
<template>
	<u-count-to ref="uCountTo" :endVal="endVal" :autoplay="autoplay"></u-count-to>
</template>

<script>
	export default {
		data() {
			return {
				endVal: 5000.55,
				autoplay: false
			};
		},
		methods: {
			start() {
				this.$refs.uCountTo.start();
			},
			paused() {
				this.$refs.uCountTo.paused();
			},
			reStart() {
				this.$refs.uCountTo.reStart();
			},
		}
	}
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/countTo/countTo.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/countTo/countTo.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| startVal | 开始值 | String | Number | 0 | \- |
| endVal | 结束值 | String | Number | 0 | \- |
| duration | 滚动过程所需的时间，单位ms | String | Number | 2000 | \- |
| autoplay | 是否自动开始滚动 | Boolean | true | false |
| decimals | 要显示的小数位数，见上方说明 | String | Number | 0 | \- |
| useEasing | 滚动结束时，是否缓动结尾，见上方说明 | Boolean | true | false |
| decimal | 十进制分割 | String | . | \- |
| color | 字体颜色 | String | #606266 | \- |
| fontSize | 字体大小，单位px | String | Number | 22 | \- |
| bold | 字体是否加粗 | Boolean | false | true |
| separator | 千位分隔符，见上方说明 | String | \- | \- |

### [#](#methods) Methods

此方法如要通过ref手动调用

| 名称 | 说明 |
| --- | --- |
| start | `autoplay`为`false`时，通过此方法启动滚动 |
| reStart | 暂停后重新开始滚动(从暂停前的值开始滚动) |
| paused | 暂停滚动 |

### [#](#event) Event

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| end | 数值滚动到目标值时触发 | \- | \- |

← [CountDown 倒计时](https://www.uviewui.com/components/countDown.html) [Tooltip 长按提示](https://www.uviewui.com/components/tooltip.html) →




---
## [display/parse] parse
> 官方文档: https://www.uviewui.com/components/parse.html

---

## [#](#parse-富文本解析器) Parse 富文本解析器 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于富文本解析场景，比如解析文章内容，商品详情，带原生 HTML 标签的各类字符串等，此组件和 uni-app 官方的`rich-text`组件功能有重合之处，但是也有不同的地方。

#### [#](#相同点) 相同点：

-   二者都能解析 HTML 字符串

#### [#](#不同点) 不同点：

-   对于轻量、简单的字符串，`rich-text`性能更好
-   对于复杂的字符串，使用`parse`组件效果更好，有更多的自定义属性和效果

总结：如果是简单的场景，比如一段简单的文字和图片内容，可以优先使用`rich-text`组件，在文章内容，商品详情等复杂的文本详情，可以优先使用`parse`组件。

提示

此组件源于开源的优秀作品[mp-html (opens new window)](https://github.com/jin-yufeng/mp-html)，本文档只对重要的功能进行介绍，如果需要更详细的说明，请参考[mp-html 官方文档 (opens new window)](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart?id=uni-app)。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

通过`content`参数绑定需要解析的内容即可。

```
<template>
  <view class="u-content">
    <u-parse :content="content"></u-parse>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://uviewui.com/swiper/2.jpg" />
				`,
      };
    },
  };
</script>

<style lang="scss" scoped>
  .u-content {
    padding: 24rpx;
  }
</style>
```

### [#](#长按复制) 长按复制

可以通过设置`selectable`参数为`true`来实现长按复制的效果

```
<u-parse :content="content" :selectable="true"></u-parse>
```

### [#](#设置样式) 设置样式

可以有两种方法可设置富文本的样式：

-   通过组件的`tagStyle`参数可以精细化的对单独的标签设置样式，注意此方式设置的样式为**字符串**的形式，而非**对象**形式：

```
<template>
  <view class="u-content">
    <u-parse :content="content" :tagStyle="style"></u-parse>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://uviewui.com/swiper/2.jpg" />
				`,
        style: {

          p: "color: red;font-size:32rpx",
          span: "font-size: 30rpx",
        },
      };
    },
  };
</script>
```

-   通过父元素标签，统一设置全文的颜色，行高，字体大小等，注意这种方式无法对单独的标签设置样式：

```
<template>
  <view class="u-content">
    <u-parse :content="content"></u-parse>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://uviewui.com/swiper/2.jpg" />
				`,
      };
    },
  };
</script>

<style lang="scss" scoped>
  .u-content {
    padding: 24rpx;
    font-size: 32rpx;
    color: $u-content-color;
    line-height: 1.6;
  }
</style>
```

### [#](#懒加载和占位图) 懒加载和占位图

-   设置`lazyLoad`为`true`即可开启图片懒加载功能
-   设置`loadingImg`为网络路径或者 base64 图片，可以在图片加载完成前展示占位图

```
<u-parse
  :content="content"
  :lazyLoad="true"
  :loadingImg="/xxx/xxx.jpg"
></u-parse>
```

### [#](#链接跳转-锚点) 链接跳转/锚点

H5、App（含 NVUE）外链可以直接打开，小程序端将自动复制链接
小程序端`a`标签设置`app-id`后可以跳转到其他小程序

```
<a href="#">跳转到顶部</a>
<a href="#list">跳转到列表</a>
<a href="https://github.com/jin-yufeng/mp-html">外部链接</a>
<a href="/pages/componentsB/parse/jump">内部链接</a>
```

### [#](#其他配置) 其他配置

本组件还有其他更多的配置功能，如获取页面的所有图片数组，跳转页内锚点，视频播放等，如需更多的配置信息，请移步`mp-html`项目文档：[mp-html 文档 (opens new window)](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart?id=uni-app)

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/parse/parse.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/parse/parse.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| bgColor | 背景颜色，只适用与 APP-PLUS-NVUE | String | \- | \- |
| content | 要显示的富文本字符串 | String | \- | \- |
| copyLink | 是否允许外部链接被点击时自动复制 | Boolean | true | false |
| domain | 主域名，设置后将给链接自动拼接上主域名或协议名 | String | \- | \- |
| errorImg | 图片出错时的占位图链接 | String | \- | \- |
| lazyLoad | 是否开启图片懒加载，nvue 不支持此属性 | Boolean | true | false |
| loadingImg | 图片加载完成前的占位图，详见 占位图 | String | \- | \- |
| pauseVideo | 是否在播放一个视频时自动暂停其它视频 | Boolean | true | false |
| previewImg | 是否开启图片被点击时自动预览 | Boolean | true | false |
| scrollTable | 是否自动给 table 添加一个滚动层（使表格可以单独横向滚动） | Boolean | false | true |
| selectable | 是否开启长按复制内容 | Boolean | false | true |
| setTitle | 是否自动将 title 标签的内容设置到页面标题 | Boolean | true | false |
| showImgMenu | 是否开启图片被长按时显示菜单 | Boolean | true | false |
| tagStyle | 设置标签的默认样式 | Object | \- | \- |
| useAnchor | 是否使用页面内锚点 | Boolean/Number | false | true |

### [#](#event) Event

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| load | dom 加载完成时触发 | 所有节点被添加到节点树中时触发，无返回值，可以调用 api |
| ready | 渲染完成时触发 | 返回 boundingClientRect 的查询结果（包含宽高、位置等信息），所有图片（除懒加载）加载完成时才会触发，图片较大时可能 延时较长 |
| error | 出错时触发 | 返回一个 object，其中 source 是错误来源，errMsg 为错误信息，target 包含出错标签的具体信息 |
| imgTap | 图片被点击时触发 | 返回一个 object，其中 src 是图片链接，ignore 是一个函数，在事件中调用将不进行预览；可用于阻挡 onShow 的调用 |
| linkTap | 在链接被点击时触发 | 返回一个 object，其中包含了被点击的 a 标签的所有属性，ignore 是一个函数，在事件中调用后将不自动跳转/复制；可在该事件中进行下载文档等进一步操作 |

← [Empty 内容为空](https://www.uviewui.com/components/empty.html) [CodeInput 验证码输入](https://www.uviewui.com/components/codeInput.html) →




---
## [display/codeInput] codeInput
> 官方文档: https://www.uviewui.com/components/codeInput.html

---

## [#](#codeinput-验证码输入) CodeInput 验证码输入 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于验证用户短信验证码的场景，也可以结合uView的[键盘组件](https://www.uviewui.com/components/keyboard.html)使用

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`mode`参数模式，可取如下值：
-   `box`(默认)-输入位置位一个方框
-   `bottomLine`\-底部显示一条横线
-   `middleLine`\-中部显示一条横线

```
<u-code-input v-model="value"></u-code-input>
```

### [#](#横线模式) 横线模式

-   通过`mode="line"`可设置显示为横线模式

```
<u-code-input v-model="value2" mode="line"></u-code-input>
```

### [#](#设置长度) 设置长度

-   通过`maxlength`参数配置可输入的方框个数，如6位验证码，该值设置为6即可

```
<u-code-input v-model="value3" :maxlength="6"></u-code-input>
```

### [#](#横线间距) 横线间距

-   通过`space`可设置显示为横线模式

```
<u-code-input v-model="value4" :space="0" ></u-code-input>
```

### [#](#细边框) 细边框

-   通过`hairline`可设置细边框

```
<u-code-input v-model="value5" mode="box" :space="0" :maxlength="4" hairline></u-code-input>
```

### [#](#调整颜色) 调整颜色

-   通过`color`和`borderColor`可设置颜色

```
<u-code-input v-model="value6" hairline color="#f56c6c" borderColor="#f56c6c"></u-code-input>
```

### [#](#用-●-替代输入内容) 用"●"替代输入内容

`dot`参数配置后，输入内容将不可见，用点替代，事件回调中会返回真实值

```
<u-code-input v-model="value5" mode="box" dot></u-code-input>
```

### [#](#是否自动获取焦点) 是否自动获取焦点

如果需要一打开页面，就自动弹出键盘获取焦点，请配置`focus`值为true，否则需要用户手动点击输入区域才能唤起键盘

```
<u-code-input v-model="value4" :focus="true"></u-code-input>
```

### [#](#禁止唤起系统键盘) 禁止唤起系统键盘

uView有[键盘](https://www.uviewui.com/components/keyboard.html)组件，如果您想结合键盘组件进行自定义的输入效果，就需要设置`disabled-keyboard`为`true`，来保证点击 输入框时不会触发系统自带的键盘，否则会造成冲突。

### [#](#事件回调) 事件回调

-   每当输入内容发生改变，会回调一个`change`事件，内容为当前输入的字符串，如"395"
-   当输入的内容长度(字符个数)达到`maxlength`值后，会触发`finish`事件，同时也会触发`change`事件

```
<template>
	<view>
		<u-code-input @change="change" @finish="finish"></u-code-input>
	</view>
</template>

<script>
	export default {
		methods: {
			change(e) {
				console.log('内容改变，当前值为：' + e);
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
			},
		}
	}
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/codeInput/codeInput.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/codeInput/codeInput.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| adjustPosition 2.0.32 | 键盘弹起时，是否自动上推页面 | Boolean | true | false |
| maxlength | 输入字符个数 | String \\ Number | 6 | \- |
| dot | 是否用圆点填充 | Boolean | false | true |
| mode | 模式选择，见上方"基本使用"说明 | String | box | bottomLine / middleLine |
| hairline | 是否细边框 | Boolean | false | true |
| space | 字符间的距离 | String \\ Number | 10 | \- |
| value | 预置值 | String \\ Number | \- | \- |
| focus | 是否自动获取焦点 | Boolean | false | false |
| bold | 字体和输入横线是否加粗 | Boolean | false | true |
| color | 字体颜色 | String | #606266 | \- |
| fontSize | 字体大小，单位rpx | String \\ Number | 18 | \- |
| size | 输入框的大小，宽等于高 | String \\ Number | 35 | \- |
| disabledKeyboard | 禁止点击输入框唤起系统键盘 | Boolean | false | true |
| borderColor | 边框和线条颜色 | String | #c9cacc | \- |
| disabledDot | 是否禁止输入"."符号 | Boolean | true | false |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| change | 输入内容发生改变时触发，具体见上方说明 | value：当前输入的值 | \- |
| finish | 输入字符个数达`maxlength`值时触发，见上方说明 | value：当前输入的值 | \- |

← [Parse 富文本解析器](https://www.uviewui.com/components/parse.html) [LoadMore 加载更多](https://www.uviewui.com/components/loadMore.html) →




---
## [display/loadMore] loadMore
> 官方文档: https://www.uviewui.com/components/loadMore.html

---

## [#](#loadmore-加载更多) LoadMore 加载更多 [![](https://www.uviewui.com/common/to_api.png)](#api)

此组件一般用于标识页面底部加载数据时的状态，共有三种状态：

-   加载前，显示"加载更多"，加入点击可选，是因为数据不够一页时，无法触发页面的`onReachBottom`生命周期
-   加载中，显示"正在加载..."，2种动画可选
-   加载后，如果还有数据，回到"加载前"状态，否则加载结束，显示"没有更多了"

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`status`设置组件的状态，加载前值为`loadmore`，加载中为`loading`，没有数据为`nomore`

注意：以下示例仅为模拟效果，实际中请根据自己的逻辑，修改代码的实现

```
<template>
	<view class="wrap">
		<view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
			{{'第' + item + '条数据'}}
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				list: 15,
				page: 0
			}
		},
		onReachBottom() {
			if(this.page >= 3) return ;
			this.status = 'loading';
			this.page = ++ this.page;
			setTimeout(() => {
				this.list += 10;
				if(this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 24rpx;
	}

	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}
</style>
```

### [#](#控制组件的提示以及动画效果) 控制组件的提示以及动画效果

-   如果不需要图标，可以设置`icon`为`false`
-   可以设置`is-dot`为`true`，在没有数据时，内容显示为一个"●"替代默认的"没有更多了"
-   可以通过配置`loading-text`配置提示的文字，该参数为一个对象值，可以修改默认的文字提示，见如下：

```
<template>
	<u-loadmore
        :status="status"
        :loading-text="loadingText"
        :loadmore-text="loadmoreText"
        :nomore-text="nomoreText"
    />
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了'
			}
		}
	}
</script>
```

### [#](#线条自定义颜色和设置为虚线) 线条自定义颜色和设置为虚线 2.0.32

-   可以通过配置`dashed`和`lineColor`实现，见如下：

```
<template>
	<u-loadmore
				loadmoreText="看,我和别人不一样"
				color="#1CD29B"
				lineColor="#1CD29B"
				dashed
				line
    />
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了'
			}
		}
	}
</script>
```

### [#](#手动触发加载更多) 手动触发加载更多

有时候可能会因为网络，或者数据不满一页的原因，导致无法上拉触发`onReachBottom`生命周期，这时候(需`status`为`loadmore`状态)，用户点击组件，就会触发`loadmore` 事件，可以在回调中，进行状态的控制和数据的加载，同时也可以修改`loadText`的`loadmore`为"上拉或点击加载更多"进行更加人性化的提示。

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/loadmore/loadmore.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/loadmore/loadmore.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| status | 组件状态 | String | loadmore | loading / nomore |
| bgColor | 组件背景颜色，在页面是非白色时会用到(默认为transparent) | String | transparent | \- |
| icon | 加载中时是否显示图标 | Boolean | true | false |
| fontSize | 字体大小，单位rpx | String | Number | 14 | \- |
| iconSize | 图标大小，单位px | String | Number | 17 | \- |
| color | 字体颜色 | String | #606266 | \- |
| loadingIcon | 加载中状态的图标 | String | circle | spinner / semicircle |
| loadmoreText | 加载前的提示语 | String | 加载更多 | \- |
| loadingText | 加载中提示语 | String | 正在加载... | \- |
| nomoreText | 没有更多的提示语 | String | 没有更多了 | \- |
| isDot | `status`为`nomore`时，内容显示为一个"●" | Boolean | false | true |
| iconColor | 加载中的动画图标的颜色 | String | #b7b7b7 | \- |
| lineColor 2.0.32 | 线条颜色 | String | #E6E8EB | \- |
| dashed 2.0.32 | 是否虚线，false-实线，true-虚线 | Boolean | false | true |
| marginTop | 与前一个元素的距离，单位rpx | String | Number | 10 | \- |
| marginBottom | 与后一个元素的距离，单位rpx | String | Number | 10 | \- |
| height | 高度 | String | Number | auto | \- |
| line | 是否显示左边分割线 | Boolean | false | true |

### [#](#event) Event

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| loadmore | `status`为`loadmore`时，点击组件会发出此事件 | \- | \- |

← [CodeInput 验证码输入](https://www.uviewui.com/components/codeInput.html) [ReadMore 展开阅读更多](https://www.uviewui.com/components/readMore.html) →




---
## [display/readMore] readMore
> 官方文档: https://www.uviewui.com/components/readMore.html

---

## [#](#readmore-展开阅读更多) ReadMore 展开阅读更多 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

通过slot传入正文内容

```
<template>
	<u-read-more>
		<rich-text :nodes="content"></rich-text>
	</u-read-more>
</template>

<script>
	export default {
		data() {
			return {

				content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
			}
		}
	}
</script>
```

### [#](#兼容性) 兼容性

由于一些微信小程序平台的渲染能力的问题，在解析[u-parse](https://www.uviewui.com/components/parse.html)组件内容时会比较耗时，导致`read-more`组件内部无法准确得知 内容的高度，而出现计算错误，这种情况下，我们需要借助`u-parse`组件的`@load`(内容多为文字时)或者`@ready`(内容多为图片时，可能会有较大延时)事件，通过`ref` 重新初始化`read-more`组件的高度，如下：

```
<template>
	<u-read-more ref="uReadMore">
		<u-parse :content="content" @load="load"></u-parse>
	</u-read-more>
</template>

<script>
	export default {
		data() {
			return {

				content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
			}
		},
		methods: {
            load() {
                this.$refs.uReadMore.init();
            }
		}
	}
</script>
```

### [#](#展开收起) 展开收起

配置`toggle`为`true`，展开后可以收起，否则展开后没有收起的按钮

```
<u-read-more :toggle="true">
    <rich-text :nodes="content"></rich-text>
</u-read-more>
```

### [#](#配置展开高度) 配置展开高度

可以配置一个高度，单位rpx，只有slot传入的内容高度超出这个值，才会出现"展开阅读全文"字样的按钮

```
<u-read-more showHeight="600">
    <rich-text :nodes="content"></rich-text>
</u-read-more>
```

### [#](#异步初始化) 异步初始化

有时候需要展示的内容是从后端获取的，组件内部的`mounted`生命周期初始化时，请求尚未回来，会导致 内容的高度在初始化有误差。可以在请求完毕渲染后(指的是this.$nextTick)，通过`ref`调用组件的`init`方法，重新初始化

```
<template>
	<u-read-more ref="uReadMore">
        <rich-text :nodes="content"></rich-text>
	</u-read-more>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
			}
		},
		onLoad() {

			setTimeout(() => {
				this.content = `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
				苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
				无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,

				this.$nextTick(() => {
					this.$refs.uReadMore.init();
				})
			}, 2000);
		}
	}
</script>
```

### [#](#自定义样式) 自定义样式

此组件上边部分有一个白色虚化的阴影，用以将点击区域与文字内容进行融合，如果您不想要这个阴影，可以调整`shadowStyle`对象，此对象内部如下：

```
{

    backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",

    backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",

    paddingTop: "100px",
    marginTop: "-100px",
}
```

如果您不想要阴影，将`backgroundImage`设置为`none`即可，关于`paddingTop`和`marginTop`自行调整至合适数值即可。

```
<template>
	<u-read-more ref="uReadMore" :shadowStyle="shadowStyle" :showHeight="200">
		<rich-text :nodes="content"></rich-text>
	</u-read-more>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				}
			}
		}
	}
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/readMore/readMore.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/readMore/readMore.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| showHeight | 内容超出此高度才会显示展开全文按钮，单位rpx | String | Number | 400 | \- |
| toggle | 展开后是否显示收起按钮 | Boolean | false | true |
| closeText | 关闭时的提示文字 | String | 展开阅读全文 | \- |
| openText | 展开时的提示文字 | String | 收起 | \- |
| color | 提示文字的颜色 | String | #2979ff | \- |
| fontSize | 提示文字的大小，默认单位px | String | Number | 14 | \- |
| shadowStyle | 对阴影的自定义处理，对象形式 | Object | 见上方说明 | \- |
| textIndent | 段落首行缩进的字符个数 | String | 2em | \- |
| name | 用于在`open`和`close`事件中当作回调参数返回 | String | Number | \- | \- |

### [#](#methods) Methods

此方法如要通过ref手动调用

| 名称 | 说明 |
| --- | --- |
| init | 重新初始化组件内部高度计算过程，如果内嵌[u-parse](https://www.uviewui.com/components/parse.html)组件时可能需要用到 |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| open | 内容被展开时触发 | name - props中传入的`name`参数值 |
| close | 内容被收起时触发 | name - props中传入的`name`参数值 |

← [LoadMore 加载更多](https://www.uviewui.com/components/loadMore.html) [Gap 间隔槽](https://www.uviewui.com/components/gap.html) →




---
## [display/sticky] sticky
> 官方文档: https://www.uviewui.com/components/sticky.html

---

## [#](#sticky-吸顶) Sticky 吸顶 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件与CSS中`position: sticky`属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

说明

本组件内部通过多种手段嗅探当前运行环境是否支持`css sticky`，在`H5`，`APP-VUE`，`NVUE`，`MP-WEIIXN`，`安卓` 等环境可以进行准确判断，如果支持则使用`CSS`方案，否则使用降级的`JS`方案。

### [#](#基本使用) 基本使用

由于`css sticky`的特殊性，建议您将此组件放置在页面外层元素中，否则可能会导致`sticky`失效，以下为[MDN对sticky的解释 (opens new window)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position)：

-   元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

```
<template>
	<view class="container">

		<u-sticky>......</u-sticky>
		<view class="container__inner">

			<u-sticky>......</u-sticky>
		</view>
	</view>
</template>
```

### [#](#吸顶距离) 吸顶距离

通过`offset-top`参数设置组件在吸顶时与顶部的距离

```
<u-sticky offset-top="200">
	<text>塞下秋来风景异，衡阳雁去无留意</text>
</u-sticky>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/sticky/sticky.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/sticky/sticky.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| offsetTop | 吸顶时与顶部的距离，单位rpx | String | Number | 0 | \- |
| customNavHeight | 导航栏高度，自定义导航栏时，需要传入此值 | String | Number | 0 | \- |
| disabled | 是否禁用吸顶功能 | Boolean | false | true |
| bgColor | 组件背景颜色 | String | #ffffff | \- |
| zIndex | 吸顶时的`z-index`值，`NVUE`无效 | String | Number | \- | \- |
| index | 自定义标识，用于区分是哪一个组件 | String | Number | \- | \- |

← [Skeleton 骨架屏](https://www.uviewui.com/components/skeleton.html) [Divider 分割线](https://www.uviewui.com/components/divider.html) →




---

<!-- ============================================ -->
<!-- 类别: 反馈组件 -->
<!-- ============================================ -->

## [feedback/toast] toast
> 官方文档: https://www.uviewui.com/components/toast.html

---

## [#](#toast-消息提示) Toast 消息提示 [![](https://www.uviewui.com/common/to_api.png)](#api)

Toast 组件主要用于消息通知、加载提示、操作结果提示等醒目提示效果，我们为其提供了多种丰富的 API。

注意：

由于 uni 中无法通过 js 创建元素，所以需要在页面中调用`<toast />`组件，再通过`ref`开启

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

以下为不同能力的 toast 的具体表现

```
<template>
  <view>
    <u-toast ref="uToast"></u-toast>
    <u-cell-group title-bg-color="rgb(243, 244, 246)">
      <u-cell
        :titleStyle="{fontWeight: 500}"
        :title="item.title"
        v-for="(item, index) in list"
        :key="index"
        isLink
        :icon="item.iconUrl"
        @click="showToast(item)"
      >
      </u-cell>
    </u-cell-group>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        list: [
          {
            type: "default",
            title: "默认主题",
            message: "锦瑟无端五十弦",
            iconUrl: "https://uviewui.com/demo/toast/default.png",
          },
          {
            type: "error",
            icon: false,
            title: "失败主题",
            message: "一弦一柱思华年",
            iconUrl: "https://uviewui.com/demo/toast/error.png",
          },
          {
            type: "success",
            title: "成功主题(带图标)",
            message: "庄生晓梦迷蝴蝶",
            iconUrl: "https://uviewui.com/demo/toast/success.png",
          },
          {
            type: "loading",
            title: "正在加载",
            message: "正在加载",
            iconUrl: "https://uviewui.com/demo/toast/loading.png",
          },
          {
            type: "default",
            title: "结束后跳转标签页",
            message: "此情可待成追忆",
            url: "/pages/componentsB/tag/tag",
            iconUrl: "https://uviewui.com/demo/toast/jump.png",
          },
        ],
      };
    },
    computed: {
      getIcon() {
        return (path) => {
          return "https://uviewui.com/example/" + path + ".png";
        };
      },
    },
    methods: {
      showToast(params) {
        this.$refs.uToast.show({
          ...params,
          complete() {
            params.url &&
              uni.navigateTo({
                url: params.url,
              });
          },
        });
      },
    },
  };
</script>
<style lang="scss">
  .u-page {
    padding: 0;
  }

  .u-cell-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 8rpx;
  }

  .u-cell-group__title__text {
    font-weight: bold;
  }
</style>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/toast/toast.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/toast/toast.nvue)

### [#](#api) API

### [#](#params) Params

这些参数为通过`ref`调用`<toast/>`组件内部的`show`方法时，需要传递参数

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| loading | 是否加载中 | Boolean | false | true |
| message | 显示的文本 | String | Number | \- | \- |
| icon | 图标，或者绝对路径的图片 | String | \- | \- |
| position | toast 出现的位置 | String | center | top / bottom |
| type | 主题类型 | String | \- | \- |
| params | 跳转的参数 | Object | \- | \- |
| duration | 展示时间，单位 ms | String | Number | 2000 | \- |
| complete | 执行完后的回调函数 | Function | null | \- |

### [#](#methods) Methods

方法是通过`ref`调用的，参见上方说明 注意：所有有关`ref`的调用，都不能在页面的`onLoad`生命周期调用，因为此时组件尚未创建完毕，会报错，应该在`onReady`生命周期调用。

| 方法名 | 说明 | 参数 | 版本 |
| --- | --- | --- | --- |
| show | 显示 toast，如需一进入页面就显示 toast，请在`onReady`生命周期调用 | 见上方说明 | \- |

← [Alert 警告提示](https://www.uviewui.com/components/alert.html) [NoticeBar 滚动通知](https://www.uviewui.com/components/noticeBar.html) →




---
## [feedback/modal] modal
> 官方文档: https://www.uviewui.com/components/modal.html

---

## [#](#modal-模态框) Modal 模态框 [![](https://www.uviewui.com/common/to_api.png)](#api)

弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

默认情况下，模态框只有一个`确认`按钮：

-   请至少要配置弹框的内容参数`content`。
-   通过`show`绑定一个布尔变量来控制模态框的显示与否。

```
<template>
	<view >
		<u-modal :show="show" :title="title" :content='content'></u-modal>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show:false,
			title:'标题',
			content:'uView的目标是成为uni-app生态最优秀的UI框架'
		};
	}
};
</script>
```

### [#](#传入富文本内容) 传入富文本内容

有时候我们需要给模态框的内容，不一定是纯文本的字符串，可能会需要换行，嵌入其他元素等，这时候我们可以使用`slot`功能，再结合uni-app`rictText`组件， 就能传入富文本内容了，如下演示：

```
<template>
	<view >
		<u-modal :show="show"  :title="title" >
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show:false,
			title:'标题',
			content:`空山新雨后<br>
					天气晚来秋`
		};
	}
};
</script>
```

### [#](#异步关闭) 异步关闭

异步关闭只对"确定"按钮起作用，需要设置`asyncClose`为`true`，当点击确定按钮的时候，按钮的文字变成一个loading动画，此动画的颜色为 `confirm-color`参数的颜色，同时Modal不会自动关闭，需要手动设置通过`show`绑定的变量为`false`来实现手动关闭。

```
<template>
	<view class="">
		<u-modal :show="show" @confirm="confirm" ref="uModal" :asyncClose="true"></u-modal>
		<u-button @click="showModal">弹起Modal</u-button>
	</view>
</template>

<script>
export default {
    data() {
        return {
			show: false
		}
	},
	onLoad: function(opt) {

	},
	methods:{
		showModal() {
			this.show = true;
		},
		confirm() {
			setTimeout(() => {

				this.show = false;
			}, 3000)
		}
    }
}
</script>
```

### [#](#点击遮罩关闭) 点击遮罩关闭

有时候我们不显示"关闭"按钮的时候，需要点击遮罩也可以关闭Modal，这时通过配置`closeOnClickOverlay`为`true`即可（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）

```
<u-modal :show="show" :closeOnClickOverlay="true"></u-modal>
```

### [#](#控制模态框宽度) 控制模态框宽度

可以通过设置`width`参数控制模态框的宽度，不支持百分比，可以数值，px，rpx单位

```
<u-modal v-model="show" width="300px"></u-modal>
```

### [#](#缩放效果) 缩放效果

开启缩放效果，在打开和收起模态框的时候，会带有缩放效果，具体效果请见示例，此效果默认开启，通过`zoom`参数配置

```
<u-modal v-model="show" :zoom="false"></u-modal>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/modal/modal.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/modal/modal.nvue)

### [#](#api) API

### [#](#props) Props

注意：需要给`modal`组件通过`show`绑定一个布尔值，来初始化`modal`的状态，随后该值被双向绑定。

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| show | 是否显示模态框，请赋值给`show` | Boolean | false | true |
| title | 标题内容 | String | \- | \- |
| content | 模态框内容，如传入`slot`内容，则此参数无效 | String | \- | \- |
| confirmText | 确认按钮的文字 | String | 确认 | \- |
| cancelText | 取消按钮的文字 | String | 取消 | \- |
| showConfirmButton | 是否显示确认按钮 | Boolean | true | false |
| showCancelButton | 是否显示取消按钮 | Boolean | false | true |
| confirmColor | 确认按钮的颜色 | String | #2979ff | \- |
| cancelColor | 取消按钮的颜色 | String | #606266 | \- |
| duration 2.0.37 | 弹窗动画过度时间 | Number | 400 | \- |
| buttonReverse | 对调确认和取消的位置 | Boolean | false | true |
| zoom | 是否开启缩放模式 | Boolean | true | false |
| asyncClose | 是否异步关闭，只对确定按钮有效，见上方说明 | Boolean | false | true |
| closeOnClickOverlay | 是否允许点击遮罩关闭Modal（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调） | Boolean | false | true |
| negativeTop | 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为rpx单位 | String | Number | 0 | \- |
| width | modal宽度，不支持百分比，可以数值，px，rpx单位 | String | Number | 650rpx | px | rpx |
| confirmButtonShape | 确认按钮的样式,如设置，将不会显示取消按钮 | String | \- | circle(圆形) | square(方形) |

### [#](#event) Event

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| confirm | 点击确认按钮时触发 | \- |
| cancel | 点击取消按钮时触发 | \- |
| close | 点击遮罩关闭触发，closeOnClickOverlay为true有效 | \- |

### [#](#slots) Slots

| 名称 | 说明 |
| --- | --- |
| default | 传入自定义内容，一般为富文本，见上方说明 |
| confirmButton | 传入自定义按钮，用于在微信小程序弹窗通过按钮授权的场景 |

← [Popup 弹出层](https://www.uviewui.com/components/popup.html) [ScrollList 横向滚动列表](https://www.uviewui.com/components/scrollList.html) →




---
## [feedback/popup] popup
> 官方文档: https://www.uviewui.com/components/popup.html

---

## [#](#popup-弹出层) Popup 弹出层 [![](https://www.uviewui.com/common/to_api.png)](#api)

弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   弹出层的内容通过`slot`传入，由用户自定义
-   通过`show`绑定一个布尔值的变量控制弹出层的打开和收起

```
<template>
	<view>
		<u-popup :show="show" @close="close" @open="open">
            <view>
                <text>出淤泥而不染，濯清涟而不妖</text>
            </view>
		</u-popup>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>
<script>
	export default {
      data() {
        return {
          show: false
        }
      },
      methods: {
        open() {

        },
        close() {
          this.show = false

        }
      }
	}
</script>
```

### [#](#设置弹出层的方向) 设置弹出层的方向

-   可以通过`mode`参数设置，可以设置为`left`、`top`、`right`、`bottom`、`center`

```
<template>
	<u-popup :show="show" mode="top"  @close="close" @open="open">
        <view>
            <text>人生若只如初见，何事秋风悲画扇</text>
        </view>
	</u-popup>
</template>
<script>
  export default {
    data() {
      return {
        show: false
      }
    },
    methods: {
      open() {

      },
      close() {
        this.show = false

      }
    }
  }
</script>
```

### [#](#设置弹出层的圆角) 设置弹出层的圆角

需要将`round`设置为圆角值(仅对`mode = top | bottom | center`有效)。

```
<template>
	<u-popup :show="show" :round="10" mode="top" @close="close" @open="open">
		<view>
            <text>人生若只如初见，何事秋风悲画扇</text>
		</view>
	</u-popup>
</template>
<script>
  export default {
    data() {
      return {
        show: false
      }
    },
    methods: {
      open() {

      },
      close() {
        this.show = false

      }
    }
  }
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/popup/popup.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/popup/popup.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| show | 是否展示弹窗 | Boolean | false | true |
| overlay | 是否显示遮罩 | Boolean | true | false |
| mode | 弹出方向 | String | bottom | top / right / bottom / center |
| duration | 遮罩打开或收起的动画过渡时间，单位ms | String | Number | 300 | \- |
| closeable | 是否显示关闭图标 | Boolean | false | true |
| overlayStyle | 遮罩自定义样式，一般用于修改遮罩颜色，如：{background: 'rgba(3, 100, 219, 0.5)'} | Object | String | \- | \- |
| overlayOpacity | 遮罩透明度，`0-1`之间，勿与`overlayStyle`共用 | Number | String | 0.5 | \- |
| closeOnClickOverlay | 点击遮罩是否关闭弹窗（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调） | Boolean | true | false |
| zIndex | 弹出层的`z-index`值 | Number | String | 10075 | \- |
| safeAreaInsetBottom | 是否为留出[底部安全距离](https://www.uviewui.com/components/safeAreaInset.html) | Boolean | true | false |
| safeAreaInsetTop | 是否留出[顶部安全距离](https://www.uviewui.com/components/safeAreaInset.html)（状态栏高度） | Boolean | false | true |
| closeIconPos | 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角 | String | top-right | top-left / bottom-left / bottom-right |
| round | 设置圆角值，仅对`mode = top | bottom | center`有效 | Number | String | 0 | \- |
| zoom | 当mode=center时 是否开启缩放 | Boolean | true | false |
| bgColor | 背景色，一般用于特殊弹窗内容场景，设置为`transparent`可去除默认的白色背景 | String | \- | \- |
| customStyle | 用户自定义样式 | Object | \- | \- |

### [#](#event) Event

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| open | 弹出层打开 | \- | \- |
| close | 弹出层收起 | \- | \- |

← [Collapse 折叠面板](https://www.uviewui.com/components/collapse.html) [Modal 模态框](https://www.uviewui.com/components/modal.html) →




---
## [feedback/actionSheet] actionSheet
> 官方文档: https://www.uviewui.com/components/actionSheet.html

---

## [#](#actionsheet-操作菜单) ActionSheet 操作菜单 [![](https://www.uviewui.com/common/to_api.png)](#api)

本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。
本组件功能类似于uni的`uni.showActionSheet`API，配置更加灵活，所有平台都表现一致。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`title`(设置标题)，`cancelText`(取消按钮的文字，不为空时显示按钮)，`description`(选项上方的描述信息)
-   通过`actions`设置需要显示的菜单，该值为一个数组，元素为对象，对象至少要提供`name`属性，另外可选的有`subname`(描述)，`disabled`(是否禁用)，`loading`(加载动画)， `color`(字体颜色)，`fontSize`(字体大小)，
-   通过`show`绑定一个值为布尔值的变量控制组件的弹出与收起，`show`的值是双向绑定的

```
<template>
	<view>
		<u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true">打开ActionSheet</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'标题',
			list: [
				{
					name:'选项一',
					subname:"选项一描述",
					color:'#ffaa7f',
					fontSize:'20'
				},
				{
					name: '选项二禁用',
					disabled:true
				},
				{
					name: '开启load加载',
					loading:true
				}
			],
			show: false
		};
	}
};
</script>
```

### [#](#配置点击遮罩关闭和点击某个菜单项时关闭弹窗) 配置点击遮罩关闭和点击某个菜单项时关闭弹窗

-   通过`closeOnClickAction`参数来配置点击某个菜单项时是否关闭弹窗。
-   通过`closeOnClickOverlay`参数配置点击遮罩是否允许关闭（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）

```
<template>
	<view>
		<u-action-sheet :actions="list" :closeOnClickOverlay="true" :closeOnClickAction="true"  :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true">打开ActionSheet</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'标题',
			list: [
				{
					name:'选项一'
				},
				{
					name: '选项二'
				}
			],
			show: false
		};
	},
	onLoad() {},
	methods: {
	}
};
</script>
```

### [#](#点击获取所点击选项name) 点击获取所点击选项name

`select`回调事件带有一个`object`值，这个索引值为传递的`select`数组的name值，根据回调事件，能获得点击了 该项的内容

```
<template>
	<view>
		<u-action-sheet :actions="list" @select="selectClick" :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true">打开ActionSheet</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'标题',
			list: [
				{
					name:'选项一'
				},
				{
					name: '选项二'
				}
			],
			show: false
		};
	},
	onLoad() {},
	methods: {
		selectClick(index){
			console.log(index)
		}
	}
};
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/actionSheet/actionSheet.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/actionSheet/actionSheet.nvue)

### [#](#api) API

### [#](#props) Props

注意：props中没有控制组件弹出与收起的参数，因为这是通过show绑定变量实现的，见上方说明。

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| show | 是否展示 | Boolean | false | true |
| title | 设置标题 | String | \- | \- |
| description | 选项上方的描述信息，见上方文档示例 | String | \- | \- |
| actions | 按钮的文字数组，见上方文档示例 | Array<Object> | \[ \] | \- |
| cancelText | 取消按钮的文字，不为空时显示按钮 | String | \- | \- |
| closeOnClickAction | 点击某个菜单项时是否关闭弹窗，见上方文档示例 | String | \- | \- |
| safeAreaInsetBottom | 是否开启[底部安全区适配](https://www.uviewui.com/components/safeAreaInset.html#%E5%85%B3%E4%BA%8Euview%E6%9F%90%E4%BA%9B%E7%BB%84%E4%BB%B6safe-area-inset%E5%8F%82%E6%95%B0%E7%9A%84%E8%AF%B4%E6%98%8E) | Boolean | false | true |
| openType | 小程序的打开方式 | String | \- | \- |
| closeOnClickOverlay | 点击遮罩是否允许关闭，见上方文档示例（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调） | Boolean | \- | \- |
| round | 圆角值，默认无圆角 | String | Number | 0 | \- |
| lang | 指定返回用户信息的语言，zh\_CN 简体中文，zh\_TW 繁体中文，en 英文 | String | en | zh\_CN | zh\_TW | en |
| sessionFrom | 会话来源，open-type="contact"时有效。只微信小程序有效 | String | \- | \- |
| sendMessageTitle | 会话内消息卡片标题，openType="contact"时有效 | String | \- | \- |
| sendMessagePath | 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 | String | \- | \- |
| sendMessageImg | 会话内消息卡片图片，openType="contact"时有效 | String | \- | \- |
| showMessageCard | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 | Boolean | false | true |
| appParameter | 打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效 | String | \- | \- |

### [#](#event) Event

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| select | 点击ActionSheet列表项时触发 | \- | \- |
| close | 点击取消按钮时触发 | \- | \- |
| getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效 | detail | \- |
| contact | 客服消息回调，openType="contact"时有效 | \- | \- |
| getphonenumber | 获取用户手机号回调，openType="getPhoneNumber"时有效 | \- | \- |
| error | 当使用开放能力时，发生错误的回调，openType="error"时有效 | \- | \- |
| launchapp | 打开 APP 成功的回调，openType="launchApp"时有效 | \- | \- |
| opensetting | 在打开授权设置页后回调，openType="openSetting"时有效 | \- | \- |

← [Tooltip 长按提示](https://www.uviewui.com/components/tooltip.html) [Alert 警告提示](https://www.uviewui.com/components/alert.html) →




---
## [feedback/alert] alert
> 官方文档: https://www.uviewui.com/components/alert.html

---

## [#](#alert-警告提示) Alert 警告提示 [![](https://www.uviewui.com/common/to_api.png)](#api)

警告提示，展现需要关注的信息。

### [#](#使用场景) 使用场景

-   当某个页面需要向用户显示警告的信息时。
-   非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`title`和`description`设置组件的标题和描述内容
-   通过`type`设置主题类型，有`primary`,`success`,`error`,`warning`,`info`可选值
-   通过`effect`设置主题浅或深色调，有`light`(浅色 默认),`dark`(深色)可选值

```
<template>
	<view>
		<u-alert :title="title" type = "warning" :description = "description"></u-alert>
		<u-alert :title="title" type = "warning" effect="dark" :description = "description"></u-alert>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'uView的目标是成为uni-app生态最优秀的UI框架',
			description:'uView是uni-app生态专用的UI框架'
		};
	},
	onLoad() {},
	methods: {
	}
};
</script>
```

### [#](#图标) 图标

通过`showIcon`设置是否显示图标，作用是让信息类型更加醒目。

**注意**：当前版本图标为uView内置图标，根据`type`参数显示不同的图标，无法自定义。

```
<u-alert type="warning" :show-icon="true"></u-alert>
```

### [#](#可关闭的警告提示) 可关闭的警告提示

显示关闭按钮，点击可关闭警告提示。

-   `closable`参数配置是否可关闭

```
<template>
	<view>
		<u-alert :title="title"  type = "warning" :closable="closable" :description = "description"></u-alert>

	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'uView的目标是成为uni-app生态最优秀的UI框架',
			description:'uView是uni-app生态专用的UI框架',
			closable:true
		};
	},
	onLoad() {},
	methods: {
	}
};
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/alert/alert.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/alert/alert.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| title | 显示的文字 | String | \- | \- |
| type | 使用预设的颜色 | String | warning | success | primary | error | info |
| description | 辅助性文字，颜色比`title`浅一点，字号也小一点，可选 | String | \- | \- |
| closable | 关闭按钮(默认为叉号icon图标) | Boolean | false | true |
| showIcon | 是否显示左边的辅助图标 | Boolean | false | true |
| effect | 多图时，图片缩放裁剪的模式 | String | light(浅色) | dark(深色) |
| center | 文字是否居中 | Boolean | false | true |
| fontSize | 字体大小 | String | Number | 14 | \- |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击组件时触发 | \- |

← [ActionSheet 操作菜单](https://www.uviewui.com/components/actionSheet.html) [Toast 消息提示](https://www.uviewui.com/components/toast.html) →




---
## [feedback/notify] notify
> 官方文档: https://www.uviewui.com/components/notify.html

---

## [#](#notify-消息提示) Notify 消息提示 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

```
<template>
	<u-notify message="Hi uView" :show="show"></u-notify>
</template>

<script>
export default {
    data() {
        return {
            show: true
        }
    }
}
</script>
```

### [#](#ref调用) ref调用

```
<template>
	<u-notify ref="uNotify" message="Hi uView"></u-notify>
</template>

<script>
export default {
    onReady(){
	    this.$refs.uNotify.show({
            top: 10,
            type: 'error',
            color: '#000',
            bgColor: '#e8e8e8',
            message: 'Hi uView',
            duration: 1000 * 3,
            fontSize: 20,
            safeAreaInsetTop:true
        })

    }
}
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/notify/notify.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/notify/notify.nvue)

### [#](#api) API

### [#](#methods) Methods

| 事件名 | 说明 | 类型 |
| --- | --- | --- |
| show | 显示并加载配置 | Handler |
| primary / success / warning /error | 显示当前主题消息提示 | Handler |
| close | 关闭消息提示 | Handler |

### [#](#show-methods-arguments) Show Methods Arguments

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| top | 到顶部的距离 | String | Number | 0 | \- |
| type | 主题，primary，success，warning，error | String | primary | \- |
| color | 字体颜色 | String | #ffffff | \- |
| bgColor | 背景颜色 | String | \- | \- |
| message | 展示的文字内容 | String | \- | \- |
| duration | 展示时长，为0时不消失，单位ms | String | Number | 3000 | \- |
| fontSize | 字体大小，单位rpx | String | Number | 15 | \- |
| safeAreaInsetTop | 是否留出顶部安全距离（状态栏高度） | Boolean | false | true |

### [#](#slot) Slot

| 参数 | 说明 |
| --- | --- |
| icon | 通知内容 |

← [NoticeBar 滚动通知](https://www.uviewui.com/components/noticeBar.html) [SwipeAction 滑动单元格](https://www.uviewui.com/components/swipeAction.html) →




---
## [feedback/noticeBar] noticeBar
> 官方文档: https://www.uviewui.com/components/noticeBar.html

---

## [#](#noticebar-滚动通知) NoticeBar 滚动通知 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件用于滚动通告场景，有多种模式可供选择

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`text`参数设置需要滚动的内容

```
<template>
	<view>
      <u-notice-bar :text="text1"></u-notice-bar>
    </view>
</template>

<script>
	export default {
		data() {
			return {
              text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
			}
		}
	}
</script>
```

### [#](#可关闭) 可关闭

通过`mode`配置为`closable`让右侧显示关闭按钮

```
<template>
  <view>
    <u-notice-bar :text="text1" mode="closable"></u-notice-bar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
      }
    }
  }
</script>
```

### [#](#配置滚动速度和跳转) 配置滚动速度和跳转

-   `speed`可配置横向滚动速度
-   `url`可配置跳转

```
<template>
  <view>
    <u-notice-bar :text="text1" mode="closable" speed="250" url="/pages/componentsB/tag/tag"></u-notice-bar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'
      }
    }
  }
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/noticeBar/noticeBar.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/noticeBar/noticeBar.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| text | 显示的内容，`direction`为`column`时要求为数组， 为`row`时要求为字符串 | Array | String | \- | \- |
| direction | 通告滚动模式，row-横向滚动，column-竖向滚动 | String | row | column |
| step | direction = row时，是否使用步进形式滚动 | Boolean | false | true |
| icon | 是否显示左侧的音量图标 | String | volume | \- |
| mode | 通告模式，link-显示右箭头，closable-显示右侧关闭图标 | String | \- | link / closable |
| color | 文字颜色 | String | #f9ae3d | \- |
| bgColor | 背景颜色 | String | #fdf6ec | \- |
| speed | 水平滚动时的滚动速度，即每秒滚动多少px(rpx)，这有利于控制文字无论多少时，都能有一个恒定的速度 | String | Number | 80 | \- |
| fontSize | 字体大小 | String | Number | 14 | \- |
| duration | 滚动一个周期的时间长，单位ms | String | Number | 2000 | \- |
| disableTouch | 是否禁止用手滑动切换（目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序） | Boolean | true | false |
| url | 跳转的页面路径 | String | \- | \- |
| linkType | 页面跳转的类型 | String | navigateTo | \- |

### [#](#events) Events

详细解释见上方说明

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| click | 点击通告文字触发 | index: 点击的text的索引 | \- |
| close | 点击右侧关闭图标触发 | \- | \- |

← [Toast 消息提示](https://www.uviewui.com/components/toast.html) [Notify 消息提示](https://www.uviewui.com/components/notify.html) →




---
## [feedback/tooltip] tooltip
> 官方文档: https://www.uviewui.com/components/tooltip.html

---

## [#](#tooltip-长按提示) Tooltip 长按提示 [![](https://www.uviewui.com/common/to_api.png)](#api)

Tooltip组件主要用于长按操作，类似微信的长按气泡

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用.

说明

由于安卓`nvue`下，`overflow`属性不支持`visible`值，故此组件暂不支持安卓`nvue`环境。

```
<template>
    <u-tooltip text="复制" overlay></u-tooltip>
</template>
```

### [#](#下方显示) 下方显示

```
<template>
    <u-tooltip text="下方显示" direction="bottom"></u-tooltip>
</template>
```

### [#](#扩展按钮) 扩展按钮

```
<template>
    <u-tooltip text="扩展显示" :buttons="['扩展']"></u-tooltip>
</template>
```

### [#](#高亮选中文本背景色) 高亮选中文本背景色

```
<template>
    <u-tooltip text="高亮选中文本背景色" :buttons="['扩展']" bgColor="#e3e4e6"></u-tooltip>
</template>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/tooltip/tooltip.vue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/tooltip/tooltip.vue)

### [#](#api) API

### [#](#tooltip-props) Tooltip Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| text | 需要显示的提示文字 | String | Number | \- | \- |
| copyText | 点击复制按钮时，复制的文本，为空则使用text值 | String | Number | \- | \- |
| size | 文本大小 | String | Number | 14 | \- |
| color | 字体颜色 | String | #606266 | \- |
| bgColor | 弹出提示框时，文本的背景色 | String | transparent | \- |
| direction | 弹出提示的方向，top-上方，bottom-下方 | String | top | bottom |
| zIndex | 弹出提示的z-index，nvue无效 | String | Number | 10071 | \- |
| showCopy | 是否显示复制按钮 | Boolean | true | false |
| buttons | 扩展的按钮组 | Array | \- | \- |
| overlay | 是否显示透明遮罩以防止触摸穿透 | Boolean | true | false |
| showToast | 是否显示复制成功或者失败的`toast` | Boolean | true | false |

### [#](#tooltip-events) Tooltip Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击触发事件 | index，被点击按钮的索引 |

← [CountTo 数字滚动](https://www.uviewui.com/components/countTo.html) [ActionSheet 操作菜单](https://www.uviewui.com/components/actionSheet.html) →




---
## [feedback/swipeAction] swipeAction
> 官方文档: https://www.uviewui.com/components/swipeAction.html

---

## [#](#swipeaction-滑动单元格) SwipeAction 滑动单元格 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。

注意

如果把该组件通过v-for用于左滑删除的列表，请保证循环的`:key`是一个唯一值，可以用数据的id或者title替代。 不能是数组循环的index，否则删除的时候，可能会出现数据错乱

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过slot传入内部内容即可，可以将`v-for`的"index"索引值传递给`index`参数，用于点击时，在回调方法中对某一个数据进行操作(点击回调时第一个参数会返回此索引值)
-   内部的按钮通过`options`参数配置，此参数为一个数组，元素为对象，可以配置按钮的文字，背景颜色(建议只配置此两个参数即可)，**请勿配置宽高等属性**。

```
<template>
	<view>
      <u-swipe-action>
        <u-swipe-action-item
          :options="options1"
        >
          <view class="swipe-action u-border-top u-border-bottom">
            <view class="swipe-action__content">
              <text class="swipe-action__content__text">基础使用</text>
            </view>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                options1: [{
                    text: '删除'
                }]
			};
		},
	};
</script>

<style lang="scss">
    .u-page {
        padding: 0;
    }

    .u-demo-block__title {
        padding: 10px 0 2px 15px;
    }

    .swipe-action {
        &__content {
             padding: 25rpx 0;

            &__text {
                 font-size: 15px;
                 color: $u-main-color;
                 padding-left: 30rpx;
             }
        }
    }
</style>
```

### [#](#多个按钮并列) 多个按钮并列

-   通过添加`options`的值，达到多个并列的效果

```
<template>
	<view>
      <u-swipe-action>
        <u-swipe-action-item :options="options2">
          <view class="swipe-action u-border-top u-border-bottom">
            <view class="swipe-action__content">
              <text class="swipe-action__content__text">两个按钮并列</text>
            </view>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                options2: [{
                    text: '收藏',
                    style: {
                        backgroundColor: '#3c9cff'
                    }
                }, {
                    text: '删除',
                    style: {
                        backgroundColor: '#f56c6c'
                    }
                }],
			};
		},
	};
</script>

<style lang="scss">
    .u-page {
        padding: 0;
    }

    .u-demo-block__title {
        padding: 10px 0 2px 15px;
    }

    .swipe-action {
        &__content {
             padding: 25rpx 0;

            &__text {
                 font-size: 15px;
                 color: $u-main-color;
                 padding-left: 30rpx;
             }
        }
    }
</style>
```

### [#](#组合使用) 组合使用

-   通过增设`options`的`options`达成组合效果

```
<template>
	<view>
      <u-swipe-action>
        <u-swipe-action-item
          :options="item.options"
          v-for="(item, index) in options4"
          :disabled="item.disabled"
          :key="index"
        >
          <view
            class="swipe-action u-border-top"
            :class="[index === options4.length - 1 && 'u-border-bottom']"
          >
            <view class="swipe-action__content">
              <text class="swipe-action__content__text">{{ item.text }}</text>
            </view>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                options4: [{
                    text: '禁用状态',
                    disabled: true,
                    options: [{
                        text: '置顶',
                        style: {
                            backgroundColor: '#3c9cff',
                        }
                    },
                        {
                            text: '取消',
                            style: {
                                backgroundColor: '#f9ae3d',
                            }
                        },
                    ],
                }, {
                    text: '正常状态',
                    disabled: false,
                    options: [{
                        text: '置顶',
                        style: {
                            backgroundColor: '#3c9cff',
                        }
                    },
                        {
                            text: '取消',
                            style: {
                                backgroundColor: '#f9ae3d',
                            }
                        },
                    ],
                }, {
                    text: '自动关闭',
                    disabled: false,
                    options: [{
                        text: '置顶',
                        style: {
                            backgroundColor: '#3c9cff',
                        }
                    },
                        {
                            text: '取消',
                            style: {
                                backgroundColor: '#f9ae3d',
                            }
                        },
                    ],
                }],
			};
		},
	};
</script>

<style lang="scss">
    .u-page {
        padding: 0;
    }

    .u-demo-block__title {
        padding: 10px 0 2px 15px;
    }

    .swipe-action {
        &__content {
             padding: 25rpx 0;

            &__text {
                 font-size: 15px;
                 color: $u-main-color;
                 padding-left: 30rpx;
             }
        }
    }
</style>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/swipeAction/swipeAction.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/swipeAction/swipeAction.nvue)

### [#](#api) API

### [#](#swipeaction-props) SwipeAction Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| autoClose | 是否自动关闭其他swipe按钮组 | Boolean | true | false |

### [#](#swipeaction-event) SwipeAction Event

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击组件时触发 | (index) |

### [#](#swipeactionitem-props) SwipeActionItem Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| show | 控制打开或者关闭 | Boolean | false | true |
| index | 标识符，如果是v-for，可用index索引 | String | Number | \- | \- |
| disabled | 是否禁用 | Boolean | false | true |
| autoClose | 是否自动关闭其他swipe按钮组 | Boolean | true | false |
| threshold | 滑动距离阈值，只有大于此值，才被认为是要打开菜单 | Number | 20 | \- |
| options | 右侧按钮内容 | Array | \[\] | \- |
| duration | 动画过渡时间，单位ms | String | Number | 300 | \- |
| name | 标识符，如果是v-for，可用index索引值 | String | Number | \- | \- |

### [#](#swipeactionitem-event) SwipeActionItem Event

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 按钮被点击时触发 | name: props参数`name`的值，index: 第几个按钮被点击 |

← [Notify 消息提示](https://www.uviewui.com/components/notify.html) [Collapse 折叠面板](https://www.uviewui.com/components/collapse.html) →




---
## [feedback/overlay] overlay
> 官方文档: https://www.uviewui.com/components/overlay.html

---

## [#](#overlay-遮罩层) Overlay 遮罩层 [![](https://www.uviewui.com/common/to_api.png)](#api)

创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`show`参数配置是否显示遮罩
-   遮罩被点击时，会发送一个`click`事件，如不需要此事件，请设置`mask-click-able`参数为`false`

```
<template>
	<u-overlay :show="show" @click="show = false"></u-overlay>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		}
	}
</script>
```

### [#](#嵌入内容) 嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容
注意：如果不想让`slot`插槽内容的点击事件冒泡到遮罩，请给指定元素添加上`@tap.stop`

```
<template>
	<u-overlay :show="show" @click="show = false">
		<view class="warp">
			<view class="rect" @tap.stop></view>
		</view>
	</u-overlay>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			}
		}
	}
</script>

<style scoped>
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 120px;
		height: 120px;
		background-color: #fff;
	}
</style>
```

### [#](#遮罩样式) 遮罩样式

-   通过`duration`设置遮罩淡入淡出的时长，单位`ms`

```
<u-overlay :show="show" :duration="400" :z-index ="999" :opacity="0.3"></u-overlay>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/overlay/overlay.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/overlay/overlay.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| show | 是否显示遮罩 | Boolean | false | true |
| zIndex | z-index 层级 | String | Number | 10070 | \- |
| duration | 动画时长，单位毫秒 | String | Number | 300 | \- |
| opacity | 不透明度值，当做rgba的第四个参数 | String | Number | 0.5 | \- |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击遮罩发送此事件 | \- |

### [#](#slot) Slot

| 名称 | 说明 |
| --- | --- |
| default | 默认插槽，用于在遮罩层上方嵌入内容 |

← [Line 线条](https://www.uviewui.com/components/line.html) [NoNetwork 无网络提示](https://www.uviewui.com/components/noNetwork.html) →




---
## [feedback/noNetwork] noNetwork
> 官方文档: https://www.uviewui.com/components/noNetwork.html

---

## [#](#nonetwork-无网络提示) NoNetwork 无网络提示 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件无需任何配置，引入即可，内部自动处理所有功能和事件，有如下特点：

-   如果没有网络，该组件会以`fixed`定位，并且以很大的`z-index`值覆盖原来的内容。一旦有网络了，会自动隐藏该组件，实现自动化
-   在APP上，嵌入了5+接口，可以直接打开手机的设置页面，方便用户进行网络相关的设置

说明

1.  应用有网络时，是不会触发本组件的，为了测试此功能，请关闭手机的数据连接以及WiFi即可
2.  由于普通的组件无法覆盖原生组件，所以本组件不适用那些有`video`，`map`等原生表现的组件的页面，可以自行使用uni的`cover-view`组件修改

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

```
<template>
	<view>
		<u-no-network
			@disconnected="disconnected"
			@connected="connected"
			@retry="retry"
		></u-no-network>
		<view class="u-content">
			<view class="u-content__circle">
				<u-icon
					name="checkbox-mark"
					color="#fff"
					size="30"
				></u-icon>
			</view>
			<text class="u-content__normal">网络正常</text>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			disconnected() {
				console.log('disconnected');
			},
			connected() {
				console.log('connected');
			},
			retry() {
				console.log('retry');
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-content {
		padding: 150px 60px 0;
		@include flex(column);
		align-items: center;
		justify-content: center;

		&__circle {
			background-color: $u-success;
			@include flex;
			border-radius: 100px;
			width: 60px;
			height: 60px;
			align-items: center;
			justify-content: center;
		}

		&__normal {
			font-size: 15px;
			color: $u-success;
			margin-top: 15px;
		}
	}
</style>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/noNetwork/noNetwork.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/noNetwork/noNetwork.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| tips | 没有网络时的提示语 | String | 哎呀，网络信号丢失 | \- |
| image | 无网络的图片提示，可用的src地址或base64图片 | String | \- | \- |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| retry | 用户点击页面的"重试"按钮时触发 | \- |
| connected | "重试"后，有网络触发 | \- |
| disconnected | "重试"后，无网络触发 | \- |

← [Overlay 遮罩层](https://www.uviewui.com/components/overlay.html) [Grid 宫格布局](https://www.uviewui.com/components/grid.html) →




---
## [feedback/scrollList] scrollList
> 官方文档: https://www.uviewui.com/components/scrollList.html

---

## [#](#scrolllist-横向滚动列表) ScrollList 横向滚动列表 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

通过 slot 传入内容

```
<template>
  <u-scroll-list>
    <view v-for="(item, index) in list" :key="index">
      <image :src="item.thumb"></image>
    </view>
  </u-scroll-list>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            thumb: "https://uviewui.com/goods/1.jpg",
          },
          {
            thumb: "https://uviewui.com/goods/2.jpg",
          },
          {
            thumb: "https://uviewui.com/goods/3.jpg",
          },
          {
            thumb: "https://uviewui.com/goods/4.jpg",
          },
          {
            thumb: "https://uviewui.com/goods/5.jpg",
          },
        ],
      };
    },
  };
</script>
```

# [#](#指示器的使用) 指示器的使用

-   `indicator` 用于控制指示器是否显示
-   `indicatorWidth` 用于控制指示器整体的宽度
-   `indicatorBarWidth` 用于控制指示器滑块的宽度
-   `indicatorColor` 指示器的颜色
-   `indicatorActiveColor` 滑块的颜色
-   `indicatorStyle` 指示器的位置/样式控制

```
<template>
  <u-scroll-list
    :indicator="indicator"
    indicatorColor="#fff0f0"
    indicatorActiveColor="#f56c6c"
  >
    <view v-for="(item, index) in list" :key="index">
      <image :src="item.thumb"></image>
    </view>
  </u-scroll-list>
</template>

<script>
  export default {
    data() {
      return {
        indicator: true,
        list: [
          {
            thumb: "https://uviewui.com/goods/1.jpg",
          },
          {
            thumb: "https://uviewui.com/goods/2.jpg",
          },
          {
            thumb: "https://uviewui.com/goods/3.jpg",
          },
          {
            thumb: "https://uviewui.com/goods/4.jpg",
          },
          {
            thumb: "https://uviewui.com/goods/5.jpg",
          },
        ],
      };
    },
  };
</script>
```

### [#](#兼容性与性能) 兼容性与性能

-   此组件是在 nvue 中引入 bindingx，此库类似于微信小程序 wxs，目的是让 js 运行在视图层，减少视图层和逻辑层的通信折损，在 nvue 中会有更好的体验。
-   此组件是在 APP-VUE、H5、小程序中使用的是 wxs。
-   其他平台则使用 js 完成。

当滑动到最左边/最右边时，uView 提供了事件`left`和`right`可供调用，用于对列表滑动到端点处的业务实现。

```
<template>
  <u-scroll-list @right="right" @left="left">
    <view class="scroll-list" style="flex-direction: row;">
      <view
        class="scroll-list__goods-item"
        v-for="(item, index) in list"
        :key="index"
        :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
      >
        <image class="scroll-list__goods-item__image" :src="item.thumb"></image>
        <text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
      </view>
      <view class="scroll-list__show-more">
        <text class="scroll-list__show-more__text">查看更多</text>
        <u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
      </view>
    </view>
  </u-scroll-list>
</template>
<script>
  export default {
    data() {
      return {
        list: [
          {
            price: "230.5",
            thumb: "https://uviewui.com/goods/1.jpg",
          },
          {
            price: "74.1",
            thumb: "https://uviewui.com/goods/2.jpg",
          },
          {
            price: "8457",
            thumb: "https://uviewui.com/goods/6.jpg",
          },
          {
            price: "1442",
            thumb: "https://uviewui.com/goods/5.jpg",
          },
          {
            price: "541",
            thumb: "https://uviewui.com/goods/2.jpg",
          },
          {
            price: "234",
            thumb: "https://uviewui.com/goods/3.jpg",
          },
          {
            price: "562",
            thumb: "https://uviewui.com/goods/4.jpg",
          },
          {
            price: "251.5",
            thumb: "https://uviewui.com/goods/1.jpg",
          },
        ],
      };
    },
    methods: {
      left() {
        console.log("left");
      },
      right() {
        console.log("right");
      },
    },
  };
</script>

<style lang="scss">
  .scroll-list {
    @include flex(column);

    &__goods-item {
      margin-right: 20px;

      &__image {
        width: 60px;
        height: 60px;
        border-radius: 4px;
      }

      &__text {
        color: #f56c6c;
        text-align: center;
        font-size: 12px;
        margin-top: 5px;
      }
    }

    &__show-more {
      background-color: #fff0f0;
      border-radius: 3px;
      padding: 3px 6px;
      @include flex(column);
      align-items: center;

      &__text {
        font-size: 12px;
        width: 12px;
        color: #f56c6c;
        line-height: 16px;
      }
    }
  }
</style>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/scrollList/scrollList.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/scrollList/scrollList.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| indicatorWidth | 指示器的整体宽度 | String | Number | 50 | \- |
| indicatorBarWidth | 滑块的宽度 | String | Number | 20 | \- |
| indicator | 是否显示面板指示器 | Boolean | true | false |
| indicatorColor | 指示器非激活颜色 | String | #f2f2f2 | \- |
| indicatorActiveColor | 指示器滑块颜色 | String | #3c9cff | \- |
| indicatorStyle | 指示器样式，可通过 bottom，left，right 进行定位 | String | Object | \- | \- |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| left | 滑动到左边时触发 | \- |
| right | 滑动到右边时触发 | \- |

← [Modal 模态框](https://www.uviewui.com/components/modal.html) [Line 线条](https://www.uviewui.com/components/line.html) →




---

<!-- ============================================ -->
<!-- 类别: 导航组件 -->
<!-- ============================================ -->

## [navigation/navbar] navbar
> 官方文档: https://www.uviewui.com/components/navbar.html

---

### [#](#navbar-自定义导航栏) Navbar 自定义导航栏 [![](https://www.uviewui.com/common/to_api.png)](#api)

此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。

提示

右侧的演示中，导航栏上方有圆角，也有顶部的手机模型状态栏内容，以及返回图标和文字不对齐的情况。这是因为网页演示导致，实际中无此情况，请通过右上角的“演示”扫码查看实际效果。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

默认情况下，该组件只有向左的箭头，**点击**可以返回上一页，如果您想将自定义导航栏用在tabbar(不存在要返回的逻辑)页面， 这样会隐藏左边的返回图标区域。

-   如果想在返回箭头的右边自定义类似"返回"字样，可以将`left-text`设置为"返回"
-   通过`title`参数传入需要显示的标题，通过`title-width`(rpx)设置标题区域的宽度，文字超出会通过省略号隐藏
-   通过`fixed`配置是否将导航栏固定在顶部

说明

-   在小程序中，导航栏会自动适配导航栏右侧的胶囊位置，避开该区域
-   组件底部默认有一条下边框，如您不需要，可以设置`border`为`false`即可

```
<template>
	<view>

        <u-navbar
            title="个人中心"
            @rightClick="rightClick"
            :autoBack="true"
        >
        </u-navbar>
	</view>
</template>

<script>
    methods:{
        rightClick() {
            console.log('rightClick');
        },
        leftClick() {
            console.log('leftClick');
        }
    }
</script>
```

### [#](#注意事项) 注意事项

既然是要自定义导航栏，那么首先就要取消系统自带的导航栏，需要在uni-app目的根目录的"pages.json"中设置，同时在此设置状态栏字体的颜色(H5无效)， 自定义导航栏后，如果想通过"uni.setNavigationBarColor"动态设置导航栏颜色相关参数，是可能会出问题的，请勿使用此方式。

```

"pages": [

	{
		"path": "/pages/navbar/index",
		"style": {
			"navigationStyle": "custom" ,
			"navigationBarTextStyle": "white"
		}
	}
]
```

### [#](#导航栏高度) 导航栏高度

可以通过`height`(单位**px**，默认44，和uni-app统导航栏高度一致)配置导航栏的高度，此高度为导航栏内容的高度，不含状态栏的高度，组件内部会自动 加上状态栏的高度，并填充状态栏的占位区域。

### [#](#自定义导航栏内容) 自定义导航栏内容

通过自定义`slot`传入的内容

```
<template>
	<view>
        <u-navbar
            leftText="返回"
            title="个人中心"
            :safeAreaInsetTop="false"
        >
            <view
                class="u-nav-slot"
                slot="left"
            >
                <u-icon
                    name="arrow-left"
                    size="19"
                ></u-icon>
                <u-line
                    direction="column"
                    :hairline="false"
                    length="16"
                    margin="0 8px"
                ></u-line>
                <u-icon
                    name="home"
                    size="20"
                ></u-icon>
            </view>
        </u-navbar>
	</view>
</template>
```

### [#](#自定义导航栏背景颜色) 自定义导航栏背景颜色

uView提供了一个`bgColor`参数，可以自定义导航栏的背景颜色：

```
<template>
	<view>
		<u-navbar title="" :bgColor="bgColor">

		</u-navbar>
		<view class="content">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: '#001f3f',
			}
		}
	}
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/navbar/navbar.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/navbar/navbar.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| safeAreaInsetTop | 是否开启顶部安全区适配 | Boolean | true | false |
| placeholder | 固定在顶部时，是否生成一个等高元素，以防止塌陷 | Boolean | false | true |
| fixed | 导航栏是否固定在顶部 | Boolean | true | false |
| border | 导航栏底部是否显示下边框 | Boolean | false | true |
| leftIcon | 左边返回图标的名称，只能为uView自带的图标 | String | arrow-left | \- |
| leftText | 左边的提示文字 | String | \- | \- |
| rightText | 右边的提示文字 | String | \- | \- |
| rightIcon | 右边返回图标的名称，只能为uView自带的图标 | String | \- | \- |
| title | 导航栏标题，如设置为空字符，将会隐藏标题占位区域 | String | \- | \- |
| bgColor | 导航栏背景设置 | String | #ffffff | \- |
| titleWidth | 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx | String | Number | 400rpx | \- |
| height | 导航栏高度(不包括状态栏高度在内，内部自动加上)，单位px | String | Number | 44px | \- |
| leftIconSize | 左侧返回图标的大小 | String | Number | 20px | \- |
| leftIconColor | 左侧返回图标的颜色 | String | #303133 | \- |
| autoBack 2.0.19 | 点击左侧区域(返回图标)，是否自动返回上一页 | Boolean | false | true |
| titleStyle 2.0.23 | 标题的样式，对象或字符串形式 | String | Object | \- | \- |

### [#](#event) Event

| 名称 | 说明 | 类型 |
| --- | --- | --- |
| leftClick | 点击左侧区域 | Handler |
| rightClick | 点击右侧区域 | Handler |

注意

App端不存在$slots,插槽`slot`使用前,需要满足`rightIcon`或者`rightText`不为空。

### [#](#slot) Slot

| 名称 | 说明 |
| --- | --- |
| left | 自定义左侧部分内容 |
| right | 自定义右侧部分内容 |
| center 2.0.17 | 自定义中部内容 |

← [BackTop 返回顶部](https://www.uviewui.com/components/backTop.html) [Tabs 标签](https://www.uviewui.com/components/tabs.html) →




---
## [navigation/tabbar] tabbar
> 官方文档: https://www.uviewui.com/components/tabbar.html

---

## [#](#tabbar-底部导航栏) Tabbar 底部导航栏 [![](https://www.uviewui.com/common/to_api.png)](#api)

#### [#](#优点) 优点：

此组件提供了自定义 tabbar 的能力，具有如下特点：

-   图标可以使用字体图标(内置图标和扩展图标)或者图片
-   可以动态切换菜单的数量以及配置
-   切换菜单之前，可以进行回调鉴权
-   可以设置角标或数字化提示
-   有效防止组件区域高度塌陷，无需给父元素额外的内边距或者外边距来避开导航的区域

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

推荐您使用 list 数组遍历循环，案例使用基础方式构建，请根据`click`事件回调进行后续逻辑操作。

```
<u-tabbar
  :value="value1"
  @change="change1"
  :fixed="false"
  :placeholder="false"
  :safeAreaInsetBottom="false"
>
  <u-tabbar-item text="首页" icon="home" @click="click1"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo" @click="click1"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right" @click="click1"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account" @click="click1"></u-tabbar-item>
</u-tabbar>

value1: 0, click1(e) { console.log('click1', e); }
```

### [#](#显示徽标) 显示徽标

使用`dot`属性添加--小点--类型徽标，使用`badge`属性添加--数字--类型徽标。您也可以使用`:badge='badge'`动态设置徽标数量， 这在消息盒子的展示中是比较好用的功能，

```
<u-tabbar
  :value="value2"
  :placeholder="false"
  @change="name => value2 = name"
  :fixed="false"
  :safeAreaInsetBottom="false"
>
  <u-tabbar-item text="首页" icon="home" dot></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo" badge="3"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>

value2: 1,
```

### [#](#匹配标签的名称) 匹配标签的名称

```
<u-tabbar
  :placeholder="false"
  :value="value3"
  @change="name => value3 = name"
  :fixed="false"
  :safeAreaInsetBottom="false"
>
  <u-tabbar-item text="首页" icon="home" name="home"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo" name="photo"></u-tabbar-item>
  <u-tabbar-item
    text="直播"
    icon="play-right"
    name="play-right"
  ></u-tabbar-item>
  <u-tabbar-item text="我的" name="account" icon="account"></u-tabbar-item>
</u-tabbar>

value3: 'play-right',
```

### [#](#自定义图标-颜色) 自定义图标/颜色

如您需要自定义图标/颜色，在`u-tabbar-item`标签中使用插槽`active-icon`和`inactive-icon`来定义图标和颜色

```
<u-tabbar
  :value="value4"
  @change="name => value4 = name"
  :fixed="false"
  :placeholder="false"
  activeColor="#d81e06"
  :safeAreaInsetBottom="false"
>
  <u-tabbar-item text="首页">
    <image
      class="u-page__item__slot-icon"
      slot="active-icon"
      src="https://uviewui.com/common/bell-selected.png"
    ></image>
    <image
      class="u-page__item__slot-icon"
      slot="inactive-icon"
      src="https://uviewui.com/common/bell.png"
    ></image>
  </u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>

value4: 0,
```

### [#](#拦截切换事件-点击第二个标签) 拦截切换事件(点击第二个标签)

在切换事件中，处理拦截事件或者您其他 js 操作逻辑。

```
<u-tabbar
  :value="value5"
  :fixed="false"
  @change="change5"
  :safeAreaInsetBottom="false"
  :placeholder="false"
>
  <u-tabbar-item text="首页" icon="home"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>

value5: 0,

change5(name) { if (name === 1) return uni.$u.toast('请您先登录') else
this.value5 = name },
```

### [#](#边框) 边框

组件默认带了顶部边框，如果不需要，配置`border`为`false`即可。

```
<u-tabbar
  :value="value7"
  :placeholder="false"
  :border="false"
  @change="name => value7 = name"
  :fixed="false"
  :safeAreaInsetBottom="false"
>
  <u-tabbar-item text="首页" icon="home"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>

value7: 3
```

### [#](#固定在底部-固定在屏幕最下方) 固定在底部(固定在屏幕最下方)

与原生效果无异，但您可以按照 api 配置您需要的其他配置，如徽标，边框等

```
<u-tabbar
  :value="value6"
  @change="name => value6 = name"
  :fixed="true"
  :placeholder="true"
  :safeAreaInsetBottom="true"
>
  <u-tabbar-item text="首页" icon="home"></u-tabbar-item>
  <u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>

value6: 0,
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsB/tabbar/tabbar.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsB/tabbar/tabbar.nvue)

### [#](#api) API

### [#](#tabbar-props) TabBar Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| value | 当前匹配项的 name | String | Number | null | \- |
| safeAreaInsetBottom | 是否为 iPhoneX 留出底部安全距离 | Boolean | true | false |
| border | 是否显示上方边框 | Boolean | true | false |
| zIndex | 元素层级 z-index | String | Number | 1 | \- |
| activeColor | 选中标签的颜色 | String | #1989fa | \- |
| inactiveColor | 未选中标签的颜色 | String | #7d7e80 | \- |
| fixed | 是否固定在底部 | Boolean | true | false |
| placeholder | fixed 定位固定在底部时，是否生成一个等高元素防止塌陷 | Boolean | true | false |

### [#](#tabbaritem-props) TabBarItem Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| name | item 标签的名称，作为与 u-tabbar 的 value 参数匹配的标识符 | String | Number | null | \- |
| icon | uView 内置图标或者绝对路径的图片 | String | \- | \- |
| badge | 右上角的角标提示信息 | String | Number | null | \- |
| dot | 是否显示圆点，将会覆盖 badge 参数 | Boolean | false | true |
| text | 描述文本 | String | \- | \- |
| badgeStyle | 控制徽标的位置，对象或者字符串形式，可以设置 top 和 right 属性 | Object | String | 'top: 6px;right:2px;' | \- |

### [#](#tabbaritem-events) TabBarItem Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 切换选项时触发 | index：当前要切换项的 name |
| click | 切换选项时触发 | index：当前要切换项的 name |

← [Divider 分割线](https://www.uviewui.com/components/divider.html) [BackTop 返回顶部](https://www.uviewui.com/components/backTop.html) →




---
## [navigation/tabs] tabs
> 官方文档: https://www.uviewui.com/components/tabs.html

---

## [#](#tabs-标签) Tabs 标签 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过设置`scrollable`(默认为`true`)，配置tabs组件的内容是否可以左右拖动，一般4个标签以下时，无需拖动，设置为`false`，5个标签以上，建议可以左右拖动。
-   tabs标签的切换，需要绑定`current`值，在`change`事件回调中可以得到`index`，将其赋值给`current`即可。

具体的标签，通过`list`参数配置，该参数要求为数组，元素为对象，对象要有`name`属性，见示例：

说明

`scrollable`参数很重要，如果您的tabs项只有几个，且不想tabs导航栏可以被左右滑动的话，请一定要设置`scrollable`为`false`，因为它默认为`true`。

```
<template>
    <u-tabs :list="list1" @click="click"></u-tabs>
</template>

<script>
	export default {
		data() {
			return {
                list1: [{
                    name: '关注',
                }, {
                    name: '推荐',
                }, {
                    name: '电影'
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }]
			}
		},
		methods: {
            click(item) {
                console.log('item', item);
            }
		}
	}
</script>
```

### [#](#粘性布局) 粘性布局

通过加上`u-sticky`来使tabs滑动浮动在最顶部。

```
<template>
  <u-sticky bgColor="#fff">
    <u-tabs :list="list1"></u-tabs>
  </u-sticky>
</template>

<script>
    export default {
        data() {
            return {
                list1: [{
                    name: '关注',
                }, {
                    name: '推荐',
                }, {
                    name: '电影'
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }]
            }
        }
    }
</script>
```

### [#](#显示徽标) 显示徽标

可以通过在列表对象中加入`badge`来设置徽标。

```
<template>
    <u-tabs :list="list2"></u-tabs>
</template>

<script>
    export default {
        data() {
            return {
                list2: [{
                    name: '关注'
                }, {
                    name: '推荐',
                    badge: {
                        isDot: true
                    }
                }, {
                    name: '电影',
                    badge: {
                        value: 5,
                    }
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }]
            }
        }
    }
</script>
```

### [#](#禁用) 禁用

可以通过在列表对象中加入`disabled = true`来设置禁用。

```
<template>
    <u-tabs :list="list2"></u-tabs>
</template>

<script>
    export default {
        data() {
            return {
                list2: [{
                    name: '关注',
                    disabled: true
                }, {
                    name: '推荐',
                    badge: {
                        isDot: true
                    }
                }, {
                    name: '电影',
                    badge: {
                        value: 5,
                    }
                }, {
                    name: '科技',
                    disabled: true
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }]
            }
        }
    }
</script>
```

### [#](#自定义样式) 自定义样式

通过使用`activeStyle`、`inactiveStyle`、`itemStyle`来设置tabs的样式。

```
<template>
    <u-tabs
        :list="list4"
        lineWidth="30"
        lineColor="#f56c6c"
        :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
    >
    </u-tabs>
</template>

<script>
    export default {
        data() {
            return {
                list4: [{
                    name: '关注'
                }, {
                    name: '推荐',
                    badge: {
                        isDot: true
                    }
                }, {
                    name: '电影',
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }],
            }
        }
    }
</script>
```

### [#](#滑块设置背景图) 滑块设置背景图 2.0.30

通过使用`lineColor`来设置滑块背景图。

```
<template>
    <u-tabs
    :list="list4"
    lineWidth="20"
    lineHeight="7"
    :lineColor="`url(${lineBg}) 100% 100%`"
    :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }"
    :inactiveStyle="{
        color: '#606266',
        transform: 'scale(1)'
    }"
    itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
    >
    </u-tabs>
</template>

<script>
  const lineBg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAYAAABdC15GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFxSURBVHgBzZNRTsJAEIb/WTW+lpiY+FZPIDew3ABP4GJ8hxsI9zBpOYHeQDwBPQI+mRiRvpLojtPdYhCorQqF/6GdbGd2vvwzBXZcNAt4oj1ANeUoAT5iqkUjbEFLHNmhD1YPEvpZ3ghkGlVDCkc94/BmHMq998I5ONiY1ZBfpKAyuOtgAc5yOEDmYEWNh32BHF91sGHZHmwW4azciN9aQwnz3SJEgOmte+R2tdLprTYoa50mvuomlLpD4Y3oQZnov6D2RzCqI93bWOHaEmAGqQUyRBlZR1WfarcD/EJ2z8DtzDGvsMCwpm8XOCfDUsVOCYhiqRxI/CTQo4UOvjzO7Pow18vfywneuUHHUUxLn55lLw5JFpZ8bEUcY8oXdOLWiHLTxvoGpLqoUmy6dBT15o/ox3znpoycAmxUsiJTbs1cmxeVKp+0zmFIS7bGWiVghC7Vwse8jFKAX9eljh4ggKLLv7uaQvG9/F59Oo2SouxPu7OTCxN/s8wAAAAASUVORK5CYII=";
  export default {
        data() {
            return {
                list4: [{
                    name: '关注'
                }, {
                    name: '推荐',
                    badge: {
                        isDot: true
                    }
                }, {
                    name: '电影',
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }],
            }
        }
    }
</script>
```

### [#](#右侧自定义插槽) 右侧自定义插槽

```
<template>
    <u-tabs :list="list1">
        <view
                slot="right"
                style="padding-left: 4px;"
                @tap="$u.toast('插槽被点击')"
        >
            <u-icon
                    name="list"
                    size="21"
                    bold
            ></u-icon>
        </view>
    </u-tabs>
</template>

<script>
    export default {
        data() {
            return {
                list1: [{
                    name: '关注',
                }, {
                    name: '推荐',
                }, {
                    name: '电影'
                }, {
                    name: '科技'
                }, {
                    name: '音乐'
                }, {
                    name: '美食'
                }, {
                    name: '文化'
                }, {
                    name: '财经'
                }, {
                    name: '手工'
                }]
            }
        }
    }
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/tabs/tabs.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/tabs/tabs.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| duration | 滑块移动一次所需的时间，单位**ms** | String | Number | 300 | \- |
| list | 标签数组，元素为对象，如\[{name: '推荐'}\] | Array | \- | \- |
| lineColor | 滑块颜色 | String | #3c9cff | \- |
| activeStyle | 菜单选择中时的样式 | String | Object | { color: '#303133' } | \- |
| inactiveStyle | 菜单非选中时的样式 | String | Object | { color: '#606266' } | \- |
| lineWidth | 滑块长度 | String | Number | 20 | \- |
| lineHeight | 滑块高度 | String | Number | 3 | \- |
| lineBgSize 2.0.30 | 滑块背景显示大小，当滑块背景设置为图片时使用 | String | cover | \- |
| itemStyle | 菜单item的样式 | String | Object | { height: '44px' } | \- |
| scrollable | 菜单是否可滚动 | Boolean | true | false |
| current | 当前选中标签的索引 | String | Number | 0 | \- |
| keyName | 从`list`元素对象中读取的键名 | String | name | \- |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| click | 点击标签时触发 | index: 标签索引值，item: 传入的其他值 | \- |
| longPress | 长按标签时触发 | index: 标签索引值，item: 传入的其他值 | \- |
| change | 标签索引改变时触发(`disalbed`时不会触发) | index: 标签索引值，item: 传入的其他值 | \- |
| longPress 2.0.37 | 长按标签时触发 | index: 标签索引值，item: 传入的其他值 | \- |

← [Navbar 自定义导航栏](https://www.uviewui.com/components/navbar.html) [Subsection 分段器](https://www.uviewui.com/components/subsection.html) →




---
## [navigation/subsection] subsection
> 官方文档: https://www.uviewui.com/components/subsection.html

---

## [#](#subsection-分段器) Subsection 分段器 [![](https://www.uviewui.com/common/to_api.png)](#api)

该分段器一般用于用户从几个选项中选择某一个的场景

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

-   通过`list`数组参数传递分段的选项，数组元素可为字符串，或者通过`keyName`参数传入对象(默认为`name`)
-   通过`current`指定初始化时激活的选项

```
<template>
	<u-subsection :list="list" :current="1"></u-subsection>
</template>

<script>
	export default {
		data() {
			return {
                list: ['未付款', '待评价', '已付款'],

				current: 1
			}
		}
	}
</script>
```

### [#](#模式选择) 模式选择

通过`mode`设置分段器的模式

-   值为`button`时为按钮类型
-   值为`subsection`时为分段器形式

```
<u-subsection :list="list" mode="subsection" :current="1"></u-subsection>
```

### [#](#颜色配置) 颜色配置

-   通过`activeColor`配置激活选项的文字颜色
-   通过`inactiveColor`配置未激活选项的文字颜色
-   通过`bgColor`配置背景颜色，mode为button时有效（默认 '#eeeeef' ）

```
<u-subsection activeColor="#f56c6c"></u-subsection>
```

### [#](#注意事项) 注意事项

如果想通过一个变量绑定`current`值，需要在`change`事件回调中修改此值，否则可能会由于`props`的限制，前后两次设置`current`为相同的值， 而导致无法通过修改`current`值触发分段器的变化。

```
<template>
    <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
</template>

<script>
	export default {
		data() {
			return {
                list: ['未付款', '待评价', '已付款'],
				curNow: 0
			}
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			}
		}
	}
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsC/subsection/subsection.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsC/subsection/subsection.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| list | 选项的数组，形式见上方"基本使用" | Array | \- | \- |
| current | 初始化时默认选中的选项索引值 | String | Number | 0 | \- |
| activeColor | 激活时的颜色 | String | #3c9cff | \- |
| inactiveColor | 未激活时的颜色 | String | #303133 | \- |
| mode | 模式选择，见上方"模式选择"说明 | String | button | subsection |
| fontSize | 字体大小，单位px | String | Number | 12 | \- |
| bold | 激活选项的字体是否加粗 | Boolean | true | false |
| bgColor | 组件背景颜色，`mode`为`button`时有效 | String | #eeeeef | \- |
| keyName | 从`list`元素对象中读取的键名 | String | name | \- |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 分段器选项发生改变时触发 | index：选项的index索引值，从0开始 |

← [Tabs 标签](https://www.uviewui.com/components/tabs.html) [IndexList 索引列表](https://www.uviewui.com/components/indexList.html) →




---
## [navigation/backTop] backTop
> 官方文档: https://www.uviewui.com/components/backTop.html

---

## [#](#backtop-返回顶部) BackTop 返回顶部 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

由于返回顶部需要实时监听滚动条的位置，从而判断返回的按钮该出现还是隐藏，由于组件无法得知页面的滚动条信息，只能在**页面**的`onPageScroll`生命周期 中获得滚动条的位置，故需要在页面监听`onPageScroll`生命周期，实时获得滚动条的位置，通过Props传递给组件。

```
<template>
	<view class="wrap">
		<text>滑动页面，返回顶部按钮将出现在右下角</text>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollTop: 0
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

<style lang="scss" scoped>
	.wrap {
		height: 200vh;
	}
</style>
```

### [#](#改变返回顶部按钮的出现时机) 改变返回顶部按钮的出现时机

可以通过`top`参数，修改页面滚动多少距离时，出现返回顶部的按钮

```
<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
```

### [#](#自定义返回顶部的图标和提示) 自定义返回顶部的图标和提示

-   通过`icon`修改返回顶部按钮的图标，可以是uView内置的图标，或者图片路径
-   通过`text`参数修改返回顶部按钮的文字提示信息，如果需要修改文字的颜色和大小，可以通过`customStyle`参数

```
<u-back-top :scroll-top="scrollTop" icon="arrow-up" text="返回"></u-back-top>
```

### [#](#其他自定义样式) 其他自定义样式

-   通过`iconStyle`参数自定义图标的样式，比如颜色，大小等
-   通过`customStyle`修改返回按钮的背景颜色，大小等
-   通过`mode`修改按钮的形状，`circle`为圆形，`square`为方形

注意：如果通过`icon`参数传入图片路径的话，需要通过`iconStyle`参数设置图片的`width`和`height`属性

```
<template>
	<view class="wrap">
		<text>滑动页面，返回顶部按钮将出现在右下角</text>
		<u-back-top :scrollTop="scrollTop" :mode="mode" :iconStyle="iconStyle"></u-back-top>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollTop: 0,
			mode: 'square',
			iconStyle: {
				fontSize: '32rpx',
				color: '#2979ff'
			}
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

<style lang="scss" scoped>
	.wrap {
		height: 200vh;
	}
</style>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/backtop/backtop.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/backtop/backtop.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| mode | 按钮形状 | String | circle | square |
| icon | uView内置图标名称，或图片路径 | String | arrow-upward | \- |
| text | 返回顶部按钮的提示文字 | String | \- | \- |
| duration | 返回顶部过程中的过渡时间，单位ms | String | Number | 100 | \- |
| scrollTop | 页面的滚动距离，通过`onPageScroll`生命周期获取 | String | Number | 0 | \- |
| top | 滚动条滑动多少距离时显示，单位rpx | String | Number | 400 | \- |
| bottom | 返回按钮位置到屏幕底部的距离，单位rpx | String | Number | 100 | \- |
| right | 返回按钮位置到屏幕右边的距离，单位rpx | String | Number | 20 | \- |
| z-index | 返回顶部按钮的层级 | String | Number | 9 | \- |
| iconStyle | 图标的样式，对象形式 | Object | \- | \- |
| customStyle | 按钮外层的自定义样式 | Object | \- | \- |

### [#](#slot) Slot

| 名称 | 说明 |
| --- | --- |
| \- | 自定义返回按钮的所有内容 |

← [Tabbar 底部导航栏](https://www.uviewui.com/components/tabbar.html) [Navbar 自定义导航栏](https://www.uviewui.com/components/navbar.html) →




---

<!-- ============================================ -->
<!-- 类别: 其他组件 -->
<!-- ============================================ -->

## [others/transition] transition
> 官方文档: https://www.uviewui.com/components/transition.html

---

## [#](#transition-动画) Transition 动画 [![](https://www.uviewui.com/common/to_api.png)](#api)

该组件用于组件的动画过渡效果。

### [#](#平台差异说明) 平台差异说明

| App（vue） | App（nvue） | H5 | 小程序 |
| --- | --- | --- | --- |
| √ | √ | √ | √ |

### [#](#基本使用) 基本使用

通过slot传入内容，默认使用的是`fade`效果

```
<template>
    <u-transition :show="show">
        <view class="transition"></view>
    </u-transition>
</template>

<script>
    export default {
        data() {
            return {
                show: true
            }
        }
    }
</script>
```

### [#](#动画模式) 动画模式

通过`mode`传入效果模式，目前支持：

-   `fade` 淡入
-   `fade-up` 上滑淡入
-   `fade-down` 下滑淡入
-   `fade-left` 左滑淡入
-   `fade-right` 右滑淡入
-   `slide-up` 上滑进入
-   `slide-down` 下滑进入
-   `slide-left` 左滑进入
-   `slide-right` 右滑进入
-   `zoom-in` 缩放
-   `zoom-out` 缩放

```
<template>
    <u-transition :show="show" mode="zoom-in">
        <view class="transition"></view>
    </u-transition>
</template>

<script>
    export default {
        data() {
            return {
                show: true
            }
        }
    }
</script>
```

### [#](#此页面源代码地址) 此页面源代码地址

页面源码地址

 [![](https://www.uviewui.com/common/github.svg "github") github](https://github.com/umicro/uView2.0/blob/master/pages/componentsA/transition/transition.nvue)  [![](https://www.uviewui.com/common/gitee.svg "github") gitee](https://gitee.com/umicro/uView2.0/blob/master/pages/componentsA/transition/transition.nvue)

### [#](#api) API

### [#](#props) Props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| show | 是否展示组件 | Boolean | false | true |
| mode | 使用的动画模式 | String | fade | true |
| duration | 动画的执行时间，单位ms | String | Number | 300 | \- |
| timingFunction | 使用的动画过渡函数，见上方说明 | String | ease-out | \- |
| customStyle | 自定义样式 | Object | \- | \- |

### [#](#events) Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| beforeEnter | 进入前触发 | \- |
| enter | 进入中触发 | \- |
| afterEnter | 进入后触发 | \- |
| beforeLeave | 离开前触发 | \- |
| leave | 离开中触发 | \- |
| afterLeave | 离开后触发 | \- |

← [Link 超链接](https://www.uviewui.com/components/link.html)




---

<!-- ============================================ -->
<!-- 类别: JS工具库 -->
<!-- ============================================ -->

## [js/js-intro] js-intro
> 官方文档: https://www.uviewui.com/js/intro.html

---

## [#](#介绍) 介绍

此js函数方法，为uView框架提供的一部分功能，它的实现，需要通过js调用，而不是组件的形式。 工具库中的所有方法，均挂载在`$u`对象下，调用方法如下：

-   如果是在js中，需要通过`uni.$u.xxx`形式调用，如调用去除空格的`trim`方法：

```
console.log(uni.$u.trim(' abc '));
```

-   如果是在元素中，无需前缀`uni`，如：

```
<template>
	<view>
		去除所有空格：{{$u.trim(str, 'all')}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				str: 'a  b c '
			}
		}
	}
</script>
```

[便捷工具](https://www.uviewui.com/js/fastUse.html) →




---
## [js/fastUse] fastUse
> 官方文档: https://www.uviewui.com/js/fastUse.html

---

## [#](#便捷工具) 便捷工具

此专题内容为一些方便用户快速，便捷使用的小工具，可能是uView的一些方法的简易版，或者对uni的一些方法进行二次封装，方便用户 快速使用。

### [#](#os) os()

此方法用于返回平台的名称，为小写的`ios`或`android`

```
uni.$u.os()
```

### [#](#sys) sys()

此方法用于获取设备的信息，相当于uni.getSystemInfoSync()的效果

```
uni.$u.sys()
```

### [#](#platform) platform

此`属性`用于获取当前运行的平台名称，相较于`uni-app`系统自带的条件编译的区别是，此方式让我们可以通过`js`的`if | else if`进行判断， 您可以结合实际场景进行使用。

-   注意：此属性返回的结果，和`uni-app`的条件编译名称有差别，并且结果都为小写。

使用前配置：如果您的项目为`vue-cli`模式，必须要在`根目录`的`vue.config.js`进行配置才有效，如下：

```

module.exports = {
    transpileDependencies: ['uview-ui']
}
```

使用：

```

uni.$u.platform

const { platform } = uni.$u
if(platform === 'app') {
	......
} else if(platform === 'nvue') {
	......
}
```

#### [#](#各平台对应返回值如下表) 各平台对应返回值如下表：

| 平台 | 返回值 |
| --- | --- |
| VUE3，HBuilderX 3.2.0+ | vue3 |
| VUE2 | vue2 |
| App | plus |
| App nvue | nvue |
| H5 | h5 |
| 微信小程序 | weixin |
| 支付宝小程序 | alipay |
| 百度小程序 | baidu |
| 字节跳动小程序、飞书小程序 | toutiao |
| QQ小程序 | qq |
| 快手小程序 | kuaishou |
| 360小程序 | 360 |
| 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序 | mp |
| 快应用通用(包含联盟、华为) | webview |
| 快应用联盟 | webview-union |
| 快应用华为 | webview-huawei |

### [#](#range-min-max-value) range(min, max, value)

此方法用于限制`value`的大小，如果其在`min`和`max`之间，则不变；如果其小于`min`，则取`min`值；如果其大于`max`，则取`max`值。

```

uni.$u.range(1, 5, 8)

uni.$u.range(1, 5, 4)
```

### [#](#getpx-value-unit-false) getPx(value \[, unit = false\])

此方法用于返回带单位的值的数值结果，如果第二个参数为`true`，返回的结果将会带上`px`的单位；可接受的值如下：

-   带`upx`和`rpx`单位，返回使用`uni.upx2px`转换后，为`px`单位的结果
-   带`px`单位，返回去掉`px`单位的具体数值
-   具体数值，如`5`，将会返回`5`

```

uni.$u.getPx('10rpx')

uni.$u.getPx('12px')

uni.$u.getPx(14)

uni.$u.getPx('20rpx', true)
```

### [#](#sleep-value) sleep(value)

延时一定时间进行回调，类似于`promise`的使用方式

-   `value`，数值，单位默认为`ms`

```

uni.$u.sleep(300).then(() => {
	console.log('定时结束')
})
```

### [#](#parent-call-instance-name) $parent.call(instance \[, name\])

用于抹平各端差异，在组件中向上获取父组件或者页面的实例。

-   `instance`，实例，传`this`即可，不可修改
-   `name`，可选，页面或者父组件的`name`属性值，不传则默认查找页面(最顶层)的实例

```

<template>
	<child></child>
</template>

<script>
export default {

	name: 'page',
	......
}
</script>

<script>
export default {
	mounted() {

		uni.$u.$parent.call(this, 'page')
	}
}
</script>
```

### [#](#addstyle-style-target-object) addStyle(style \[, target = 'object'\])

用于将`字符串`形式的内联样式样式转为`对象`形式，或者将`对象`形式的样式写法转为`字符串`形式。

-   `style`，样式，可为对象或者字符串形式
-   `target`，可选，转换结果的类型，默认为`object`；如果为`object`则返回对象形式的结果，如果为`string`则返回字符串形式的结果

```

const style = { padding: '10px', margin: '20px' }
uni.$u.addStyle(style, 'string')

const style = "padding: 10px; margin: 20px"
uni.$u.addStyle(style)
```

### [#](#addunit-value-unit-px) addUnit(value \[, unit = 'px'\])

用于给值加上单位，如果值已有单位，则直接原样返回，如果值为`数值`，则加上`unit`参数的单位。

-   `value`，可为`5`，`5px`，`6rpx`，`100%`等格式的值
-   `unit`，可选，默认为`px`，如果第一个参数为`数值`，则拼接上此单位

```

uni.$u.addUnit(5)
uni.$u.addUnit('5px')

uni.$u.addUnit(5, 'rpx')
```

### [#](#priceformat-value-decimals-0-decimalpoint-thousandsseparator) priceFormat(value \[, decimals = 0 \[, decimalPoint = '.' \[, thousandsSeparator = ','\]\]\])

此方法可用于对数值形式的金额进行格式化

-   value，需要格式化的金额数值，只能为数值，如`300.52`，`300`，而不能为诸如带千分位的写法`3,000.5`
-   decimals，可选，格式化后小数点的位数，默认为`0`，小数最后一位会进行四舍五入
-   decimalPoint，可选，小数点的符号，默认为`.`
-   thousandsSeparator，可选，千分位分隔符，默认为英文逗号`,`

```

uni.$u.priceFormat(3002.365, 2)

uni.$u.priceFormat(3002.365)
```

### [#](#page) page()

此方法用于获取当前页面的路径，返回的路径以`/`开头。

```

uni.$u.page()
```

### [#](#pages) pages() 2.0.22

本方法为`getCurrentPages()`的封装，用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

```
uni.$u.pages()
```

← [介绍](https://www.uviewui.com/js/intro.html) [Http 请求](https://www.uviewui.com/js/http.html) →




---
## [js/http] http
> 官方文档: https://www.uviewui.com/js/http.html

---

## [#](#http请求) Http请求

该插件适用于普遍的请求场景，支持`post`、`get`、`put`和`delete`，以及上传下载等请求，有如下特点：

-   基于`Promise`对象实现更简单的`request`使用方式，支持请求和响应拦截
-   支持全局挂载
-   支持多个全局配置实例
-   支持自定义验证器
-   支持文件上传/下载
-   支持task 操作
-   支持自定义参数
-   支持多拦截器
-   对参数的处理比`uni.request`更强

### [#](#平台差异说明) 平台差异说明

| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
| --- | --- | --- | --- | --- | --- | --- |
| √ | √ | √ | √ | √ | √ | √ |

说明

此插件集成自优秀的开源请求库：[luch-request (opens new window)](https://www.quanzhan.co/luch-request/)。uView对其进行了简单封装以及说明，如有不全之处， 可参考[luch-request (opens new window)](https://www.quanzhan.co/luch-request/)官方文档。

### [#](#基本使用) 基本使用

```
uni.$u.http.middleware(config)
uni.$u.http.request(config)
uni.$u.http.get(url[, config])
uni.$u.http.upload(url[, config])
uni.$u.http.delete(url[, data[, config]])
uni.$u.http.head(url[, data[, config]])
uni.$u.http.post(url[, data[, config]])
uni.$u.http.put(url[, data[, config]])
uni.$u.http.connect(url[, data[, config]])
uni.$u.http.options(url[, data[, config]])
uni.$u.http.trace(url[, data[, config]])
```

### [#](#全局配置) 全局配置

可选的配置项有如下：

```
{
    baseURL: '',
    header: {},
    method: 'GET',
    dataType: 'json',

    responseType: 'text',

    custom: {},

    timeout: 60000,

    sslVerify: true,

    withCredentials: false,

    firstIpv4: false,

    validateStatus: (statusCode) => {
        return statusCode >= 200 && statusCode < 300
    }
}
```

可以通过`uni.$u.http.setConfig()`方法进行全局配置，比如配置请求的全局域名`baseUrl`：

```
uni.$u.http.setConfig((config) => {

    config.baseURL = `https://www.example.com`;
    return config
})
```

### [#](#get请求) GET请求

需要注意的是，`get`请求与`post`请求略有不同，`get`请求所有参数都在方法的第二个参数中，而`post`请求的第二个参数为请求参数`params`，而第三个参数才为配置项。

```

uni.$u.http.get('/user/login', {params: {userName: 'name', password: '123456'}}).then(res => {

}).catch(err => {

})

uni.$u.http.get('/user/login', {
    params: {userName: 'name', password: '123456'},
    header: {},
    dataType: 'json',

    custom: {auth: true},

    responseType: 'text',

    timeout: 60000,

    sslVerify: true,

    firstIpv4: false,

    withCredentials: false,

    getTask: (task, options) => {

    },

}).then(res => {

}).catch(err => {

})
```

### [#](#post请求) POST请求

需要注意的是，get请求与post请求略有不同，get请求所有参数都在方法的第二个参数中，而post请求的第二个参数为请求参数params，而第三个参数才为配置项。

```

uni.$u.http.post('/user/login', {userName: 'name', password: '123456'} ).then(res => {

}).catch(err => {

})

uni.$u.http.post('/user/login', {userName: 'name', password: '123456'}, {
    params: {},
    header: {},
    dataType: 'json',

    custom: {auth: true},

    responseType: 'text',

    timeout: 60000,

    sslVerify: true,

    firstIpv4: false,

    withCredentials: false,

    getTask: (task, options) => {

    },

}).then(res => {

}).catch(err => {

})
```

### [#](#upload请求) UPLOAD请求

具体参数说明：[uni.uploadFile (opens new window)](https://uniapp.dcloud.io/api/request/network-file)

```
uni.$u.http.upload('api/upload/img', {
    params: {},

    files: [],

    fileType: 'image/video/audio',

    filePath: '',

    custom: {auth: true},
    name: 'file',

    timeout: 60000,

    header: {},
    formData: {},

    getTask: (task, options) => {

    },

}).then(res => {

}).catch(err => {

})
```

### [#](#download请求) DOWNLOAD请求

具体参数说明：[uni.downloadFile (opens new window)](https://uniapp.dcloud.io/api/request/network-file?id=downloadfile)

```
uni.$u.http.download('api/download', {
    params: {},

    timeout: 3000,

    header: {},
    custom: {},

    getTask: (task, options) => {

    },

}).then(res => {

}).catch(err => {

})
```

### [#](#请求拦截器) 请求拦截器

```
uni.$u.http.interceptors.request.use((config) => {
	config.header = {
		...config.header,
		a: 1
	}

	return config
}, config => {
	return Promise.reject(config)
})
```

### [#](#响应拦截器) 响应拦截器

```
uni.$u.http.interceptors.response.use((response) => {

	console.log(response)
	return response
}, (response) => {

	console.log(response)
	return Promise.reject(response)
})
```

### [#](#实践) 实践

假设我们项目中需要用到请求和响应拦截器，并且在请求拦截器中需要调用`vuex`中的变量，可按如下步骤进行操作(仅供参考)：

#### [#](#_1-全局配置-以及请求-响应拦截器定义) 1. 全局配置，以及请求，响应拦截器定义

在`/config/request.js`中，写入如下内容：

```

module.exports = (vm) => {

    uni.$u.http.setConfig((config) => {

        config.baseURL = 'https://www.example.com';
        return config
    })

	uni.$u.http.interceptors.request.use((config) => {

	    config.data = config.data || {}

		if(config?.custom?.auth) {

			config.header.token = vm.$store.state.userInfo.token
		}
	    return config
	}, config => {
	    return Promise.reject(config)
	})

	uni.$u.http.interceptors.response.use((response) => {
		const data = response.data

		const custom = response.config?.custom
		if (data.code !== 200) {

			if (custom.toast !== false) {
				uni.$u.toast(data.message)
			}

			if (custom?.catch) {
				return Promise.reject(data)
			} else {

				return new Promise(() => { })
			}
		}
		return data.data === undefined ? {} : data.data
	}, (response) => {

		return Promise.reject(response)
	})
}
```

#### [#](#_2-引用配置) 2. 引用配置

我们可以在`main.js`中引用`/config/request.js`，注意引用的位置，需要在`new Vue`得到`Vue`实例之后，如下：

```
import Vue from 'vue'
import App from './App'

import store from './store'
Vue.prototype.$store = store

Vue.config.productionTip = false
App.mpType = 'app'

import uView from 'uview-ui'
Vue.use(uView)

import mixin from './common/mixin'
Vue.mixin(mixin)

const app = new Vue({
	store,
	...App
})

require('/config/request.js')(app)

app.$mount()
```

#### [#](#_3-api集中管理) 3. Api集中管理

在`/config/api.js`中编写请求接口：

```
const http = uni.$u.http

export const postMenu = (params, config = {}) => http.post('/ebapi/public_api/index', params, config)

export const getMenu = (data) => http.get('/ebapi/public_api/index', data)
```

#### [#](#_4-发送请求) 4. 发送请求

```
import { postMenu, getMenu } from '/config/api.js';

postMenu({ custom: { auth: true }}).then(() => {

}).catch(() =>{

})

await postMenu({ custom: { auth: true }})

postMenu({ custom: { auth: true, toast: false, catch: false }}).then(() => {

})

getMenu({ custom: { auth: true }}).then(() => {

}).catch(() =>{

})

uni.$u.http.post('/common/menu', { custom: { auth: true }}).then(() => {

}).catch(() =>{

})
```

← [便捷工具](https://www.uviewui.com/js/fastUse.html) [节流防抖](https://www.uviewui.com/js/debounce.html) →




---
## [js/debounce] debounce
> 官方文档: https://www.uviewui.com/js/debounce.html

---

## [#](#throttle-debounce节流防抖) throttle & debounce节流防抖

#### [#](#何谓节流和防抖) 何谓节流和防抖？

-   节流
    节流的意思是，规定时间内，只触发一次。比如我们设定500ms，在这个时间内，无论点击按钮多少次，它都只会触发一次。具体场景可以是抢购时候，由于有无数人 快速点击按钮，如果每次点击都发送请求，就会给服务器造成巨大的压力，但是我们进行节流后，就会大大减少请求的次数。

-   防抖
    防抖的意思是，在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效。具体场景可以搜索框输入关键字过程中实时 请求服务器匹配搜索结果，如果不进行处理，那么就是输入框内容一直变化，导致一直发送请求。如果进行防抖处理，结果就是当我们输入内容完成后，一定时间(比如500ms)没有再 输入内容，这时再触发请求。

结合以上两种情况，回到我们最实际的场景，比如防止表单提交按钮被多次触发，我们应该选择使用`节流`而不是`防抖`方案。

温馨提示

uView内置的按钮组件`u-button`内部已做节流处理(1.5.8版本)，无需外部再做节流处理。配置`throttle-time`参数，可以设置节流的时间，详见[Button 按钮](https://www.uviewui.com/components/button.html)

### [#](#节流) 节流

#### [#](#throttle-func-wait-500-immediate-true) throttle(func, wait = 500, immediate = true)

规定时间内，只触发一次，可以通过设置`immediate`来决定触发的时机在这个时间的开始，还是结束的时候执行。

-   `func` <Function> 触发回调执行的函数
-   `wait` <Number> 时间间隔，单位ms
-   `immediate` <Boolean> 在开始还是结束处触发，比如设置`wait`为1000ms，如果在一秒内进行了5次操作，只触发一次，如果`immediate`为`true`，那么就会在第一次操作 触发回调，如果为`false`，就会在第5次操作触发回调。

```
<template>
    <view class="">

    	<view class="throttle" @tap="$u.throttle(btnAClick, 500)">
    		露从今夜白
    	</view>
    	<view class="throttle" @tap="btnBClick">
    		月是故乡明
    	</view>
    </view>
</template>

<script>
    export default {
        methods: {
            btnAClick() {
				console.log('btnClick');
			},
			btnBClick() {

				uni.$u.throttle(this.toNext, 500)
			},
			toNext() {
				console.log('btnBClick');
			}
        }
    }
</script>

<style lang="scss">
    .throttle {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		border: 1px solid $u-type-primary;
	}
</style>
```

### [#](#防抖) 防抖

#### [#](#debounce-func-wait-500-immediate-false) debounce(func, wait = 500, immediate = false)

在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效

-   `func` <Function> 触发回调执行的函数
-   `wait` <Number> 时间间隔，单位ms
-   `immediate` <Number> 在开始还是结束处触发，如非特殊情况，一般默认为`false`即可

```
<template>
    <view class="">

    	<view class="debounce" @tap="$u.debounce(btnAClick, 500)">
    		露从今夜白
    	</view>
    	<view class="debounce" @tap="btnBClick">
    		月是故乡明
    	</view>
    </view>
</template>

<script>
    export default {
        methods: {
            btnAClick() {
				console.log('btnClick');
			},
			btnBClick() {

				uni.$u.debounce(this.toNext, 500)
			},
			toNext() {
				console.log('btnBClick');
			}
        }
    }
</script>

<style lang="scss">
    .debounce {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		border: 1px solid $u-type-primary;
	}
</style>
```

← [Http 请求](https://www.uviewui.com/js/http.html) [对象操作](https://www.uviewui.com/js/object.html) →




---
## [js/object] object
> 官方文档: https://www.uviewui.com/js/object.html

---

### [#](#对象操作) 对象操作

注意

由于JS对象包括的范围非常广，加上ES6又有众多的新特性，很难、也没必要做到囊括所有的类型和情况，这里说的"对象"，指的是普通的对象，不包括修改对象原型链， 或者为"Function"，"Promise"等的情况，请留意。

### [#](#对象深度克隆) 对象深度克隆

场景：

-   我们平时可能会遇到需要通过`console.log`打印一个对象，至执行打印的时刻，此对象为空，后面的逻辑中对此对象进行了修改赋值，但是我们在控制台直接看到的打印结果 却是修改后的值，这让人匪夷所思，虽然我们可以通过`console.log(JSON.parse(JSON.stringify(object)))`的形式处理，但是需要写这长长的一串，难免让人心生抵触。

-   当我们将一个对象(变量A)赋值给另一个变量(变量B)时，修改变量B，因为对象引用的特性，导致A也同时被修改，所以有时候我们需要将A克隆给B，这样修改B的时候，就不会 导致A也被修改。

### [#](#deepclone-object) deepClone(object = {})

-   `object` <Object> 需要被克隆的对象

```
let a = {
	name: 'mary'
};

let b = a;

b.name = 'juli';
console.log(b);
console.log(a);

let b = uni.$u.deepClone(a);

b.name = 'juli';
console.log(b);
console.log(a);
```

### [#](#对象深度合并) 对象深度合并

在ES6中，我们可以很方便的使用`Object.assign`进行对象合并，但这只是浅层的合并，如果对象的属性为数组或者对象的时候，会导致属性内部的值丢失。

**注意：** 此处合并不同于`Object.assign`，因为`Object.assign(a, b)`会修改`a`的值为最终的结果(这往往不是我们所期望的)，但是`deepMerge(a, b)`并不会修改`a`的值。

### [#](#deepmerge-target-source) deepMerge(target = {}, source = {})

-   `target` <Object> 目标对象
-   `source` <Object> 源对象

`Object.assign`浅合并示例：

```
let a = {
	info: {
		name: 'mary'
	}
}

let b = {
	info: {
		age: '22'
	}
}

let c = Object.assign(a, b);

c = {
	info: {
		name: 'mary',
		age: '22'
	}
}

c = {
	info: {
		age: '22'
	}
}
```

深度合并示例：

```
let a = {
	info: {
		name: 'mary'
	}
}

let b = {
	info: {
		age: '22'
	}
}

let c = uni.$u.deepMerge(a, b);

c = {
	info: {
		age: '22',
		name: 'mary'
	}
}
```

### [#](#链式读取对象属性) 链式读取对象属性

读取属性时，我们需要从一个`对象`中进行操作，否则就会引起报错，因此uView提供了一个链式属性的读取方式。
当然，我们也可以使用`可选链操作符`的形式去获取，但是此方式在`Vue2`的`template`中不适用。

### [#](#getproperty-object-key) getProperty(object, key)

```

const object = {
	userInfo: {
		address: {
			province: '深圳'
		}
	}
}

uni.$u.getProperty(object, 'userInfo.address.province')

console.log(object?.userInfo?.address?.province)
```

### [#](#链式设置对象属性) 链式设置对象属性

设置属性时，我们需要从一个`对象`中进行操作，否则就会引起报错，因此uView提供了一个链式属性的设置方式。

```

const object = {}

uni.$u.setProperty(object, 'userInfo.address.province')

{
	userInfo: {
		address: {
			province: '深圳'
		}
	}
}
```

← [节流防抖](https://www.uviewui.com/js/debounce.html) [时间格式化](https://www.uviewui.com/js/time.html) →




---
## [js/time] time
> 官方文档: https://www.uviewui.com/js/time.html

---

## [#](#time-时间格式) time 时间格式

### [#](#格式化时间) 格式化时间

### [#](#timeformat-date-timestamp-format-yyyy-mm-dd) timeFormat | date(timestamp, format = "yyyy-mm-dd")

**注意**：`1.7.9`之前的版本只能传入`秒`或`毫秒`时间戳，date和timeFormat为同功能不同名函数，无论用哪个方法名，都是一样的。

该函数必须传入第一个参数，第二个参数是可选的，函数返回一个格式化好的时间。

-   `time` <String> 任何合法的时间格式、`秒`或`毫秒`的时间戳
-   `format` <String> 时间格式，可选。默认为`yyyy-mm-dd`，年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"，格式可以自由搭配，如： `yyyy:mm:dd`，`yyyy-mm-dd`，`yyyy年mm月dd日`，`yyyy年mm月dd日 hh时MM分ss秒`，`yyyy/mm/dd/`，`MM:ss`等组合

```
<template>
	<view>
		<view>
			时间为：{{$u.timeFormat(timestamp, 'yyyy年mm月dd日')}}
		</view>
		<view>
			时间为：{{time}}
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				time: null,
				timestamp: '1581170184'
			}
		},
		onLoad() {
			this.time = uni.$u.timeFormat(this.timestamp, 'yyyy-mm-dd');
		}
	}
</script>
```

### [#](#过滤器式写法) 过滤器式写法

uView同时把timeFormat()注册到了全局过滤器中，方便您在模板中使用：

```
<view>

	时间为：{{'1585926095536' | date}}
</view>

<view>
	时间为：{{'1585926095536' | date('yyyy-mm')}}
</view>
```

注意过滤器的特殊点，上面的"'1585926095536' | date('yyyy-mm')"，会把'1585926095536'当作`date`的第一个参数传入，'yyyy-mm'作为第二个参数， 也即实际表现为：

```
uni.$u.date('1585926095536', 'yyyy-mm')
```

### [#](#多久以前) 多久以前

### [#](#timefrom-time-format-string-false) timeFrom(time, format = String | false)

**注意** `1.7.9`之前的版本只能传入`秒`或`毫秒`时间戳

该函数必须传入第一个参数，格式为任何合法的时间格式、`秒`或`毫秒`的时间戳，第二个参数是可选的，返回的值类似`刚刚`，`25分钟前`，`3小时前`，`7天前`的结果。 如果第二个参数是时间的格式，当前和传入时间戳相差大于一个月时，返回格式化好的时间；如果第二个参数为`false`，则不会返回格式化好的时间，而是诸如"xxx年前"的结果。

-   `timestamp` <String> 时间戳
-   `format` <String / false> 时间格式，默认为`yyyy-mm-dd`，年为"yyyy"，月为"mm"，日为"dd"，时为"hh"，分为"MM"，秒为"ss"，格式可以自由搭配，如： `yyyy:mm:dd`，`yyyy-mm-dd`，`yyyy年mm月dd日`，`yyyy年mm月dd日 hh时MM分ss秒`，`yyyy/mm/dd/`，`MM:ss`等组合。 如果时间戳距离此时的时间，大于一个月，则返回一个格式化好的时间，如果此参数为`false`，返回均为"多久之前"的结果。

```
<template>
	<view>
		<view>
			时间为：{{$u.timeFrom(timestamp, 'yyyy年mm月dd日')}}
		</view>
		<view>
			时间为：{{time}}
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				time: null,
				timestamp: '1581170184'
			}
		},
		onLoad() {
			this.time = uni.$u.timeFrom(this.timestamp);
		}
	}
</script>
```

### [#](#过滤器式写法-2) 过滤器式写法

uView同时把timeFrom()注册到了全局过滤器中，方便您在模板中使用：

```
<view>

	时间为：{{'1585926095536' | timeFrom}}
</view>

<view>

	时间为：{{'1585926095536' | timeFrom('yyyy-mm')}}
</view>
```

← [对象操作](https://www.uviewui.com/js/object.html) [路由跳转](https://www.uviewui.com/js/route.html) →




---
## [js/route] route
> 官方文档: https://www.uviewui.com/js/route.html

---

## [#](#route-路由跳转) route 路由跳转

#### [#](#route-object) route(Object)

此为一个路由跳转方法，内部是对uni多个路由跳转api的封装，更方便使用

Object参数说明：

| 参数名 | 类型 | 默认值 | 是否必填 | 说明 |
| --- | --- | --- | --- | --- |
| type | String | navigateTo | false | `navigateTo`或`to`对应`uni.navigateTo`，`redirect`或`redirectTo`对应`uni.redirectTo`，`switchTab`或`tab`对应`uni.switchTab`，`reLaunch`对应`uni.reLaunch`，`navigateBack`或`back`对应`uni.navigateBack` |
| url | String | \- | false | `type`为`navigateTo`，`redirectTo`，`switchTab`，`reLaunch`时为必填 |
| delta | Number | 1 | false | `type`为`navigateBack`时用到，表示返回的页面数 |
| params | Object | \- | false | 传递的对象形式的参数，如{name: 'lisa', age: 18} |
| animationType | String | pop-in | false | 只在APP生效，详见[窗口动画 (opens new window)](https://uniapp.dcloud.io/api/router?id=animation) |
| animationDuration | Number | 300 | false | 动画持续时间，单位ms |

```
export default{
	onLoad() {
		setTimeout(() => {
			uni.$u.route({
				url: 'pages/components/empty/index',
				params: {
					name: 'lisa'
				}
			})
		}, 2000)
	}
}
```

### [#](#简写) 简写

注：为了方便简写和调用，可以直接传递一个`url`地址替代`Object`，它只能执行`uni.navigateTo`类型的地址，**不支持跳转到Tabbar页面**， 如果有参数需要携带，以对象形式写到方法的第二个参数中。

```

uni.$u.route('/pages/components/empty/index');

uni.$u.route('/pages/components/empty/index', {
	name: 'lisa',
	age: 20
});
```

← [时间格式化](https://www.uviewui.com/js/time.html) [数组乱序](https://www.uviewui.com/js/randomArray.html) →




---
## [js/randomArray] randomArray
> 官方文档: https://www.uviewui.com/js/randomArray.html

---

## [#](#randomarray-数组乱序) randomArray 数组乱序

#### [#](#randomarray-array) randomArray(array)

该函数可以打乱一维数组元素的顺序，这是随机过程

-   `array` <Array> 一维数组

```
export default{
	data() {
		return {
			array: [1,2,3,4,5]
		}
	},
	onLoad() {
		console.log(uni.$u.randomArray(this.array));
	}
}
```

← [路由跳转](https://www.uviewui.com/js/route.html) [全局唯一标识符](https://www.uviewui.com/js/guid.html) →




---
## [js/guid] guid
> 官方文档: https://www.uviewui.com/js/guid.html

---

## [#](#guid-全局唯一标识符) guid 全局唯一标识符

### [#](#唯一标识符) 唯一标识符

#### [#](#guid-length-32-firstu-true-radix-62) guid(length = 32, firstU = true, radix = 62)

该函数可以生产一个全局唯一、随机的guid，默认首字母为`u`，可以用于当做元素的id或者class名等需要唯一，随机字符串的地方，因为id或者class不能以数字开头。

-   `length` <Number | null> guid的长度，默认为`32`，如果取值`null`，则按`rfc4122标准`生成对应格式的随机数
-   `firstU` <Boolean> 首字母是否为"u"，如果首字母为数字情况下，不能用作元素的`id`或者`class`，默认为`true`
-   `radix` <Number> 生成的基数，默认为`62`，用于生成随机数字符串为"0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"， 如果取2，那么返回的结果就是前两位0和1(可以理解为二进制)的随机结果，如果为7，返回的字符串就是0-7(理解为八进制)之间， 10为十进制，以此类推。

**说明**：这个方法三个参数都有默认的值，所以您调用的时候，可以无需传递任何参数也是可以的，并且**建议您这样做**。

```
<template>
	<view :id="$u.guid()" :class="elClass">

	</view>
</template>

<script>
	export default{
		data() {
			return {
				elClass: uni.$u.guid(20),
			}
		}
	}
</script>
```

← [数组乱序](https://www.uviewui.com/js/randomArray.html) [颜色转换](https://www.uviewui.com/js/colorSwitch.html) →




---
## [js/colorSwitch] colorSwitch
> 官方文档: https://www.uviewui.com/js/colorSwitch.html

---

## [#](#colorswitch-颜色转换) colorSwitch 颜色转换

### [#](#rgb转十六进制hex) RGB转十六进制Hex

#### [#](#rgbtohex-rgb) rgbToHex(rgb)

该函数可以将一个RGB颜色值转换成一个Hex的十六进制颜色值

-   `rgb` <String> RGB颜色值，如`rgb(230, 231, 233)`

```
export default{
	data() {
		return {
			rgb: 'rgb(13, 145, 20)'
		}
	},
	onLoad() {
		console.log(uni.$u.rgbToHex(this.rgb));
	}
}
```

### [#](#十六进制hex转rgb) 十六进制Hex转RGB

#### [#](#hextorgb-hex) hexToRgb(hex)

该函数可以将一个Hex的十六进制颜色值转换成一个RGB颜色值

-   `hex` <String> HEx颜色值，如`#0afdce`

```
export default{
	data() {
		return {
			hex: '#0afdce'
		}
	},
	onLoad() {
		console.log(uni.$u.hexToRgb(this.hex));
	}
}
```

### [#](#颜色渐变) 颜色渐变

#### [#](#colorgradient-startcolor-endcolor-step) colorGradient(startColor, endColor, step)

该函数实现两个颜色值之间等分取值，返回一个数组，元素为十六进制形式的颜色值，数组长度为`step`值。 例如：colorGradient('rgb(250, 250, 250)', 'rgb(252, 252, 252)', 3)，得到的结果为\["#fafafa", "#fafafa", "#fbfbfb"\]

-   `startColor` <String> 开始颜色值，可以是HEX或者RGB颜色值，如`#0afdce`或者`rgb(120, 130, 150)`
-   `endColor` <String> 结束颜色值，可以是HEX或者RGB颜色值，如`#0afdce`或者`rgb(120, 130, 150)`
-   `step` <Number> 均分值，把开始值和结束值平均分成多少份

```
export default{
	onLoad() {
		console.log(uni.$u.colorGradient('rgb(250,250,250)', 'rgb(252,252,252)', 3));

	}
}
```

### [#](#颜色透明度) 颜色透明度

#### [#](#colortorgba-color-opacity-0-3) colorToRgba(color, opacity = 0.3)

该函数可以接受一个`十六进制`或者`rgb`格式的颜色值(不能接受命名式颜色格式，比如`white`)，返回此颜色的`rgba`格式值，如下：

-   `color` <String> 颜色值，只能`hex`或者`rgba`格式
-   `opacity` <Number> 不透明度值，取值为0-1之间

```
uni.$u.colorToRgba('#000000', 0.35);

uni.$u.colorToRgba('rgb(255, 180, 0)', 0.4);

```

← [全局唯一标识符](https://www.uviewui.com/js/guid.html) [颜色值](https://www.uviewui.com/js/color.html) →




---
## [js/js-color] js-color
> 官方文档: https://www.uviewui.com/js/color.html

---

## [#](#color-颜色值) color 颜色值

此功能为uView内部通过js提供的一些颜色值，可以用于通过js修改元素字体，背景颜色等一些场景，常用于uView的各个组件中。
这些颜色值，挂载在`$u`对象下的`color`数组中，关于这些颜色值的具体描述，详见[Color 色彩](https://www.uviewui.com/components/color.html)
使用方法：如使用`primary`颜色值，方法为：`$u.color['primary']`

**说明**：这些通过JS调用的颜色值，也是能通过CSS调用的，二者等价。详见[Color 色彩](https://www.uviewui.com/components/color.html)

### [#](#主题颜色) 主题颜色

该主题颜色值，一共有5个，分别是`primary`、`error`、`success`、`info`、`warning`

```
export default{
	onLoad() {
		console.log(uni.$u.color['error']);
	}
}
```

### [#](#文字颜色) 文字颜色

uView一共提供了四个颜色值，具体请见组件部分[Color色彩](https://www.uviewui.com/components/color.html)
分别有：`mainColor`、`contentColor`、`tipsColor`、`lightColor`、`borderColor`(边框颜色值)

```
export default{
	onLoad() {
		console.log(uni.$u.color['contentColor']);
	}
}
```

### [#](#背景颜色) 背景颜色

uView提供了一个浅灰的背景颜色值，该值为`#f3f4f6`

```
export default{
	onLoad() {
		console.log(uni.$u.color['bgColor']);
	}
}
```

← [颜色转换](https://www.uviewui.com/js/colorSwitch.html) [对象转 URL 参数](https://www.uviewui.com/js/queryParams.html) →




---
## [js/queryParams] queryParams
> 官方文档: https://www.uviewui.com/js/queryParams.html

---

## [#](#queryparams-对象转url参数) queryParams 对象转URL参数

该方法，可以将一个对象形式参数转换成`get`传参所需参数形式，如把`{name: 'lisa', age: 20}`转换成`?name=lisa&age=20`
用途：可以用于`uni.navigateTo`接口传参等场景，无需自己手动拼接`URL`参数

#### [#](#queryparams-data-isprefix-true-arrayformat-brackets) queryParams(data, isPrefix = true, arrayFormat = 'brackets')

-   `data` <Object> 对象值，如`{name: 'lisa', age: 20}`
-   `isPrefix` <Boolean> 是否在返回的字符串前加上"?"，默认为`true`
-   `arrayFormat` <Boolean> 属性为数组的情况下的处理办法，默认为`brackets`，见后面说明

```
export default {
	data() {
		return {
			data: {
				name: 'lisa',
				age: 20
			}
		}
	},
	onLoad() {
		console.log(uni.$u.queryParams(this.data));

	}
}
```

#### [#](#arrayformat参数说明) arrayFormat参数说明

如果您传入的`data`对象内部某些属性值为数组的情况下，您可能需要留意这个参数的配置：
该参数可选值有4个：`indices`，`brackets`，`repeat`，`comma`，具体效果请见下方的演示说明

```
export default {
	data() {
		return {
			data: {
				name: '冷月夜',
				fruits: ['apple', 'banana', 'orange']
			}
		}
	},
	onLoad() {
		uni.$u.queryParams(this.data, true, 'indices');

		uni.$u.queryParams(this.data, true, 'brackets');

		uni.$u.queryParams(this.data, true, 'repeat');

		uni.$u.queryParams(this.data, true, 'comma');

	}
}
```

← [颜色值](https://www.uviewui.com/js/color.html) [规则校验](https://www.uviewui.com/js/test.html) →




---
## [js/test] test
> 官方文档: https://www.uviewui.com/js/test.html

---

## [#](#test-规则校验) test 规则校验

uView内置了一些校验规则，如是否手机号，邮箱号，URL等
这些规则方法，挂载在`$u.test`下面，如验证是否手机号：`$u.test.mobile('13888889999')`，如果验证通过，返回`true`，否则返回`false`

### [#](#是否验证码) 是否验证码

#### [#](#code-value-len-6) code(value, len = 6)

校验是否验证码(要求为数字)，返回`true`或者`false`。

-   `value` <String> 验证码字符串
-   `len` <Number> 验证码长度，默认为6

```
console.log(uni.$u.test.code('4567', 4));
```

### [#](#是否数组) 是否数组

#### [#](#array-array) array(array)

校验是否数组，返回`true`或者`false`。

-   `array` <Array> 数组

```
console.log(uni.$u.test.array([1, 2, 3]));
```

### [#](#是否json字符串) 是否Json字符串

#### [#](#jsonstring-json) jsonString(json)

校验是否数组，返回`true`或者`false`。

-   `json` <Json> Json字符串

注意：请留意json字符串的要求：

1.  整体为一个字符串
2.  字符串对象内的属性需要用`""`双引号包含

```
console.log(uni.$u.test.jsonString('{"a": 1}'));
```

### [#](#是否对象) 是否对象

#### [#](#object-object) object(object)

校验是否数组，返回`true`或者`false`。

-   `object` <Object> 对象

```
console.log(uni.$u.test.object({a: 1}));
```

### [#](#是否邮箱号) 是否邮箱号

#### [#](#email-email) email(email)

校验是否邮箱号，返回`true`或者`false`。

-   `email` <String> 字符串

```
console.log(uni.$u.test.email('123465798@gmail.com'));
```

### [#](#是否手机号) 是否手机号

#### [#](#mobile-mobile) mobile(mobile)

校验是否手机号，返回`true`或者`false`。

-   `mobile` <String> 字符串

```
console.log(uni.$u.test.mobile('13845678900'));
```

### [#](#是否url) 是否URL

#### [#](#url-url) url(url)

校验是否URL链接，返回`true`或者`false`。

-   `url` <String> 字符串

```
console.log(uni.$u.test.url('http://www.uviewui.com'));
```

### [#](#是否为空) 是否为空

这里指的“空”，包含如下几种情况：

-   值为`undefined`(一种类型)，非字符串`"undefined"`
-   字符串长度为0，也即空字符串
-   值为`false`(布尔类型)，非字符串`"false"`
-   值为数值`0`(非字符串`"0"`)，或者`NaN`
-   值为`null`，空对象`{}`，或者长度为0的数组

#### [#](#isempty-value) isEmpty(value)

校验值是否为空，返回`true`或者`false`。
此方法等同于`empty`名称，但是为了更语义化，推荐用`isEmpty`名称。

-   `value` <any> 字符串

```
console.log(uni.$u.test.isEmpty(false));
```

### [#](#是否普通日期) 是否普通日期

验证一个字符串是否日期，返回`true`或者`false`，如下行为正确：

-   `2020-02-10`、`2020-02-10 08:32:10`、`2020/02/10 3:10`、`2020/02/10 03:10`、`2020/02-10 3:10`

如下为错误：

-   `2020年02月10日`、`2020-02-10 25:32`

总的来说，年月日之间可以用"/"或者"-"分隔(不能用中文分隔)，时分秒之间用":"分隔，数值不能超出范围，如月份不能为13，则检验成功，否则失败。

#### [#](#date-date) date(date)

-   `date` <String> 日期字符串

```
console.log(uni.$u.test.date('2020-02-10 08:32:10'));
```

### [#](#是否十进制数值) 是否十进制数值

整数，小数，负数，带千分位数(2,359.08)等可以检验通过，返回`true`或者`false`。

#### [#](#number-number) number(number)

-   `number` <String> 数字

```
console.log(uni.$u.test.number('2020'));
```

### [#](#是否整数) 是否整数

所有字符都在`0-9`之间，才校验通过，结果返回`true`或者`false`。

#### [#](#digits-number) digits(number)

-   `number` <String> 数字

```
console.log(uni.$u.test.digits('2020'));
```

### [#](#是否身份证号) 是否身份证号

身份证号，包括尾数为"X"的类型，可以校验通过，结果返回`true`或者`false`。

#### [#](#idcard-idcard) idCard(idCard)

-   `idCard` <String> 身份证号

```
console.log(uni.$u.test.idCard('110101199003070134'));
```

### [#](#是否车牌号) 是否车牌号

可以校验旧车牌号和新能源类型车牌号，结果返回`true`或者`false`。

#### [#](#carno-carno) carNo(carNo)

-   `carNo` <String> 车牌号

```
console.log(uni.$u.test.carNo('京A88888'));
```

### [#](#是否金额) 是否金额

最多两位小数，可以带千分位，结果返回`true`或者`false`。

#### [#](#amount-amount) amount(amount)

-   `amount` <String> 金额字符串

```
console.log(uni.$u.test.amount('3,233.08'));
```

### [#](#是否汉字) 是否汉字

可以为单个汉字，或者汉字组成的字符串，结果返回`true`或者`false`。

#### [#](#chinese-zh) chinese(zh)

-   `zh` <String> 中文字符串

```
console.log(uni.$u.test.chinese('更上一层楼'));
```

### [#](#是否字母) 是否字母

只能为"a-z"或者"A-Z"之间的字符，结果返回`true`或者`false`。

#### [#](#letter-en) letter(en)

-   `en` <String> 字母串

```
console.log(uni.$u.test.letter('uView'));
```

### [#](#是否字母或者数字) 是否字母或者数字

只能是字母或者数字，结果返回`true`或者`false`。

#### [#](#enornum-str) enOrNum(str)

-   `str` <String> 字母或者数字字符串

```
console.log(uni.$u.test.enOrNum('uView'));
```

### [#](#是否包含某个值) 是否包含某个值

字符串中是否包含某一个子字符串，区分大小写，结果返回`true`或者`false`。

#### [#](#contains-str-substr) contains(str, subStr)

-   `str` <String> 字符串
-   `subStr` <String> 子字符串

```
console.log(uni.$u.test.contains('uView', 'View'));
```

### [#](#数值是否在某个范围内) 数值是否在某个范围内

如30在"29-35"这个范围内，不在"25-28"这个范围内，结果返回`true`或者`false`。

#### [#](#range-number-range) range(number, range)

-   `number` <Number> 数值
-   `range` <Array> 如"\[25-35\]"

```
console.log(uni.$u.test.range(35, [30, 34]));
```

### [#](#字符串长度是否在某个范围内) 字符串长度是否在某个范围内

如"abc"长度为3，范围在"2-5"这个区间，结果返回`true`或者`false`。

#### [#](#rangelength-str-range) rangeLength(str, range)

-   `str` <String> 数值
-   `range` <Array> 如"\[25, 35\]"

```
console.log(uni.$u.test.rangeLength('abc', [3, 10]));
```

← [对象转 URL 参数](https://www.uviewui.com/js/queryParams.html) [随机数值](https://www.uviewui.com/js/random.html) →




---
## [js/random] random
> 官方文档: https://www.uviewui.com/js/random.html

---

## [#](#random-随机数值) random 随机数值

#### [#](#random-min-max) random(min, max)

该方法可以返回在"min"和"max"之间的数值，要求"min"和"max"都为数值，且"max"大于或等于"min"，否则返回0.

-   `min` <Number> 最小值，最小值可以等于该值
-   `max` <Number> 最大值，最大值可以等于该值

```
console.log(uni.$u.random(1, 3));
```

← [规则校验](https://www.uviewui.com/js/test.html) [去除空格](https://www.uviewui.com/js/trim.html) →




---
## [js/trim] trim
> 官方文档: https://www.uviewui.com/js/trim.html

---

## [#](#trim-去除空格) trim 去除空格

#### [#](#trim-str-pos) trim(str, pos)

该方法可以去除空格，分别可以去除所有空格，两端空格，左边空格，右边空格，默认为去除两端空格

-   `str` <String> 字符串
-   `pos` <String> 去除那些位置的空格，可选为：`both`\-默认值，去除两端空格，`left`\-去除左边空格，`right`\-去除右边空格，`all`\-去除包括中间和两端的所有空格

```
console.log(uni.$u.trim('abc    b ', 'all'));
console.log(uni.$u.trim(' abc '));
```

← [随机数值](https://www.uviewui.com/js/random.html) [节点布局信息](https://www.uviewui.com/js/getRect.html) →




---
## [js/getRect] getRect
> 官方文档: https://www.uviewui.com/js/getRect.html

---

## [#](#getrect-节点布局信息) getRect 节点布局信息

此方法封装自uni的[nodesRef.boundingClientRect (opens new window)](https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect)，它极大简化了 使用复杂度，内部使用`Promise`，可以让用户同步获取节点信息。

#### [#](#getrect-selector-all-false) getRect(selector, all = false)

-   `selector` <String> 此参数为元素节点，可以是`id`或者`class`，比如"#user-name"，".box"
-   `all` <Boolean> 是否返回全部节点信息，当页面有多个相同`selector`的元素时，`all`为`true`，会以数组形式返回所有节点的信息(结果为数组，数组元素为对象)，否则只返回第一个节点的信息(结果为一个对象)

注意：该方法返回的结果，共有如下有用信息：

```
res = {
	left: 0,
	right: 414,
	top: 323,
	height: 2597,
	bottom: 2920,
	width: 414
}
```

受限于`nodesRef.boundingClientRect`，其上结果中的`left`，`top`，`right`，`bottom`，是会随着页面滚动而变化的，因为这个查询的相对于屏幕窗口，而不是 相对于页面根元素的，但`width`，`height`，是恒定不变的，所以一般情况我们推荐您想要获取节点宽高的时候采用这个方法。

注意

由于`onLoad`生命周期元素尚未创建完成，请勿在此生命周期使用此方法，如果是页面，应该在`onReady`生命周期，组件内应该在`mounted`生命周期调用。 如果要查询的目标，是通过服务端获取数据后才渲染的，那么应该在获取数据后，通过`this.$nextTick`调用此方法。

#### [#](#异步使用方法) 异步使用方法

通过`then`调用即可

```
export default {
	methods: {
		getElInfo() {
			uni.$u.getRect('.user-avatar').then(res => {
				console.log(res);
			})
		}
	}
}
```

#### [#](#同步使用方法) 同步使用方法

该方法的使用场景为您下一步的操作需要获取元素的节点后才能进行的情况，可以通过`async/await`方式调用，注意，无论是生命周期还是`methods`中的方法，都可以在 其前面添加`async`修饰符

```
export default {
	methods: {
		async getElInfo() {
			let rectInfo = await uni.$u.getRect('.user-avatar');
			console.log(rectInfo);
		}
	}
}
```

#### [#](#请求数据后再获取节点信息) 请求数据后再获取节点信息

此场景为元素内容为后端获取数据填充的，节点填充数据前后，元素的大小尺寸是不一样的，所以需要在获取后再执行此方法，这里通过`this.$nextTick`调用， 是因为它会等待数据赋值，元素创建完成后再执行，此时才是准确的尺寸，以下演示，为uView自带的[http 请求](https://www.uviewui.com/js/http.html)方法调用

```
<template>
	<view>
		<view class="user-name">
			{{userName}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: ''
			}
		},
		onLoad() {
			this.getElInfo();
		},
		methods: {
			getElInfo() {
				uni.$u.http.post('http://www.example.com/user/info').then(res => {
					this.userName = res.name;
					this.$nextTick(() => {
						uni.$u.getRect('.user-avatar').then(rect => {
							console.log(rect);
						})
					})
				})
			}
		}
	}
</script>
```

#### [#](#获取全部节点信息) 获取全部节点信息

设置第二个参数为`true`，此场景为页面有多个相同类名的元素，需要获取所有同类名节点信息时候使用，返回结果为一个数组

```
<template>
	<view>
		<view class="item">
			uView UI
		</view>
		<view class="item">
			<view>红豆生南国，春来发几枝</view>
			<view>愿君多采撷，此物最相思</view>
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.getElInfo();
		},
		methods: {
			getElInfo() {
				uni.$u.getRect('.item', true).then(rect => {

					console.log(rect);
				})
			}
		}
	}
</script>
```

#### [#](#如何让让某个元素滚动到页面顶部) 如何让让某个元素滚动到页面顶部

这里说的顶部，指的是导航栏的下方，比如我们点击某个操作，页面自动滚动，指定元素位于导航栏下方时停止。
我们需要结合`onPageScroll`生命周期，获得实时的页面滚动条位置。

```
<template>
	<view class="wrap">
		<view class="item">
			uView UI
		</view>
		<view class="item">
			uView UI
		</view>
		<view class="item">
			uView UI
		</view>
		<view class="item">
			uView UI
		</view>
		<view class="item object-item" @tap="scrollEl">
			点我，我就会滚动到导航栏下方
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			scrollEl() {
				uni.$u.getRect('.object-item').then(res => {
					uni.pageScrollTo({
						scrollTop: this.scrollTop + res.top,
						duration: 0
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		height: 200vh;
	}
</style>
```

← [去除空格](https://www.uviewui.com/js/trim.html) [小程序分享](https://www.uviewui.com/js/mpShare.html) →




---
## [js/mpShare] mpShare
> 官方文档: https://www.uviewui.com/js/mpShare.html

---

## [#](#mpshare-小程序分享) mpShare 小程序分享

此功能，是对uni的[onShareAppMessage 生命周期 (opens new window)](https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage)的封装。

这里说的小程序，指的是"微信小程序、百度小程序、头条小程序、QQ小程序，支付宝小程序等"。

由于小程序的分享(微信、头条平台)，需要监听页面的`onShareAppMessage`生命周期，小程序需要在页面声明了此生命周期，点击右上角的"胶囊"才会有分享功能， 而一般情况下，我们希望每个页面都可以分享，那就需要每个页面都写一遍这个生命周期，是很繁琐的。

基于以上，uView通过`mixin`的形式，给每一个页面注入了`onShareAppMessage`生命周期，让您简单引入，无需任何后续操作，即可让每一个页面都有分享功能(仅针对小程序)。

### [#](#平台差异说明) 平台差异说明

| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
| --- | --- | --- | --- | --- | --- | --- |
| x | x | √ | √ | √ | √ | √ |

### [#](#基本使用) 基本使用

需要注意的是，小程序(uni)没有提供类似"getNavigationBarTitle"这样的接口，所以我们无法获取当前页面导航栏的标题，换言之，我们想要每个页面个性化的 分享标题，需要手动设置，否则**默认为小程序的名称**。

注意：

分享功能是默认关闭的，但是我们写好各项配置，您只要在`main.js`中引入对应的文件即可，我们没有默认引入，是因为某些用户并不需要此功能。

打开小程序分享功能：

```

let mpShare = require('uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare)

```

分享功能，一般有三个参数，如下：

```

uni.$u.mpShare = {
	title: '',
	path: '',

	imageUrl: ''
}
```

以上这些，uView已通过`mixin`集成，当某一个页面您需要自定义分享信息时，可以通过"uni.$u.mpShare"对进行修改，在页面的`onLoad`生命周期修改即可。

```
export default {
	onLoad() {
		uni.$u.mpShare.title = '天苍苍野茫茫，风吹草低见牛羊';
	}
}
```

### [#](#重写-onshareappmessage-生命周期) 重写"onShareAppMessage"生命周期

如果您基于自己的一些业务逻辑，需要更加自定义的实现逻辑，可以在页面中重写`onShareAppMessage`生命周期即可覆盖uView通过`mixin`监听的`onShareAppMessage`生命周期。

```
export default {

	onShareAppMessage(res) {
		if (res.from === 'button') {
			console.log(res.target)
		}
		return {
			title: '自定义分享标题',
			path: '/pages/test/test?id=123'
		}
    }
}
```

### [#](#分享到朋友圈) 分享到朋友圈

此功能为微信小程序最新加入的功能，仅适用于微信小程序，uView也全局监听了此生命周期。

同理，你也可以在页面中重写`onShareTimeline`生命周期即可覆盖uView通过`mixin`监听的`onShareTimeline`生命周期。

```
export default {
	onShareTimeline(res) {
		if (res.from === 'button') {
			console.log(res.target)
		}
		return {
			title: '自定义分享标题',
			path: '/pages/test/test?id=123'
		}
    }
}
```

← [节点布局信息](https://www.uviewui.com/js/getRect.html)




---
