初始版本

uniapp/src/uni_modules/lime-painter/changelog.md

@@ -0,0 +1,182 @@
+## 1.9.4.4（2023-04-15）
+- fix: 修复无法匹配负值
+- fix: 修复 Nvue IOS getImageInfo `useCORS` 为 undefined
+## 1.9.4.3（2023-04-01）
+- feat: 增加支持文字描边 `text-stroke: '5rpx #fff'`
+## 1.9.4.2（2023-03-30）
+- fix: 修复 支付宝小程序 isPC 在手机也为true的问题
+- feat: 由 微信开发工具 3060 版 无法获取图片尺寸，现 微信开发工具 3220 版 修复该问题，故还原上一版的获取图片方式。
+## 1.9.4.1（2023-03-28）
+- fix: 修复固定高度不正确问题
+## 1.9.4（2023-03-17）
+- fix: nvue ios getImageInfo缺少this报错
+- fix: pathType 非2d无效问题
+- fix: 修复 小米9se 可能会存在多次init 导致画面多次放大
+- fix: 修复 border 分开写 width style无效问题
+- fix: 修复 支付宝小程序IOS 再次进入不渲染的问题
+- fix: 修复 支付宝小程序安卓Zindex排序错乱问题
+- fix: 修复 微信开发工具 3060 版 无法获取图片的问题
+- feat: 把 for in 改为 forEach
+- feat: 增加 hidden
+- feat: 根节点 box-sizing 默认 `border-box`
+- feat: 增加支持 `vw` `wh`
+- chore: pathType 取消 默认值，因为字节开发工具不能显示
+- chore: 支付宝小程序开发工具不支持 生成图片 请以真机调试为准
+- bug: 企业微信 2.20.3无法使用
+## 1.9.3.5（2022-06-29）
+- feat: justifyContent 增加 `space-around`、`space-between`
+- feat: canvas 2d 也使用`getImageInfo`
+- fix: 修复 `text`的 `text-decoration`错位
+## 1.9.3.4（2022-06-20）
+- fix: 修复 因创建节点速度问题导致顺序出错。 
+- fix: 修复 微信小程序 PC 无法显示本地图片 
+- fix: 修复 flex-box 对齐问题 
+- feat: 增加 `text-shadow`
+- feat: 重写 `text` 对齐方式
+- chore: 更新文档
+## 1.9.3.3（2022-06-17）
+- fix: 修复 支付宝小程序 canvas 2d 存在ctx.draw问题导致报错
+- fix: 修复 支付宝小程序 toDataURL 存在权限问题改用 `toTempFilePath`
+- fix: 修复 支付宝小程序 image size 问题导致 `objectFit` 无效
+## 1.9.3.2（2022-06-14）
+- fix: 修复 image 设置背景色不生效问题
+- fix: 修复 nvue 环境判断缺少参数问题
+## 1.9.3.1（2022-06-14）
+- fix: 修复 bottom 定位不对问题
+- fix: 修复 因小数导致计算出错换行问题
+- feat: 增加 `useCORS` h5端图片跨域 在设置请求头无效果后试一下设置这个值
+- chore: 更新文档
+## 1.9.3（2022-06-13）
+- feat: 增加 `zIndex`
+- feat: 增加 `flex-box` 该功能处于原始阶段，非常简陋。
+- tips: QQ小程序 vue3 不支持, 为 uni 官方BUG
+## 1.9.2.9（2022-06-10）
+- fix: 修复`text-align`及`margin`居中问题
+## 1.9.2.8（2022-06-10）
+- fix: 修复 Nvue `canvasToTempFilePathSync` 不生效问题
+## 1.9.2.7（2022-06-10）
+- fix: 修复 margin及padding的bug
+- fix: 修复 Nvue `isCanvasToTempFilePath` 不生效问题
+## 1.9.2.6（2022-06-09）
+- fix: 修复 Nvue 不显示
+- feat: 增加支持字体渐变
+```html
+<l-painter-text 
+	text="水调歌头\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。"
+	css="background: linear-gradient(,#ff971b 0%, #1989fa 100%); background-clip: text" />
+```
+## 1.9.2.5（2022-06-09）
+- chore: 更变获取父级宽度的设定
+- chore: `pathType` 在canvas 2d 默认为 `url`
+## 1.9.2.4（2022-06-08）
+- fix: 修复 `pathType` 不生效问题
+## 1.9.2.3（2022-06-08）
+- fix: 修复 `canvasToTempFilePath` 漏写 `success` 参数
+## 1.9.2.2（2022-06-07）
+- chore: 更新文档
+## 1.9.2.1（2022-06-07）
+- fix: 修复 vue3 赋值给this再传入导致image无法绘制
+- fix: 修复 `canvasToTempFilePathSync` 时机问题
+- feat: canvas 2d 更改图片生成方式 `toDataURL` 
+## 1.9.2（2022-05-30）
+- fix: 修复 `canvasToTempFilePathSync` 在 vue3 下只生成一次
+## 1.9.1.7（2022-05-28）
+- fix: 修复 `qrcode`显示不全问题
+## 1.9.1.6（2022-05-28）
+- fix: 修复 `canvasToTempFilePathSync` 会重复多次问题
+- fix: 修复 `view` css `backgroundImage` 图片下载失败导致 子节点不渲染
+## 1.9.1.5（2022-05-27）
+- fix: 修正支付宝小程序 canvas 2d版本号 2.7.15
+## 1.9.1.4（2022-05-22）
+- fix: 修复字节小程序无法使用xml方式
+- fix: 修复字节小程序无法使用base64(非2D情况下工具上无法显示)
+- fix: 修复支付宝小程序 `canvasToTempFilePath` 报错
+## 1.9.1.3（2022-04-29）
+- fix: 修复vue3打包后uni对象为空后的报错
+## 1.9.1.2（2022-04-25）
+- fix: 删除多余文件
+## 1.9.1.1（2022-04-25）
+- fix: 修复图片不显示问题
+## 1.9.1（2022-04-12）
+- fix: 因四舍五入导致有些机型错位
+- fix: 修复无views报错 
+- chore: nvue下因ios无法读取插件内static文件，改由下载方式
+## 1.9.0（2022-03-20）
+- fix: 因无法固定尺寸导致生成图片不全
+- fix: 特定情况下text判断无效
+- chore: 本地化APP Nvue webview
+## 1.8.9（2022-02-20）
+- fix: 修复 小程序下载最多10次并发的问题
+- fix: 修复 APP端无法获取本地图片
+- fix: 修复 APP Nvue端不执行问题
+- chore: 增加图片缓存机制
+## 1.8.8.8（2022-01-27）
+- fix: 修复 主动调用尺寸问题
+## 1.8.8.6（2022-01-26）
+- fix: 修复 nvue 下无宽度时获取父级宽度 
+- fix: 修复 ios app 无法渲染问题
+## 1.8.8（2022-01-23）
+- fix: 修复 主动调用时无节点问题
+- fix: 修复 `box-shadow` 颜色问题
+- fix: 修复 `transform:rotate` 角度位置问题
+- feat: 增加 `overflow:hidden`
+## 1.8.7（2022-01-07）
+- fix: 修复 image 方向为 `right` 时原始宽高问题
+- feat: 支持 view 设置背景图 `background-image: url(xxx)`
+- chore: 去掉可选链
+## 1.8.6（2021-11-28）
+- feat: 支持`view`对`inline-block`的子集使用`text-align`
+## 1.8.5.5（2021-08-17）
+- chore: 更新文档，删除 replace
+- fix: 修复 text 值为 number时报错
+## 1.8.5.4（2021-08-16）
+- fix: 字节小程序兼容
+## 1.8.5.3（2021-08-15）
+- fix: 修复线性渐变与css现实效果不一致的问题
+- chore: 更新文档
+## 1.8.5.2（2021-08-13）
+- chore: 增加`background-image`、`background-repeat` 能力，主要用于背景纹理的绘制，并不是代替`image`。例如：大面积的重复平铺的水印
+- 注意：这个功能H5暂时无法使用，因为[官方的API有BUG](https://ask.dcloud.net.cn/question/128793)，待官方修复！！！
+## 1.8.5.1（2021-08-10）
+- fix: 修复因`margin`报错问题
+## 1.8.5（2021-08-09）
+- chore: 增加margin支持`auto`,以达到居中效果
+## 1.8.4（2021-08-06）
+- chore: 增加判断缓存文件条件
+- fix: 修复css 多余空格报错问题
+## 1.8.3（2021-08-04）
+- tips: 1.6.x 以下的版本升级到1.8.x后要为每个元素都加上定位：position: 'absolute'
+- fix: 修复只有一个view子元素时不计算高度的问题
+## 1.8.2（2021-08-03）
+- fix: 修复 path-type 为 `url` 无效问题
+- fix: 修复 qrcode `text` 为空时报错问题
+- fix: 修复 image `src` 动态设置时不生效问题
+- feat: 增加 css 属性 `min-width` `max-width`
+## 1.8.1（2021-08-02）
+- fix: 修复无法加载本地图片
+## 1.8.0（2021-08-02）
+- chore 文档更新
+- 使用旧版的同学不要升级！
+## 1.8.0-beta（2021-07-30）
+- ## 全新布局方式 不兼容旧版！
+- chore: 布局方式变更
+- tips: 微信canvas 2d 不支持真机调试
+## 1.6.6（2021-07-09）
+- chore: 统一命名规范，无须主动引入组件
+## 1.6.5（2021-06-08）
+- chore: 去掉console
+## 1.6.4（2021-06-07）
+- fix: 修复 数字 为纯字符串时不转换的BUG
+## 1.6.3（2021-06-06）
+- fix: 修复 PC 端放大的BUG
+## 1.6.2（2021-05-31）
+- fix: 修复 报`adaptor is not a function`错误
+- fix: 修复 text 多行高度
+- fix: 优化 默认文字的基准线
+- feat: `@progress`事件，监听绘制进度
+## 1.6.1（2021-02-28）
+- 删除多余节点
+## 1.6.0（2021-02-26）
+- 调整为uni_modules目录规范
+- 修复：transform的rotate不能为负数问题
+- 新增：`pathType` 指定生成图片返回的路径类型,可选值有 `base64`、`url`

uniapp/src/uni_modules/lime-painter/components/common/relation.js

@@ -0,0 +1,147 @@
+const styles = (v ='') =>  v.split(';').filter(v => v && !/^[\n\s]+$/.test(v)).map(v => {
+						const key = v.slice(0, v.indexOf(':'))
+						const value = v.slice(v.indexOf(':')+1)
+						return {
+							[key
+								.replace(/-([a-z])/g, function() { return arguments[1].toUpperCase()})
+								.replace(/\s+/g, '')
+							]: value.replace(/^\s+/, '').replace(/\s+$/, '') || ''
+						}
+					})
+export function parent(parent) {
+	return {
+		provide() {
+			return {
+				[parent]: this
+			}
+		},
+		data() {
+			return {
+				el: {
+					css: {},
+					views: []
+				},
+			}
+		},
+		watch: {
+			css: { 
+				handler(v) {
+					if(this.canvasId) {
+						this.el.css = (typeof v == 'object' ? v : v && Object.assign(...styles(v))) || {}
+						this.canvasWidth = this.el.css && this.el.css.width || this.canvasWidth
+						this.canvasHeight = this.el.css && this.el.css.height || this.canvasHeight
+					}
+				},
+				immediate: true
+			}
+		}
+	}
+}
+export function children(parent, options = {}) {
+	const indexKey = options.indexKey || 'index'
+	return {
+		inject: {
+			[parent]: {
+				default: null
+			}
+		},
+		watch: {
+			el: {
+				handler(v, o) {
+					if(JSON.stringify(v) != JSON.stringify(o))
+						this.bindRelation()
+				},
+				deep: true,
+				immediate: true
+			},
+			src: {
+				handler(v, o) {
+					if(v != o)
+						this.bindRelation()
+				},
+				immediate: true
+			},
+			text: {
+				handler(v, o) {
+					if(v != o) this.bindRelation()
+				},
+				immediate: true
+			},
+			css: {
+				handler(v, o) {
+					if(v != o)
+						this.el.css = (typeof v == 'object' ? v : v && Object.assign(...styles(v))) || {}
+				},
+				immediate: true
+			},
+			replace: {
+				handler(v, o) {
+					if(JSON.stringify(v) != JSON.stringify(o))
+						this.bindRelation()
+				},
+				deep: true,
+				immediate: true
+			}
+		},
+		created() {
+			if(!this._uid) {
+				this._uid = this._.uid
+			}
+			Object.defineProperty(this, 'parent', {
+				get: () => this[parent] || [],
+			})
+			Object.defineProperty(this, 'index', {
+				get: () =>  {
+					this.bindRelation();
+					const {parent: {el: {views=[]}={}}={}} = this
+					return views.indexOf(this.el)
+				},
+			});
+			this.el.type = this.type
+			
+			this.bindRelation()
+		},
+		// #ifdef VUE3
+		beforeUnmount() {
+			this.removeEl()
+		},
+		// #endif
+		// #ifdef VUE2
+		beforeDestroy() {
+			this.removeEl()
+		},
+		// #endif
+		methods: {
+			removeEl() {
+				if (this.parent) {
+					this.parent.el.views = this.parent.el.views.filter(
+						(item) => item._uid !== this._uid
+					);
+				}
+			},
+			bindRelation() {
+				if(!this.el._uid) {
+					this.el._uid = this._uid 
+				}
+				if(['text','qrcode'].includes(this.type)) {
+					this.el.text = this.$slots && this.$slots.default && this.$slots.default[0].text || `${this.text || ''}`.replace(/\\n/g, '\n')
+				}
+				if(this.type == 'image') {
+					this.el.src = this.src
+				}
+				if (!this.parent) {
+					return;
+				}
+				let views = this.parent.el.views || [];
+				if(views.indexOf(this.el) !== -1) {
+					this.parent.el.views = views.map(v => v._uid == this._uid ? this.el : v)
+				} else {
+					this.parent.el.views = [...views, this.el];
+				}
+			}
+		},
+		mounted() {
+			// this.bindRelation()
+		},
+	}
+}

uniapp/src/uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue

@@ -0,0 +1,27 @@
+<template>
+	
+</template>
+
+<script>
+	import {parent, children} from '../common/relation';
+	export default {
+		name: 'lime-painter-image',
+		mixins:[children('painter')],
+		props: {
+			css: [String, Object],
+			src: String
+		},
+		data() {
+			return {
+				type: 'image',
+				el: {
+					css: {},
+					src: null
+				},
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

uniapp/src/uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue

@@ -0,0 +1,26 @@
+<template>
+</template>
+
+<script>
+	import {parent, children} from '../common/relation';
+	export default {
+		name: 'lime-painter-qrcode',
+		mixins:[children('painter')],
+		props: {
+			css: [String, Object],
+			text: String
+		},
+		data() {
+			return {
+				type: 'qrcode',
+				el: {
+					css: {},
+					text: null
+				},
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

uniapp/src/uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue

@@ -0,0 +1,28 @@
+<template>
+	<text style="opacity: 0;height: 0;"><slot/></text>
+</template>
+
+<script>
+	import {parent, children} from '../common/relation';
+	export default {
+		name: 'lime-painter-text',
+		mixins:[children('painter')],
+		props: {
+			css: [String, Object],
+			text: [String, Number],
+			replace: Object,
+		},
+		data() {
+			return {
+				type: 'text',
+				el: {
+					css: {},
+					text: null
+				},
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

uniapp/src/uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue

@@ -0,0 +1,29 @@
+<template>
+	<view><slot/></view>
+</template>
+
+<script>
+	import {parent, children} from '../common/relation';
+	export default {
+		name: 'lime-painter-view',
+		mixins:[children('painter'), parent('painter')],
+		props: {
+			css: [String, Object],
+		},
+		data() {
+			return {
+				type: 'view',
+				el: {
+					css: {},
+					views:[]
+				},
+			}
+		},
+		mounted() {
+			
+		}
+	}
+</script>
+
+<style>
+</style>

uniapp/src/uni_modules/lime-painter/components/l-painter/l-painter.vue

@@ -0,0 +1,443 @@
+<template>
+	<view class="lime-painter" ref="limepainter">
+		<view v-if="canvasId && size" :style="styles">
+			<!-- #ifndef APP-NVUE -->
+			<canvas class="lime-painter__canvas" v-if="use2dCanvas" :id="canvasId" type="2d" :style="size"></canvas>
+			<canvas class="lime-painter__canvas" v-else :canvas-id="canvasId" :style="size" :id="canvasId"
+				:width="boardWidth * dpr" :height="boardHeight * dpr"></canvas>
+
+			<!-- #endif -->
+			<!-- #ifdef APP-NVUE -->
+			<web-view :style="size" ref="webview"
+				src="/uni_modules/lime-painter/static/index.html"
+				class="lime-painter__canvas" @pagefinish="onPageFinish" @error="onError" @onPostMessage="onMessage">
+			</web-view>
+			<!-- #endif -->
+		</view>
+		<slot />
+	</view>
+</template>
+
+
+<script>
+	import { parent } from '../common/relation'
+	import props from './props'
+	import {toPx, base64ToPath, pathToBase64, isBase64, sleep, getImageInfo}from './utils';
+	//  #ifndef APP-NVUE
+	import { compareVersion } from './utils';
+	import Painter from './painter';
+	// import Painter from '@painter'
+	const nvue = {}
+	//  #endif
+	//  #ifdef APP-NVUE
+	import nvue from './nvue'
+	//  #endif
+	export default {
+		name: 'lime-painter',
+		mixins: [props, parent('painter'), nvue],
+		data() {
+			return {
+				// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
+				use2dCanvas: true,
+				// #endif
+				// #ifndef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
+				use2dCanvas: false,
+				// #endif
+				canvasHeight: 150,
+				canvasWidth: null,
+				parentWidth: 0,
+				inited: false,
+				progress: 0,
+				firstRender: 0,
+				done: false,
+				isPc: false,
+			};
+		},
+		computed: {
+			styles() {
+				return `${this.size}${this.customStyle||''};` + (this.hidden && 'position: fixed; left: 1500rpx;')
+			},
+			canvasId() {
+				return `l-painter${this._ && this._.uid || this._uid}`
+			},
+			size() {
+				if (this.boardWidth && this.boardHeight) {
+					return `width:${this.boardWidth}px; height: ${this.boardHeight}px;`;
+				}
+			},
+			dpr() {
+				return this.pixelRatio || uni.getSystemInfoSync().pixelRatio;
+			},
+			boardWidth() {
+				const {width = 0} = (this.elements && this.elements.css) || this.elements || this
+				const w = toPx(width||this.width)
+				return w || Math.max(w, toPx(this.canvasWidth));
+			},
+			boardHeight() {
+				const {height = 0} = (this.elements && this.elements.css) || this.elements || this
+				const h = toPx(height||this.height)
+				return h || Math.max(h, toPx(this.canvasHeight));
+			},
+			hasBoard() {
+				return this.board && Object.keys(this.board).length
+			},
+			elements() {
+				return this.hasBoard ? this.board : JSON.parse(JSON.stringify(this.el))
+			}
+		},
+		watch: {
+			// #ifdef MP-WEIXIN ||  MP-ALIPAY
+			size(v) {
+				// #ifdef MP-WEIXIN
+				if (this.use2dCanvas) {
+					this.inited = false;
+				}
+				// #endif
+				// #ifdef MP-ALIPAY
+				this.inited = false;
+				// #endif
+			},
+			// #endif
+		},
+		created() {
+			this.show = true
+			const { SDKVersion, version, platform } = uni.getSystemInfoSync();
+			// #ifdef MP-WEIXIN
+			this.isPc = /windows|mac/.test(platform)
+			this.use2dCanvas = this.type === '2d' && compareVersion(SDKVersion, '2.9.2') >= 0;
+			// #endif
+			// #ifdef MP-TOUTIAO
+			this.use2dCanvas = this.type === '2d' && compareVersion(SDKVersion, '1.78.0') >= 0;
+			// #endif
+			// #ifdef MP-ALIPAY
+			this.use2dCanvas = this.type === '2d' && compareVersion(my.SDKVersion, '2.7.15') >= 0;
+			this.isPc = /devtools/.test(platform) //!uni.canIUse('canvas.toTempFilePath')
+			// #endif
+		},
+		async mounted() {
+			await sleep(30)
+			await this.getParentWeith()
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.$watch('elements', this.watchRender, {
+						deep: true,
+						immediate: true
+					});
+				}, 30)
+			})
+		},
+		// #ifdef VUE3
+		unmounted() {
+			this.done = false
+			this.inited = false
+			this.firstRender = 0
+			this.progress = 0
+			this.painter = null
+			clearTimeout(this.rendertimer)
+		},
+		// #endif
+		// #ifdef VUE2
+		destroyed() {
+			this.done = false
+			this.inited = false
+			this.firstRender = 0
+			this.progress = 0
+			this.painter = null
+			clearTimeout(this.rendertimer)
+		},
+		// #endif
+		methods: {
+			async watchRender(val, old) {
+				if (!val || !val.views || (!this.firstRender ? !val.views.length : !this.firstRender) || !Object.keys(val).length || JSON.stringify(val) == JSON.stringify(old)) return;
+				this.firstRender = 1
+				this.progress = 0
+				this.done = false
+				clearTimeout(this.rendertimer)
+				this.rendertimer = setTimeout(() => {
+					this.render(val);
+				}, this.beforeDelay)
+			},
+			async setFilePath(path, param) {
+				let filePath = path
+				const {pathType = this.pathType} =  param || this
+				if (pathType == 'base64' && !isBase64(path)) {
+					filePath = await pathToBase64(path)
+				} else if (pathType == 'url' && isBase64(path)) {
+					filePath = await base64ToPath(path)
+				}
+				if (param && param.isEmit) {
+					this.$emit('success', filePath);
+				}
+				return filePath
+			},
+			async getSize(args) {
+				const {width} = args.css || args
+				const {height} = args.css || args
+				if (!this.size) {
+					if (width || height) {
+						this.canvasWidth = width || this.canvasWidth
+						this.canvasHeight = height || this.canvasHeight
+						await sleep(30);
+					} else {
+						await this.getParentWeith()
+					}
+				}
+			},
+			canvasToTempFilePathSync(args) {
+				this.stopWatch = this.$watch('done', (v) => {
+					if (v) {
+						this.canvasToTempFilePath(args)
+						this.stopWatch && this.stopWatch()
+					}
+				}, {
+					immediate: true
+				})
+				
+			},
+			// #ifndef APP-NVUE
+			getParentWeith() {
+				return new Promise(resolve => {
+					uni.createSelectorQuery()
+						.in(this)
+						.select(`.lime-painter`)
+						.boundingClientRect()
+						.exec(res => {
+							const {width, height} = res[0]||{}
+							this.parentWidth = Math.ceil(width||0)
+							this.canvasWidth = this.parentWidth || 300
+							this.canvasHeight = height || this.canvasHeight||150
+							resolve(res[0])
+						})
+				})
+			},
+			async render(args = {}) {
+				if(!Object.keys(args).length) {
+					return console.error('空对象')
+				}
+				this.progress = 0
+				this.done = false
+				await this.getSize(args)
+				const ctx = await this.getContext();
+				let {
+					use2dCanvas,
+					boardWidth,
+					boardHeight,
+					canvas,
+					afterDelay
+				} = this;
+				if (use2dCanvas && !canvas) {
+					return Promise.reject(new Error('render: fail canvas has not been created'));
+				}
+				this.boundary = {
+					top: 0,
+					left: 0,
+					width: boardWidth,
+					height: boardHeight
+				};
+				this.painter = null
+				if (!this.painter) {
+					const {width} = args.css || args
+					const {height} = args.css || args
+					if(!width && this.parentWidth) {
+						Object.assign(args, {width: this.parentWidth})
+					}
+					const param = {
+						context: ctx,
+						canvas,
+						width: boardWidth,
+						height: boardHeight,
+						pixelRatio: this.dpr,
+						useCORS: this.useCORS,
+						createImage: getImageInfo.bind(this),
+						listen: {
+							onProgress: (v) => {
+								this.progress = v
+								this.$emit('progress', v)
+							},
+							onEffectFail: (err) => {
+								this.$emit('faill', err)
+							}
+						}
+					}
+					this.painter = new Painter(param)
+				} 
+				
+				// vue3 赋值给data会引起图片无法绘制 
+				const { width, height } = await this.painter.source(JSON.parse(JSON.stringify(args)))
+				this.boundary.height = this.canvasHeight = height
+				this.boundary.width = this.canvasWidth = width
+				await sleep(this.sleep);
+				// 可能会因为尺寸改变影响绘制上下文
+				this.painter.setContext(this.ctx)
+				await this.painter.render()
+				await new Promise(resolve => this.$nextTick(resolve));
+				if (!use2dCanvas) {
+					await this.canvasDraw();
+				}
+				if (afterDelay && use2dCanvas) {
+					await sleep(afterDelay);
+				}
+				this.$emit('done');
+				this.done = true
+				if (this.isCanvasToTempFilePath) {
+					this.canvasToTempFilePath()
+						.then(res => {
+							this.$emit('success', res.tempFilePath)
+						})
+						.catch(err => {
+							this.$emit('fail', new Error(JSON.stringify(err)));
+						});
+				}
+				return Promise.resolve({
+					ctx,
+					draw: this.painter,
+					node: this.node
+				});
+			},
+			canvasDraw(flag = false) {
+				return new Promise((resolve, reject) => this.ctx.draw(flag, () => setTimeout(() => resolve(), this
+					.afterDelay)));
+			},
+			async getContext() {
+				if (!this.canvasWidth) {
+					this.$emit('fail', 'painter no size')
+					console.error('[lime-painter] no size: 请给画板或父级设置尺寸')
+					return Promise.reject();
+				}
+				if (this.ctx && this.inited) {
+					return Promise.resolve(this.ctx);
+				}
+				const { type, use2dCanvas, dpr, boardWidth, boardHeight } = this;
+				const _getContext = () => {
+					return new Promise(resolve => {
+						uni.createSelectorQuery()
+							.in(this)
+							.select(`#${this.canvasId}`)
+							.boundingClientRect()
+							.exec(res => {
+								if (res) {
+									const ctx = uni.createCanvasContext(this.canvasId, this);
+									if (!this.inited) {
+										this.inited = true;
+										this.use2dCanvas = false;
+										this.canvas = res;
+									}
+									// #ifdef MP-ALIPAY
+									ctx.scale(dpr, dpr);
+									// #endif
+									this.ctx = ctx
+									resolve(this.ctx);
+								} else {
+									console.error('[lime-painter] no node')
+								}
+							});
+					});
+				};
+				if (!use2dCanvas) {
+					return _getContext();
+				}
+				return new Promise(resolve => {
+					uni.createSelectorQuery()
+						.in(this)
+						.select(`#${this.canvasId}`)
+						.node()
+						.exec(res => {
+							let {node: canvas} = res && res[0]||{};
+							if(canvas) {
+								const ctx = canvas.getContext(type);
+								if (!this.inited) {
+									this.inited = true;
+									this.use2dCanvas = true;
+									this.canvas = canvas;
+								}
+								this.ctx = ctx
+								resolve(this.ctx);
+							} else {
+								console.error('[lime-painter]: no size')
+							}
+						});
+				});
+			},
+			canvasToTempFilePath(args = {}) {
+				return new Promise(async (resolve, reject) => {
+					const { use2dCanvas, canvasId, dpr, fileType, quality } = this;
+					const success = async (res) => {
+						try {
+							const tempFilePath = await this.setFilePath(res.tempFilePath || res, args)
+							const result = Object.assign(res, {tempFilePath})
+							args.success && args.success(result)
+							resolve(result)
+						} catch (e) {
+							this.$emit('fail', e)
+						}
+					}
+					
+					let { top: y = 0, left: x = 0, width, height } = this.boundary || this;
+					let destWidth = width * dpr;
+					let destHeight = height * dpr;
+					// #ifdef MP-ALIPAY
+					width = destWidth;
+					height = destHeight;
+					// #endif
+					
+					const copyArgs = Object.assign({
+						x,
+						y,
+						width,
+						height,
+						destWidth,
+						destHeight,
+						canvasId,
+						fileType,
+						quality,
+						// success,
+						// fail: reject
+					}, args, {success});
+					if(this.isPc || use2dCanvas) {
+						copyArgs.canvas = this.canvas
+					}
+					
+					if (use2dCanvas && !this.isPc) {
+						try{
+							// #ifndef MP-ALIPAY
+							const oFilePath = this.canvas.toDataURL(`image/${args.fileType||fileType}`.replace(/pg/, 'peg'), args.quality||quality)
+							if(/data:,/.test(oFilePath)) {
+								uni.canvasToTempFilePath(copyArgs, this);
+							} else {
+								const tempFilePath = await this.setFilePath(oFilePath, args)
+								args.success && args.success({tempFilePath})
+								resolve({tempFilePath})
+							}
+							// #endif
+							// #ifdef MP-ALIPAY
+							this.canvas.toTempFilePath(copyArgs)
+							// #endif
+						}catch(e){
+							args.fail && args.fail(e)
+							reject(e)
+						}
+					} else {
+						// #ifdef MP-ALIPAY
+						my.canvasToTempFilePath(copyArgs);
+						// #endif
+						// #ifndef MP-ALIPAY
+						uni.canvasToTempFilePath(copyArgs, this);
+						// #endif
+					}
+				})
+			}
+			// #endif
+		}
+	};
+</script>
+<style>
+	.lime-painter,
+	.lime-painter__canvas {
+		// #ifndef APP-NVUE
+		width: 100%;
+		// #endif
+		// #ifdef APP-NVUE
+		flex: 1;
+		// #endif
+	}
+</style>

uniapp/src/uni_modules/lime-painter/components/l-painter/nvue.js

@@ -0,0 +1,219 @@
+// #ifdef APP-NVUE
+import { sleep, getImageInfo, isBase64, useNvue, networkReg } from './utils';
+const dom = weex.requireModule('dom')
+import {version } from '../../package.json'
+
+export default {
+	data() {
+		return {
+			tempFilePath: [],
+			isInitFile: false,
+			osName: uni.getSystemInfoSync().osName
+		}
+	},
+	created() {
+		// if (this.hybrid) return
+		// useNvue('_doc/uni_modules/lime-painter/', version, this.timeout).then(res => {
+		// 	this.isInitFile = true
+		// })
+	},
+	methods: {
+		getParentWeith() {
+			return new Promise(resolve => {
+				dom.getComponentRect(this.$refs.limepainter, (res) => {
+					this.parentWidth = Math.ceil(res.size.width)
+					this.canvasWidth = this.canvasWidth || this.parentWidth ||300
+					this.canvasHeight = res.size.height || this.canvasHeight||150
+					resolve(res.size)
+				})
+			})
+		},
+		onPageFinish() {
+			this.webview = this.$refs.webview
+			this.webview.evalJS(`init(${this.dpr})`)
+		},
+		onMessage(e) {
+			const res = e.detail.data[0] || null;
+			if (res.event) {
+				if (res.event == 'inited') {
+					this.inited = true
+				}
+				if(res.event == 'fail'){
+					this.$emit('fail', res)
+				}
+				if (res.event == 'layoutChange') {
+					const data = typeof res.data == 'string' ? JSON.parse(res.data) : res.data
+					this.canvasWidth = Math.ceil(data.width);
+					this.canvasHeight = Math.ceil(data.height);
+				}
+				if (res.event == 'progressChange') {
+					this.progress = res.data * 1
+				}
+				if (res.event == 'file') {
+					this.tempFilePath.push(res.data)
+					if (this.tempFilePath.length > 7) {
+						this.tempFilePath.shift()
+					}
+					return
+				}
+				if (res.event == 'success') {
+					if (res.data) {
+						this.tempFilePath.push(res.data)
+						if (this.tempFilePath.length > 8) {
+							this.tempFilePath.shift()
+						}
+						if (this.isCanvasToTempFilePath) {
+							this.setFilePath(this.tempFilePath.join(''), {isEmit:true})
+						}
+					} else {
+						this.$emit('fail', 'canvas no data')
+					}
+					return
+				}
+				this.$emit(res.event, JSON.parse(res.data));
+			} else if (res.file) {
+				this.file = res.data;
+			} else{
+				console.info(res[0])
+			}
+		},
+		getWebViewInited() {
+			if (this.inited) return Promise.resolve(this.inited);
+			return new Promise((resolve) => {
+				this.$watch(
+					'inited',
+					async val => {
+						if (val) {
+							resolve(val)
+						}
+					}, {
+						immediate: true
+					}
+				);
+			})
+		},
+		getTempFilePath() {
+			if (this.tempFilePath.length == 8) return Promise.resolve(this.tempFilePath)
+			return new Promise((resolve) => {
+				this.$watch(
+					'tempFilePath',
+					async val => {
+						if (val.length == 8) {
+							resolve(val.join(''))
+						}
+					}
+				);
+			})
+		},
+		getWebViewDone() {
+			if (this.progress == 1) return Promise.resolve(this.progress);
+			return new Promise((resolve) => {
+				this.$watch(
+					'progress',
+					async val => {
+						if (val == 1) {
+							this.$emit('done')
+							this.done = true
+							resolve(val)
+						}
+					}, {
+						immediate: true
+					}
+				);
+			})
+		},
+		async render(args) {
+			try {
+				await this.getSize(args)
+				const {width} = args.css || args
+				if(!width && this.parentWidth) {
+					Object.assign(args, {width: this.parentWidth})
+				}
+				const newNode = await this.calcImage(args);
+				await this.getWebViewInited()
+				this.webview.evalJS(`source(${JSON.stringify(newNode)})`)
+				await this.getWebViewDone()
+				await sleep(this.afterDelay)
+				if (this.isCanvasToTempFilePath) {
+					const params = {
+						fileType: this.fileType,
+						quality: this.quality
+					}
+					this.webview.evalJS(`save(${JSON.stringify(params)})`)
+				}
+				return Promise.resolve()
+			} catch (e) {
+				this.$emit('fail', e)
+			}
+		},
+		// getfile(e){
+		// 	let url = plus.io.convertLocalFileSystemURL( e )
+		// 	return new Promise((resolve,reject)=>{
+		// 		plus.io.resolveLocalFileSystemURL(url, entry => {
+		// 			var reader = null;
+		// 			entry.file( file => {
+		// 				reader = new plus.io.FileReader();
+		// 				reader.onloadend =  ( read )=> {
+		// 					resolve(read.target.result)
+		// 				};
+		// 				reader.readAsDataURL( file );
+		// 			}, function ( error ) {
+		// 				alert( error.message );
+		// 			} );
+		// 		},err=>{
+		// 			resolve(e)
+		// 		})
+		// 	})
+		// },
+		async calcImage(args) {
+			let node = JSON.parse(JSON.stringify(args))
+			const urlReg = /url\((.+)\)/
+			const {backgroundImage} = node.css||{}
+			const isBG = backgroundImage && urlReg.exec(backgroundImage)[1]
+			const url = node.url || node.src || isBG
+			if(['text', 'qrcode'].includes(node.type)) {
+				return node
+			}
+			// && (this.osName == 'ios' || !networkReg.test(url))
+			if ((node.type === "image" || isBG) && url && !isBase64(url) && (this.osName == 'ios' || !networkReg.test(url))) {
+				let {path} = await getImageInfo(url, true)
+				// if(this.osName == 'ios') {
+				// 	path = await this.getfile(path)
+				// }
+				if (isBG) {
+					node.css.backgroundImage = `url(${path})`
+				} else {
+					node.src = path
+				}
+			} else if (node.views && node.views.length) {
+				for (let i = 0; i < node.views.length; i++) {
+					node.views[i] = await this.calcImage(node.views[i])
+				}
+			}
+			return node
+		},
+		async canvasToTempFilePath(args = {}) {
+			if (!this.inited) {
+				return this.$emit('fail', 'no init')
+			}
+			this.tempFilePath = []
+			if (args.fileType == 'jpg') {
+				args.fileType = 'jpeg'
+			}
+			this.webview.evalJS(`save(${JSON.stringify(args)})`)
+			try {
+				let tempFilePath = await this.getTempFilePath()
+				tempFilePath = await this.setFilePath(tempFilePath, args)
+				args.success({
+					errMsg: "canvasToTempFilePath:ok",
+					tempFilePath
+				})
+			} catch (e) {
+				args.fail({
+					error: e
+				})
+			}
+		}
+	}
+}
+// #endif

uniapp/src/uni_modules/lime-painter/components/l-painter/props.js

@@ -0,0 +1,51 @@
+export default {
+	props: {
+		board: Object,
+		pathType: String, // 'base64'、'url'
+		fileType: {
+			type: String,
+			default: 'png'
+		},
+		hidden: Boolean,
+		quality: {
+			type: Number,
+			default: 1
+		},
+		css: [String, Object],
+		// styles: [String, Object],
+		width: [Number, String],
+		height: [Number, String],
+		pixelRatio: Number,
+		customStyle: String,
+		isCanvasToTempFilePath: Boolean,
+		// useCanvasToTempFilePath: Boolean,
+		sleep: {
+			type: Number,
+			default: 1000 / 30
+		},
+		beforeDelay: {
+			type: Number,
+			default: 100
+		},
+		afterDelay: {
+			type: Number,
+			default: 100
+		},
+		// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
+		type: {
+			type: String,
+			default: '2d'
+		},
+		// #endif
+		// #ifdef APP-NVUE
+		hybrid: Boolean,
+		timeout: {
+			type: Number,
+			default: 2000
+		},
+		// #endif
+		// #ifdef H5 || APP-PLUS
+		useCORS: Boolean
+		// #endif
+	}
+}

uniapp/src/uni_modules/lime-painter/components/l-painter/utils.js

@@ -0,0 +1,495 @@
+export const networkReg = /^(http|\/\/)/;
+export const isBase64 = (path) => /^data:image\/(\w+);base64/.test(path);
+export function sleep(delay) {
+	return new Promise(resolve => setTimeout(resolve, delay))
+}
+const isDev = ['devtools'].includes(uni.getSystemInfoSync().platform)
+// 缓存图片
+let cache = {}
+export function isNumber(value) {
+	return /^-?\d+(\.\d+)?$/.test(value);
+}
+export function toPx(value, baseSize, isDecimal = false) {
+	// 如果是数字
+	if (typeof value === 'number') {
+		return value
+	}
+	// 如果是字符串数字
+	if (isNumber(value)) {
+		return value * 1
+	}
+	// 如果有单位
+	if (typeof value === 'string') {
+		const reg = /^-?([0-9]+)?([.]{1}[0-9]+){0,1}(em|rpx|px|%)$/g
+		const results = reg.exec(value);
+		if (!value || !results) {
+			return 0;
+		}
+		const unit = results[3];
+		value = parseFloat(value);
+		let res = 0;
+		if (unit === 'rpx') {
+			res = uni.upx2px(value);
+		} else if (unit === 'px') {
+			res = value * 1;
+		} else if (unit === '%') {
+			res = value * toPx(baseSize) / 100;
+		} else if (unit === 'em') {
+			res = value * toPx(baseSize || 14);
+		}
+		return isDecimal ? res.toFixed(2) * 1 : Math.round(res);
+	}
+	return 0
+}
+
+// 计算版本
+export function compareVersion(v1, v2) {
+	v1 = v1.split('.')
+	v2 = v2.split('.')
+	const len = Math.max(v1.length, v2.length)
+	while (v1.length < len) {
+		v1.push('0')
+	}
+	while (v2.length < len) {
+		v2.push('0')
+	}
+	for (let i = 0; i < len; i++) {
+		const num1 = parseInt(v1[i], 10)
+		const num2 = parseInt(v2[i], 10)
+
+		if (num1 > num2) {
+			return 1
+		} else if (num1 < num2) {
+			return -1
+		}
+	}
+	return 0
+}
+// #ifdef MP
+export const prefix = () => {
+	// #ifdef MP-TOUTIAO
+	return tt
+	// #endif
+	// #ifdef MP-WEIXIN
+	return wx
+	// #endif
+	// #ifdef MP-BAIDU
+	return swan
+	// #endif
+	// #ifdef MP-ALIPAY
+	return my
+	// #endif
+	// #ifdef MP-QQ
+	return qq
+	// #endif
+	// #ifdef MP-360
+	return qh
+	// #endif
+}
+// #endif
+
+
+const base64ToArrayBuffer = (data) => {
+	// #ifndef MP-WEIXIN || APP-PLUS
+	/**
+	 * Base64Binary.decode(base64_string);
+	 * Base64Binary.decodeArrayBuffer(base64_string);
+	 */
+	const Base64Binary = {
+		_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
+		/* will return a  Uint8Array type */
+		decodeArrayBuffer(input) {
+			const bytes = (input.length / 4) * 3;
+			const ab = new ArrayBuffer(bytes);
+			this.decode(input, ab);
+			return ab;
+		},
+		removePaddingChars(input) {
+			const lkey = this._keyStr.indexOf(input.charAt(input.length - 1));
+			if (lkey == 64) {
+				return input.substring(0, input.length - 1);
+			}
+			return input;
+		},
+		decode(input, arrayBuffer) {
+			//get last chars to see if are valid
+			input = this.removePaddingChars(input);
+			input = this.removePaddingChars(input);
+
+			const bytes = parseInt((input.length / 4) * 3, 10);
+
+			let uarray;
+			let chr1, chr2, chr3;
+			let enc1, enc2, enc3, enc4;
+			let i = 0;
+			let j = 0;
+
+			if (arrayBuffer)
+				uarray = new Uint8Array(arrayBuffer);
+			else
+				uarray = new Uint8Array(bytes);
+
+			input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
+
+			for (i = 0; i < bytes; i += 3) {
+				//get the 3 octects in 4 ascii chars
+				enc1 = this._keyStr.indexOf(input.charAt(j++));
+				enc2 = this._keyStr.indexOf(input.charAt(j++));
+				enc3 = this._keyStr.indexOf(input.charAt(j++));
+				enc4 = this._keyStr.indexOf(input.charAt(j++));
+
+				chr1 = (enc1 << 2) | (enc2 >> 4);
+				chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+				chr3 = ((enc3 & 3) << 6) | enc4;
+
+				uarray[i] = chr1;
+				if (enc3 != 64) uarray[i + 1] = chr2;
+				if (enc4 != 64) uarray[i + 2] = chr3;
+			}
+			return uarray;
+		}
+	}
+	return Base64Binary.decodeArrayBuffer(data)
+	// #endif
+	// #ifdef MP-WEIXIN || APP-PLUS
+	return uni.base64ToArrayBuffer(data)
+	// #endif
+}
+
+
+/**
+ * base64转路径
+ * @param {Object} base64
+ */
+export function base64ToPath(base64) {
+	const [, format] = /^data:image\/(\w+);base64,/.exec(base64) || [];
+
+	return new Promise((resolve, reject) => {
+		// #ifdef MP
+		const fs = uni.getFileSystemManager()
+		//自定义文件名
+		if (!format) {
+			reject(new Error('ERROR_BASE64SRC_PARSE'))
+		}
+		const time = new Date().getTime();
+		let pre = prefix()
+		const filePath = `${pre.env.USER_DATA_PATH}/${time}.${format}`
+		//let buffer = base64ToArrayBuffer(bodyData)
+		fs.writeFile({
+			filePath,
+			data: base64.split(',')[1], //base64.replace(/^data:\S+\/\S+;base64,/, ''),
+			encoding: 'base64',
+			// data: buffer,
+			// encoding: 'binary',
+			success() {
+				resolve(filePath)
+			},
+			fail(err) {
+				reject(err)
+			}
+		})
+		// #endif
+
+		// #ifdef H5
+		// mime类型
+		let mimeString = base64.split(',')[0].split(':')[1].split(';')[0];
+		//base64 解码
+		let byteString = atob(base64.split(',')[1]);
+		//创建缓冲数组
+		let arrayBuffer = new ArrayBuffer(byteString.length);
+		//创建视图
+		let intArray = new Uint8Array(arrayBuffer);
+		for (let i = 0; i < byteString.length; i++) {
+			intArray[i] = byteString.charCodeAt(i);
+		}
+		resolve(URL.createObjectURL(new Blob([intArray], {
+			type: mimeString
+		})))
+		// #endif
+
+		// #ifdef APP-PLUS
+		const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
+		bitmap.loadBase64Data(base64, () => {
+			if (!format) {
+				reject(new Error('ERROR_BASE64SRC_PARSE'))
+			}
+			const time = new Date().getTime();
+			const filePath = `_doc/uniapp_temp/${time}.${format}`
+			bitmap.save(filePath, {},
+				() => {
+					bitmap.clear()
+					resolve(filePath)
+				},
+				(error) => {
+					bitmap.clear()
+					reject(error)
+				})
+		}, (error) => {
+			bitmap.clear()
+			reject(error)
+		})
+		// #endif
+	})
+}
+
+/**
+ * 路径转base64
+ * @param {Object} string
+ */
+export function pathToBase64(path) {
+	if (/^data:/.test(path)) return path
+	return new Promise((resolve, reject) => {
+		// #ifdef H5
+		let image = new Image();
+		image.setAttribute("crossOrigin", 'Anonymous');
+		image.onload = function() {
+			let canvas = document.createElement('canvas');
+			canvas.width = this.naturalWidth;
+			canvas.height = this.naturalHeight;
+			canvas.getContext('2d').drawImage(image, 0, 0);
+			let result = canvas.toDataURL('image/png')
+			resolve(result);
+			canvas.height = canvas.width = 0
+		}
+		image.src = path + '?v=' + Math.random()
+		image.onerror = (error) => {
+			reject(error);
+		};
+		// #endif
+
+		// #ifdef MP
+		if (uni.canIUse('getFileSystemManager')) {
+			uni.getFileSystemManager().readFile({
+				filePath: path,
+				encoding: 'base64',
+				success: (res) => {
+					resolve('data:image/png;base64,' + res.data)
+				},
+				fail: (error) => {
+					reject(error)
+				}
+			})
+		}
+		// #endif
+
+		// #ifdef APP-PLUS
+		plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), (entry) => {
+			entry.file((file) => {
+				const fileReader = new plus.io.FileReader()
+				fileReader.onload = (data) => {
+					resolve(data.target.result)
+				}
+				fileReader.onerror = (error) => {
+					reject(error)
+				}
+				fileReader.readAsDataURL(file)
+			}, reject)
+		}, reject)
+		// #endif
+	})
+}
+
+
+
+export function getImageInfo(path, useCORS) {
+	const isCanvas2D = this && this.canvas && this.canvas.createImage
+	return new Promise(async (resolve, reject) => {
+		let src = path
+		if (cache[path] && cache[path].errMsg) {
+			resolve(cache[path])
+		} else {
+			try {
+				// #ifdef MP || APP-PLUS
+				if (isBase64(path)) {
+					src = await base64ToPath(path)
+				}
+				// #endif
+				// #ifdef H5
+				if(useCORS) {
+					src = await pathToBase64(path)
+				}
+				// #endif
+			} catch (error) {
+				reject({
+					...error,
+					src
+				})
+			}
+			
+			uni.getImageInfo({
+				src,
+				success: (image) => {
+					const localReg = /^\.|^\/(?=[^\/])/;
+					// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
+					image.path = localReg.test(src) ?  `/${image.path}` : image.path;
+					// #endif
+					// #ifdef H5
+					image.path = image.path.replace(/^\./, window.location.origin)
+					// #endif
+					// #ifndef APP-NVUE
+					if(isCanvas2D) {
+						const img = this.canvas.createImage()
+						img.onload = function() {
+							// const image = {
+							// 	path: img,
+							// 	width:  image.width,
+							// 	height:  image.height
+							// }
+							image.path = img
+							cache[path] = image
+							resolve(cache[path])
+						}
+						img.onerror = function(err) {
+							reject({err,path})
+						}
+						img.src = src
+						return
+					}
+					// #endif
+					// #ifdef APP-PLUS
+					// ios 比较严格 可能需要设置跨域
+					if(uni.getSystemInfoSync().osName == 'ios' && useCORS) {
+						pathToBase64(image.path).then(base64 => {
+							image.path = base64
+							cache[path] = image
+							resolve(cache[path])
+						}).catch(err => {
+							console.error({err, path})
+							reject({err,path})
+						})
+						return
+					}
+					// #endif
+					cache[path] = image
+					resolve(cache[path])
+				},
+				fail(err) {
+					console.error({err, path})
+					reject({err,path})
+				}
+			})
+		}
+	})
+}
+
+export function downloadFile(url) {
+	if (!url) return Promise.reject({
+		err: 'no url'
+	})
+	return new Promise((resolve, reject) => {
+		if (cache[url]) {
+			return reject()
+		}
+		cache[url] = 1
+		uni.downloadFile({
+			url,
+			success(res) {
+				resolve(res)
+			},
+			fail(err) {
+				reject(err)
+			}
+		})
+	})
+}
+
+// #ifdef APP-PLUS
+const getLocalFilePath = (path) => {
+	if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path
+		.indexOf('_downloads') === 0) {
+		return path
+	}
+	if (path.indexOf('file://') === 0) {
+		return path
+	}
+	if (path.indexOf('/storage/emulated/0/') === 0) {
+		return path
+	}
+	if (path.indexOf('/') === 0) {
+		const localFilePath = plus.io.convertAbsoluteFileSystem(path)
+		if (localFilePath !== path) {
+			return localFilePath
+		} else {
+			path = path.substr(1)
+		}
+	}
+	return '_www/' + path
+}
+const getFile = (url) => {
+	return new Promise((resolve, rejcet) => {
+		plus.io.resolveLocalFileSystemURL(url, resolve, (err) => {
+			resolve(false)
+		})
+	})
+}
+const createFile = ({
+	fs,
+	url,
+	target,
+	name
+}) => {
+	return new Promise((resolve, reject) => {
+		plus.io.resolveLocalFileSystemURL(url, res1 => {
+			fs.root.getDirectory(target, {
+				create: true
+			}, fileEntry => {
+				const success = () => {
+					res1.remove()
+					resolve()
+				}
+				getFile(target + name).then(res => {
+					if (res) {
+						res.remove((res2) => {
+							res1.moveTo(fileEntry, name, success, reject)
+						})
+					}
+					res1.moveTo(fileEntry, name, success, reject)
+				})
+			})
+		}, reject)
+	})
+}
+export function useNvue(target, version, timeout) {
+	return new Promise((resolve, reject) => {
+		plus.io.requestFileSystem(plus.io.PRIVATE_DOC, async (fs) => {
+			try {
+				cache['lime-painter'] = 0
+				let names = ['uni.webview.1.5.3.js', 'painter.js', 'index.html']
+				let urls = ['https://gitee.com/dcloud/uni-app/raw/dev/dist/',
+					'https://static-6d65bd90-8508-4d6c-abbc-a4ef5c8e49e7.bspapp.com/lime-painter/'
+				]
+				const oldVersion = plus.storage.getItem('lime-painter')
+				const isFile = await getFile(`${target}${names[1]}`)
+				if (isFile && oldVersion && compareVersion(oldVersion, version) >= 0) {
+					resolve()
+				} else {
+					for (var i = 0; i < names.length; i++) {
+						const name = names[i]
+						const file = await downloadFile(urls[i >= 1 ? 1 : 0] + name)
+						await createFile({
+							fs,
+							url: file.tempFilePath,
+							target,
+							name: name.includes('uni.webview') ? 'uni.webview.js' : name
+						})
+					}
+					plus.storage.setItem('lime-painter', version)
+					cache['lime-painter'] = version
+					resolve()
+				}
+			} catch (e) {
+				let index = parseInt(timeout / 20)
+				while (!cache['lime-painter'] && index) {
+					await sleep(20)
+					index--
+				}
+				if (cache['lime-painter']) {
+					resolve()
+				} else {
+					reject(e)
+				}
+			}
+		}, reject)
+	})
+}
+// #endif

uniapp/src/uni_modules/lime-painter/components/lime-painter/index.vue

@@ -0,0 +1,2 @@
+<template>
+</template>

uniapp/src/uni_modules/lime-painter/package.json

@@ -0,0 +1,92 @@
+{
+  "id": "lime-painter",
+  "displayName": "海报画板",
+  "version": "1.9.4.4",
+  "description": "一款canvas海报组件，更优雅的海报生成方案",
+  "keywords": [
+    "海报",
+    "canvas",
+    "生成海报",
+    "生成二维码",
+    "JSON"
+],
+  "repository": "https://gitee.com/liangei/lime-painter", 
+  "engines": {
+    "HBuilderX": "^3.4.14"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": "305716444"
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+        "QQ": "y",
+        "钉钉": "u",
+        "快手": "u",
+        "飞书": "u",
+        "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  },
+  "name": "lime-painter",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

uniapp/src/uni_modules/lime-painter/readme.md

@@ -0,0 +1,927 @@
+# Painter 画板 测试版
+
+> uniapp 海报画板，更优雅的海报生成方案  
+> [查看更多 站点 1](https://limeui.qcoon.cn/#/painter)  
+> [查看更多 站点 2](http://liangei.gitee.io/limeui/#/painter)  
+> Q 群：1169785031
+
+## 平台兼容
+
+| H5  | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
+| --- | ---------- | ------------ | ---------- | ---------- | --------- | --- |
+| √   | √          | √            | 未测       | √          | √         | √   |
+
+## 安装
+在市场导入**[海报画板](https://ext.dcloud.net.cn/plugin?id=2389)uni_modules**版本的即可，无需`import`
+
+## 代码演示
+
+### 插件demo
+- lime-painter 为 demo
+- 位于 uni_modules/lime-painter/components/lime-painter
+- 导入插件后直接使用可查看demo
+```vue
+<lime-painter />
+```
+
+
+### 基本用法
+
+- 插件提供 JSON 及 Template 的方式绘制海报
+- 参考 css 块状流布局模拟 css schema。
+- 另外flex布局还不是成完善，请谨慎使用，普通的流布局我觉得已经够用了。
+
+#### 方式一 Template
+
+- 提供`l-painter-view`、`l-painter-text`、`l-painter-image`、`l-painter-qrcode`四种类型组件
+- 通过 `css` 属性绘制样式，与 style 使用方式保持一致。
+```html
+<l-painter>
+	//如果使用Template出现顺序错乱，可使用`template` 等所有变量完成再显示
+	<template v-if="show">
+		<l-painter-view
+			css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block"
+		></l-painter-view>
+		<l-painter-view
+			css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;"
+		></l-painter-view>
+		<l-painter-view
+			css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block"
+		></l-painter-view>
+	<template>
+</l-painter>
+```
+
+#### 方式二 JSON
+
+- 在 json 里四种类型组件的`type`为`view`、`text`、`image`、`qrcode`
+- 通过 `board` 设置海报所需的 JSON 数据进行绘制或`ref`获取组件实例调用组件内的`render(json)`
+- 所有类型的 schema 都具有`css`字段，css 的 key 值使用**驼峰**如：`lineHeight`
+
+```html
+<l-painter :board="poster"/>
+```
+
+```js
+data() {
+	return {
+		poster: {
+			css: {
+				// 根节点若无尺寸，自动获取父级节点
+				width: '750rpx'
+			},
+			views: [
+				{
+					css: {
+						background: "#07c160",
+						height: "120rpx",
+						width: "120rpx",
+						display: "inline-block"
+					},
+					type: "view"
+				},
+				{
+					css: {
+						background: "#1989fa",
+						height: "120rpx",
+						width: "120rpx",
+						borderTopRightRadius: "60rpx",
+						borderBottomLeftRadius: "60rpx",
+						display: "inline-block",
+						margin: "0 30rpx"
+					},
+					views: [],
+					type: "view"
+				},
+				{
+					css: {
+						background: "#ff9d00",
+						height: "120rpx",
+						width: "120rpx",
+						borderRadius: "50%",
+						display: "inline-block"
+					},
+					views: [],
+					type: "view"
+				},
+			]
+		}
+	}
+}
+```
+
+### View 容器
+
+- 类似于 `div` 可以嵌套承载更多的 view、text、image，qrcode 共同构建一颗完整的节点树
+- 在 JSON 里具有 `views` 的数组字段，用于嵌套承载节点。
+
+#### 方式一 Template
+
+```html
+<l-painter>
+  <l-painter-view css="background: #f0f0f0; padding-top: 100rpx;">
+    <l-painter-view
+      css="background: #d9d9d9; width: 33.33%; height: 100rpx; display: inline-block"
+    ></l-painter-view>
+    <l-painter-view
+      css="background: #bfbfbf; width: 66.66%; height: 100rpx; display: inline-block"
+    ></l-painter-view>
+  </l-painter-view>
+</l-painter>
+```
+
+#### 方式二 JSON
+
+```js
+{
+	css: {},
+	views: [
+		{
+			type: 'view',
+			css: {
+				background: '#f0f0f0',
+				paddingTop: '100rpx'
+			},
+			views: [
+				{
+					type: 'view',
+					css: {
+						background: '#d9d9d9',
+						width: '33.33%',
+						height: '100rpx',
+						display: 'inline-block'
+					}
+				},
+				{
+					type: 'view',
+					css: {
+						background: '#bfbfbf',
+						width: '66.66%',
+						height: '100rpx',
+						display: 'inline-block'
+					}
+				}
+			],
+
+		}
+	]
+}
+```
+
+### Text 文本
+
+- 通过 `text` 属性填写文本内容。
+- 支持`\n`换行符
+- 支持省略号，使用 css 的`line-clamp`设置行数，当文字内容超过会显示省略号。
+- 支持`text-decoration`
+
+#### 方式一 Template
+
+```html
+<l-painter>
+  <l-painter-view css="background: #e0e2db; padding: 30rpx; color: #222a29">
+    <l-painter-text
+      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
+    />
+    <l-painter-text
+      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
+      css="text-align:center; padding-top: 20rpx; text-decoration: line-through "
+    />
+    <l-painter-text
+      text="登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼"
+      css="text-align:right; padding-top: 20rpx"
+    />
+    <l-painter-text
+      text="水调歌头\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。"
+      css="line-clamp: 3; padding-top: 20rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%); background-clip: text"
+    />
+  </l-painter-view>
+</l-painter>
+```
+
+#### 方式二 JSON
+
+```js
+// 基础用法
+{
+	type: 'text',
+	text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
+},
+{
+	type: 'text',
+	text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
+	css: {
+		// 设置居中对齐
+		textAlign: 'center',
+		// 设置中划线
+		textDecoration: 'line-through'
+	}
+},
+{
+	type: 'text',
+	text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
+	css: {
+		// 设置右对齐
+		textAlign: 'right',
+	}
+},
+{
+	type: 'text',
+	text: '登鹳雀楼\n白日依山尽，黄河入海流\n欲穷千里目，更上一层楼',
+	css: {
+		// 设置行数，超出显示省略号
+		lineClamp: 3,
+		// 渐变文字
+		background: 'linear-gradient(,#ff971b 0%, #1989fa 100%)',
+		backgroundClip: 'text'
+	}
+}
+```
+
+### Image 图片
+
+- 通过 `src` 属性填写图片路径。
+- 图片路径支持：网络图片，本地 static 里的图片路径，缓存路径，**字节的static目录是写相对路径**
+- 通过 `css` 的 `object-fit`属性可以设置图片的填充方式，可选值见下方 CSS 表格。
+- 通过 `css` 的 `object-position`配合 `object-fit` 可以设置图片的对齐方式，类似于`background-position`，详情见下方 CSS 表格。
+- 使用网络图片时：小程序需要去公众平台配置 [downloadFile](https://mp.weixin.qq.com/) 域名
+- 使用网络图片时：**H5 和 Nvue 需要决跨域问题**
+
+#### 方式一 Template
+
+```html
+<l-painter>
+  <!-- 基础用法 -->
+  <l-painter-image
+    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+    css="width: 200rpx; height: 200rpx"
+  />
+  <!-- 填充方式 -->
+  <!-- css object-fit 设置 填充方式 见下方表格-->
+  <l-painter-image
+    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+    css="width: 200rpx; height: 200rpx; object-fit: contain; background: #eee"
+  />
+  <!-- css object-position 设置 图片的对齐方式-->
+  <l-painter-image
+    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+    css="width: 200rpx; height: 200rpx; object-fit: contain; object-position: 50% 50%; background: #eee"
+  />
+</l-painter>
+```
+
+#### 方式二 JSON
+
+```js
+// 基础用法
+{
+	type: 'image',
+	src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
+	css: {
+		width: '200rpx',
+		height: '200rpx'
+	}
+},
+// 填充方式
+// css objectFit 设置 填充方式 见下方表格
+{
+	type: 'image',
+	src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
+	css: {
+		width: '200rpx',
+		height: '200rpx',
+		objectFit: 'contain'
+	}
+},
+// css objectPosition 设置 图片的对齐方式
+{
+	type: 'image',
+	src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
+	css: {
+		width: '200rpx',
+		height: '200rpx',
+		objectFit: 'contain',
+		objectPosition: '50% 50%'
+	}
+}
+```
+
+### Qrcode 二维码
+
+- 通过`text`属性填写需要生成二维码的文本。
+- 通过 `css` 里的 `color` 可设置生成码点的颜色。
+- 通过 `css` 里的 `background`可设置背景色。
+- 通过 `css `里的 `width`、`height`设置尺寸。
+
+#### 方式一 Template
+
+```html
+<l-painter>
+  <l-painter-qrcode
+    text="limeui.qcoon.cn"
+    css="width: 200rpx; height: 200rpx"
+  />
+</l-painter>
+```
+
+#### 方式二 JSON
+
+```js
+{
+	type: 'qrcode',
+	text: 'limeui.qcoon.cn',
+	css: {
+		width: '200rpx',
+		height: '200rpx',
+	}
+}
+```
+
+### 生成图片
+
+- 方式1、通过设置`isCanvasToTempFilePath`自动生成图片并在 `@success` 事件里接收海报临时路径
+- 方式2、通过调用内部方法生成图片：
+
+```html
+<l-painter ref="painter">...code</l-painter>
+```
+
+```js
+this.$refs.painter.canvasToTempFilePathSync({
+  fileType: "jpg",
+  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
+  pathType: 'url',
+  quality: 1,
+  success: (res) => {
+    console.log(res.tempFilePath);
+	// 非H5 保存到相册
+	// H5 提示用户长按图另存
+	uni.saveImageToPhotosAlbum({
+		filePath: res.tempFilePath,
+		success: function () {
+			console.log('save success');
+		}
+	});
+  },
+});
+```
+
+### 主动调用方式
+
+- 通过获取组件实例内部的`render`函数 传递`JSON`即可
+
+```html
+<l-painter ref="painter" />
+```
+
+```js
+// 渲染
+this.$refs.painter.render(jsonSchema);
+// 生成图片
+this.$refs.painter.canvasToTempFilePathSync({
+  fileType: "jpg",
+  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
+  pathType: 'url',
+  quality: 1,
+  success: (res) => {
+    console.log(res.tempFilePath);
+	// 非H5 保存到相册
+	uni.saveImageToPhotosAlbum({
+		filePath: res.tempFilePath,
+		success: function () {
+			console.log('save success');
+		}
+	});
+  },
+});
+```
+
+
+### H5跨域
+- 一般是需要后端或管理OSS资源的大佬处理
+- 一般OSS的处理方式:
+
+1、设置来源
+```cmd
+*
+```
+
+2、允许Methods
+```html
+GET
+```
+
+3、允许Headers
+```html
+access-control-allow-origin:*
+```
+
+4、最后如果还是不行,可试下给插件设置`useCORS`
+```html
+<l-painter useCORS>
+```
+
+
+
+### 海报示例
+
+- 提供一份示例，只把插件当成生成图片的工具，非必要不要在弹窗里使用。
+- 通过设置`isCanvasToTempFilePath`主动生成图片，再由 `@success` 事件接收海报临时路径
+- 设置`hidden`隐藏画板。
+请注意，示例用到了图片，海报的渲染是包括下载图片的时间，也许在某天图片会失效或访问超级慢，请更换为你的图片再查看，另外如果你是小程序请在使用示例时把**不校验合法域名**勾上！！！！！不然不显示还以为是插件的锅，求求了大佬们！
+#### 方式一 Template
+
+```html
+<image :src="path" mode="widthFix"></image>
+<l-painter
+  isCanvasToTempFilePath
+  @success="path = $event"
+  hidden
+  css="width: 750rpx; padding-bottom: 40rpx; background: linear-gradient(,#ff971b 0%, #ff5000 100%)"
+>
+  <l-painter-image
+    src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+    css="margin-left: 40rpx; margin-top: 40rpx; width: 84rpx;  height: 84rpx; border-radius: 50%;"
+  />
+  <l-painter-view
+    css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block"
+  >
+    <l-painter-text
+      text="隔壁老王"
+      css="display: block; padding-bottom: 10rpx; color: #fff; font-size: 32rpx; fontWeight: bold"
+    />
+    <l-painter-text
+      text="为您挑选了一个好物"
+      css="color: rgba(255,255,255,.7); font-size: 24rpx"
+    />
+  </l-painter-view>
+  <l-painter-view
+    css="margin-left: 40rpx; margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)"
+  >
+    <l-painter-image
+      src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
+      css="object-fit: cover; object-position: 50% 50%; width: 606rpx; height: 606rpx; border-radius: 12rpx;"
+    />
+    <l-painter-view
+      css="margin-top: 32rpx; color: #FF0000; font-weight: bold; font-size: 28rpx; line-height: 1em;"
+    >
+      <l-painter-text text="￥" css="vertical-align: bottom" />
+      <l-painter-text
+        text="39"
+        css="vertical-align: bottom; font-size: 58rpx"
+      />
+      <l-painter-text text=".39" css="vertical-align: bottom" />
+      <l-painter-text
+        text="￥59.99"
+        css="vertical-align: bottom; padding-left: 10rpx; font-weight: normal; text-decoration: line-through; color: #999999"
+      />
+    </l-painter-view>
+    <l-painter-view css="margin-top: 32rpx; font-size: 26rpx; color: #8c5400">
+      <l-painter-text text="自营" css="color: #212121; background: #ffb400;" />
+      <l-painter-text
+        text="30天最低价"
+        css="margin-left: 16rpx; background: #fff4d9; text-decoration: line-through;"
+      />
+      <l-painter-text
+        text="满减优惠"
+        css="margin-left: 16rpx; background: #fff4d9"
+      />
+      <l-painter-text
+        text="超高好评"
+        css="margin-left: 16rpx; background: #fff4d9"
+      />
+    </l-painter-view>
+    <l-painter-view css="margin-top: 30rpx">
+      <l-painter-text
+        css="line-clamp: 2; color: #333333; line-height: 1.8em; font-size: 36rpx; width: 478rpx; padding-right:32rpx; box-sizing: border-box"
+        text="360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝"
+      ></l-painter-text>
+      <l-painter-qrcode
+        css="width: 128rpx; height: 128rpx;"
+        text="limeui.qcoon.cn"
+      ></l-painter-qrcode>
+    </l-painter-view>
+  </l-painter-view>
+</l-painter>
+```
+
+```js
+data() {
+	return {
+		path: ''
+	}
+}
+```
+
+#### 方式二 JSON
+
+```html
+<image :src="path" mode="widthFix"></image>
+<l-painter
+  :board="poster"
+  isCanvasToTempFilePath
+  @success="path = $event"
+  hidden
+/>
+```
+
+```js
+data() {
+	return {
+		path: '',
+		poster: {
+		    css: {
+		        width: "750rpx",
+		        paddingBottom: "40rpx",
+		        background: "linear-gradient(,#000 0%, #ff5000 100%)"
+		    },
+		    views: [
+		        {
+		            src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
+		            type: "image",
+		            css: {
+		                background: "#fff",
+		                objectFit: "cover",
+		                marginLeft: "40rpx",
+		                marginTop: "40rpx",
+		                width: "84rpx",
+		                border: "2rpx solid #fff",
+		                boxSizing: "border-box",
+		                height: "84rpx",
+		                borderRadius: "50%"
+		            }
+		        },
+		        {
+		            type: "view",
+		            css: {
+		                marginTop: "40rpx",
+		                paddingLeft: "20rpx",
+		                display: "inline-block"
+		            },
+		            views: [
+		                {
+		                    text: "隔壁老王",
+		                    type: "text",
+		                    css: {
+		                        display: "block",
+		                        paddingBottom: "10rpx",
+		                        color: "#fff",
+		                        fontSize: "32rpx",
+		                        fontWeight: "bold"
+		                    }
+		                },
+		                {
+		                    text: "为您挑选了一个好物",
+		                    type: "text",
+		                    css: {
+		                        color: "rgba(255,255,255,.7)",
+		                        fontSize: "24rpx"
+		                    },
+		                }
+		            ],
+		        },
+		        {
+		            css: {
+		                marginLeft: "40rpx",
+		                marginTop: "30rpx",
+		                padding: "32rpx",
+		                boxSizing: "border-box",
+		                background: "#fff",
+		                borderRadius: "16rpx",
+		                width: "670rpx",
+		                boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
+		            },
+		            views: [
+		                {
+							src: "https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg",
+							type: "image",
+		                    css: {
+		                        objectFit: "cover",
+		                        objectPosition: "50% 50%",
+		                        width: "606rpx",
+		                        height: "606rpx"
+		                    },
+		                }, {
+		                    css: {
+		                        marginTop: "32rpx",
+		                        color: "#FF0000",
+		                        fontWeight: "bold",
+		                        fontSize: "28rpx",
+		                        lineHeight: "1em"
+		                    },
+		                    views: [{
+								text: "￥",
+								type: "text",
+		                        css: {
+		                            verticalAlign: "bottom"
+		                        },
+		                    }, {
+								text: "39",
+								type: "text",
+		                        css: {
+		                            verticalAlign: "bottom",
+		                            fontSize: "58rpx"
+		                        },
+		                    }, {
+								text: ".39",
+								type: "text",
+		                        css: {
+		                            verticalAlign: "bottom"
+		                        },
+		                    }, {
+								text: "￥59.99",
+								type: "text",
+		                        css: {
+		                            verticalAlign: "bottom",
+		                            paddingLeft: "10rpx",
+		                            fontWeight: "normal",
+		                            textDecoration: "line-through",
+		                            color: "#999999"
+		                        }
+		                    }],
+
+		                    type: "view"
+		                }, {
+		                    css: {
+		                        marginTop: "32rpx",
+		                        fontSize: "26rpx",
+		                        color: "#8c5400"
+		                    },
+		                    views: [{
+								text: "自营",
+								type: "text",
+		                        css: {
+		                            color: "#212121",
+		                            background: "#ffb400"
+		                        },
+		                    }, {
+								text: "30天最低价",
+								type: "text",
+		                        css: {
+		                            marginLeft: "16rpx",
+		                            background: "#fff4d9",
+		                            textDecoration: "line-through"
+		                        },
+		                    }, {
+								text: "满减优惠",
+								type: "text",
+		                        css: {
+		                            marginLeft: "16rpx",
+		                            background: "#fff4d9"
+		                        },
+		                    }, {
+								text: "超高好评",
+								type: "text",
+		                        css: {
+		                            marginLeft: "16rpx",
+		                            background: "#fff4d9"
+		                        },
+
+		                    }],
+
+		                    type: "view"
+		                }, {
+		                    css: {
+		                        marginTop: "30rpx"
+		                    },
+		                    views: [
+								{
+									text: "360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝",
+									type: "text",
+									css: {
+										paddingRight: "32rpx",
+										boxSizing: "border-box",
+										lineClamp: 2,
+										color: "#333333",
+										lineHeight: "1.8em",
+										fontSize: "36rpx",
+										width: "478rpx"
+		                        },
+		                    }, {
+								text: "limeui.qcoon.cn",
+								type: "qrcode",
+		                        css: {
+		                            width: "128rpx",
+		                            height: "128rpx",
+		                        },
+
+		                    }],
+		                    type: "view"
+		                }],
+		            type: "view"
+		        }
+		    ]
+		}
+	}
+}
+```
+
+### Nvue
+- 必须为HBX 3.4.11及以上
+
+
+### 原生小程序
+
+- 插件里的`painter.js`支持在原生小程序中使用
+- new Painter 之后在`source`里传入 JSON
+- 再调用`render`绘制海报
+- 如需生成图片，请查看微信小程序 cavnas 的[canvasToTempFilePath](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html)
+
+```html
+<canvas type="2d" id="painter" style="width: 100%"></canvas>
+```
+
+```js
+import { Painter } from "./painter";
+page({
+  data: {
+    poster: {
+      css: {
+        width: "750rpx",
+      },
+      views: [
+        {
+          type: "view",
+          css: {
+            background: "#d2d4c8",
+            paddingTop: "100rpx",
+          },
+          views: [
+            {
+              type: "view",
+              css: {
+                background: "#5f7470",
+                width: "33.33%",
+                height: "100rpx",
+                display: "inline-block",
+              },
+            },
+            {
+              type: "view",
+              css: {
+                background: "#889696",
+                width: "33.33%",
+                height: "100rpx",
+                display: "inline-block",
+              },
+            },
+            {
+              type: "view",
+              css: {
+                background: "#b8bdb5",
+                width: "33.33%",
+                height: "100rpx",
+                display: "inline-block",
+              },
+            },
+          ],
+        },
+      ],
+    },
+  },
+  async onLoad() {
+    const res = await this.getCentext();
+    const painter = new Painter(res);
+    // 返回计算布局后的整个内容尺寸
+    const { width, height } = await painter.source(this.data.poster);
+    // 得到计算后的尺寸后 可给canvas尺寸赋值，达到动态响应效果
+    // 渲染
+    await painter.render();
+  },
+  // 获取canvas 2d
+  // 非2d 需要传一个 createImage 方法用于获取图片信息 即把 getImageInfo 的 success 通过 promise resolve 返回
+  getCentext() {
+    return new Promise((resolve) => {
+      wx.createSelectorQuery()
+        .select(`#painter`)
+        .node()
+        .exec((res) => {
+          let { node: canvas } = res[0];
+          resolve({
+            canvas,
+            context: canvas.getContext("2d"),
+            width: canvas.width,
+            height: canvas.height,
+			// createImage: getImageInfo()
+            pixelRatio: 2,
+          });
+        });
+    });
+  },
+});
+```
+
+### 旧版(1.6.x)更新
+
+- 由于 1.8.x 版放弃了以定位的方式，所以 1.6.x 版更新之后要每个样式都加上`position: absolute`
+- 旧版的 `image` mode 模式被放弃，使用`object-fit`
+- 旧版的 `isRenderImage` 改成 `is-canvas-to-temp-file-path`
+- 旧版的 `maxLines` 改成 `line-clamp`
+
+## API
+
+### Props
+
+| 参数                       | 说明                                                         | 类型             | 默认值       |
+| -------------------------- | ------------------------------------------------------------ | ---------------- | ------------ |
+| board                      | JSON 方式的海报元素对象集                                    | <em>object</em>  | -            |
+| css                        | 海报内容最外层的样式，可以理解为`body`                           | <em>object</em>  | 参数请向下看 |
+| custom-style               | canvas 元素的样式                                            | <em>string</em>  |              |
+| hidden               		 | 隐藏画板                                                    | <em>boolean</em>  |   `false`    |
+| is-canvas-to-temp-file-path | 是否生成图片，在`@success`事件接收图片地址                   | <em>boolean</em> | `false`      |
+| after-delay                | 生成图片错乱，可延时生成图片                                 | <em>number</em>  | `100`        |
+| type                       | canvas 类型，对微信头条支付宝小程序可有效,可选值：`2d`，`''` | <em>string</em>  | `2d`         |
+| file-type                  | 生成图片的后缀类型, 可选值：`png`、`jpg`                     | <em>string</em>  | `png`        |
+| path-type                  | 生成图片路径类型，可选值`url`、`base64`                      | <em>string</em>  | `-`          |
+| pixel-ratio                | 生成图片的像素密度，默认为对应手机的像素密度，`nvue`无效     | <em>number</em>  | `-`          |
+| width                      | **废弃** 画板的宽度，一般只用于通过内部方法时加上            | <em>number</em>  | ``           |
+| height                     | **废弃** 画板的高度 ，同上                                   | <em>number</em>  | ``           |
+
+### css
+| 属性名                                                                              | 支持的值或类型                                                                                                                                                                       | 默认值   |
+| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
+| (min\max)width                                                                      | 支持`%`、`rpx`、`px`                                                                                                                                                                 | -        |
+| height                                                                              | 同上                                                                                                                                                                                 | -        |
+| color                                                                               | `string`                                                                                                                                                                             | -        |
+| position                                                                            | 定位，可选值：`absolute`、`fixed`                                                                                                                                                    | -        |
+| ↳ left、top、right、bottom                                                          | 配合`position`才生效，支持`%`、`rpx`、`px`                                                                                                                                           | -        |
+| margin                                                                              | 可简写或各方向分别写，如：`margin-top`，支持`auto`、`rpx`、`px`                                                                                                                      | -        |
+| padding                                                                             | 可简写或各方向分别写，支持`rpx`、`px`                                                                                                                                                | -        |
+| border                                                                              | 可简写或各个值分开写：`border-width`、`border-style` 、`border-color`，简写请按顺序写                                                                                                | -        |
+| line-clamp                                                                          | `number`，超过行数显示省略号                                                                                                                                                         | -        |
+| vertical-align                                                                      | 文字垂直对齐，可选值：`bottom`、`top`、`middle`                                                                                                                                      | `middle` |
+| line-height                                                                         | 文字行高，支持`rpx`、`px`、`em`                                                                                                                                                      | `1.4em`  |
+| font-weight                                                                         | 文字粗细，可选值：`normal`、`bold`                                                                                                                                                   | `normal` |
+| font-size                                                                           | 文字大小，`string`，支持`rpx`、`px`                                                                                                                                                  | `14px`   |
+| text-decoration                                                                     | 文本修饰，可选值：`underline` 、`line-through`、`overline`                                                                                                                           | -        |
+| text-stroke                                                                         | 文字描边，可简写或各个值分开写，如：`text-stroke-color`, `text-stroke-width`                                                                                                              | -        |
+| text-align                                                                          | 文本水平对齐，可选值：`right` 、`center`                                                                                                                                             | `left`   |
+| display                                                                             | 框类型，可选值：`block`、`inline-block`、`flex`、`none`，当为`none`时是不渲染该段, `flex`功能简陋。                                                                                                            | -        |
+| flex                                                                                | 配合 display: flex; 属性定义了在分配多余空间,目前只用为数值如： flex: 1                                                                                                           | -        |
+| align-self                                                                          | 配合 display: flex; 单个项目垂直轴对齐方式: `flex-start` `flex-end` `center`                                                                                                         | `flex-start`        |
+| justify-content                                                                     | 配合 display: flex; 水平轴对齐方式: `flex-start` `flex-end` `center`                                                                                                         | `flex-start`        |
+| align-items                                                                         | 配合 display: flex; 垂直轴对齐方式: `flex-start` `flex-end` `center`                                                                                                  | `flex-start`        |
+| border-radius                                                                       | 圆角边框，支持`%`、`rpx`、`px`                                                                                                                                                       | -        |
+| box-sizing                                                                          | 可选值：`border-box`                                                                                                                                                                 | -        |
+| box-shadow                                                                          | 投影                                                                                                                                                                                 | -        |
+| background(color)                                                                   | 支持渐变，但必须写百分比！如:`linear-gradient(,#ff971b 0%, #ff5000 100%)`、`radial-gradient(#0ff 15%, #f0f 60%)`,目前 radial-gradient 渐变的圆心为元素中点，半径为最长边，不支持设置 | -        |
+| background-clip                                                                	  | 文字渐变，配合`background`背景渐变，设置`background-clip: text` 达到文字渐变效果 | -        |
+| background-image                                                                    | view 元素背景：`url(src)`,若只是设置背景图，请不要设置`background-repeat`                                                                                                                                                           | -        |
+| background-repeat                                                                   | 设置是否及如何重复背景纹理，可选值：`repeat`、`repeat-x`、`repeat-y`、`no-repeat`                                                                                                    | `repeat` |
+| [object-fit](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit/)          | 图片元素适应容器方式,类似于`mode`,可选值：`cover`、 `contain`、 `fill`、 `none`                                                                                                      | -        |
+| [object-position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position) | 图片的对齐方式，配合`object-fit`使用                                                                                                                                                 | -        |
+
+### 图片填充模式 object-fit
+
+| 名称    | 含义                                                   |
+| ------- | ------------------------------------------------------ |
+| contain | 保持宽高缩放图片，使图片的长边能完全显示出来           |
+| cover   | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
+| fill    | 拉伸图片，使图片填满元素                               |
+| none    | 保持图片原有尺寸                                       |
+
+### 事件 Events
+
+| 事件名   | 说明                                                             | 返回值 |
+| -------- | ---------------------------------------------------------------- | ------ |
+| success  | 生成图片成功,若使用`is-canvas-to-temp-filePath` 可以接收图片地址 | path   |
+| fail     | 生成图片失败                                                     | error  |
+| done     | 绘制成功                                                         |        |
+| progress | 绘制进度                                                         | number |
+
+### 暴露函数 Expose
+| 事件名   | 说明                                                             | 返回值 |
+| -------- | ---------------------------------------------------------------- | ------ |
+| render(object)   |  渲染器，传入JSON 绘制海报 | promise   |
+| [canvasToTempFilePath](https://uniapp.dcloud.io/api/canvas/canvasToTempFilePath.html#canvastotempfilepath)(object)   | 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件临时路径。    |   |
+| canvasToTempFilePathSync(object)    | 同步接口，同上                                                         |        |
+
+
+## 常见问题
+
+- 1、H5 端使用网络图片需要解决跨域问题。
+- 2、小程序使用网络图片需要去公众平台增加下载白名单！二级域名也需要配！
+- 3、H5 端生成图片是 base64，有时显示只有一半可以使用原生标签`<IMG/>`
+- 4、发生保存图片倾斜变形或提示 native buffer exceed size limit 时，使用 pixel-ratio="2"参数，降分辨率。
+- 5、h5 保存图片不需要调接口，提示用户长按图片保存。
+- 6、画板不能隐藏，包括`v-if`，`v-show`、`display:none`、`opacity:0`，另外也不要把画板放在弹窗里。如果需要隐藏画板请设置 `custom-style="position: fixed; left: 200%"`
+- 7、微信小程序真机调试请使用 **真机调试2.0**，不支持1.0。
+- 8、微信小程序打开调试时可以生但并闭无法生成时，这种情况一般是没有在公众号配置download域名
+- 9、HBX 3.4.5之前的版本不支持vue3
+- 10、在微信开发工具上 canvas 层级最高无法zindex，并不影响真机
+- 11、请不要导入非uni_modules插件
+- 12、关于QQ小程序 报 Propertyor method"toJSON"is not defined 请把基础库调到 1.50.3
+- 13、支付宝小程序 IDE 不支持 生成图片 请以真机调试结果为准
+- 14、返回值为字符串 `data:,` 大概是尺寸超过限制，设置 pixel-ratio="2"
+- 华为手机 APP 上无法生成图片，请使用 HBX2.9.11++（已过时，忽略这条）
+- IOS APP 请勿使用 HBX2.9.3.20201014 的版本！这个版本无法生成图片。（已过时，忽略这条）
+- 苹果微信 7.0.20 存在闪退和图片无法 onload 为微信 bug（已过时，忽略这条）
+- 微信小程序 IOS 旧接口 如父级设置圆角，子级也设会导致子级的失效，为旧接口BUG。
+- 微信小程序 安卓 旧接口 如使用图片必须加背景色，为旧接口BUG。
+
+## 打赏
+
+如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
+
+![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png)
+![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png)

uniapp/src/uni_modules/lime-painter/static/index.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title></title>
+	<style type="text/css">
+		html,
+		body,
+		canvas {
+			padding: 0;
+			margin: 0;
+			width: 100%;
+			height: 100%;
+			overflow-y: hidden;
+			background-color: transparent;
+		}
+	</style>
+</head>
+
+<body>
+	<canvas id="lime-painter"></canvas>
+	<script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
+	<script type="text/javascript" src="./painter.js"></script>
+	<script> 
+		var cache = [];
+		var painter = null;
+		var canvas = null;
+		var context = null;
+		var timer = null;
+		var pixelRatio = 1;
+		console.log = function (...args) {
+			postMessage(args);
+		};
+		// function stringify(key, value) {
+		// 	if (typeof value === 'object' && value !== null) {
+		// 		if (cache.indexOf(value) !== -1) {
+		// 			return;
+		// 		}
+		// 		cache.push(value);
+		// 	}
+		// 	return value;
+		// };
+
+		function emit(event, data) {
+			postMessage({
+				event,
+				data: (typeof data !== 'object' && data !== null ? data : JSON.stringify(data)) 
+			});
+			cache = [];
+		};
+		function postMessage(data) {
+			uni.postMessage({
+				data
+			});
+		};
+		
+		function init(dpr) {
+			canvas = document.querySelector('#lime-painter');
+			context = canvas.getContext('2d');
+			pixelRatio = dpr || window.devicePixelRatio;
+			painter = new Painter({
+				id: 'lime-painter',
+				context,
+				canvas,
+				pixelRatio,
+				width: canvas.offsetWidth,
+				height: canvas.offsetHeight,
+				listen: {
+					onProgress(v) {
+						emit('progressChange', v);
+					},
+					onEffectFail(err) {
+						//console.error(err)
+						emit('fail', err);
+					}
+				}
+			});
+			emit('inited', true);
+		};
+		function save(args) {
+			delete args.success;
+			delete args.fail;
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				const path = painter.save(args);
+				if (typeof path == 'string') {
+					const index = Math.ceil(path.length / 8);
+					for (var i = 0; i < 8; i++) {
+						if (i == 7) {
+							emit('success', path.substr(i * index, index));
+						} else {
+							emit('file', path.substr(i * index, index));
+						}
+					};
+				} else {
+					// console.log('canvas no data')
+					emit('fail', 'canvas no data');
+				};
+			}, 30);
+		};
+		async function source(args) {
+			let size = await painter.source(args);
+			emit('layoutChange', size);
+			if(!canvas.height) {
+				console.log('canvas no size')
+				emit('fail', 'canvas no size');
+			}
+			painter.render().catch(err => {
+				// console.error(err)
+				emit('fail', err);
+			});
+		};
+	</script>
+</body>
+
+</html>

uniapp/src/uni_modules/mp-html/README.md

@@ -0,0 +1,191 @@
+## 为减小组件包的大小，默认组件包中不包含编辑、latex 公式等扩展功能，需要使用扩展功能的请参考下方的 插件扩展 栏的说明
+
+## 功能介绍
+- 全端支持（含 `v3、NVUE`）
+- 支持丰富的标签（包括 `table`、`video`、`svg` 等）
+- 支持丰富的事件效果（自动预览图片、链接处理等）
+- 支持设置占位图（加载中、出错时、预览时）
+- 支持锚点跳转、长按复制等丰富功能
+- 支持大部分 *html* 实体
+- 丰富的插件（关键词搜索、内容编辑、`latex` 公式等）
+- 效率高、容错性强且轻量化
+
+查看 [功能介绍](https://jin-yufeng.gitee.io/mp-html/#/overview/feature) 了解更多
+
+## 使用方法
+- `uni_modules` 方式  
+  1. 点击右上角的 `使用 HBuilder X 导入插件` 按钮直接导入项目或点击 `下载插件 ZIP` 按钮下载插件包并解压到项目的 `uni_modules/mp-html` 目录下  
+  2. 在需要使用页面的 `(n)vue` 文件中添加  
+     ```html
+     <!-- 不需要引入，可直接使用 -->
+     <mp-html :content="html" />
+     ```
+     ```javascript
+     export default {
+       data() {
+         return {
+           html: '<div>Hello World!</div>'
+         }
+       }
+     }
+     ```
+  3. 需要更新版本时在 `HBuilder X` 中右键 `uni_modules/mp-html` 目录选择 `从插件市场更新` 即可  
+
+- 源码方式  
+  1. 从 [github](https://github.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 或 [gitee](https://gitee.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 下载源码  
+     插件市场的 **非 uni_modules 版本** 无法更新，不建议从插件市场获取  
+  2. 在需要使用页面的 `(n)vue` 文件中添加  
+     ```html
+     <mp-html :content="html" />
+     ```
+     ```javascript
+     import mpHtml from '@/components/mp-html/mp-html'
+     export default {
+       // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
+       components: {
+         mpHtml
+       },
+       data() {
+         return {
+           html: '<div>Hello World!</div>'
+         }
+       }
+     }
+     ```
+
+- npm 方式  
+  1. 在项目根目录下执行  
+     ```bash
+     npm install mp-html
+     ```
+  2. 在需要使用页面的 `(n)vue` 文件中添加  
+     ```html
+     <mp-html :content="html" />
+     ```
+     ```javascript
+     import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
+     export default {
+       // 不可省略
+       components: {
+         mpHtml
+       },
+       data() {
+         return {
+           html: '<div>Hello World!</div>'
+         }
+       }
+     }
+     ```
+  3. 需要更新版本时执行以下命令即可  
+     ```bash
+     npm update mp-html
+     ```
+  
+  使用 *cli* 方式运行的项目，通过 *npm* 方式引入时，需要在 *vue.config.js* 中配置 *transpileDependencies*，详情可见 [#330](https://github.com/jin-yufeng/mp-html/issues/330#issuecomment-913617687)  
+  如果在 **nvue** 中使用还要将 `dist/uni-app/static` 目录下的内容拷贝到项目的 `static` 目录下，否则无法运行  
+
+查看 [快速开始](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart) 了解更多
+
+## 组件属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|:---:|:---:|:---:|---|
+| container-style | String |  | 容器的样式（[2.1.0+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v210)） |
+| content | String |  | 用于渲染的 html 字符串 |
+| copy-link | Boolean | true | 是否允许外部链接被点击时自动复制 |
+| domain | String |  | 主域名（用于链接拼接） |
+| error-img | String |  | 图片出错时的占位图链接 |
+| lazy-load | Boolean | false | 是否开启图片懒加载 |
+| loading-img | String |  | 图片加载过程中的占位图链接 |
+| pause-video | Boolean | true | 是否在播放一个视频时自动暂停其他视频 |
+| preview-img | Boolean | true | 是否允许图片被点击时自动预览 |
+| scroll-table | Boolean | false | 是否给每个表格添加一个滚动层使其能单独横向滚动 |
+| selectable | Boolean | false | 是否开启文本长按复制 |
+| set-title | Boolean | true | 是否将 title 标签的内容设置到页面标题 |
+| show-img-menu | Boolean | true | 是否允许图片被长按时显示菜单 |
+| tag-style | Object |  | 设置标签的默认样式 |
+| use-anchor | Boolean | false | 是否使用锚点链接 |
+
+查看 [属性](https://jin-yufeng.gitee.io/mp-html/#/basic/prop) 了解更多
+
+## 组件事件
+
+| 名称 | 触发时机 |
+|:---:|---|
+| load | dom 树加载完毕时 |
+| ready | 图片加载完毕时 |
+| error | 发生渲染错误时 |
+| imgtap | 图片被点击时 |
+| linktap | 链接被点击时 |
+| play | 音视频播放时 |
+
+查看 [事件](https://jin-yufeng.gitee.io/mp-html/#/basic/event) 了解更多
+
+## api
+组件实例上提供了一些 `api` 方法可供调用
+
+| 名称 | 作用 |
+|:---:|---|
+| in | 将锚点跳转的范围限定在一个 scroll-view 内 |
+| navigateTo | 锚点跳转 |
+| getText | 获取文本内容 |
+| getRect | 获取富文本内容的位置和大小 |
+| setContent | 设置富文本内容 |
+| imgList | 获取所有图片的数组 |
+| pauseMedia | 暂停播放音视频（[2.2.2+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v222)） |
+| setPlaybackRate | 设置音视频播放速率（[2.4.0+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v240)） |
+
+查看 [api](https://jin-yufeng.gitee.io/mp-html/#/advanced/api) 了解更多
+
+## 插件扩展  
+除基本功能外，本组件还提供了丰富的扩展，可按照需要选用
+
+| 名称 | 作用 |
+|:---:|---|
+| audio | 音乐播放器 |
+| editable | 富文本 **编辑**（[示例项目](https://mp-html.oss-cn-hangzhou.aliyuncs.com/editable.zip)） |
+| emoji | 解析 emoji |
+| highlight | 代码块高亮显示 |
+| markdown | 渲染 markdown |
+| search | 关键词搜索 |
+| style | 匹配 style 标签中的样式 |
+| txv-video | 使用腾讯视频 |
+| img-cache | 图片缓存 by [@PentaTea](https://github.com/PentaTea) |
+| latex | 渲染 latex 公式 by [@Zeng-J](https://github.com/Zeng-J) |
+
+从插件市场导入的包中 **不含有** 扩展插件，使用插件需通过微信小程序 `富文本插件` 获取或参考以下方法进行打包：  
+1. 获取完整组件包  
+   ```bash
+   npm install mp-html
+   ```
+2. 编辑 `tools/config.js` 中的 `plugins` 项，选择需要的插件  
+3. 生成新的组件包  
+   在 `node_modules/mp-html` 目录下执行  
+   ```bash
+   npm install
+   npm run build:uni-app
+   ```
+4. 拷贝 `dist/uni-app` 中的内容到项目根目录  
+
+查看 [插件](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin) 了解更多
+
+## 关于 nvue
+`nvue` 使用原生渲染，不支持部分 `css` 样式，为实现和 `html` 相同的效果，组件内部通过 `web-view` 进行渲染，性能上差于原生，根据 `weex` 官方建议，`web` 标签仅应用在非常规的降级场景。因此，如果通过原生的方式（如 `richtext`）能够满足需要，则不建议使用本组件，如果有较多的富文本内容，则可以直接使用 `vue` 页面  
+由于渲染方式与其他端不同，有以下限制：  
+1. 不支持 `lazy-load` 属性
+2. 视频不支持全屏播放
+3. 如果在 `flex-direction: row` 的容器中使用，需要给组件设置宽度或设置 `flex: 1` 占满剩余宽度
+
+纯 `nvue` 模式下，[此问题](https://ask.dcloud.net.cn/question/119678) 修复前，不支持通过 `uni_modules` 引入，需要本地引入（将 [dist/uni-app](https://github.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 中的内容拷贝到项目根目录下）  
+
+## 立即体验
+![富文本插件](https://mp-html.oss-cn-hangzhou.aliyuncs.com/qrcode.jpg)
+
+## 问题反馈
+遇到问题时，请先查阅 [常见问题](https://jin-yufeng.gitee.io/mp-html/#/question/faq) 和 [issue](https://github.com/jin-yufeng/mp-html/issues) 中是否已有相同的问题  
+可通过 [issue](https://github.com/jin-yufeng/mp-html/issues/new/choose) 、插件问答或发送邮件到 [mp_html@126.com](mailto:mp_html@126.com) 提问，不建议在评论区提问（不方便回复）  
+提问请严格按照 [issue 模板](https://github.com/jin-yufeng/mp-html/issues/new/choose) ，描述清楚使用环境、`html` 内容或可复现的 `demo` 项目以及复现方式，对于 **描述不清**、**无法复现** 或重复的问题将不予回复  
+
+欢迎加入 `QQ` 交流群：`699734691`  
+
+查看 [问题反馈](https://jin-yufeng.gitee.io/mp-html/#/question/feedback) 了解更多

uniapp/src/uni_modules/mp-html/changelog.md

@@ -0,0 +1,114 @@
+## v2.4.0（2022-08-27）
+1. `A` 增加了 [setPlaybackRate](https://jin-yufeng.gitee.io/mp-html/#/advanced/api#setPlaybackRate) 的 `api`，可以设置音视频的播放速率 [详细](https://github.com/jin-yufeng/mp-html/issues/452)
+2. `A` 示例小程序代码开源 [详细](https://github.com/jin-yufeng/mp-html-demo)
+3. `U` 优化 `ready` 事件触发时机，未设置懒加载的情况下基本可以准确触发 [详细](https://github.com/jin-yufeng/mp-html/issues/195)
+4. `U` `highlight` 插件在编辑状态下不进行高亮处理，便于编辑
+5. `F` 修复了 `flex` 布局下图片大小可能不正确的问题
+6. `F` 修复了 `selectable` 属性没有设置 `force` 也可能出现渲染异常的问题
+7. `F` 修复了表格中的图片大小可能不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/448)
+8. `F` 修复了含有合并单元格的表格可能无法设置竖直对齐的问题
+9. `F` 修复了 `editable` 插件在 `scroll-view` 中使用时工具条位置可能不正确的问题
+10. `F` 修复了 `vue3` 使用 [search](advanced/plugin#search) 插件可能导致错误换行的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/449)
+## v2.3.2（2022-08-13）
+1. `A` 增加 [latex](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#latex) 插件，可以渲染数学公式 [详细](https://github.com/jin-yufeng/mp-html/pull/447) by [@Zeng-J](https://github.com/Zeng-J)
+2. `U` 优化根节点下有很多标签的长内容渲染速度
+3. `U` `highlight` 插件适配 `lang-xxx` 格式
+4. `F` 修复了 `table` 标签设置 `border` 属性后可能无法修改边框样式的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/439) by [@zouxingjie](https://github.com/zouxingjie)
+5. `F` 修复了 `editable` 插件输入连续空格无效的问题
+6. `F` 修复了 `vue3` 图片设置 `inline` 会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/438)
+7. `F` 修复了 `vue3` 使用 `table` 可能报错的问题
+## v2.3.1（2022-05-20）
+1. `U` `app` 端支持使用本地图片
+2. `U` 优化了微信小程序 `selectable` 属性在 `ios` 端的处理 [详细](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#selectable)
+3. `F` 修复了 `editable` 插件不在顶部时 `tooltip` 位置可能错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/430)
+4. `F` 修复了 `vue3` 运行到微信小程序可能报错丢失内容的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/414)
+5. `F` 修复了 `vue3` 部分标签可能被错误换行的问题
+6. `F` 修复了 `editable` 插件 `app` 端插入视频无法预览的问题
+## v2.3.0（2022-04-01）
+1. `A` 增加了 `play` 事件，音视频播放时触发，可用于与页面其他音视频进行互斥播放 [详细](basic/event#play)
+2. `U` `show-img-menu` 属性支持控制预览时是否长按弹出菜单
+3. `U` 优化 `wxs` 处理，提高渲染性能 [详细](https://developers.weixin.qq.com/community/develop/article/doc/0006cc2b204740f601bd43fa25a413)  
+4. `U` `video` 标签支持 `object-fit` 属性
+5. `U` 增加支持一些常用实体编码 [详细](https://github.com/jin-yufeng/mp-html/issues/418)
+6. `F` 修复了图片仅设置高度可能不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/410)
+7. `F` 修复了 `video` 标签高度设置为 `auto` 不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/411)
+8. `F` 修复了使用 `grid` 布局时可能样式错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/413)
+9. `F` 修复了含有合并单元格的表格部分情况下显示异常的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/417)
+10. `F` 修复了 `editable` 插件连续插入内容时顺序不正确的问题
+11. `F` 修复了 `uni-app` 包 `vue3` 使用 `audio` 插件报错的问题
+12. `F` 修复了 `uni-app` 包 `highlight` 插件使用自定义的 `prism.min.js` 报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/416)
+## v2.2.2（2022-02-26）
+1. `A` 增加了 [pauseMedia](https://jin-yufeng.gitee.io/mp-html/#/advanced/api#pauseMedia) 的 `api`，可用于暂停播放音视频 [详细](https://github.com/jin-yufeng/mp-html/issues/317)
+2. `U` 优化了长内容的加载速度  
+3. `U` 适配 `vue3` [#389](https://github.com/jin-yufeng/mp-html/issues/389)、[#398](https://github.com/jin-yufeng/mp-html/pull/398) by [@zhouhuafei](https://github.com/zhouhuafei)、[#400](https://github.com/jin-yufeng/mp-html/issues/400)
+4. `F` 修复了小程序端图片高度设置为百分比时可能不显示的问题
+5. `F` 修复了 `highlight` 插件部分情况下可能显示不完整的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/403)
+## v2.2.1（2021-12-24）
+1. `A` `editable` 插件增加上下移动标签功能
+2. `U` `editable` 插件支持在文本中间光标处插入内容
+3. `F` 修复了 `nvue` 端设置 `margin` 后可能导致高度不正确的问题
+4. `F` 修复了 `highlight` 插件使用压缩版的 `prism.css` 可能导致背景失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/367)
+5. `F` 修复了编辑状态下使用 `emoji` 插件内容为空时可能报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/371)
+6. `F` 修复了使用 `editable` 插件后将 `selectable` 属性设置为 `force` 不生效的问题
+## v2.2.0（2021-10-12）
+1. `A` 增加 `customElements` 配置项，便于添加自定义功能性标签 [详细](https://github.com/jin-yufeng/mp-html/issues/350)
+2. `A` `editable` 插件增加切换音视频自动播放状态的功能 [详细](https://github.com/jin-yufeng/mp-html/pull/341) by [@leeseett](https://github.com/leeseett)
+3. `A` `editable` 插件删除媒体标签时触发 `remove` 事件，便于删除已上传的文件
+4. `U` `editable` 插件 `insertImg` 方法支持同时插入多张图片 [详细](https://github.com/jin-yufeng/mp-html/issues/342)
+5. `U` `editable` 插入图片和音视频时支持拼接 `domian` 主域名
+6. `F` 修复了内部链接参数中包含 `://` 时被认为是外部链接的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/356)
+7. `F` 修复了部分 `svg` 标签名或属性名大小写不正确时不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/351)
+8. `F` 修复了 `nvue` 页面运行到非 `app` 平台时可能样式错误的问题
+## v2.1.5（2021-08-13）
+1. `A` 增加支持标签的 `dir` 属性
+2. `F` 修复了 `ruby` 标签文字与拼音没有居中对齐的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/325)
+3. `F` 修复了音视频标签内有 `a` 标签时可能无法播放的问题
+4. `F` 修复了 `externStyle` 中的 `class` 名包含下划线或数字时可能失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/326)
+5. `F` 修复了 `h5` 端引入 `externStyle` 可能不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/326)
+## v2.1.4（2021-07-14）
+1. `F` 修复了 `rt` 标签无法设置样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/318)
+2. `F` 修复了表格中有单元格同时合并行和列时可能显示不正确的问题
+3. `F` 修复了 `app` 端无法关闭图片长按菜单的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/322)
+4. `F` 修复了 `editable` 插件只能添加图片链接不能修改的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/312) by [@leeseett](https://github.com/leeseett)
+## v2.1.3（2021-06-12）
+1. `A` `editable` 插件增加 `insertTable` 方法
+2. `U` `editable` 插件支持编辑表格中的空白单元格 [详细](https://github.com/jin-yufeng/mp-html/issues/310)
+3. `F` 修复了 `externStyle` 中使用伪类可能失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/298)
+4. `F` 修复了多个组件同时使用时 `tag-style` 属性时可能互相影响的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/305) by [@woodguoyu](https://github.com/woodguoyu)
+5. `F` 修复了包含 `linearGradient` 的 `svg` 可能无法显示的问题
+6. `F` 修复了编译到头条小程序时可能报错的问题
+7. `F` 修复了 `nvue` 端不触发 `click` 事件的问题
+8. `F` 修复了 `editable` 插件尾部插入时无法撤销的问题
+9. `F` 修复了 `editable` 插件的 `insertHtml` 方法只能在末尾插入的问题
+10. `F` 修复了 `editable` 插件插入音频不显示的问题
+## v2.1.2（2021-04-24）
+1. `A` 增加了 [img-cache](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#img-cache) 插件，可以在 `app` 端缓存图片 [详细](https://github.com/jin-yufeng/mp-html/issues/292) by [@PentaTea](https://github.com/PentaTea)
+2. `U` 支持通过 `container-style` 属性设置 `white-space` 来保留连续空格和换行符 [详细](https://jin-yufeng.gitee.io/mp-html/#/question/faq#space)
+3. `U` 代码风格符合 [standard](https://standardjs.com) 标准
+4. `U` `editable` 插件编辑状态下支持预览视频 [详细](https://github.com/jin-yufeng/mp-html/issues/286)
+5. `F` 修复了 `svg` 标签内嵌 `svg` 时无法显示的问题
+6. `F` 修复了编译到支付宝和头条小程序时部分区域不可复制的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/291)
+## v2.1.1（2021-04-09）
+1. 修复了对 `p` 标签设置 `tag-style` 可能不生效的问题
+2. 修复了 `svg` 标签中的文本无法显示的问题
+3. 修复了使用 `editable` 插件编辑表格时可能报错的问题
+4. 修复了使用 `highlight` 插件运行到头条小程序时可能没有样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/280)
+5. 修复了使用 `editable` 插件 `editable` 属性为 `false` 时会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/284)
+6. 修复了 `style` 插件连续子选择器失效的问题
+7. 修复了 `editable` 插件无法修改图片和字体大小的问题
+## v2.1.0.2（2021-03-21）
+修复了 `nvue` 端使用可能报错的问题
+## v2.1.0（2021-03-20）
+1. `A` 增加了 [container-style](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#container-style) 属性 [详细](https://gitee.com/jin-yufeng/mp-html/pulls/1)
+2. `A` 增加支持 `strike` 标签
+3. `A` `editable` 插件增加 `placeholder` 属性 [详细](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#editable)
+4. `A` `editable` 插件增加 `insertHtml` 方法 [详细](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#editable)
+5. `U` 外部样式支持标签名选择器 [详细](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart#setting)
+6. `F` 修复了 `nvue` 端部分情况下可能不显示的问题
+## v2.0.5（2021-03-12）
+1. `U` [linktap](https://jin-yufeng.gitee.io/mp-html/#/basic/event#linktap) 事件增加返回内部文本内容 `innerText` [详细](https://github.com/jin-yufeng/mp-html/issues/271)
+2. `U` [selectable](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#selectable) 属性设置为 `force` 时能够在微信 `iOS` 端生效（文本块会变成 `inline-block`） [详细](https://github.com/jin-yufeng/mp-html/issues/267)
+3. `F` 修复了部分情况下竖向无法滚动的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/182)
+4. `F` 修复了多次修改富文本数据时部分内容可能不显示的问题
+5. `F` 修复了 [腾讯视频](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#txv-video) 插件可能无法播放的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/265)
+6. `F` 修复了 [highlight](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#highlight) 插件没有设置高亮语言时没有应用默认样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/276) by [@fuzui](https://github.com/fuzui)

uniapp/src/uni_modules/mp-html/components/mp-html/mp-html.vue

@@ -0,0 +1,493 @@
+<template>
+  <view id="_root" :class="(selectable?'_select ':'')+'_root'" :style="containerStyle">
+    <slot v-if="!nodes[0]" />
+    <!-- #ifndef APP-PLUS-NVUE -->
+    <node v-else :childs="nodes" :opts="[lazyLoad,loadingImg,errorImg,showImgMenu,selectable]" name="span" />
+    <!-- #endif -->
+    <!-- #ifdef APP-PLUS-NVUE -->
+    <web-view ref="web" src="/uni_modules/mp-html/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+/**
+ * mp-html v2.4.0
+ * @description 富文本组件
+ * @tutorial https://github.com/jin-yufeng/mp-html
+ * @property {String} container-style 容器的样式
+ * @property {String} content 用于渲染的 html 字符串
+ * @property {Boolean} copy-link 是否允许外部链接被点击时自动复制
+ * @property {String} domain 主域名，用于拼接链接
+ * @property {String} error-img 图片出错时的占位图链接
+ * @property {Boolean} lazy-load 是否开启图片懒加载
+ * @property {string} loading-img 图片加载过程中的占位图链接
+ * @property {Boolean} pause-video 是否在播放一个视频时自动暂停其他视频
+ * @property {Boolean} preview-img 是否允许图片被点击时自动预览
+ * @property {Boolean} scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动
+ * @property {Boolean | String} selectable 是否开启长按复制
+ * @property {Boolean} set-title 是否将 title 标签的内容设置到页面标题
+ * @property {Boolean} show-img-menu 是否允许图片被长按时显示菜单
+ * @property {Object} tag-style 标签的默认样式
+ * @property {Boolean | Number} use-anchor 是否使用锚点链接
+ * @event {Function} load dom 结构加载完毕时触发
+ * @event {Function} ready 所有图片加载完毕时触发
+ * @event {Function} imgtap 图片被点击时触发
+ * @event {Function} linktap 链接被点击时触发
+ * @event {Function} play 音视频播放时触发
+ * @event {Function} error 媒体加载出错时触发
+ */
+// #ifndef APP-PLUS-NVUE
+import node from './node/node'
+// #endif
+import Parser from './parser'
+const plugins=[]
+// #ifdef APP-PLUS-NVUE
+const dom = weex.requireModule('dom')
+// #endif
+export default {
+  name: 'mp-html',
+  data () {
+    return {
+      nodes: [],
+      // #ifdef APP-PLUS-NVUE
+      height: 3
+      // #endif
+    }
+  },
+  props: {
+    containerStyle: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    copyLink: {
+      type: [Boolean, String],
+      default: true
+    },
+    domain: String,
+    errorImg: {
+      type: String,
+      default: ''
+    },
+    lazyLoad: {
+      type: [Boolean, String],
+      default: false
+    },
+    loadingImg: {
+      type: String,
+      default: ''
+    },
+    pauseVideo: {
+      type: [Boolean, String],
+      default: true
+    },
+    previewImg: {
+      type: [Boolean, String],
+      default: true
+    },
+    scrollTable: [Boolean, String],
+    selectable: [Boolean, String],
+    setTitle: {
+      type: [Boolean, String],
+      default: true
+    },
+    showImgMenu: {
+      type: [Boolean, String],
+      default: true
+    },
+    tagStyle: Object,
+    useAnchor: [Boolean, Number]
+  },
+  // #ifdef VUE3
+  emits: ['load', 'ready', 'imgtap', 'linktap', 'play', 'error'],
+  // #endif
+  // #ifndef APP-PLUS-NVUE
+  components: {
+    node
+  },
+  // #endif
+  watch: {
+    content (content) {
+      this.setContent(content)
+    }
+  },
+  created () {
+    this.plugins = []
+    for (let i = plugins.length; i--;) {
+      this.plugins.push(new plugins[i](this))
+    }
+  },
+  mounted () {
+    if (this.content && !this.nodes.length) {
+      this.setContent(this.content)
+    }
+  },
+  beforeDestroy () {
+    this._hook('onDetached')
+  },
+  methods: {
+    /**
+     * @description 将锚点跳转的范围限定在一个 scroll-view 内
+     * @param {Object} page scroll-view 所在页面的示例
+     * @param {String} selector scroll-view 的选择器
+     * @param {String} scrollTop scroll-view scroll-top 属性绑定的变量名
+     */
+    in (page, selector, scrollTop) {
+      // #ifndef APP-PLUS-NVUE
+      if (page && selector && scrollTop) {
+        this._in = {
+          page,
+          selector,
+          scrollTop
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 锚点跳转
+     * @param {String} id 要跳转的锚点 id
+     * @param {Number} offset 跳转位置的偏移量
+     * @returns {Promise}
+     */
+    navigateTo (id, offset) {
+      return new Promise((resolve, reject) => {
+        if (!this.useAnchor) {
+          reject(Error('Anchor is disabled'))
+          return
+        }
+        offset = offset || parseInt(this.useAnchor) || 0
+        // #ifdef APP-PLUS-NVUE
+        if (!id) {
+          dom.scrollToElement(this.$refs.web, {
+            offset
+          })
+          resolve()
+        } else {
+          this._navigateTo = {
+            resolve,
+            reject,
+            offset
+          }
+          this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
+        }
+        // #endif
+        // #ifndef APP-PLUS-NVUE
+        let deep = ' '
+        // #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
+        deep = '>>>'
+        // #endif
+        const selector = uni.createSelectorQuery()
+          // #ifndef MP-ALIPAY
+          .in(this._in ? this._in.page : this)
+          // #endif
+          .select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
+        if (this._in) {
+          selector.select(this._in.selector).scrollOffset()
+            .select(this._in.selector).boundingClientRect()
+        } else {
+          // 获取 scroll-view 的位置和滚动距离
+          selector.selectViewport().scrollOffset() // 获取窗口的滚动距离
+        }
+        selector.exec(res => {
+          if (!res[0]) {
+            reject(Error('Label not found'))
+            return
+          }
+          const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
+          if (this._in) {
+            // scroll-view 跳转
+            this._in.page[this._in.scrollTop] = scrollTop
+          } else {
+            // 页面跳转
+            uni.pageScrollTo({
+              scrollTop,
+              duration: 300
+            })
+          }
+          resolve()
+        })
+        // #endif
+      })
+    },
+
+    /**
+     * @description 获取文本内容
+     * @return {String}
+     */
+    getText (nodes) {
+      let text = '';
+      (function traversal (nodes) {
+        for (let i = 0; i < nodes.length; i++) {
+          const node = nodes[i]
+          if (node.type === 'text') {
+            text += node.text.replace(/&amp;/g, '&')
+          } else if (node.name === 'br') {
+            text += '\n'
+          } else {
+            // 块级标签前后加换行
+            const isBlock = node.name === 'p' || node.name === 'div' || node.name === 'tr' || node.name === 'li' || (node.name[0] === 'h' && node.name[1] > '0' && node.name[1] < '7')
+            if (isBlock && text && text[text.length - 1] !== '\n') {
+              text += '\n'
+            }
+            // 递归获取子节点的文本
+            if (node.children) {
+              traversal(node.children)
+            }
+            if (isBlock && text[text.length - 1] !== '\n') {
+              text += '\n'
+            } else if (node.name === 'td' || node.name === 'th') {
+              text += '\t'
+            }
+          }
+        }
+      })(nodes || this.nodes)
+      return text
+    },
+
+    /**
+     * @description 获取内容大小和位置
+     * @return {Promise}
+     */
+    getRect () {
+      return new Promise((resolve, reject) => {
+        uni.createSelectorQuery()
+          // #ifndef MP-ALIPAY
+          .in(this)
+          // #endif
+          .select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject(Error('Root label not found')))
+      })
+    },
+
+    /**
+     * @description 暂停播放媒体
+     */
+    pauseMedia () {
+      for (let i = (this._videos || []).length; i--;) {
+        this._videos[i].pause()
+      }
+      // #ifdef APP-PLUS
+      const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].pause()'
+      // #ifndef APP-PLUS-NVUE
+      let page = this.$parent
+      while (!page.$scope) page = page.$parent
+      page.$scope.$getAppWebview().evalJS(command)
+      // #endif
+      // #ifdef APP-PLUS-NVUE
+      this.$refs.web.evalJs(command)
+      // #endif
+      // #endif
+    },
+
+    /**
+     * @description 设置媒体播放速率
+     * @param {Number} rate 播放速率
+     */
+    setPlaybackRate (rate) {
+      this.playbackRate = rate
+      for (let i = (this._videos || []).length; i--;) {
+        this._videos[i].playbackRate(rate)
+      }
+      // #ifdef APP-PLUS
+      const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].playbackRate=' + rate
+      // #ifndef APP-PLUS-NVUE
+      let page = this.$parent
+      while (!page.$scope) page = page.$parent
+      page.$scope.$getAppWebview().evalJS(command)
+      // #endif
+      // #ifdef APP-PLUS-NVUE
+      this.$refs.web.evalJs(command)
+      // #endif
+      // #endif
+    },
+
+    /**
+     * @description 设置内容
+     * @param {String} content html 内容
+     * @param {Boolean} append 是否在尾部追加
+     */
+    setContent (content, append) {
+      if (!append || !this.imgList) {
+        this.imgList = []
+      }
+      const nodes = new Parser(this).parse(content)
+      // #ifdef APP-PLUS-NVUE
+      if (this._ready) {
+        this._set(nodes, append)
+      }
+      // #endif
+      this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
+
+      // #ifndef APP-PLUS-NVUE
+      this._videos = []
+      this.$nextTick(() => {
+        this._hook('onLoad')
+        this.$emit('load')
+      })
+
+      if (this.lazyLoad || this.imgList._unloadimgs < this.imgList.length / 2) {
+        // 设置懒加载，每 350ms 获取高度，不变则认为加载完毕
+        let height
+        const callback = rect => {
+          // 350ms 总高度无变化就触发 ready 事件
+          if (rect.height === height) {
+            this.$emit('ready', rect)
+          } else {
+            height = rect.height
+            setTimeout(() => {
+              this.getRect().then(callback)
+            }, 350)
+          }
+        }
+        this.getRect().then(callback)
+      } else {
+        // 未设置懒加载，等待所有图片加载完毕
+        if (!this.imgList._unloadimgs) {
+          this.getRect(rect => {
+            this.$emit('ready', rect)
+          })
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 调用插件钩子函数
+     */
+    _hook (name) {
+      for (let i = plugins.length; i--;) {
+        if (this.plugins[i][name]) {
+          this.plugins[i][name]()
+        }
+      }
+    },
+
+    // #ifdef APP-PLUS-NVUE
+    /**
+     * @description 设置内容
+     */
+    _set (nodes, append) {
+      this.$refs.web.evalJs('setContent(' + JSON.stringify(nodes) + ',' + JSON.stringify([this.containerStyle.replace(/(?:margin|padding)[^;]+/g, ''), this.errorImg, this.loadingImg, this.pauseVideo, this.scrollTable, this.selectable]) + ',' + append + ')')
+    },
+
+    /**
+     * @description 接收到 web-view 消息
+     */
+    _onMessage (e) {
+      const message = e.detail.data[0]
+      switch (message.action) {
+        // web-view 初始化完毕
+        case 'onJSBridgeReady':
+          this._ready = true
+          if (this.nodes) {
+            this._set(this.nodes)
+          }
+          break
+        // 内容 dom 加载完毕
+        case 'onLoad':
+          this.height = message.height
+          this._hook('onLoad')
+          this.$emit('load')
+          break
+        // 所有图片加载完毕
+        case 'onReady':
+          this.getRect().then(res => {
+            this.$emit('ready', res)
+          }).catch(() => { })
+          break
+        // 总高度发生变化
+        case 'onHeightChange':
+          this.height = message.height
+          break
+        // 图片点击
+        case 'onImgTap':
+          this.$emit('imgtap', message.attrs)
+          if (this.previewImg) {
+            uni.previewImage({
+              current: parseInt(message.attrs.i),
+              urls: this.imgList
+            })
+          }
+          break
+        // 链接点击
+        case 'onLinkTap': {
+          const href = message.attrs.href
+          this.$emit('linktap', message.attrs)
+          if (href) {
+            // 锚点跳转
+            if (href[0] === '#') {
+              if (this.useAnchor) {
+                dom.scrollToElement(this.$refs.web, {
+                  offset: message.offset
+                })
+              }
+            } else if (href.includes('://')) {
+              // 打开外链
+              if (this.copyLink) {
+                plus.runtime.openWeb(href)
+              }
+            } else {
+              uni.navigateTo({
+                url: href,
+                fail () {
+                  uni.switchTab({
+                    url: href
+                  })
+                }
+              })
+            }
+          }
+          break
+        }
+        case 'onPlay':
+          this.$emit('play')
+          break
+        // 获取到锚点的偏移量
+        case 'getOffset':
+          if (typeof message.offset === 'number') {
+            dom.scrollToElement(this.$refs.web, {
+              offset: message.offset + this._navigateTo.offset
+            })
+            this._navigateTo.resolve()
+          } else {
+            this._navigateTo.reject(Error('Label not found'))
+          }
+          break
+        // 点击
+        case 'onClick':
+          this.$emit('tap')
+          this.$emit('click')
+          break
+        // 出错
+        case 'onError':
+          this.$emit('error', {
+            source: message.source,
+            attrs: message.attrs
+          })
+      }
+    }
+    // #endif
+  }
+}
+</script>
+
+<style>
+/* #ifndef APP-PLUS-NVUE */
+/* 根节点样式 */
+._root {
+  padding: 1px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 长按复制 */
+._select {
+  user-select: text;
+}
+/* #endif */
+</style>

uniapp/src/uni_modules/mp-html/components/mp-html/node/node.vue

@@ -0,0 +1,574 @@
+<template>
+  <view :id="attrs.id" :class="'_block _'+name+' '+attrs.class" :style="attrs.style">
+    <block v-for="(n, i) in childs" v-bind:key="i">
+      <!-- 图片 -->
+      <!-- 占位图 -->
+      <image v-if="n.name==='img'&&!n.t&&((opts[1]&&!ctrl[i])||ctrl[i]<0)" class="_img" :style="n.attrs.style" :src="ctrl[i]<0?opts[2]:opts[1]" mode="widthFix" />
+      <!-- 显示图片 -->
+      <!-- #ifdef H5 || (APP-PLUS && VUE2) -->
+      <img v-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || (APP-PLUS && VUE2) -->
+      <!-- 表格中的图片，使用 rich-text 防止大小不正确 -->
+      <rich-text v-if="n.name==='img'&&n.t" :style="'display:'+n.t" :nodes="'<img class=\'_img\' style=\''+n.attrs.style+'\' src=\''+n.attrs.src+'\'>'" :data-i="i" @tap.stop="imgTap" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || APP-PLUS -->
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;height:1px;'+n.attrs.style" :src="n.attrs.src" :mode="!n.h?'widthFix':(!n.w?'heightFix':'')" :lazy-load="opts[0]" :webp="n.webp" :show-menu-by-longpress="opts[3]&&!n.attrs.ignore" :image-menu-prevent="!opts[3]||n.attrs.ignore" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- #ifdef APP-PLUS && VUE3 -->
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- 文本 -->
+      <!-- #ifdef MP-WEIXIN -->
+      <text v-else-if="n.text" :user-select="opts[4]=='force'&&isiOS" decode>{{n.text}}</text>
+      <!-- #endif -->
+      <!-- #ifndef MP-WEIXIN || MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
+      <text v-else-if="n.text" decode>{{n.text}}</text>
+      <!-- #endif -->
+      <text v-else-if="n.name==='br'">\n</text>
+      <!-- 链接 -->
+      <view v-else-if="n.name==='a'" :id="n.attrs.id" :class="(n.attrs.href?'_a ':'')+n.attrs.class" hover-class="_hover" :style="'display:inline;'+n.attrs.style" :data-i="i" @tap.stop="linkTap">
+        <node name="span" :childs="n.children" :opts="opts" style="display:inherit" />
+      </view>
+      <!-- 视频 -->
+      <!-- #ifdef APP-PLUS -->
+      <view v-else-if="n.html" :id="n.attrs.id" :class="'_video '+n.attrs.class" :style="n.attrs.style" v-html="n.html" @vplay.stop="play" />
+      <!-- #endif -->
+      <!-- #ifndef APP-PLUS -->
+      <video v-else-if="n.name==='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :object-fit="n.attrs['object-fit']" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
+      <!-- #endif -->
+      <!-- #ifdef H5 || APP-PLUS -->
+      <iframe v-else-if="n.name==='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder" :src="n.attrs.src" />
+      <embed v-else-if="n.name==='embed'" :style="n.attrs.style" :src="n.attrs.src" />
+      <!-- #endif -->
+      <!-- #ifndef MP-TOUTIAO || ((H5 || APP-PLUS) && VUE3) -->
+      <!-- 音频 -->
+      <audio v-else-if="n.name==='audio'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
+      <!-- #endif -->
+      <view v-else-if="(n.name==='table'&&n.c)||n.name==='li'" :id="n.attrs.id" :class="'_'+n.name+' '+n.attrs.class" :style="n.attrs.style">
+        <node v-if="n.name==='li'" :childs="n.children" :opts="opts" />
+        <view v-else v-for="(tbody, x) in n.children" v-bind:key="x" :class="'_'+tbody.name+' '+tbody.attrs.class" :style="tbody.attrs.style">
+          <node v-if="tbody.name==='td'||tbody.name==='th'" :childs="tbody.children" :opts="opts" />
+          <block v-else v-for="(tr, y) in tbody.children" v-bind:key="y">
+            <view v-if="tr.name==='td'||tr.name==='th'" :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
+              <node :childs="tr.children" :opts="opts" />
+            </view>
+            <view v-else :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
+              <view v-for="(td, z) in tr.children" v-bind:key="z" :class="'_'+td.name+' '+td.attrs.class" :style="td.attrs.style">
+                <node :childs="td.children" :opts="opts" />
+              </view>
+            </view>
+          </block>
+        </view>
+      </view>
+      
+      <!-- 富文本 -->
+      <!-- #ifdef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
+      <rich-text v-else-if="!n.c&&!handler.isInline(n.name, n.attrs.style)" :id="n.attrs.id" :style="n.f" :user-select="opts[4]" :nodes="[n]" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
+      <rich-text v-else-if="!n.c" :id="n.attrs.id" :style="n.f+';display:inline'" :preview="false" :selectable="opts[4]" :user-select="opts[4]" :nodes="[n]" />
+      <!-- #endif -->
+      <!-- 继续递归 -->
+      <view v-else-if="n.c===2" :id="n.attrs.id" :class="'_block _'+n.name+' '+n.attrs.class" :style="n.f+';'+n.attrs.style">
+        <node v-for="(n2, j) in n.children" v-bind:key="j" :style="n2.f" :name="n2.name" :attrs="n2.attrs" :childs="n2.children" :opts="opts" />
+      </view>
+      <node v-else :style="n.f" :name="n.name" :attrs="n.attrs" :childs="n.children" :opts="opts" />
+    </block>
+  </view>
+</template>
+<script module="handler" lang="wxs">
+// 行内标签列表
+var inlineTags = {
+  abbr: true,
+  b: true,
+  big: true,
+  code: true,
+  del: true,
+  em: true,
+  i: true,
+  ins: true,
+  label: true,
+  q: true,
+  small: true,
+  span: true,
+  strong: true,
+  sub: true,
+  sup: true
+}
+/**
+ * @description 判断是否为行内标签
+ */
+module.exports = {
+  isInline: function (tagName, style) {
+    return inlineTags[tagName] || (style || '').indexOf('display:inline') !== -1
+  }
+}
+</script>
+<script>
+
+import node from './node'
+export default {
+  name: 'node',
+  options: {
+    // #ifdef MP-WEIXIN
+    virtualHost: true,
+    // #endif
+    // #ifdef MP-TOUTIAO
+    addGlobalClass: false
+    // #endif
+  },
+  data () {
+    return {
+      ctrl: {},
+      // #ifdef MP-WEIXIN
+      isiOS: uni.getSystemInfoSync().system.includes('iOS')
+      // #endif
+    }
+  },
+  props: {
+    name: String,
+    attrs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    childs: Array,
+    opts: Array
+  },
+  components: {
+
+    // #ifndef H5 && VUE3
+    node
+    // #endif
+  },
+  mounted () {
+    this.$nextTick(() => {
+      for (this.root = this.$parent; this.root.$options.name !== 'mp-html'; this.root = this.root.$parent);
+    })
+    // #ifdef H5 || APP-PLUS
+    if (this.opts[0]) {
+      let i
+      for (i = this.childs.length; i--;) {
+        if (this.childs[i].name === 'img') break
+      }
+      if (i !== -1) {
+        this.observer = uni.createIntersectionObserver(this).relativeToViewport({
+          top: 500,
+          bottom: 500
+        })
+        this.observer.observe('._img', res => {
+          if (res.intersectionRatio) {
+            this.$set(this.ctrl, 'load', 1)
+            this.observer.disconnect()
+          }
+        })
+      }
+    }
+    // #endif
+  },
+  beforeDestroy () {
+    // #ifdef H5 || APP-PLUS
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+    // #endif
+  },
+  methods:{
+    // #ifdef MP-WEIXIN
+    toJSON () { return this },
+    // #endif
+    /**
+     * @description 播放视频事件
+     * @param {Event} e
+     */
+    play (e) {
+      this.root.$emit('play')
+      // #ifndef APP-PLUS
+      if (this.root.pauseVideo) {
+        let flag = false
+        const id = e.target.id
+        for (let i = this.root._videos.length; i--;) {
+          if (this.root._videos[i].id === id) {
+            flag = true
+          } else {
+            this.root._videos[i].pause() // 自动暂停其他视频
+          }
+        }
+        // 将自己加入列表
+        if (!flag) {
+          const ctx = uni.createVideoContext(id
+            // #ifndef MP-BAIDU
+            , this
+            // #endif
+          )
+          ctx.id = id
+          if (this.root.playbackRate) {
+            ctx.playbackRate(this.root.playbackRate)
+          }
+          this.root._videos.push(ctx)
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 图片点击事件
+     * @param {Event} e
+     */
+    imgTap (e) {
+      const node = this.childs[e.currentTarget.dataset.i]
+      if (node.a) {
+        this.linkTap(node.a)
+        return
+      }
+      if (node.attrs.ignore) return
+      // #ifdef H5 || APP-PLUS
+      node.attrs.src = node.attrs.src || node.attrs['data-src']
+      // #endif
+      this.root.$emit('imgtap', node.attrs)
+      // 自动预览图片
+      if (this.root.previewImg) {
+        uni.previewImage({
+          // #ifdef MP-WEIXIN
+          showmenu: this.root.showImgMenu,
+          // #endif
+          // #ifdef MP-ALIPAY
+          enablesavephoto: this.root.showImgMenu,
+          enableShowPhotoDownload: this.root.showImgMenu,
+          // #endif
+          current: parseInt(node.attrs.i),
+          urls: this.root.imgList
+        })
+      }
+    },
+
+    /**
+     * @description 图片长按
+     */
+    imgLongTap (e) {
+      // #ifdef APP-PLUS
+      const attrs = this.childs[e.currentTarget.dataset.i].attrs
+      if (this.opts[3] && !attrs.ignore) {
+        uni.showActionSheet({
+          itemList: ['保存图片'],
+          success: () => {
+            const save = path => {
+              uni.saveImageToPhotosAlbum({
+                filePath: path,
+                success () {
+                  uni.showToast({
+                    title: '保存成功'
+                  })
+                }
+              })
+            }
+            if (this.root.imgList[attrs.i].startsWith('http')) {
+              uni.downloadFile({
+                url: this.root.imgList[attrs.i],
+                success: res => save(res.tempFilePath)
+              })
+            } else {
+              save(this.root.imgList[attrs.i])
+            }
+          }
+        })
+      }
+      // #endif
+    },
+
+    /**
+     * @description 图片加载完成事件
+     * @param {Event} e
+     */
+    imgLoad (e) {
+      const i = e.currentTarget.dataset.i
+      /* #ifndef H5 || (APP-PLUS && VUE2) */
+      if (!this.childs[i].w) {
+        // 设置原宽度
+        this.$set(this.ctrl, i, e.detail.width)
+      } else /* #endif */ if ((this.opts[1] && !this.ctrl[i]) || this.ctrl[i] === -1) {
+        // 加载完毕，取消加载中占位图
+        this.$set(this.ctrl, i, 1)
+      }
+      this.checkReady()
+    },
+
+    /**
+     * @description 检查是否所有图片加载完毕
+     */
+    checkReady () {
+      if (!this.root.lazyLoad) {
+        this.root._unloadimgs -= 1
+        if (!this.root._unloadimgs) {
+          setTimeout(() => {
+            this.root.getRect().then(rect => {
+              this.root.$emit('ready', rect)
+            })
+          }, 350)
+        }
+      }
+    },
+
+    /**
+     * @description 链接点击事件
+     * @param {Event} e
+     */
+    linkTap (e) {
+      const node = e.currentTarget ? this.childs[e.currentTarget.dataset.i] : {}
+      const attrs = node.attrs || e
+      const href = attrs.href
+      this.root.$emit('linktap', Object.assign({
+        innerText: this.root.getText(node.children || []) // 链接内的文本内容
+      }, attrs))
+      if (href) {
+        if (href[0] === '#') {
+          // 跳转锚点
+          this.root.navigateTo(href.substring(1)).catch(() => { })
+        } else if (href.split('?')[0].includes('://')) {
+          // 复制外部链接
+          if (this.root.copyLink) {
+            // #ifdef H5
+            window.open(href)
+            // #endif
+            // #ifdef MP
+            uni.setClipboardData({
+              data: href,
+              success: () =>
+                uni.showToast({
+                  title: '链接已复制'
+                })
+            })
+            // #endif
+            // #ifdef APP-PLUS
+            plus.runtime.openWeb(href)
+            // #endif
+          }
+        } else {
+          // 跳转页面
+          uni.navigateTo({
+            url: href,
+            fail () {
+              uni.switchTab({
+                url: href,
+                fail () { }
+              })
+            }
+          })
+        }
+      }
+    },
+
+    /**
+     * @description 错误事件
+     * @param {Event} e
+     */
+    mediaError (e) {
+      const i = e.currentTarget.dataset.i
+      const node = this.childs[i]
+      // 加载其他源
+      if (node.name === 'video' || node.name === 'audio') {
+        let index = (this.ctrl[i] || 0) + 1
+        if (index > node.src.length) {
+          index = 0
+        }
+        if (index < node.src.length) {
+          this.$set(this.ctrl, i, index)
+          return
+        }
+      } else if (node.name === 'img') {
+        // #ifdef H5 && VUE3
+        if (this.opts[0] && !this.ctrl.load) return
+        // #endif
+        // 显示错误占位图
+        if (this.opts[2]) {
+          this.$set(this.ctrl, i, -1)
+        }
+        this.checkReady()
+      }
+      if (this.root) {
+        this.root.$emit('error', {
+          source: node.name,
+          attrs: node.attrs,
+          // #ifndef H5 && VUE3
+          errMsg: e.detail.errMsg
+          // #endif
+        })
+      }
+    }
+  }
+}
+</script>
+<style>
+/* a 标签默认效果 */
+._a {
+  padding: 1.5px 0 1.5px 0;
+  color: #366092;
+  word-break: break-all;
+}
+
+/* a 标签点击态效果 */
+._hover {
+  text-decoration: underline;
+  opacity: 0.7;
+}
+
+/* 图片默认效果 */
+._img {
+  max-width: 100%;
+  -webkit-touch-callout: none;
+}
+
+/* 内部样式 */
+
+._block {
+  display: block;
+}
+
+._b,
+._strong {
+  font-weight: bold;
+}
+
+._code {
+  font-family: monospace;
+}
+
+._del {
+  text-decoration: line-through;
+}
+
+._em,
+._i {
+  font-style: italic;
+}
+
+._h1 {
+  font-size: 2em;
+}
+
+._h2 {
+  font-size: 1.5em;
+}
+
+._h3 {
+  font-size: 1.17em;
+}
+
+._h5 {
+  font-size: 0.83em;
+}
+
+._h6 {
+  font-size: 0.67em;
+}
+
+._h1,
+._h2,
+._h3,
+._h4,
+._h5,
+._h6 {
+  display: block;
+  font-weight: bold;
+}
+
+._image {
+  height: 1px;
+}
+
+._ins {
+  text-decoration: underline;
+}
+
+._li {
+  display: list-item;
+}
+
+._ol {
+  list-style-type: decimal;
+}
+
+._ol,
+._ul {
+  display: block;
+  padding-left: 40px;
+  margin: 1em 0;
+}
+
+._q::before {
+  content: '"';
+}
+
+._q::after {
+  content: '"';
+}
+
+._sub {
+  font-size: smaller;
+  vertical-align: sub;
+}
+
+._sup {
+  font-size: smaller;
+  vertical-align: super;
+}
+
+._thead,
+._tbody,
+._tfoot {
+  display: table-row-group;
+}
+
+._tr {
+  display: table-row;
+}
+
+._td,
+._th {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+._th {
+  font-weight: bold;
+  text-align: center;
+}
+
+._ul {
+  list-style-type: disc;
+}
+
+._ul ._ul {
+  margin: 0;
+  list-style-type: circle;
+}
+
+._ul ._ul ._ul {
+  list-style-type: square;
+}
+
+._abbr,
+._b,
+._code,
+._del,
+._em,
+._i,
+._ins,
+._label,
+._q,
+._span,
+._strong,
+._sub,
+._sup {
+  display: inline;
+}
+
+/* #ifdef APP-PLUS */
+._video {
+  width: 300px;
+  height: 225px;
+}
+/* #endif */
+</style>

uniapp/src/uni_modules/mp-html/package.json

@@ -0,0 +1,76 @@
+{
+    "id": "mp-html",
+    "displayName": "mp-html 富文本组件【全端支持，支持编辑、latex等扩展】",
+    "version": "v2.4.0",
+    "description": "一个强大的富文本组件，高效轻量，功能丰富",
+    "keywords": [
+        "富文本",
+        "编辑器",
+        "html",
+        "rich-text",
+        "editor"
+    ],
+    "repository": "https://github.com/jin-yufeng/mp-html",
+    "dcloudext": {
+        "sale": {
+            "regular": {
+                "price": "0.00"
+            },
+            "sourcecode": {
+                "price": "0.00"
+            }
+        },
+        "contact": {
+            "qq": ""
+        },
+        "declaration": {
+            "ads": "无",
+            "data": "无",
+            "permissions": "无"
+        },
+        "npmurl": "https://www.npmjs.com/package/mp-html",
+        "type": "component-vue"
+    },
+    "uni_modules": {
+        "platforms": {
+            "cloud": {
+                "tcb": "y",
+                "aliyun": "y"
+            },
+            "client": {
+                "App": {
+                    "app-vue": "y",
+                    "app-nvue": "y"
+                },
+                "H5-mobile": {
+                    "Safari": "y",
+                    "Android Browser": "y",
+                    "微信浏览器(Android)": "y",
+                    "QQ浏览器(Android)": "y"
+                },
+                "H5-pc": {
+                    "Chrome": "y",
+                    "IE": "u",
+                    "Edge": "y",
+                    "Firefox": "y",
+                    "Safari": "y"
+                },
+                "小程序": {
+                    "微信": "y",
+                    "阿里": "y",
+                    "百度": "y",
+                    "字节跳动": "y",
+                    "QQ": "y"
+                },
+                "快应用": {
+                    "华为": "y",
+                    "联盟": "y"
+                },
+                "Vue": {
+                    "vue2": "y",
+                    "vue3": "y"
+                }
+            }
+        }
+    }
+}

uniapp/src/uni_modules/mp-html/static/app-plus/mp-html/js/handler.js

@@ -0,0 +1 @@
+"use strict";function t(t){for(var e=Object.create(null),n=t.attributes.length;n--;)e[t.attributes[n].name]=t.attributes[n].value;return e}function e(){a[1]&&(this.src=a[1],this.onerror=null),this.onclick=null,this.ontouchstart=null,uni.postMessage({data:{action:"onError",source:"img",attrs:t(this)}})}function n(){window.unloadimgs-=1,0===window.unloadimgs&&uni.postMessage({data:{action:"onReady"}})}function o(r,s,c){for(var d=0;d<r.length;d++)!function(d){var u=r[d],l=void 0;if(u.type&&"node"!==u.type)l=document.createTextNode(u.text.replace(/&amp;/g,"&"));else{var g=u.name;"svg"===g&&(c="http://www.w3.org/2000/svg"),"html"!==g&&"body"!==g||(g="div"),l=c?document.createElementNS(c,g):document.createElement(g);for(var p in u.attrs)l.setAttribute(p,u.attrs[p]);if(u.children&&o(u.children,l,c),"img"===g){if(window.unloadimgs+=1,l.onload=n,l.onerror=n,!l.src&&l.getAttribute("data-src")&&(l.src=l.getAttribute("data-src")),u.attrs.ignore||(l.onclick=function(e){e.stopPropagation(),uni.postMessage({data:{action:"onImgTap",attrs:t(this)}})}),a[2]){var h=new Image;h.src=l.src,l.src=a[2],h.onload=function(){l.src=this.src},h.onerror=function(){l.onerror()}}l.onerror=e}else if("a"===g)l.addEventListener("click",function(e){e.stopPropagation(),e.preventDefault();var n,o=this.getAttribute("href");o&&"#"===o[0]&&(n=(document.getElementById(o.substr(1))||{}).offsetTop),uni.postMessage({data:{action:"onLinkTap",attrs:t(this),offset:n}})},!0);else if("video"===g||"audio"===g)i.push(l),u.attrs.autoplay||u.attrs.controls||l.setAttribute("controls","true"),l.onplay=function(){if(uni.postMessage({data:{action:"onPlay"}}),a[3])for(var t=0;t<i.length;t++)i[t]!==this&&i[t].pause()},l.onerror=function(){uni.postMessage({data:{action:"onError",source:g,attrs:t(this)}})};else if("table"===g&&a[4]&&!l.style.cssText.includes("inline")){var f=document.createElement("div");f.style.overflow="auto",f.appendChild(l),l=f}else"svg"===g&&(c=void 0)}s.appendChild(l)}(d)}document.addEventListener("UniAppJSBridgeReady",function(){document.body.onclick=function(){return uni.postMessage({data:{action:"onClick"}})},uni.postMessage({data:{action:"onJSBridgeReady"}})});var a,i=[];window.setContent=function(t,e,n){var r=document.getElementById("content");e[0]&&(document.body.style.cssText=e[0]),e[5]||(r.style.userSelect="none"),n||(r.innerHTML="",i=[]),a=e,window.unloadimgs=0;var s=document.createDocumentFragment();o(t,s),r.appendChild(s);var c=r.scrollHeight;uni.postMessage({data:{action:"onLoad",height:c}}),window.unloadimgs||uni.postMessage({data:{action:"onReady",height:c}}),clearInterval(window.timer),window.timer=setInterval(function(){r.scrollHeight!==c&&(c=r.scrollHeight,uni.postMessage({data:{action:"onHeightChange",height:c}}))},350)},window.onunload=function(){clearInterval(window.timer)};

uniapp/src/uni_modules/mp-html/static/app-plus/mp-html/js/uni.webview.min.js

@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function t(e,t){return n.call(e,t)}var i=[],a=function(e,n){var t={options:{timestamp:+new Date},name:e,arg:n};if(window.__dcloud_weex_postMessage||window.__dcloud_weex_){if("postMessage"===e){var a={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(a):window.__dcloud_weex_.postMessage(JSON.stringify(a))}var o={type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(o):window.__dcloud_weex_.postMessageToService(JSON.stringify(o))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:t,pageId:""},"*");if(0===i.length){var r=plus.webview.currentWebview();if(!r)throw new Error("plus.webview.currentWebview() is undefined");var d=r.parent(),s="";s=d?d.id:r.id,i.push(s)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}},"__uniapp__service");else{var w=JSON.stringify(t);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(w,",").concat(JSON.stringify(i),");"))}},o={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;a("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("redirectTo",{url:encodeURI(n)})},getEnv:function(e){window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a("postMessage",e.data||{})}},r=/uni-app/i.test(navigator.userAgent),d=/Html5Plus/i.test(navigator.userAgent),s=/complete|loaded|interactive/;var w=window.my&&navigator.userAgent.indexOf("AlipayClient")>-1;var u=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var g=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var v=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);for(var l,_=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},f=[function(e){if(r||d)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&s.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),o},function(e){if(v)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(w){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(u)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){return document.addEventListener("DOMContentLoaded",e),o}],m=0;m<f.length&&!(l=f[m](_));m++);l||(l={});var E="undefined"!=typeof uni?uni:{};if(!E.navigateTo)for(var b in l)t(l,b)&&(E[b]=l[b]);return E.webView=l,E}));

uniapp/src/uni_modules/mp-html/static/app-plus/mp-html/local.html

@@ -0,0 +1 @@
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><style>body,html{width:100%;height:100%;overflow-x:scroll;overflow-y:hidden}body{margin:0}video{width:300px;height:225px}img{max-width:100%;-webkit-touch-callout:none}</style></head><body><div id="content" style="overflow:hidden"></div><script type="text/javascript" src="./js/uni.webview.min.js"></script><script type="text/javascript" src="./js/handler.js"></script></body>

uniapp/src/uni_modules/vk-uview-ui/changelog.md

@@ -0,0 +1,118 @@
+## 1.3.12（2022-08-30）
+* 【优化】`u-keyboard` 组件内部细节。
+## 1.3.11（2022-08-30）
+* 【修复】`u-subsection` 组件的 `list` 属性不支持动态修改的问题。
+## 1.3.10（2022-07-30）
+* 【优化】上传组件部分细节
+## 1.3.9（2022-07-07）
+* 【更新】省市区数据源
+* 【优化】`u-subsection` 组件支持在右上角显示数字角标 
+```html
+<template>
+	<u-subsection :list="list"></u-subsection>
+</template>
+```
+
+```js
+export default {
+	data() {
+		return {
+			list: [
+				{
+					name: '待发货',
+					num: 10
+				}, 
+				{
+					name: '待付款',
+					num: 5
+				}, 
+				{
+					name: '待评价',
+					num: 15
+				}
+			]
+		}
+	}
+}
+```
+## 1.3.8（2022-06-13）
+* 【优化】组件 `u-icon`，使之更方便的兼容第三方icon（满足规则自动计算customPrefix）
+**规则如下：**
+* 当 `name` 中包含 `-icon-` 字符串时
+* 如 `vk-icon-goods`，则组件的 `customPrefix` 属性自动识别为 `vk-icon` ，`name`属性 自动识别为 `goods`
+* 如 `vk-2-icon-goods-list`，则组件的 `customPrefix` 属性自动识别为 `vk-2-icon` ，`name`属性 自动识别为 `goods-list`
+## 1.3.7（2022-06-10）
+* 【优化】组件 `u-action-sheet` `u-calendar` `u-dropdown-item` `u-field` `u-input` `u-keyboard` `u-modal` `u-radio-group` `u-rate` `u-search` `u-slider` `u-switch` `u-tabbar` `u-waterfall` 在 `vue3` 模式下的细节问题。
+## 1.3.6（2022-06-10）
+* 【优化】组件 `u-action-sheet` `u-calendar` `u-dropdown-item` `u-field` `u-input` `u-keyboard` `u-modal` `u-radio-group` `u-rate` `u-search` `u-slider` `u-switch` `u-tabbar` `u-waterfall` 在 `vue3` 模式下的细节问题。
+## 1.3.5（2022-05-28）
+* 【优化】组件 `u-mask` `u-popup` `u-select` `u-modal` `u-keyboard` `u-calendar` `u-action-sheet` `u-picker` 均新增 `blur` 属性，可用于设置弹出遮罩的模糊度，默认为0（不模糊）
+* ![](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cf0c5e69-620c-4f3c-84ab-f4619262939f/49b773a3-273f-4b1c-95e8-a42dcba1a53c.png)
+## 1.3.4（2022-05-03）
+* 【修复】`u-tabs` 组件细节问题。
+## 1.1.4（2022-03-22）
+* 【修复】`u-field` 组件 `arrowDirection` 属性无效的问题。
+## 1.1.3（2022-03-21）
+* 【优化】部分细节。
+## 1.1.2（2022-03-21）
+* 【优化】部分细节。
+## 1.1.1（2022-03-17）
+* 【优化】部分细节。
+## 1.1.0（2022-03-12）
+* 【重要】`u-picker` 组件新增 `regionDiscern` 方法 智能识别省市区街道地址
+如将字符串 `浙江省杭州市西湖区希望路1333弄是啊我庭12号楼1203` 中识别为
+```json
+{
+	"province": {
+		"code": "330000",
+		"name": "浙江省"
+	},
+	"city": {
+		"code": "330100",
+		"name": "杭州市"
+	},
+	"area": {
+		"code": "330106",
+		"name": "西湖区"
+	},
+	"address": "龙井路1号",
+	"formatted_address": "浙江省杭州市西湖区龙井路1号"
+}
+```
+而组件的 `addressDiscern` 方法还可以识别收货信息，如 `张三 13888888888 上海市嘉定区希望路1333弄是啊我庭12号楼1203` 中识别姓名、手机号、地址（支持多种格式）
+## 1.0.13（2022-03-12）
+* 【优化】部分细节。
+## 1.0.12（2022-03-09）
+* 【修复】`u-radio-group` 在 vue3 模式下，设置默认值可能会无效的问题。
+## 1.0.11（2022-03-07）
+* 【优化】部分细节。
+## 1.0.10（2022-03-05）
+* 【修复】`u-radio` 中的值相等的判断 == 改为 === 
+* 【优化】部分注释的错别字。
+## 1.0.9（2022-03-03）
+* 【修复】`u-parse` 在 vue3模式下编译到app无法正常显示的问题。
+## 1.0.8（2022-02-26）
+* 【优化】`u-form` 组件新增2个属性 `inputAlign` 和 `clearable` 用于统一设置表单内所有 `u-input` 组件的对应属性默认值
+* 【优化】更新城市数据源信息
+## 1.0.7（2022-02-25）
+* 【重要】`u-picker` 组件新增 `addressDiscern` 方法 智能识别收货信息
+
+如在 `张三 13888888888 上海市嘉定区希望路1333弄是啊我庭12号楼1203` 中识别姓名、手机号、地址（支持多种格式）
+即使这样的字符串也能识别 `!!!!~~~$张三~~~上海市嘉定区希望路1333弄是啊我庭12号楼1203【【【【13888888888】`
+## 1.0.6（2022-02-24）
+* 【优化】`u-form-item` 组件的 `prop` 属性支持 a.b 形式
+## 1.0.5（2022-01-11）
+* 【修复】`u-sticky` 组件 在微信小程序中无法正常吸顶的问题
+## 1.0.4（2021-12-31）
+* 【优化】`u-dropdown-item` 组件 0和"" 无法区分的问题。
+* 【修复】`u-modal` 在Vue3版本中使用了mask-close-able属性无效的问题
+## 1.0.3（2021-12-20）
+【优化】u-icon在微信小程序下可能会显示null字符串的问题
+## 1.0.2（2021-12-09）
+* 1、【优化】`u-button` 组件新增 `timerId` 属性
+* 之前的效果是：所有按钮一定时间内只能点击1次（`共用计算时间`）导致点击按钮A后无法马上点击按钮B
+* 优化的效果是：每个按钮一定时间内只能点击1次（`分开计算时间`）且支持设置相同的 timerId 来达到指定按钮 `共用计算时间`
+## 1.0.1（2021-11-22）
+* 修复 u-parse 组件在微信小程序上的显示问题。
+## 1.0.0（2021-11-18）
+uView Vue3.0 横空出世，继承uView1.0意志，再战江湖，风云再起！by vk 2021-11-18

uniapp/src/uni_modules/vk-uview-ui/components/u-action-sheet/u-action-sheet.vue

@@ -0,0 +1,246 @@
+<template>
+	<u-popup
+		:blur="blur"
+		mode="bottom"
+		:border-radius="borderRadius"
+		:popup="false"
+		v-model="popupValue"
+		:maskCloseAble="maskCloseAble"
+		length="auto"
+		:safeAreaInsetBottom="safeAreaInsetBottom"
+		@close="popupClose"
+		:z-index="uZIndex"
+	>
+		<view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
+			<text>{{ tips.text }}</text>
+		</view>
+		<block v-for="(item, index) in list" :key="index">
+			<view
+				@touchmove.stop.prevent
+				@tap="itemClick(index)"
+				:style="[itemStyle(index)]"
+				class="u-action-sheet-item u-line-1"
+				:class="[index < list.length - 1 ? 'u-border-bottom' : '']"
+				:hover-stay-time="150"
+			>
+				<text>{{ item[labelName] }}</text>
+				<text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">
+					{{ item.subText }}
+				</text>
+			</view>
+		</block>
+		<view class="u-gab" v-if="cancelBtn"></view>
+		<view
+			@touchmove.stop.prevent
+			class="u-actionsheet-cancel u-action-sheet-item"
+			hover-class="u-hover-class"
+			:hover-stay-time="150"
+			v-if="cancelBtn"
+			@tap="close"
+		>
+			{{ cancelText }}
+		</view>
+	</u-popup>
+</template>
+
+<script>
+/**
+ * actionSheet 操作菜单
+ * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
+ * @tutorial https://www.uviewui.com/components/actionSheet.html
+ * @property {Array<Object>} list 按钮的文字数组，见官方文档示例
+ * @property {Object} tips 顶部的提示文字，见官方文档示例
+ * @property {String} cancel-text 取消按钮的提示文字
+ * @property {Boolean} cancel-btn 是否显示底部的取消按钮（默认true）
+ * @property {Number String} border-radius 弹出部分顶部左右的圆角值，单位rpx（默认0）
+ * @property {Boolean} mask-close-able 点击遮罩是否可以关闭（默认true）
+ * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+ * @property {Number String} z-index z-index值（默认1075）
+ * @property {String} cancel-text 取消按钮的提示文字
+ * @event {Function} click 点击ActionSheet列表项时触发
+ * @event {Function} close 点击取消按钮时触发
+ * @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
+ */
+
+export default {
+	name: "u-action-sheet",
+	emits: ["update:modelValue", "input", "click", "close"],
+	props: {
+		// 通过双向绑定控制组件的弹出与收起
+		value: {
+			type: Boolean,
+			default: false
+		},
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		// 点击遮罩是否可以关闭actionsheet
+		maskCloseAble: {
+			type: Boolean,
+			default: true
+		},
+		// 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx
+		list: {
+			type: Array,
+			default() {
+				// 如下
+				// return [{
+				// 	text: '确定',
+				// 	color: '',
+				// 	fontSize: ''
+				// }]
+				return [];
+			}
+		},
+		// 顶部的提示文字
+		tips: {
+			type: Object,
+			default() {
+				return {
+					text: "",
+					color: "",
+					fontSize: "26"
+				};
+			}
+		},
+		// 底部的取消按钮
+		cancelBtn: {
+			type: Boolean,
+			default: true
+		},
+		// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+		safeAreaInsetBottom: {
+			type: Boolean,
+			default: false
+		},
+		// 弹出的顶部圆角值
+		borderRadius: {
+			type: [String, Number],
+			default: 0
+		},
+		// 弹出的z-index值
+		zIndex: {
+			type: [String, Number],
+			default: 0
+		},
+		// 取消按钮的文字提示
+		cancelText: {
+			type: String,
+			default: "取消"
+		},
+		// 自定义label属性名
+		labelName: {
+			type: String,
+			default: "text"
+		},
+		// 遮罩的模糊度
+		blur: {
+			type: [Number, String],
+			default: 0
+		}
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		// 顶部提示的样式
+		tipsStyle() {
+			let style = {};
+			if (this.tips.color) style.color = this.tips.color;
+			if (this.tips.fontSize) style.fontSize = this.tips.fontSize + "rpx";
+			return style;
+		},
+		// 操作项目的样式
+		itemStyle() {
+			return index => {
+				let style = {};
+				if (this.list[index].color) style.color = this.list[index].color;
+				if (this.list[index].fontSize) style.fontSize = this.list[index].fontSize + "rpx";
+				// 选项被禁用的样式
+				if (this.list[index].disabled) style.color = "#c0c4cc";
+				return style;
+			};
+		},
+		uZIndex() {
+			// 如果用户有传递z-index值，优先使用
+			return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+		}
+	},
+	data() {
+		return {
+			popupValue: false
+		};
+	},
+	watch: {
+		valueCom(v1, v2) {
+			this.popupValue = v1;
+		}
+	},
+	methods: {
+		// 点击取消按钮
+		close() {
+			// 发送input事件，并不会作用于父组件，而是要设置组件内部通过props传递的value参数
+			// 这是一个vue发送事件的特殊用法
+			this.popupClose();
+			this.$emit("close");
+		},
+		// 弹窗关闭
+		popupClose() {
+			this.$emit("input", false);
+			this.$emit("update:modelValue", false);
+		},
+		// 点击某一个item
+		itemClick(index) {
+			// disabled的项禁止点击
+			if (this.list[index].disabled) return;
+			this.$emit("click", index);
+			this.$emit("input", false);
+			this.$emit("update:modelValue", false);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-tips {
+	font-size: 26rpx;
+	text-align: center;
+	padding: 34rpx 0;
+	line-height: 1.5;
+	color: $u-tips-color;
+}
+
+.u-action-sheet-item {
+	@include vue-flex;
+	line-height: 1;
+	justify-content: center;
+	align-items: center;
+	font-size: 32rpx;
+	padding: 34rpx 0;
+	flex-direction: column;
+}
+
+.u-action-sheet-item__subtext {
+	font-size: 24rpx;
+	color: $u-tips-color;
+	margin-top: 20rpx;
+}
+
+.u-gab {
+	height: 12rpx;
+	background-color: rgb(234, 234, 236);
+}
+
+.u-actionsheet-cancel {
+	color: $u-main-color;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-alert-tips/u-alert-tips.vue

@@ -0,0 +1,257 @@
+<template>
+	<view class="u-alert-tips" v-if="show" :class="[
+		!show ? 'u-close-alert-tips': '',
+		type ? 'u-alert-tips--bg--' + type + '-light' : '',
+		type ? 'u-alert-tips--border--' + type + '-disabled' : '',
+	]" :style="{
+		backgroundColor: bgColor,
+		borderColor: borderColor
+	}">
+		<view class="u-icon-wrap">
+			<u-icon v-if="showIcon" :name="uIcon" :size="description ? 40 : 32" class="u-icon" :color="uIconType" :custom-style="iconStyle"></u-icon>
+		</view>
+		<view class="u-alert-content" @tap.stop="click">
+			<view class="u-alert-title" :style="[uTitleStyle]">
+				{{title}}
+			</view>
+			<view v-if="description" class="u-alert-desc" :style="[descStyle]">
+				{{description}}
+			</view>
+		</view>
+		<view class="u-icon-wrap">
+			<u-icon @click="close" v-if="closeAble && !closeText" hoverClass="u-type-error-hover-color" name="close" color="#c0c4cc"
+			 :size="22" class="u-close-icon" :style="{
+				top: description ? '18rpx' : '24rpx'
+			}"></u-icon>
+		</view>
+		<text v-if="closeAble && closeText" class="u-close-text" :style="{
+			top: description ? '18rpx' : '24rpx'
+		}">{{closeText}}</text>
+	</view>
+</template>
+
+<script>
+	/**
+	 * alertTips 警告提示
+	 * @description 警告提示，展现需要关注的信息
+	 * @tutorial https://uviewui.com/components/alertTips.html
+	 * @property {String} title 显示的标题文字
+	 * @property {String} description 辅助性文字，颜色比title浅一点，字号也小一点，可选
+	 * @property {String} type 关闭按钮(默认为叉号icon图标)
+	 * @property {String} icon 图标名称
+	 * @property {Object} icon-style 图标的样式，对象形式
+	 * @property {Object} title-style 标题的样式，对象形式
+	 * @property {Object} desc-style 描述的样式，对象形式
+	 * @property {String} close-able 用文字替代关闭图标，close-able为true时有效
+	 * @property {Boolean} show-icon 是否显示左边的辅助图标
+	 * @property {Boolean} show 显示或隐藏组件
+	 * @event {Function} click 点击组件时触发
+	 * @event {Function} close 点击关闭按钮时触发
+	 */
+	export default {
+		name: 'u-alert-tips',
+    emits: ["click", "close"],
+		props: {
+			// 显示文字
+			title: {
+				type: String,
+				default: ''
+			},
+			// 主题，success/warning/info/error
+			type: {
+				type: String,
+				default: 'warning'
+			},
+			// 辅助性文字
+			description: {
+				type: String,
+				default: ''
+			},
+			// 是否可关闭
+			closeAble: {
+				type: Boolean,
+				default: false
+			},
+			// 关闭按钮自定义文本
+			closeText: {
+				type: String,
+				default: ''
+			},
+			// 是否显示图标
+			showIcon: {
+				type: Boolean,
+				default: false
+			},
+			// 文字颜色，如果定义了color值，icon会失效
+			color: {
+				type: String,
+				default: ''
+			},
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			// 边框颜色
+			borderColor: {
+				type: String,
+				default: ''
+			},
+			// 是否显示
+			show: {
+				type: Boolean,
+				default: true
+			},
+			// 左边显示的icon
+			icon: {
+				type: String,
+				default: ''
+			},
+			// icon的样式
+			iconStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			},
+			// 标题的样式
+			titleStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			},
+			// 描述文字的样式
+			descStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			},
+		},
+		data() {
+			return {
+			}
+		},
+		computed: {
+			uTitleStyle() {
+				let style = {};
+				// 如果有描述文字的话，标题进行加粗
+				style.fontWeight = this.description ? 500 : 'normal';
+				// 将用户传入样式对象和style合并，传入的优先级比style高，同属性会被覆盖
+				return this.$u.deepMerge(style, this.titleStyle);
+			},
+			uIcon() {
+				// 如果有设置icon名称就使用，否则根据type主题，推定一个默认的图标
+				return this.icon ? this.icon : this.$u.type2icon(this.type);
+			},
+			uIconType() {
+				// 如果有设置图标的样式，优先使用，没有的话，则用type的样式
+				return Object.keys(this.iconStyle).length ? '' : this.type;
+			}
+		},
+		methods: {
+			// 点击内容
+			click() {
+				this.$emit('click');
+			},
+			// 点击关闭按钮
+			close() {
+				this.$emit('close');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-alert-tips {
+		@include vue-flex;
+		align-items: center;
+		padding: 16rpx 30rpx;
+		border-radius: 8rpx;
+		position: relative;
+		transition: all 0.3s linear;
+		border: 1px solid #fff;
+		
+		&--bg--primary-light {
+			background-color: $u-type-primary-light;
+		}
+		
+		&--bg--info-light {
+			background-color: $u-type-info-light;
+		}
+		
+		&--bg--success-light {
+			background-color: $u-type-success-light;
+		}
+		
+		&--bg--warning-light {
+			background-color: $u-type-warning-light;
+		}
+		
+		&--bg--error-light {
+			background-color: $u-type-error-light;
+		}
+		
+		&--border--primary-disabled {
+			border-color: $u-type-primary-disabled;
+		}
+		
+		&--border--success-disabled {
+			border-color: $u-type-success-disabled;
+		}
+		
+		&--border--error-disabled {
+			border-color: $u-type-error-disabled;
+		}
+		
+		&--border--warning-disabled {
+			border-color: $u-type-warning-disabled;
+		}
+		
+		&--border--info-disabled {
+			border-color: $u-type-info-disabled;
+		}
+	}
+
+	.u-close-alert-tips {
+		opacity: 0;
+		visibility: hidden;
+	}
+
+	.u-icon {
+		margin-right: 16rpx;
+	}
+
+	.u-alert-title {
+		font-size: 28rpx;
+		color: $u-main-color;
+	}
+
+	.u-alert-desc {
+		font-size: 26rpx;
+		text-align: left;
+		color: $u-content-color;
+	}
+
+	.u-close-icon {
+		position: absolute;
+		top: 20rpx;
+		right: 20rpx;
+	}
+
+	.u-close-hover {
+		color: red;
+	}
+	
+	.u-close-text {
+		font-size: 24rpx;
+		color: $u-tips-color;
+		position: absolute;
+		top: 20rpx;
+		right: 20rpx;
+		line-height: 1;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper.vue

@@ -0,0 +1,290 @@
+<template>
+	<view class="content">
+		<view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
+			<canvas
+				class="cropper"
+				:disable-scroll="true"
+				@touchstart="touchStart"
+				@touchmove="touchMove"
+				@touchend="touchEnd"
+				:style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
+				canvas-id="cropper"
+				id="cropper"
+			></canvas>
+			<canvas
+				class="cropper"
+				:disable-scroll="true"
+				:style="{
+					position: 'fixed',
+					top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
+					left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
+					width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
+					height: `${cropperOpt.height * cropperOpt.pixelRatio}`
+				}"
+				canvas-id="targetId"
+				id="targetId"
+			></canvas>
+		</view>
+		<view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
+			<!-- #ifdef H5 -->
+			<view class="upload" @tap="uploadTap">选择图片</view>
+			<!-- #endif -->
+			<!-- #ifndef H5 -->
+			<view class="upload" @tap="uploadTap">重新选择</view>
+			<!-- #endif -->
+			<view class="getCropperImage" @tap="getCropperImage(false)">确定</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import WeCropper from './weCropper.js';
+export default {
+	props: {
+		// 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
+		// mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
+		boundStyle: {
+			type: Object,
+			default() {
+				return {
+					lineWidth: 4,
+					borderColor: 'rgb(245, 245, 245)',
+					mask: 'rgba(0, 0, 0, 0.35)'
+				};
+			}
+		}
+		// // 裁剪框宽度，单位rpx
+		// rectWidth: {
+		// 	type: [String, Number],
+		// 	default: 400
+		// },
+		// // 裁剪框高度，单位rpx
+		// rectHeight: {
+		// 	type: [String, Number],
+		// 	default: 400
+		// },
+		// // 输出图片宽度，单位rpx
+		// destWidth: {
+		// 	type: [String, Number],
+		// 	default: 400
+		// },
+		// // 输出图片高度，单位rpx
+		// destHeight: {
+		// 	type: [String, Number],
+		// 	default: 400
+		// },
+		// // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可
+		// fileType: {
+		// 	type: String,
+		// 	default: 'jpg',
+		// },
+		// // 生成的图片质量
+		// // H5上无效，目前不考虑使用此参数
+		// quality: {
+		// 	type: [Number, String],
+		// 	default: 1
+		// }
+	},
+	data() {
+		return {
+			// 底部导航的高度
+			bottomNavHeight: 50,
+			originWidth: 200,
+			width: 0,
+			height: 0,
+			cropperOpt: {
+				id: 'cropper',
+				targetId: 'targetCropper',
+				pixelRatio: 1,
+				width: 0,
+				height: 0,
+				scale: 2.5,
+				zoom: 8,
+				cut: {
+					x: (this.width - this.originWidth) / 2,
+					y: (this.height - this.originWidth) / 2,
+					width: this.originWidth,
+					height: this.originWidth
+				},
+				boundStyle: {
+					lineWidth: uni.upx2px(this.boundStyle.lineWidth),
+					mask: this.boundStyle.mask,
+					color: this.boundStyle.borderColor
+				}
+			},
+			// 裁剪框和输出图片的尺寸，高度默认等于宽度
+			// 输出图片宽度，单位px
+			destWidth: 200,
+			// 裁剪框宽度，单位px
+			rectWidth: 200,
+			// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
+			fileType: 'jpg',
+			src: '', // 选择的图片路径，用于在点击确定时，判断是否选择了图片
+		};
+	},
+	onLoad(option) {
+		let rectInfo = uni.getSystemInfoSync();
+		this.width = rectInfo.windowWidth;
+		this.height = rectInfo.windowHeight - this.bottomNavHeight;
+		this.cropperOpt.width = this.width;
+		this.cropperOpt.height = this.height;
+		this.cropperOpt.pixelRatio = rectInfo.pixelRatio;
+
+		if (option.destWidth) this.destWidth = option.destWidth;
+		if (option.rectWidth) {
+			let rectWidth = Number(option.rectWidth);
+			this.cropperOpt.cut = {
+				x: (this.width - rectWidth) / 2,
+				y: (this.height - rectWidth) / 2,
+				width: rectWidth,
+				height: rectWidth
+			};
+		}
+		this.rectWidth = option.rectWidth;
+		if (option.fileType) this.fileType = option.fileType;
+		// 初始化
+		this.cropper = new WeCropper(this.cropperOpt)
+			.on('ready', ctx => {
+				// wecropper is ready for work!
+			})
+			.on('beforeImageLoad', ctx => {
+				// before picture loaded, i can do something
+			})
+			.on('imageLoad', ctx => {
+				// picture loaded
+			})
+			.on('beforeDraw', (ctx, instance) => {
+				// before canvas draw,i can do something
+			});
+		// 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
+		uni.setNavigationBarColor({
+			frontColor: '#ffffff',
+			backgroundColor: '#000000'
+		});
+		uni.chooseImage({
+			count: 1, // 默认9
+			sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+			success: res => {
+				this.src = res.tempFilePaths[0];
+				//  获取裁剪图片资源后，给data添加src属性及其值
+				this.cropper.pushOrign(this.src);
+			}
+		});
+	},
+	methods: {
+		touchStart(e) {
+			this.cropper.touchStart(e);
+		},
+		touchMove(e) {
+			this.cropper.touchMove(e);
+		},
+		touchEnd(e) {
+			this.cropper.touchEnd(e);
+		},
+		getCropperImage(isPre = false) {
+			if(!this.src) return this.$u.toast('请先选择图片再裁剪');
+
+			let cropper_opt = {
+				destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值
+				destWidth: Number(this.destWidth),
+				fileType: this.fileType
+			};
+			this.cropper.getCropperImage(cropper_opt, (path, err) => {
+				if (err) {
+					uni.showModal({
+						title: '温馨提示',
+						content: err.message
+					});
+				} else {
+					if (isPre) {
+						uni.previewImage({
+							current: '', // 当前显示图片的 http 链接
+							urls: [path] // 需要预览的图片 http 链接列表
+						});
+					} else {
+						uni.$emit('uAvatarCropper', path);
+						this.$u.route({
+							type: 'back'
+						});
+					}
+				}
+			});
+		},
+		uploadTap() {
+			const self = this;
+			uni.chooseImage({
+				count: 1, // 默认9
+				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+				success: (res) => {
+					self.src = res.tempFilePaths[0];
+					//  获取裁剪图片资源后，给data添加src属性及其值
+
+					self.cropper.pushOrign(this.src);
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.content {
+	background: rgba(255, 255, 255, 1);
+}
+
+.cropper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 11;
+}
+
+.cropper-buttons {
+	background-color: #000000;
+	color: #eee;
+}
+
+.cropper-wrapper {
+	position: relative;
+	@include vue-flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	background-color: #000;
+}
+
+.cropper-buttons {
+	width: 100vw;
+	@include vue-flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	font-size: 28rpx;
+}
+
+.cropper-buttons .upload,
+.cropper-buttons .getCropperImage {
+	width: 50%;
+	text-align: center;
+}
+
+.cropper-buttons .upload {
+	text-align: left;
+	padding-left: 50rpx;
+}
+
+.cropper-buttons .getCropperImage {
+	text-align: right;
+	padding-right: 50rpx;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-avatar/u-avatar.vue

@@ -0,0 +1,263 @@
+<template>
+  <view class="u-avatar" :style="[wrapStyle]" @tap="click">
+    <image
+      @error="loadError"
+      :style="[imgStyle]"
+      class="u-avatar__img"
+      v-if="!uText && avatar"
+      :src="avatar"
+      :mode="imgMode"
+    ></image>
+    <text
+      class="u-line-1"
+      v-else-if="uText"
+      :style="{
+        fontSize: '38rpx'
+      }"
+    >
+      {{ uText }}
+    </text>
+    <slot v-else></slot>
+    <view
+      class="u-avatar__sex"
+      v-if="showSex"
+      :class="['u-avatar__sex--' + sexIcon]"
+      :style="[uSexStyle]"
+    >
+      <u-icon :name="sexIcon" size="20"></u-icon>
+    </view>
+    <view class="u-avatar__level" v-if="showLevel" :style="[uLevelStyle]">
+      <u-icon :name="levelIcon" size="20"></u-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+let base64Avatar =
+  "data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCADIAMgDAREAAhEBAxEB/8QAcQABAQEAAwEBAAAAAAAAAAAAAAUEAQMGAgcBAQAAAAAAAAAAAAAAAAAAAAAQAAIBAwICBgkDBQAAAAAAAAABAhEDBCEFMVFBYXGREiKBscHRMkJSEyOh4XLxYjNDFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A/fAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHbHFyZ/Dam+yLA+Z2L0Pjtyj2poD4AAAAAAAAAAAAAAAAAAAAAAAAKWFs9y6lcvvwQeqj8z9wFaziY1n/HbUX9XF97A7QAGXI23EvJ1goyfzR0YEfN269jeZ+a03pNe0DIAAAAAAAAAAAAAAAAAAAACvtO3RcVkXlWutuL9YFYAAAAAOJRjKLjJVi9GmB5/csH/mu1h/in8PU+QGMAAAAAAAAAAAAAAAAAAaMDG/6MmMH8C80+xAelSSVFolwQAAAAAAAHVlWI37ErUulaPk+hgeYnCUJuElSUXRrrQHAAAAAAAAAAAAAAAAABa2Oz4bM7r4zdF2ICmAAAAAAAAAg7zZ8GX41wuJP0rRgYAAAAAAAAAAAAAAAAAD0m2R8ODaXU33tsDSAAAAAAAAAlb9HyWZcnJd9PcBHAAAAAAAAAAAAAAAAAPS7e64Vn+KA0AAAAAAAAAJm+v8Ftf3ewCKAAAAAAAAAAAAAAAAAX9muqeGo9NttP06+0DcAAAAAAAAAjb7dTu2ra+VOT9P8AQCWAAAAAAAAAAAAAAAAAUNmyPt5Ltv4bui/kuAF0AAAAAAADiUlGLlJ0SVW+oDzOXfd/Ind6JPRdS0QHSAAAAAAAAAAAAAAAAAE2nVaNcGB6Lbs6OTao9LsF51z60BrAAAAAABJ3jOVHjW3r/sa9QEgAAAAAAAAAAAAAAAAAAAPu1duWriuW34ZR4MC9hbnZyEoy8l36XwfYBsAAADaSq9EuLAlZ+7xSdrGdW9Hc5dgEdtt1erfFgAAAAAAAAAAAAAAAAADVjbblX6NR8MH80tEBRs7HYivyzlN8lovaBPzduvY0m6eK10TXtAyAarO55lpJK54orolr+4GqO/Xaea1FvqbXvA+Z77kNeW3GPbV+4DJfzcm/pcm3H6Vou5AdAFLC2ed2Pjv1txa8sV8T6wOL+yZEKu1JXFy4MDBOE4ScZxcZLinoB8gAAAAAAAAAAAB242LeyJ+C3GvN9C7QLmJtePYpKS+5c+p8F2IDYAANJqj1T4oCfk7Nj3G5Wn9qXJax7gJ93Z82D8sVNc4v30A6Xg5i42Z+iLfqARwcyT0sz9MWvWBps7LlTf5Grce9/oBTxdtxseklHxT+uWr9AGoAB138ezfj4bsFJdD6V2MCPm7RdtJzs1uW1xXzL3gTgAAAAAAAAADRhYc8q74I6RWs5ckB6GxYtWLat21SK731sDsAAAAAAAAAAAAAAAASt021NO/YjrxuQXT1oCOAAAAAAABzGLlJRSq26JAelwsWONYjbXxcZvmwO8AAAAAAAAAAAAAAAAAAef3TEWPkVivx3NY9T6UBiAAAAAABo2+VmGXblddIJ8eivRUD0oAAAAAAAAAAAAAAAAAAAYt4tKeFKVNYNSXfRgefAAAAAAAAr7VuSSWPedKaW5v1MCsAAAAAAAAAAAAAAAAAAIe6bj96Ts2n+JPzSXzP3ATgAAAAAAAAFbbt1UUrOQ9FpC4/UwK6aaqtU+DAAAAAAAAAAAAAAA4lKMIuUmoxWrb4ARNx3R3q2rLpa4Sl0y/YCcAAAAAAAAAAANmFud7G8r89r6X0dgFvGzLGRGtuWvTF6NAdwAAAAAAAAAAAy5W442PVN+K59EePp5ARMvOv5MvO6QXCC4AZwAAAAAAAAAAAAAcxlKLUotprg1owN+PvORborq+7Hnwl3gUbO74VzRydt8pKn68ANcJwmqwkpLmnUDkAAAAfNy9atqtyagut0AxXt5xIV8Fbj6lRd7Am5G65V6qUvtwfyx94GMAAAAAAAAAAAAAAAAAAAOU2nVOj5gdsc3LiqRvTpyqwOxbnnrhdfpSfrQB7pnv/AGvuS9gHXPMy5/Fem1yq0v0A6W29XqwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf//Z";
+/**
+ * avatar 头像
+ * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
+ * @tutorial https://www.uviewui.com/components/avatar.html
+ * @property {String} bg-color 背景颜色，一般显示文字时用（默认#ffffff）
+ * @property {String} src 头像路径，如加载失败，将会显示默认头像
+ * @property {String Number} size 头像尺寸，可以为指定字符串(large, default, mini)，或者数值，单位rpx（默认default）
+ * @property {String} mode 显示类型，见上方说明（默认circle）
+ * @property {String} sex-icon 性别图标，man-男，woman-女（默认man）
+ * @property {String} level-icon 等级图标（默认level）
+ * @property {String} sex-bg-color 性别图标背景颜色
+ * @property {String} level-bg-color 等级图标背景颜色
+ * @property {String} show-sex 是否显示性别图标（默认false）
+ * @property {String} show-level 是否显示等级图标（默认false）
+ * @property {String} img-mode 头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值（默认aspectFill）
+ * @property {String} index 用户传递的标识符值，如果是列表循环，可穿v-for的index值
+ * @event {Function} click 头像被点击
+ * @example <u-avatar :src="src"></u-avatar>
+ */
+export default {
+  name: "u-avatar",
+  emits: ["click"],
+  props: {
+    // 背景颜色
+    bgColor: {
+      type: String,
+      default: "transparent"
+    },
+    // 头像路径
+    src: {
+      type: String,
+      default: ""
+    },
+    // 尺寸，large-大，default-中等，mini-小，如果为数值，则单位为rpx
+    // 宽度等于高度
+    size: {
+      type: [String, Number],
+      default: "default"
+    },
+    // 头像模型，square-带圆角方形，circle-圆形
+    mode: {
+      type: String,
+      default: "circle"
+    },
+    // 文字内容
+    text: {
+      type: String,
+      default: ""
+    },
+    // 图片的裁剪模型
+    imgMode: {
+      type: String,
+      default: "aspectFill"
+    },
+    // 标识符
+    index: {
+      type: [String, Number],
+      default: ""
+    },
+    // 右上角性别角标，man-男，woman-女
+    sexIcon: {
+      type: String,
+      default: "man"
+    },
+    // 右下角的等级图标
+    levelIcon: {
+      type: String,
+      default: "level"
+    },
+    // 右下角等级图标背景颜色
+    levelBgColor: {
+      type: String,
+      default: ""
+    },
+    // 右上角性别图标的背景颜色
+    sexBgColor: {
+      type: String,
+      default: ""
+    },
+    // 是否显示性别图标
+    showSex: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示等级图标
+    showLevel: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      error: false,
+      // 头像的地址，因为如果加载错误，需要赋值为默认图片，props值无法修改，所以需要一个中间值
+      avatar: this.src ? this.src : base64Avatar
+    };
+  },
+  watch: {
+    src(n) {
+      // 用户可能会在头像加载失败时，再次修改头像值，所以需要重新赋值
+      if (!n) {
+        // 如果传入null或者''，或者undefined，显示默认头像
+        this.avatar = base64Avatar;
+        this.error = true;
+      } else {
+        this.avatar = n;
+        this.error = false;
+      }
+    }
+  },
+  computed: {
+    wrapStyle() {
+      let style = {};
+      style.height =
+        this.size == "large"
+          ? "120rpx"
+          : this.size == "default"
+          ? "90rpx"
+          : this.size == "mini"
+          ? "70rpx"
+          : this.size + "rpx";
+      style.width = style.height;
+      style.flex = `0 0 ${style.height}`;
+      style.backgroundColor = this.bgColor;
+      style.borderRadius = this.mode == "circle" ? "500px" : "5px";
+      if (this.text) style.padding = `0 6rpx`;
+      return style;
+    },
+    imgStyle() {
+      let style = {};
+      style.borderRadius = this.mode == "circle" ? "500px" : "5px";
+      return style;
+    },
+    // 取字符串的第一个字符
+    uText() {
+      return String(this.text)[0];
+    },
+    // 性别图标的自定义样式
+    uSexStyle() {
+      let style = {};
+      if (this.sexBgColor) style.backgroundColor = this.sexBgColor;
+      return style;
+    },
+    // 等级图标的自定义样式
+    uLevelStyle() {
+      let style = {};
+      if (this.levelBgColor) style.backgroundColor = this.levelBgColor;
+      return style;
+    }
+  },
+  methods: {
+    // 图片加载错误时，显示默认头像
+    loadError() {
+      this.error = true;
+      this.avatar = base64Avatar;
+    },
+    click() {
+      this.$emit("click", this.index);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-avatar {
+  /* #ifndef APP-NVUE */
+  display: inline-flex;
+  /* #endif */
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  color: $u-content-color;
+  border-radius: 10px;
+  position: relative;
+
+  &__img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__sex {
+    position: absolute;
+    width: 32rpx;
+    color: #ffffff;
+    height: 32rpx;
+    @include vue-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100rpx;
+    top: 5%;
+    z-index: 1;
+    right: -7%;
+    border: 1px #ffffff solid;
+
+    &--man {
+      background-color: $u-type-primary;
+    }
+
+    &--woman {
+      background-color: $u-type-error;
+    }
+
+    &--none {
+      background-color: $u-type-warning;
+    }
+  }
+
+  &__level {
+    position: absolute;
+    width: 32rpx;
+    color: #ffffff;
+    height: 32rpx;
+    @include vue-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100rpx;
+    bottom: 5%;
+    z-index: 1;
+    right: -7%;
+    border: 1px #ffffff solid;
+    background-color: $u-type-warning;
+  }
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-back-top/u-back-top.vue

@@ -0,0 +1,153 @@
+<template>
+	<view @tap="backToTop" class="u-back-top" :class="['u-back-top--mode--' + mode]" :style="[{
+		bottom: bottom + 'rpx',
+		right: right + 'rpx',
+		borderRadius: mode == 'circle' ? '10000rpx' : '8rpx',
+		zIndex: uZIndex,
+		opacity: opacity
+	}, customStyle]">
+		<view class="u-back-top__content" v-if="!$slots.default && !$slots.$default">
+			<u-icon @click="backToTop" :name="icon" :custom-style="iconStyle"></u-icon>
+			<view class="u-back-top__content__tips">
+				{{tips}}
+			</view>
+		</view>
+		<slot v-else />
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'u-back-top',
+		props: {
+			// 返回顶部的形状，circle-圆形，square-方形
+			mode: {
+				type: String,
+				default: 'circle'
+			},
+			// 自定义图标
+			icon: {
+				type: String,
+				default: 'arrow-upward'
+			},
+			// 提示文字
+			tips: {
+				type: String,
+				default: ''
+			},
+			// 返回顶部滚动时间
+			duration: {
+				type: [Number, String],
+				default: 100
+			},
+			// 滚动距离
+			scrollTop: {
+				type: [Number, String],
+				default: 0
+			},
+			// 距离顶部多少距离显示，单位rpx
+			top: {
+				type: [Number, String],
+				default: 400
+			},
+			// 返回顶部按钮到底部的距离，单位rpx
+			bottom: {
+				type: [Number, String],
+				default: 200
+			},
+			// 返回顶部按钮到右边的距离，单位rpx
+			right: {
+				type: [Number, String],
+				default: 40
+			},
+			// 层级
+			zIndex: {
+				type: [Number, String],
+				default: '9'
+			},
+			// 图标的样式，对象形式
+			iconStyle: {
+				type: Object,
+				default() {
+					return {
+						color: '#909399',
+						fontSize: '38rpx'
+					}
+				}
+			},
+			// 整个组件的样式
+			customStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			}
+		},
+		watch: {
+			showBackTop(nVal, oVal) {
+				// 当组件的显示与隐藏状态发生跳变时，修改组件的层级和不透明度
+				// 让组件有显示和消失的动画效果，如果用v-if控制组件状态，将无设置动画效果
+				if(nVal) {
+					this.uZIndex = this.zIndex;
+					this.opacity = 1;
+				} else {
+					this.uZIndex = -1;
+					this.opacity = 0;
+				}
+			}
+		},
+		computed: {
+			showBackTop() {
+				// 由于scrollTop为页面的滚动距离，默认为px单位，这里将用于传入的top(rpx)值
+				// 转为px用于比较，如果滚动条到顶的距离大于设定的距离，就显示返回顶部的按钮
+				return this.scrollTop > uni.upx2px(this.top);
+			},
+		},
+		data() {
+			return {
+				// 不透明度，为了让组件有一个显示和隐藏的过渡动画
+				opacity: 0,
+				// 组件的z-index值，隐藏时设置为-1，就会看不到
+				uZIndex: -1
+			}
+		},
+		methods: {
+			backToTop() {
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: this.duration
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-back-top {
+		width: 80rpx;
+		height: 80rpx;
+		position: fixed;
+		z-index: 9;
+		@include vue-flex;
+		flex-direction: column;
+		justify-content: center;
+		background-color: #E1E1E1;
+		color: $u-content-color;
+		align-items: center;
+		transition: opacity 0.4s;
+		
+		&__content {
+			@include vue-flex;
+			flex-direction: column;
+			align-items: center;
+			
+			&__tips {
+				font-size: 24rpx;
+				transform: scale(0.8);
+				line-height: 1;
+			}
+		}
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-badge/u-badge.vue

@@ -0,0 +1,216 @@
+<template>
+	<view v-if="show" class="u-badge" :class="[
+			isDot ? 'u-badge-dot' : '', 
+			size == 'mini' ? 'u-badge-mini' : '',
+			type ? 'u-badge--bg--' + type : ''
+		]" :style="[{
+			top: offset[0] + 'rpx',
+			right: offset[1] + 'rpx',
+			fontSize: fontSize + 'rpx',
+			position: absolute ? 'absolute' : 'static',
+			color: color,
+			backgroundColor: bgColor
+		}, boxStyle]"
+	>
+		{{showText}}
+	</view>
+</template>
+
+<script>
+	/**
+	 * badge 角标
+	 * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
+	 * @tutorial https://www.uviewui.com/components/badge.html
+	 * @property {String Number} count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏
+	 * @property {Boolean} is-dot 不展示数字，只有一个小点（默认false）
+	 * @property {Boolean} absolute 组件是否绝对定位，为true时，offset参数才有效（默认true）
+	 * @property {String Number} overflow-count 展示封顶的数字值（默认99）
+	 * @property {String} type 使用预设的背景颜色（默认error）
+	 * @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false）
+	 * @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default）
+	 * @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]）
+	 * @property {String} color 字体颜色（默认#ffffff）
+	 * @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
+	 * @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false）
+	 * @example <u-badge type="error" count="7"></u-badge>
+	 */
+	export default {
+		name: 'u-badge',
+		props: {
+			// primary,warning,success,error,info
+			type: {
+				type: String,
+				default: 'error'
+			},
+			// default, mini
+			size: {
+				type: String,
+				default: 'default'
+			},
+			//是否是圆点
+			isDot: {
+				type: Boolean,
+				default: false
+			},
+			// 显示的数值内容
+			count: {
+				type: [Number, String],
+			},
+			// 展示封顶的数字值
+			overflowCount: {
+				type: Number,
+				default: 99
+			},
+			// 当数值为 0 时，是否展示 Badge
+			showZero: {
+				type: Boolean,
+				default: false
+			},
+			// 位置偏移
+			offset: {
+				type: Array,
+				default: () => {
+					return [20, 20]
+				}
+			},
+			// 是否开启绝对定位，开启了offset才会起作用
+			absolute: {
+				type: Boolean,
+				default: true
+			},
+			// 字体大小
+			fontSize: {
+				type: [String, Number],
+				default: '24'
+			},
+			// 字体演示
+			color: {
+				type: String,
+				default: '#ffffff'
+			},
+			// badge的背景颜色
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			// 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效
+			isCenter: {
+				type: Boolean,
+				default: false
+			}
+		},
+		computed: {
+			// 是否将badge中心与父组件右上角重合
+			boxStyle() {
+				let style = {};
+				if(this.isCenter) {
+					style.top = 0;
+					style.right = 0;
+					// Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半
+					style.transform = "translateY(-50%) translateX(50%)";
+				} else {
+					style.top = this.offset[0] + 'rpx';
+					style.right = this.offset[1] + 'rpx';
+					style.transform = "translateY(0) translateX(0)";
+				}
+				// 如果尺寸为mini，后接上scal()
+				if(this.size == 'mini') {
+					style.transform = style.transform + " scale(0.8)";
+				}
+				return style;
+			},
+			// isDot类型时，不显示文字
+			showText() {
+				if(this.isDot) return '';
+				else {
+					if(this.count > this.overflowCount) return `${this.overflowCount}+`;
+					else return this.count;
+				}
+			},
+			// 是否显示组件
+			show() {
+				// 如果count的值为0，并且showZero设置为false，不显示组件
+				if(this.count == 0 && this.showZero == false) return false;
+				else return true;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-badge {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		line-height: 24rpx;
+		padding: 4rpx 8rpx;
+		border-radius: 100rpx;
+		z-index: 9;
+		
+		&--bg--primary {
+			background-color: $u-type-primary;
+		}
+		
+		&--bg--error {
+			background-color: $u-type-error;
+		}
+		
+		&--bg--success {
+			background-color: $u-type-success;
+		}
+		
+		&--bg--info {
+			background-color: $u-type-info;
+		}
+		
+		&--bg--warning {
+			background-color: $u-type-warning;
+		}
+	}
+	
+	.u-badge-dot {
+		height: 16rpx;
+		width: 16rpx;
+		border-radius: 100rpx;
+		line-height: 1;
+	}
+	
+	.u-badge-mini {
+		transform: scale(0.8);
+		transform-origin: center center;
+	}
+	
+	// .u-primary {
+	// 	background: $u-type-primary;
+	// 	color: #fff;
+	// }
+	
+	// .u-error {
+	// 	background: $u-type-error;
+	// 	color: #fff;
+	// }
+	
+	// .u-warning {
+	// 	background: $u-type-warning;
+	// 	color: #fff;
+	// }
+	
+	// .u-success {
+	// 	background: $u-type-success;
+	// 	color: #fff;
+	// }
+	
+	// .u-black {
+	// 	background: #585858;
+	// 	color: #fff;
+	// }
+	
+	.u-info {
+		background-color: $u-type-info;
+		color: #fff;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-button/u-button.vue

@@ -0,0 +1,603 @@
+<template>
+	<button
+		id="u-wave-btn"
+		class="u-btn u-line-1 u-fix-ios-appearance"
+		:class="[
+			'u-size-' + size,
+			plain ? 'u-btn--' + type + '--plain' : '',
+			loading ? 'u-loading' : '',
+			shape == 'circle' ? 'u-round-circle' : '',
+			hairLine ? showHairLineBorder : 'u-btn--bold-border',
+			'u-btn--' + type,
+			disabled ? `u-btn--${type}--disabled` : '',
+		]"
+		:hover-start-time="Number(hoverStartTime)"
+		:hover-stay-time="Number(hoverStayTime)"
+		:disabled="disabled"
+		:form-type="formType"
+		:open-type="openType"
+		:app-parameter="appParameter"
+		:hover-stop-propagation="hoverStopPropagation"
+		:send-message-title="sendMessageTitle"
+		send-message-path="sendMessagePath"
+		:lang="lang"
+		:data-name="dataName"
+		:session-from="sessionFrom"
+		:send-message-img="sendMessageImg"
+		:show-message-card="showMessageCard"
+		@getphonenumber="getphonenumber"
+		@getuserinfo="getuserinfo"
+		@error="error"
+		@opensetting="opensetting"
+		@launchapp="launchapp"
+		:style="[customStyle, {
+			overflow: ripple ? 'hidden' : 'visible'
+		}]"
+		@tap="click($event)"
+		:hover-class="getHoverClass"
+		:loading="loading"
+	>
+		<slot></slot>
+		<view
+			v-if="ripple"
+			class="u-wave-ripple"
+			:class="[waveActive ? 'u-wave-active' : '']"
+			:style="{
+				top: rippleTop + 'px',
+				left: rippleLeft + 'px',
+				width: fields.targetWidth + 'px',
+				height: fields.targetWidth + 'px',
+				'background-color': rippleBgColor || 'rgba(0, 0, 0, 0.15)'
+			}"
+		></view>
+	</button>
+</template>
+
+<script>
+/**
+ * button 按钮
+ * @description Button 按钮
+ * @tutorial https://www.uviewui.com/components/button.html
+ * @property {String} size 按钮的大小
+ * @property {Boolean} ripple 是否开启点击水波纹效果
+ * @property {String} ripple-bg-color 水波纹的背景色，ripple为true时有效
+ * @property {String} type 按钮的样式类型
+ * @property {Boolean} plain 按钮是否镂空，背景色透明
+ * @property {Boolean} disabled 是否禁用
+ * @property {Boolean} hair-line 是否显示按钮的细边框(默认true)
+ * @property {Boolean} shape 按钮外观形状，见文档说明
+ * @property {Boolean} loading 按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)
+ * @property {String} form-type 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+ * @property {String} open-type 开放能力
+ * @property {String} data-name 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+ * @property {String} hover-class 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果(App-nvue 平台暂不支持)
+ * @property {Number} hover-start-time 按住后多久出现点击态，单位毫秒
+ * @property {Number} hover-stay-time 手指松开后点击态保留时间，单位毫秒
+ * @property {Object} custom-style 对按钮的自定义样式，对象形式，见文档说明
+ * @event {Function} click 按钮点击
+ * @event {Function} getphonenumber open-type="getPhoneNumber"时有效
+ * @event {Function} getuserinfo 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
+ * @event {Function} error 当使用开放能力时，发生错误的回调
+ * @event {Function} opensetting 在打开授权设置页并关闭后回调
+ * @event {Function} launchapp 打开 APP 成功的回调
+ * @example <u-button>月落</u-button>
+ */
+export default {
+	name: 'u-button',
+  emits: ["click", "getphonenumber", "getuserinfo", "error", "opensetting", "launchapp"],
+	props: {
+		// 是否细边框
+		hairLine: {
+			type: Boolean,
+			default: true
+		},
+		// 按钮的预置样式，default，primary，error，warning，success
+		type: {
+			type: String,
+			default: 'default'
+		},
+		// 按钮尺寸，default，medium，mini
+		size: {
+			type: String,
+			default: 'default'
+		},
+		// 按钮形状，circle（两边为半圆），square（带圆角）
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		// 按钮是否镂空
+		plain: {
+			type: Boolean,
+			default: false
+		},
+		// 是否禁止状态
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 是否加载中
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		// 开放能力，具体请看uniapp稳定关于button组件部分说明
+		// https://uniapp.dcloud.io/component/button
+		openType: {
+			type: String,
+			default: ''
+		},
+		// 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+		// 取值为submit（提交表单），reset（重置表单）
+		formType: {
+			type: String,
+			default: ''
+		},
+		// 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+		// 只微信小程序、QQ小程序有效
+		appParameter: {
+			type: String,
+			default: ''
+		},
+		// 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
+		hoverStopPropagation: {
+			type: Boolean,
+			default: false
+		},
+		// 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
+		lang: {
+			type: String,
+			default: 'en'
+		},
+		// 会话来源，open-type="contact"时有效。只微信小程序有效
+		sessionFrom: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片标题，open-type="contact"时有效
+		// 默认当前标题，只微信小程序有效
+		sendMessageTitle: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+		// 默认当前分享路径，只微信小程序有效
+		sendMessagePath: {
+			type: String,
+			default: ''
+		},
+		// 会话内消息卡片图片，open-type="contact"时有效
+		// 默认当前页面截图，只微信小程序有效
+		sendMessageImg: {
+			type: String,
+			default: ''
+		},
+		// 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
+		// 用户点击后可以快速发送小程序消息，open-type="contact"时有效
+		showMessageCard: {
+			type: Boolean,
+			default: false
+		},
+		// 手指按（触摸）按钮时按钮时的背景颜色
+		hoverBgColor: {
+			type: String,
+			default: ''
+		},
+		// 水波纹的背景颜色
+		rippleBgColor: {
+			type: String,
+			default: ''
+		},
+		// 是否开启水波纹效果
+		ripple: {
+			type: Boolean,
+			default: false
+		},
+		// 按下的类名
+		hoverClass: {
+			type: String,
+			default: ''
+		},
+		// 自定义样式，对象形式
+		customStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+		dataName: {
+			type: String,
+			default: ''
+		},
+		// 节流，一定时间内只能触发一次
+		throttleTime: {
+			type: [String, Number],
+			default: 500
+		},
+		// 按住后多久出现点击态，单位毫秒
+		hoverStartTime: {
+			type: [String, Number],
+			default: 20
+		},
+		// 手指松开后点击态保留时间，单位毫秒
+		hoverStayTime: {
+			type: [String, Number],
+			default: 150
+		},
+		timerId: {
+			type: [String, Number]
+		},
+	},
+	computed: {
+		// 当没有传bgColor变量时，按钮按下去的颜色类名
+		getHoverClass() {
+			// 如果开启水波纹效果，则不启用hover-class效果
+			if (this.loading || this.disabled || this.ripple || this.hoverClass) return '';
+			let hoverClass = '';
+			hoverClass = this.plain ? 'u-' + this.type + '-plain-hover' : 'u-' + this.type + '-hover';
+			return hoverClass;
+		},
+		// 在'primary', 'success', 'error', 'warning'类型下，不显示边框，否则会造成四角有毛刺现象
+		showHairLineBorder() {
+			if (['primary', 'success', 'error', 'warning'].indexOf(this.type) >= 0 && !this.plain) {
+				return '';
+			} else {
+				return 'u-hairline-border';
+			}
+		}
+	},
+	data() {
+		let btnTimerId = this.timerId || "button_" + Math.floor(Math.random() * 100000000 + 0);
+		return {
+			btnTimerId,
+			rippleTop: 0, // 水波纹的起点Y坐标到按钮上边界的距离
+			rippleLeft: 0, // 水波纹起点X坐标到按钮左边界的距离
+			fields: {}, // 波纹按钮节点信息
+			waveActive: false // 激活水波纹
+		};
+	},
+	methods: {
+		// 按钮点击
+		click(e) {
+			// 进行节流控制，每this.throttle毫秒内，只在开始处执行
+			this.$u.throttle(() => {
+				// 如果按钮时disabled和loading状态，不触发水波纹效果
+				if (this.loading === true || this.disabled === true) return;
+				// 是否开启水波纹效果
+				if (this.ripple) {
+					// 每次点击时，移除上一次的类，再次添加，才能触发动画效果
+					this.waveActive = false;
+					this.$nextTick(function() {
+						this.getWaveQuery(e);
+					});
+				}
+				this.$emit('click', e);
+			}, this.throttleTime, true, this.btnTimerId);
+		},
+		// 查询按钮的节点信息
+		getWaveQuery(e) {
+			this.getElQuery().then(res => {
+				// 查询返回的是一个数组节点
+				let data = res[0];
+				// 查询不到节点信息，不操作
+				if (!data.width || !data.width) return;
+				// 水波纹的最终形态是一个正方形(通过border-radius让其变为一个圆形)，这里要保证正方形的边长等于按钮的最长边
+				// 最终的方形（变换后的圆形）才能覆盖整个按钮
+				data.targetWidth = data.height > data.width ? data.height : data.width;
+				if (!data.targetWidth) return;
+				this.fields = data;
+				let touchesX = '',
+					touchesY = '';
+				// #ifdef MP-BAIDU
+				touchesX = e.changedTouches[0].clientX;
+				touchesY = e.changedTouches[0].clientY;
+				// #endif
+				// #ifdef MP-ALIPAY
+				touchesX = e.detail.clientX;
+				touchesY = e.detail.clientY;
+				// #endif
+				// #ifndef MP-BAIDU || MP-ALIPAY
+				touchesX = e.touches[0].clientX;
+				touchesY = e.touches[0].clientY;
+				// #endif
+				// 获取触摸点相对于按钮上边和左边的x和y坐标，原理是通过屏幕的触摸点（touchesY），减去按钮的上边界data.top
+				// 但是由于`transform-origin`默认是center，所以这里再减去半径才是水波纹view应该的位置
+				// 总的来说，就是把水波纹的矩形（变换后的圆形）的中心点，移动到我们的触摸点位置
+				this.rippleTop = touchesY - data.top - data.targetWidth / 2;
+				this.rippleLeft = touchesX - data.left - data.targetWidth / 2;
+				this.$nextTick(() => {
+					this.waveActive = true;
+				});
+			});
+		},
+		// 获取节点信息
+		getElQuery() {
+			return new Promise(resolve => {
+				let queryInfo = '';
+				// 获取元素节点信息，请查看uniapp相关文档
+				// https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect
+				queryInfo = uni.createSelectorQuery().in(this);
+				//#ifdef MP-ALIPAY
+				queryInfo = uni.createSelectorQuery();
+				//#endif
+				queryInfo.select('.u-btn').boundingClientRect();
+				queryInfo.exec(data => {
+					resolve(data);
+				});
+			});
+		},
+		// 下面为对接uniapp官方按钮开放能力事件回调的对接
+		getphonenumber(res) {
+			this.$emit('getphonenumber', res);
+		},
+		getuserinfo(res) {
+			this.$emit('getuserinfo', res);
+		},
+		error(res) {
+			this.$emit('error', res);
+		},
+		opensetting(res) {
+			this.$emit('opensetting', res);
+		},
+		launchapp(res) {
+			this.$emit('launchapp', res);
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+.u-btn::after {
+	border: none;
+}
+
+.u-btn {
+	position: relative;
+	border: 0;
+	border-radius: 24rpx;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	// 避免边框某些场景可能被“裁剪”，不能设置为hidden
+	overflow: visible;
+	line-height: 1;
+	@include vue-flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	padding: 0 25rpx;
+	z-index: 1;
+	box-sizing: border-box;
+	transition: all 0.15s;
+	
+	&--bold-border {
+		border: 1px solid #ffffff;
+	}
+	
+	&--default {
+		color: $u-content-color;
+		border-color: #c0c4cc;
+		background-color: #ffffff;
+	}
+	
+	&--primary {
+		color: $u-color-btn-text;
+		border-color: $u-type-primary;
+		background-color: $u-type-primary;
+	}
+	
+	&--success {
+		color: #ffffff;
+		border-color: $u-type-success;
+		background-color: $u-type-success;
+	}
+	
+	&--error {
+		color: #ffffff;
+		border-color: $u-type-error;
+		background-color: $u-type-error;
+	}
+	
+	&--warning {
+		color: #ffffff;
+		border-color: $u-type-warning;
+		background-color: $u-type-warning;
+	}
+	
+	&--default--disabled {
+		color: #ffffff;
+		border-color: #e4e7ed;
+		background-color: #ffffff;
+	}
+	
+	&--primary--disabled {
+		color: #ffffff!important;
+		border-color: $u-type-primary-disabled!important;
+		background-color: $u-type-primary-disabled!important;
+	}
+	
+	&--success--disabled {
+		color: #ffffff!important;
+		border-color: $u-type-success-disabled!important;
+		background-color: $u-type-success-disabled!important;
+	}
+	
+	&--error--disabled {
+		color: #ffffff!important;
+		border-color: $u-type-error-disabled!important;
+		background-color: $u-type-error-disabled!important;
+	}
+	
+	&--warning--disabled {
+		color: #ffffff!important;
+		border-color: $u-type-warning-disabled!important;
+		background-color: $u-type-warning-disabled!important;
+	}
+	
+	&--primary--plain {
+		color: $u-type-primary!important;
+		border-color: $u-type-primary-disabled!important;
+		background-color: $u-type-primary-light!important;
+	}
+	
+	&--success--plain {
+		color: $u-type-success!important;
+		border-color: $u-type-success-disabled!important;
+		background-color: $u-type-success-light!important;
+	}
+	
+	&--error--plain {
+		color: $u-type-error!important;
+		border-color: $u-type-error-disabled!important;
+		background-color: $u-type-error-light!important;
+	}
+	
+	&--warning--plain {
+		color: $u-type-warning!important;
+		border-color: $u-type-warning-disabled!important;
+		background-color: $u-type-warning-light!important;
+	}
+}
+
+.u-hairline-border:after {
+	content: ' ';
+	position: absolute;
+	pointer-events: none;
+	// 设置为border-box，意味着下面的scale缩小为0.5，实际上缩小的是伪元素的内容（border-box意味着内容不含border）
+	box-sizing: border-box;
+	// 中心点作为变形(scale())的原点
+	-webkit-transform-origin: 0 0;
+	transform-origin: 0 0;
+	left: 0;
+	top: 0;
+	width: 199.8%;
+	height: 199.7%;
+	-webkit-transform: scale(0.5, 0.5);
+	transform: scale(0.5, 0.5);
+	border: 1px solid currentColor;
+    border-radius: 44rpx;
+	z-index: 1;
+}
+
+.u-wave-ripple {
+	z-index: 0;
+	position: absolute;
+	border-radius: 100%;
+	background-clip: padding-box;
+	pointer-events: none;
+	user-select: none;
+	transform: scale(0);
+	opacity: 1;
+	transform-origin: center;
+}
+
+.u-wave-ripple.u-wave-active {
+	opacity: 0;
+	transform: scale(2);
+	transition: opacity 1s linear, transform 0.4s linear;
+}
+
+.u-round-circle {
+	border-radius: 100rpx;
+}
+
+.u-round-circle::after {
+	border-radius: 100rpx;
+}
+
+.u-loading::after {
+	background-color: hsla(0, 0%, 100%, 0.35);
+}
+
+.u-size-default {
+	font-size: 30rpx;
+	height: 80rpx;
+	line-height: 80rpx;
+}
+
+.u-size-medium {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	width: auto;
+	font-size: 26rpx;
+	height: 56rpx;
+	padding: 0 24rpx;
+	line-height: 56rpx;
+}
+
+.u-size-mini {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	width: auto;
+	font-size: 24rpx;
+	padding-top: 1px;
+	height: 50rpx;
+	line-height: 50rpx;
+	padding: 0 20rpx;
+}
+
+.u-primary-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-primary-dark !important;
+}
+
+.u-default-plain-hover {
+	color: $u-type-primary-dark !important;
+	background: $u-type-primary-light !important;
+}
+
+.u-success-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-success-dark !important;
+}
+
+.u-warning-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-warning-dark !important;
+}
+
+.u-error-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-error-dark !important;
+}
+
+.u-info-plain-hover {
+	color: #ffffff !important;
+	background: $u-type-info-dark !important;
+}
+
+.u-default-hover {
+	color: $u-type-primary-dark !important;
+	border-color: $u-type-primary-dark !important;
+	background-color: $u-type-primary-light !important;
+}
+
+.u-primary-hover {
+	background: $u-type-primary-dark !important;
+	color: $u-color-btn-text;
+}
+
+.u-success-hover {
+	background: $u-type-success-dark !important;
+	color: #fff;
+}
+
+.u-info-hover {
+	background: $u-type-info-dark !important;
+	color: #fff;
+}
+
+.u-warning-hover {
+	background: $u-type-warning-dark !important;
+	color: #fff;
+}
+
+.u-error-hover {
+	background: $u-type-error-dark !important;
+	color: #fff;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-calendar/u-calendar.vue

@@ -0,0 +1,663 @@
+<template>
+	<u-popup :blur="blur" closeable :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="popupValue" length="auto"
+	 :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex" :border-radius="borderRadius" :closeable="closeable">
+		<view class="u-calendar">
+			<view class="u-calendar__header">
+				<view class="u-calendar__header__text" v-if="!$slots['tooltip']">
+					{{toolTip}}
+				</view>
+				<slot v-else name="tooltip" />
+			</view>
+			<view class="u-calendar__action u-flex u-row-center">
+				<view class="u-calendar__action__icon">
+					<u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor" @click="changeYearHandler(0)"></u-icon>
+				</view>
+				<view class="u-calendar__action__icon">
+					<u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonthHandler(0)"></u-icon>
+				</view>
+				<view class="u-calendar__action__text">{{ showTitle }}</view>
+				<view class="u-calendar__action__icon">
+					<u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonthHandler(1)"></u-icon>
+				</view>
+				<view class="u-calendar__action__icon">
+					<u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor" @click="changeYearHandler(1)"></u-icon>
+				</view>
+			</view>
+			<view class="u-calendar__week-day">
+				<view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{item}}</view>
+			</view>
+			<view class="u-calendar__content">
+				<!-- 前置空白部分 -->
+				<block v-for="(item, index) in weekdayArr" :key="index">
+					<view class="u-calendar__content__item"></view>
+				</block>
+				<view class="u-calendar__content__item" :class="{
+					'u-hover-class':openDisAbled(year,month,index+1),
+					'u-calendar__content--start-date': (mode == 'range' && startDate==`${year}-${month}-${index+1}`) || mode== 'date',
+					'u-calendar__content--end-date':(mode== 'range' && endDate==`${year}-${month}-${index+1}`) || mode == 'date'
+				}" :style="{backgroundColor: getColor(index,1)}" v-for="(item, index) in daysArr" :key="index"
+				 @tap="dateClick(index)">
+					<view class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}">
+						<view>{{ index + 1 }}</view>
+					</view>
+					<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
+					<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
+				</view>
+				<view class="u-calendar__content__bg-month">{{month}}</view>
+			</view>
+			<view class="u-calendar__bottom">
+				<view class="u-calendar__bottom__choose">
+					<text>{{mode == 'date' ? activeDate : startDate}}</text>
+					<text v-if="endDate">至{{endDate}}</text>
+				</view>
+				<view class="u-calendar__bottom__btn">
+					<u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">确定</u-button>
+				</view>
+			</view>
+		</view>
+	</u-popup>
+</template>
+<script>
+	/**
+	 * calendar 日历
+	 * @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
+	 * @tutorial http://uviewui.com/components/calendar.html
+	 * @property {String} mode 选择日期的模式，date-为单个日期，range-为选择日期范围
+	 * @property {Boolean} v-model 布尔值变量，用于控制日历的弹出与收起
+	 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
+	 * @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
+	 * @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
+	 * @property {String Number} max-year 可切换的最大年份(默认2050)
+	 * @property {String Number} min-year 最小可选日期(默认1950)
+	 * @property {String Number} min-date 可切换的最小年份(默认1950-01-01)
+	 * @property {String Number} max-date 最大可选日期(默认当前日期)
+	 * @property {String Number} 弹窗顶部左右两边的圆角值，单位rpx(默认20)
+	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
+	 * @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
+	 * @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
+	 * @property {String} color 日期字体的默认颜色(默认#303133)
+	 * @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff)
+	 * @property {String Number} z-index 弹出时的z-index值(默认10075)
+	 * @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
+	 * @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
+	 * @property {String} range-color 选择范围内字体颜色(默认#2979ff)
+	 * @property {String} start-text 起始日期底部的提示文字(默认 '开始')
+	 * @property {String} end-text 结束日期底部的提示文字(默认 '结束')
+	 * @property {String} btn-type 底部确定按钮的主题(默认 'primary')
+	 * @property {String} toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效(默认 '选择日期')
+	 * @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
+	 * @example <u-calendar v-model="show" :mode="mode"></u-calendar>
+	 */
+	
+	export default {
+		name: 'u-calendar',
+    emits: ["update:modelValue", "input", "change"],
+		props: {
+      // 通过双向绑定控制组件的弹出与收起
+      value: {
+      	type: Boolean,
+      	default: false
+      },
+      modelValue: {
+        type: Boolean,
+        default: false
+      },
+			safeAreaInsetBottom: {
+				type: Boolean,
+				default: false
+			},
+			// 是否允许通过点击遮罩关闭Picker
+			maskCloseAble: {
+				type: Boolean,
+				default: true
+			},
+			// 弹出的z-index值
+			zIndex: {
+				type: [String, Number],
+				default: 0
+			},
+			// 是否允许切换年份
+			changeYear: {
+				type: Boolean,
+				default: true
+			},
+			// 是否允许切换月份
+			changeMonth: {
+				type: Boolean,
+				default: true
+			},
+			// date-单个日期选择，range-开始日期+结束日期选择
+			mode: {
+				type: String,
+				default: 'date'
+			},
+			// 可切换的最大年份
+			maxYear: {
+				type: [Number, String],
+				default: 2050
+			},
+			// 可切换的最小年份
+			minYear: {
+				type: [Number, String],
+				default: 1950
+			},
+			// 最小可选日期(不在范围内日期禁用不可选)
+			minDate: {
+				type: [Number, String],
+				default: '1950-01-01'
+			},
+			/**
+			 * 最大可选日期
+			 * 默认最大值为今天，之后的日期不可选
+			 * 2030-12-31
+			 * */
+			maxDate: {
+				type: [Number, String],
+				default: ''
+			},
+			// 弹窗顶部左右两边的圆角值
+			borderRadius: {
+				type: [String, Number],
+				default: 20
+			},
+			// 月份切换按钮箭头颜色
+			monthArrowColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 年份切换按钮箭头颜色
+			yearArrowColor: {
+				type: String,
+				default: '#909399'
+			},
+			// 默认日期字体颜色
+			color: {
+				type: String,
+				default: '#303133'
+			},
+			// 选中|起始结束日期背景色
+			activeBgColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 选中|起始结束日期字体颜色
+			activeColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// 范围内日期背景色
+			rangeBgColor: {
+				type: String,
+				default: 'rgba(41,121,255,0.13)'
+			}, 
+			// 范围内日期字体颜色
+			rangeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// mode=range时生效，起始日期自定义文案
+			startText: {
+				type: String,
+				default: '开始'
+			},
+			// mode=range时生效，结束日期自定义文案
+			endText: {
+				type: String,
+				default: '结束'
+			},
+			//按钮样式类型
+			btnType: {
+				type: String,
+				default: 'primary'
+			},
+			// 当前选中日期带选中效果
+			isActiveCurrent: {
+				type: Boolean,
+				default: true
+			},
+			// 切换年月是否触发事件 mode=date时生效
+			isChange: {
+				type: Boolean,
+				default: false
+			},
+			// 是否显示右上角的关闭图标
+			closeable: {
+				type: Boolean,
+				default: true
+			},
+			// 顶部的提示文字
+			toolTip: {
+				type: String,
+				default: '选择日期'
+			},
+			// 遮罩的模糊度
+			blur: {
+				type: [Number, String],
+				default: 0
+			},
+		},
+		data() {
+			return {
+        popupValue:false,
+				// 星期几,值为1-7
+				weekday: 1, 
+				weekdayArr:[],
+				// 当前月有多少天
+				days: 0, 
+				daysArr:[],
+				showTitle: '',
+				year: 2020,
+				month: 0,
+				day: 0,
+				startYear: 0,
+				startMonth: 0,
+				startDay: 0,
+				endYear: 0,
+				endMonth: 0,
+				endDay: 0,
+				today: '',
+				activeDate: '',
+				startDate: '',
+				endDate: '',
+				isStart: true,
+				min: null,
+				max: null,
+				weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
+			};
+		},
+		computed: {
+			valueCom() {
+				// #ifndef VUE3
+				return this.value;
+				// #endif
+			
+				// #ifdef VUE3
+				return this.modelValue;
+				// #endif
+			},
+			dataChange() {
+				return `${this.mode}-${this.minDate}-${this.maxDate}`;
+			},
+			uZIndex() {
+				// 如果用户有传递z-index值，优先使用
+				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+			}
+		},
+		watch: {
+			dataChange(val) {
+				this.init()
+			},
+      valueCom(v1, v2) {
+        this.popupValue = v1;
+      }
+		},
+		created() {
+			this.init()
+		},
+		methods: {
+			getColor(index, type) {
+				let color = type == 1 ? '' : this.color;
+				let day = index + 1
+				let date = `${this.year}-${this.month}-${day}`
+				let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
+				let start = this.startDate.replace(/\-/g, '/')
+				let end = this.endDate.replace(/\-/g, '/')
+				if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
+					color = type == 1 ? this.activeBgColor : this.activeColor;
+				} else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
+					color = type == 1 ? this.rangeBgColor : this.rangeColor;
+				}
+				return color;
+			},
+			init() {
+				let now = new Date();
+				this.year = now.getFullYear();
+				this.month = now.getMonth() + 1;
+				this.day = now.getDate();
+				this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
+				this.activeDate = this.today;
+				this.min = this.initDate(this.minDate);
+				this.max = this.initDate(this.maxDate || this.today);
+				this.startDate = "";
+				this.startYear = 0;
+				this.startMonth = 0;
+				this.startDay = 0;
+				this.endYear = 0;
+				this.endMonth = 0;
+				this.endDay = 0;
+				this.endDate = "";
+				this.isStart = true;
+				this.changeData();
+			},
+			//日期处理
+			initDate(date) {
+				let fdate = date.split('-');
+				return {
+					year: Number(fdate[0] || 1920),
+					month: Number(fdate[1] || 1),
+					day: Number(fdate[2] || 1)
+				}
+			},
+			openDisAbled: function(year, month, day) {
+				let bool = true;
+				let date = `${year}/${month}/${day}`;
+				// let today = this.today.replace(/\-/g, '/');
+				let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
+				let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
+				let timestamp = new Date(date).getTime();
+				if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
+					bool = false;
+				}
+				return bool;
+			},
+			generateArray: function(start, end) {
+				return Array.from(new Array(end + 1).keys()).slice(start);
+			},
+			formatNum: function(num) {
+				return num < 10 ? '0' + num : num + '';
+			},
+			//一个月有多少天
+			getMonthDay(year, month) {
+				let days = new Date(year, month, 0).getDate();
+				return days;
+			},
+			getWeekday(year, month) {
+				let date = new Date(`${year}/${month}/01 00:00:00`);
+				return date.getDay();
+			},
+			checkRange(year) {
+				let overstep = false;
+				if (year < this.minYear || year > this.maxYear) {
+					uni.showToast({
+						title: "日期超出范围啦~",
+						icon: 'none'
+					})
+					overstep = true;
+				}
+				return overstep;
+			},
+			changeMonthHandler(isAdd) {
+				if (isAdd) {
+					let month = this.month + 1;
+					let year = month > 12 ? this.year + 1 : this.year;
+					if (!this.checkRange(year)) {
+						this.month = month > 12 ? 1 : month;
+						this.year = year;
+						this.changeData();
+					}
+
+				} else {
+					let month = this.month - 1;
+					let year = month < 1 ? this.year - 1 : this.year;
+					if (!this.checkRange(year)) {
+						this.month = month < 1 ? 12 : month;
+						this.year = year;
+						this.changeData();
+					}
+				}
+			},
+			changeYearHandler(isAdd) {
+				let year = isAdd ? this.year + 1 : this.year - 1;
+				if (!this.checkRange(year)) {
+					this.year = year;
+					this.changeData();
+				}
+			},
+			changeData() {
+				this.days = this.getMonthDay(this.year, this.month);
+				this.daysArr=this.generateArray(1,this.days)
+				this.weekday = this.getWeekday(this.year, this.month);
+				this.weekdayArr=this.generateArray(1,this.weekday)
+				this.showTitle = `${this.year}年${this.month}月`;
+				if (this.isChange && this.mode == 'date') {
+					this.btnFix(true);
+				}
+			},
+			dateClick: function(day) {
+				day += 1;
+				if (!this.openDisAbled(this.year, this.month, day)) {
+					this.day = day;
+					let date = `${this.year}-${this.month}-${day}`;
+					if (this.mode == 'date') {
+						this.activeDate = date;
+					} else {
+						let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime()
+						if (this.isStart || compare) {
+							this.startDate = date;
+							this.startYear = this.year;
+							this.startMonth = this.month;
+							this.startDay = this.day;
+							this.endYear = 0;
+							this.endMonth = 0;
+							this.endDay = 0;
+							this.endDate = "";
+							this.activeDate = "";
+							this.isStart = false;
+						} else {
+							this.endDate = date;
+							this.endYear = this.year;
+							this.endMonth = this.month;
+							this.endDay = this.day;
+							this.isStart = true;
+						}
+					}
+				}
+			},
+			close() {
+				// 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗
+				this.$emit('input', false);
+        this.$emit("update:modelValue", false);
+			},
+			getWeekText(date) {
+				date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
+				let week = date.getDay();
+				return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
+			},
+			btnFix(show) {
+				if (!show) {
+					this.close();
+				}
+				if (this.mode == 'date') {
+					let arr = this.activeDate.split('-')
+					let year = this.isChange ? this.year : Number(arr[0]);
+					let month = this.isChange ? this.month : Number(arr[1]);
+					let day = this.isChange ? this.day : Number(arr[2]);
+					//当前月有多少天
+					let days = this.getMonthDay(year, month);
+					let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
+					let weekText = this.getWeekText(result);
+					let isToday = false;
+					if (`${year}-${month}-${day}` == this.today) {
+						//今天
+						isToday = true;
+					}
+					this.$emit('change', {
+						year: year,
+						month: month,
+						day: day,
+						days: days,
+						result: result,
+						week: weekText,
+						isToday: isToday,
+						// switch: show //是否是切换年月操作
+					});
+				} else {
+					if (!this.startDate || !this.endDate) return;
+					let startMonth = this.formatNum(this.startMonth);
+					let startDay = this.formatNum(this.startDay);
+					let startDate = `${this.startYear}-${startMonth}-${startDay}`;
+					let startWeek = this.getWeekText(startDate)
+
+					let endMonth = this.formatNum(this.endMonth);
+					let endDay = this.formatNum(this.endDay);
+					let endDate = `${this.endYear}-${endMonth}-${endDay}`;
+					let endWeek = this.getWeekText(endDate);
+					this.$emit('change', {
+						startYear: this.startYear,
+						startMonth: this.startMonth,
+						startDay: this.startDay,
+						startDate: startDate,
+						startWeek: startWeek,
+						endYear: this.endYear,
+						endMonth: this.endMonth,
+						endDay: this.endDay,
+						endDate: endDate,
+						endWeek: endWeek
+					});
+				}
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-calendar {
+		color: $u-content-color;
+		
+		&__header {
+			width: 100%;
+			box-sizing: border-box;
+			font-size: 30rpx;
+			background-color: #fff;
+			color: $u-main-color;
+			
+			&__text {
+				margin-top: 30rpx;
+				padding: 0 60rpx;
+				@include vue-flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+		
+		&__action {
+			padding: 40rpx 0 40rpx 0;
+			
+			&__icon {
+				margin: 0 16rpx;
+			}
+			
+			&__text {
+				padding: 0 16rpx;
+				color: $u-main-color;
+				font-size: 32rpx;
+				line-height: 32rpx;
+				font-weight: bold;
+			}
+		}
+	
+		&__week-day {
+			@include vue-flex;
+			align-items: center;
+			justify-content: center;
+			padding: 6px 0;
+			overflow: hidden;
+			
+			&__text {
+				flex: 1;
+				text-align: center;
+			}
+		}
+	
+		&__content {
+			width: 100%;
+			@include vue-flex;
+			flex-wrap: wrap;
+			padding: 6px 0;
+			box-sizing: border-box;
+			background-color: #fff;
+			position: relative;
+			
+			&--end-date {
+				border-top-right-radius: 8rpx;
+				border-bottom-right-radius: 8rpx;
+			}
+			
+			&--start-date {
+				border-top-left-radius: 8rpx;
+				border-bottom-left-radius: 8rpx;
+			}
+			
+			&__item {
+				width: 14.2857%;
+				@include vue-flex;
+				align-items: center;
+				justify-content: center;
+				padding: 6px 0;
+				overflow: hidden;
+				position: relative;
+				z-index: 2;
+				
+				&__inner {
+					height: 84rpx;
+					@include vue-flex;
+					align-items: center;
+					justify-content: center;
+					flex-direction: column;
+					font-size: 32rpx;
+					position: relative;
+					border-radius: 50%;
+					
+					&__desc {
+						width: 100%;
+						font-size: 24rpx;
+						line-height: 24rpx;
+						transform: scale(0.75);
+						transform-origin: center center;
+						position: absolute;
+						left: 0;
+						text-align: center;
+						bottom: 2rpx;
+					}
+				}
+				
+				&__tips {
+					width: 100%;
+					font-size: 24rpx;
+					line-height: 24rpx;
+					position: absolute;
+					left: 0;
+					transform: scale(0.8);
+					transform-origin: center center;
+					text-align: center;
+					bottom: 8rpx;
+					z-index: 2;
+				}
+			}
+			
+			&__bg-month {
+				position: absolute;
+				font-size: 130px;
+				line-height: 130px;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				color: #e4e7ed;
+				z-index: 1;
+			}
+		}
+	
+		&__bottom {
+			width: 100%;
+			@include vue-flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			background-color: #fff;
+			padding: 0 40rpx 30rpx;
+			box-sizing: border-box;
+			font-size: 24rpx;
+			color: $u-tips-color;
+			
+			&__choose {
+				height: 50rpx;
+			}
+			
+			&__btn {
+				width: 100%;
+			}
+		}
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-car-keyboard/u-car-keyboard.vue

@@ -0,0 +1,267 @@
+<template>
+	<view class="u-keyboard" @touchmove.stop.prevent="() => {}">
+		<view class="u-keyboard-grids">
+      <view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i">
+        <view :hover-stay-time="100" @touchstart="carInputClick(i, j)" hover-class="u-carinput-hover" class="u-keyboard-grids-btn"
+         v-for="(item, j) in group" :key="j">
+          {{ item }}
+        </view>
+      </view>
+      <view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back"
+       hover-class="u-hover-class">
+        <u-icon :size="38" name="backspace" :bold="true"></u-icon>
+      </view>
+      <view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @click="changeCarInputMode">
+        <text class="zh" :class="[!abc ? 'active' : 'inactive']">中</text>
+        /
+        <text class="en" :class="[abc ? 'active' : 'inactive']">英</text>
+      </view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "u-keyboard",
+    emits: ["change", "backspace"],
+		props: {
+			// 是否打乱键盘按键的顺序
+			random: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+				// 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
+				abc: false
+			};
+		},
+		computed: {
+			areaList() {
+				let data = [
+					'京',
+					'沪',
+					'粤',
+					'津',
+					'冀',
+					'豫',
+					'云',
+					'辽',
+					'黑',
+					'湘',
+					'皖',
+					'鲁',
+					'苏',
+					'浙',
+					'赣',
+					'鄂',
+					'桂',
+					'甘',
+					'晋',
+					'陕',
+					'蒙',
+					'吉',
+					'闽',
+					'贵',
+					'渝',
+					'川',
+					'青',
+					'琼',
+					'宁',
+					'挂',
+					'藏',
+					'港',
+					'澳',
+					'新',
+					'使',
+					'学'
+				];
+				let tmp = [];
+				// 打乱顺序
+				if (this.random) data = this.$u.randomArray(data);
+				// 切割成二维数组
+				tmp[0] = data.slice(0, 10);
+				tmp[1] = data.slice(10, 20);
+				tmp[2] = data.slice(20, 30);
+				tmp[3] = data.slice(30, 36);
+				return tmp;
+			},
+			EngKeyBoardList() {
+				let data = [
+					1,
+					2,
+					3,
+					4,
+					5,
+					6,
+					7,
+					8,
+					9,
+					0,
+					'Q',
+					'W',
+					'E',
+					'R',
+					'T',
+					'Y',
+					'U',
+					'I',
+					'O',
+					'P',
+					'A',
+					'S',
+					'D',
+					'F',
+					'G',
+					'H',
+					'J',
+					'K',
+					'L',
+					'Z',
+					'X',
+					'C',
+					'V',
+					'B',
+					'N',
+					'M'
+				];
+				let tmp = [];
+				if (this.random) data = this.$u.randomArray(data);
+				tmp[0] = data.slice(0, 10);
+				tmp[1] = data.slice(10, 20);
+				tmp[2] = data.slice(20, 30);
+				tmp[3] = data.slice(30, 36);
+				return tmp;
+			}
+		},
+		methods: {
+			// 点击键盘按钮
+			carInputClick(i, j) {
+        let value = '';
+        // 不同模式，获取不同数组的值
+        if (this.abc) value = this.EngKeyBoardList[i][j];
+        else value = this.areaList[i][j];
+        if(!this.abc) this.abc = true;
+        this.$emit('change', value);
+        if(this.vibrate) uni.vibrateShort();
+			},
+			// 修改汽车牌键盘的输入模式，中文|英文
+			changeCarInputMode() {
+				this.abc = !this.abc;
+			},
+			// 修改汽车牌键盘的输入模式，中文|英文
+			updateCarInputMode(abc) {
+				this.abc = abc;
+			},
+			// 点击退格键
+			backspaceClick() {
+				let count = 1;
+				this.backspaceFn(count);
+				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
+				this.timer = null;
+				this.timer = setInterval(() => {
+					count++;
+					this.backspaceFn(count);
+				}, 250);
+			},
+			backspaceFn(count){
+				this.$emit('backspace',count);
+			},
+			clearTimer() {
+				clearInterval(this.timer);
+				this.timer = null;
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-keyboard-grids {
+		background: rgb(215, 215, 217);
+		padding: 24rpx 0;
+		position: relative;
+	}
+
+	.u-keyboard-grids-item {
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.u-keyboard-grids-btn {
+		text-decoration: none;
+		width: 62rpx;
+		flex: 0 0 64rpx;
+		height: 80rpx;
+		/* #ifndef APP-NVUE */
+		display: inline-flex;		
+		/* #endif */
+		font-size: 36rpx;
+		text-align: center;
+		line-height: 80rpx;
+		background-color: #fff;
+		margin: 8rpx 5rpx;
+		border-radius: 8rpx;
+		box-shadow: 0 2rpx 0rpx #888992;
+		font-weight: 500;
+		justify-content: center;
+	}
+
+	.u-carinput-hover {
+		background-color: rgb(185, 188, 195) !important;
+	}
+
+	.u-keyboard-back {
+		position: absolute;
+		width: 96rpx;
+		right: 22rpx;
+		bottom: 32rpx;
+		height: 80rpx;
+		background-color: rgb(185, 188, 195);
+		@include vue-flex;
+		align-items: center;
+		border-radius: 8rpx;
+		justify-content: center;
+		box-shadow: 0 2rpx 0rpx #888992;
+	}
+
+	.u-keyboard-change {
+		font-size: 24rpx;
+		box-shadow: 0 2rpx 0rpx #888992;
+		position: absolute;
+		width: 96rpx;
+		left: 22rpx;
+		line-height: 1;
+		bottom: 32rpx;
+		height: 80rpx;
+		background-color: #ffffff;
+		@include vue-flex;
+		align-items: center;
+		border-radius: 8rpx;
+		justify-content: center;
+	}
+
+	.u-keyboard-change .inactive.zh {
+		transform: scale(0.85) translateY(-10rpx);
+	}
+
+	.u-keyboard-change .inactive.en {
+		transform: scale(0.85) translateY(10rpx);
+	}
+
+	.u-keyboard-change .active {
+		color: rgb(237, 112, 64);
+		font-size: 30rpx;
+	}
+
+	.u-keyboard-change .zh {
+		transform: translateY(-10rpx);
+	}
+
+	.u-keyboard-change .en {
+		transform: translateY(10rpx);
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-card/u-card.vue

@@ -0,0 +1,300 @@
+<template>
+	<view
+		class="u-card"
+		@tap.stop="click"
+		:class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': borderRadius > 0 }"
+		:style="{
+			borderRadius: borderRadius + 'rpx',
+			margin: margin,
+			boxShadow: boxShadow
+		}"
+	>
+		<view
+			v-if="showHead"
+			class="u-card__head"
+			:style="[{padding: padding + 'rpx'}, headStyle]"
+			:class="{
+				'u-border-bottom': headBorderBottom
+			}"
+			@tap="headClick"
+		>
+			<view v-if="!$slots.head" class="u-flex u-row-between">
+				<view class="u-card__head--left u-flex u-line-1" v-if="title">
+					<image
+						:src="thumb"
+						class="u-card__head--left__thumb"
+						mode="aspectfull"
+						v-if="thumb"
+						:style="{ 
+							height: thumbWidth + 'rpx', 
+							width: thumbWidth + 'rpx', 
+							borderRadius: thumbCircle ? '100rpx' : '6rpx' 
+						}"
+					></image>
+					<text
+						class="u-card__head--left__title u-line-1"
+						:style="{
+							fontSize: titleSize + 'rpx',
+							color: titleColor
+						}"
+					>
+						{{ title }}
+					</text>
+				</view>
+				<view class="u-card__head--right u-line-1" v-if="subTitle">
+					<text
+						class="u-card__head__title__text"
+						:style="{
+							fontSize: subTitleSize + 'rpx',
+							color: subTitleColor
+						}"
+					>
+						{{ subTitle }}
+					</text>
+				</view>
+			</view>
+			<slot name="head" v-else />
+		</view>
+		<view @tap="bodyClick" class="u-card__body" :style="[{padding: padding + 'rpx'}, bodyStyle]"><slot name="body" /></view>
+		<view
+			v-if="showFoot"
+			class="u-card__foot"
+			 @tap="footClick"
+			:style="[{padding: $slots.foot ? padding + 'rpx' : 0}, footStyle]"
+			:class="{
+				'u-border-top': footBorderTop
+			}"
+		>
+			<slot name="foot" />
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * card 卡片
+ * @description 卡片组件一般用于多个列表条目，且风格统一的场景
+ * @tutorial https://www.uviewui.com/components/card.html
+ * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
+ * @property {String} title 头部左边的标题
+ * @property {String} title-color 标题颜色（默认#303133）
+ * @property {String | Number} title-size 标题字体大小，单位rpx（默认30）
+ * @property {String} sub-title 头部右边的副标题
+ * @property {String} sub-title-color 副标题颜色（默认#909399）
+ * @property {String | Number} sub-title-size 副标题字体大小（默认26）
+ * @property {Boolean} border 是否显示边框（默认true）
+ * @property {String | Number} index 用于标识点击了第几个卡片
+ * @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
+ * @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
+ * @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16）
+ * @property {Object} head-style 头部自定义样式，对象形式
+ * @property {Object} body-style 中部自定义样式，对象形式
+ * @property {Object} foot-style 底部自定义样式，对象形式
+ * @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
+ * @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
+ * @property {Boolean} show-head 是否显示头部（默认true）
+ * @property {Boolean} show-head 是否显示尾部（默认true）
+ * @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
+ * @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60）
+ * @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
+ * @event {Function} click 整个卡片任意位置被点击时触发
+ * @event {Function} head-click 卡片头部被点击时触发
+ * @event {Function} body-click 卡片主体部分被点击时触发
+ * @event {Function} foot-click 卡片底部部分被点击时触发
+ * @example <u-card padding="30" title="card"></u-card>
+ */
+export default {
+	name: 'u-card',
+  emits: ["click", "head-click", "body-click", "foot-click"],
+	props: {
+		// 与屏幕两侧是否留空隙
+		full: {
+			type: Boolean,
+			default: false
+		},
+		// 标题
+		title: {
+			type: String,
+			default: ''
+		},
+		// 标题颜色
+		titleColor: {
+			type: String,
+			default: '#303133'
+		},
+		// 标题字体大小，单位rpx
+		titleSize: {
+			type: [Number, String],
+			default: '30'
+		},
+		// 副标题
+		subTitle: {
+			type: String,
+			default: ''
+		},
+		// 副标题颜色
+		subTitleColor: {
+			type: String,
+			default: '#909399'
+		},
+		// 副标题字体大小，单位rpx
+		subTitleSize: {
+			type: [Number, String],
+			default: '26'
+		},
+		// 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
+		border: {
+			type: Boolean,
+			default: true
+		},
+		// 用于标识点击了第几个
+		index: {
+			type: [Number, String, Object],
+			default: ''
+		},
+		// 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx"
+		margin: {
+			type: String,
+			default: '30rpx'
+		},
+		// card卡片的圆角
+		borderRadius: {
+			type: [Number, String],
+			default: '16'
+		},
+		// 头部自定义样式，对象形式
+		headStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 主体自定义样式，对象形式
+		bodyStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 底部自定义样式，对象形式
+		footStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 头部是否下边框
+		headBorderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 底部是否有上边框
+		footBorderTop: {
+			type: Boolean,
+			default: true
+		},
+		// 标题左边的缩略图
+		thumb: {
+			type: String,
+			default: ''
+		},
+		// 缩略图宽高，单位rpx
+		thumbWidth: {
+			type: [String, Number],
+			default: '60'
+		},
+		// 缩略图是否为圆形
+		thumbCircle: {
+			type: Boolean,
+			default: false
+		},
+		// 给head，body，foot的内边距
+		padding: {
+			type: [String, Number],
+			default: '30'
+		},
+		// 是否显示头部
+		showHead: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示尾部
+		showFoot: {
+			type: Boolean,
+			default: true
+		},
+		// 卡片外围阴影，字符串形式
+		boxShadow: {
+			type: String,
+			default: 'none'
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		click() {
+			this.$emit('click', this.index);
+		},
+		headClick() {
+			this.$emit('head-click', this.index);
+		},
+		bodyClick() {
+			this.$emit('body-click', this.index);
+		},
+		footClick() {
+			this.$emit('foot-click', this.index);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+	
+.u-card {
+	position: relative;
+	overflow: hidden;
+	font-size: 28rpx;
+	background-color: #ffffff;
+	box-sizing: border-box;
+	
+	&-full {
+		// 如果是与屏幕之间不留空隙，应该设置左右边距为0
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		width: 100%;
+	}
+	
+	&--border:after {
+		border-radius: 16rpx;
+	}
+
+	&__head {
+		&--left {
+			color: $u-main-color;
+			
+			&__thumb {
+				margin-right: 16rpx;
+			}
+			
+			&__title {
+				max-width: 400rpx;
+			}
+		}
+
+		&--right {
+			color: $u-tips-color;
+			margin-left: 6rpx;
+		}
+	}
+
+	&__body {
+		color: $u-content-color;
+	}
+
+	&__foot {
+		color: $u-tips-color;
+	}
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-cell-group/u-cell-group.vue

@@ -0,0 +1,70 @@
+<template>
+	<view class="u-cell-box">
+		<view class="u-cell-title" v-if="title" :style="[titleStyle]">
+			{{title}}
+		</view>
+		<view class="u-cell-item-box" :class="{'u-border-bottom u-border-top': border}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * cellGroup 单元格父组件Group
+	 * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-item
+	 * @tutorial https://www.uviewui.com/components/cell.html
+	 * @property {String} title 分组标题
+	 * @property {Boolean} border 是否显示外边框（默认true）
+	 * @property {Object} title-style 分组标题的的样式，对象形式，如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'}
+	 * @example <u-cell-group title="设置喜好">
+	 */
+	export default {
+		name: "u-cell-group",
+		props: {
+			// 分组标题
+			title: {
+				type: String,
+				default: ''
+			},
+			// 是否显示分组list上下边框
+			border: {
+				type: Boolean,
+				default: true
+			},
+			// 分组标题的样式，对象形式，注意驼峰属性写法
+			// 类似 {'font-size': '24rpx'} 和 {'fontSize': '24rpx'}
+			titleStyle: {
+				type: Object,
+				default () {
+					return {};
+				}
+			}
+		},
+		data() {
+			return {
+				index: 0,
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-cell-box {
+		width: 100%;
+	}
+
+	.u-cell-title {
+		padding: 30rpx 32rpx 10rpx 32rpx;
+		font-size: 30rpx;
+		text-align: left;
+		color: $u-tips-color;
+	}
+
+	.u-cell-item-box {
+		background-color: #FFFFFF;
+		flex-direction: row;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-cell-item/u-cell-item.vue

@@ -0,0 +1,317 @@
+<template>
+	<view
+		@tap="click"
+		class="u-cell"
+		:class="{ 'u-border-bottom': borderBottom, 'u-border-top': borderTop, 'u-col-center': center, 'u-cell--required': required }"
+		hover-stay-time="150"
+		:hover-class="hoverClass"
+		:style="{
+			backgroundColor: bgColor
+		}"
+	>
+		<u-icon :size="iconSize" :name="icon" v-if="icon" :custom-style="iconStyle" class="u-cell__left-icon-wrap"></u-icon>
+		<view class="u-flex" v-else>
+			<slot name="icon"></slot>
+		</view>
+		<view
+			class="u-cell_title"
+			:style="[
+				{
+					width: titleWidth ? titleWidth + 'rpx' : 'auto'
+				},
+				titleStyle
+			]"
+		>
+			<block v-if="title !== ''">{{ title }}</block>
+			<slot name="title" v-else></slot>
+
+			<view class="u-cell__label" v-if="label || $slots.label" :style="[labelStyle]">
+				<block v-if="label !== ''">{{ label }}</block>
+				<slot name="label" v-else></slot>
+			</view>
+		</view>
+
+		<view class="u-cell__value" :style="[valueStyle]">
+			<block class="u-cell__value" v-if="value !== ''">{{ value }}</block>
+			<slot v-else></slot>
+		</view>
+		<view class="u-flex u-cell_right" v-if="$slots['right-icon']">
+			<slot name="right-icon"></slot>
+		</view>
+		<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
+	</view>
+</template>
+
+<script>
+/**
+ * cellItem 单元格Item
+ * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-group使用
+ * @tutorial https://www.uviewui.com/components/cell.html
+ * @property {String} title 左侧标题
+ * @property {String} icon 左侧图标名，只支持uView内置图标，见Icon 图标
+ * @property {Object} icon-style 左边图标的样式，对象形式
+ * @property {String} value 右侧内容
+ * @property {String} label 标题下方的描述信息
+ * @property {Boolean} border-bottom 是否显示cell的下边框（默认true）
+ * @property {Boolean} border-top 是否显示cell的上边框（默认false）
+ * @property {Boolean} center 是否使内容垂直居中（默认false）
+ * @property {String} hover-class 是否开启点击反馈，none为无效果（默认true）
+ * // @property {Boolean} border-gap border-bottom为true时，Cell列表中间的条目的下边框是否与左边有一个间隔（默认true）
+ * @property {Boolean} arrow 是否显示右侧箭头（默认true）
+ * @property {Boolean} required 箭头方向，可选值（默认right）
+ * @property {Boolean} arrow-direction 是否显示左边表示必填的星号（默认false）
+ * @property {Object} title-style 标题样式，对象形式
+ * @property {Object} value-style 右侧内容样式，对象形式
+ * @property {Object} label-style 标题下方描述信息的样式，对象形式
+ * @property {String} bg-color 背景颜色（默认transparent）
+ * @property {String Number} index 用于在click事件回调中返回，标识当前是第几个Item
+ * @property {String Number} title-width 标题的宽度，单位rpx
+ * @example <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
+ */
+export default {
+	name: 'u-cell-item',
+	emits: ["click"],
+	props: {
+		// 左侧图标名称(只能uView内置图标)，或者图标src
+		icon: {
+			type: String,
+			default: ''
+		},
+		// 左侧标题
+		title: {
+			type: [String, Number],
+			default: ''
+		},
+		// 右侧内容
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		// 标题下方的描述信息
+		label: {
+			type: [String, Number],
+			default: ''
+		},
+		// 是否显示下边框
+		borderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示上边框
+		borderTop: {
+			type: Boolean,
+			default: false
+		},
+		// 多个cell中，中间的cell显示下划线时，下划线是否给一个到左边的距离
+		// 1.4.0版本废除此参数，默认边框由border-top和border-bottom提供，此参数会造成干扰
+		// borderGap: {
+		// 	type: Boolean,
+		// 	default: true
+		// },
+		// 是否开启点击反馈，即点击时cell背景为灰色，none为无效果
+		hoverClass: {
+			type: String,
+			default: 'u-cell-hover'
+		},
+		// 是否显示右侧箭头
+		arrow: {
+			type: Boolean,
+			default: true
+		},
+		// 内容是否垂直居中
+		center: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示左边表示必填的星号
+		required: {
+			type: Boolean,
+			default: false
+		},
+		// 标题的宽度，单位rpx
+		titleWidth: {
+			type: [Number, String],
+			default: ''
+		},
+		// 右侧箭头方向，可选值：right|up|down，默认为right
+		arrowDirection: {
+			type: String,
+			default: 'right'
+		},
+		// 控制标题的样式
+		titleStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 右侧显示内容的样式
+		valueStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 描述信息的样式
+		labelStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: 'transparent'
+		},
+		// 用于识别被点击的是第几个cell
+		index: {
+			type: [String, Number],
+			default: ''
+		},
+		// 是否使用lable插槽
+		useLabelSlot: {
+			type: Boolean,
+			default: false
+		},
+		// 左边图标的大小，单位rpx，只对传入icon字段时有效
+		iconSize: {
+			type: [Number, String],
+			default: 34
+		},
+		// 左边图标的样式，对象形式
+		iconStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+	},
+	data() {
+		return {
+
+		};
+	},
+	computed: {
+		arrowStyle() {
+			let style = {};
+			if (this.arrowDirection == 'up') style.transform = 'rotate(-90deg)';
+			else if (this.arrowDirection == 'down') style.transform = 'rotate(90deg)';
+			else style.transform = 'rotate(0deg)';
+			return style;
+		}
+	},
+	methods: {
+		click() {
+			this.$emit('click', this.index);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+.u-cell {
+	@include vue-flex;
+	align-items: center;
+	position: relative;
+	/* #ifndef APP-NVUE */
+	box-sizing: border-box;
+	/* #endif */
+	width: 100%;
+	padding: 26rpx 32rpx;
+	font-size: 28rpx;
+	line-height: 54rpx;
+	color: $u-content-color;
+	background-color: #fff;
+	text-align: left;
+}
+
+.u-cell_title {
+	font-size: 28rpx;
+}
+
+.u-cell__left-icon-wrap {
+	margin-right: 10rpx;
+	font-size: 32rpx;
+}
+
+.u-cell__right-icon-wrap {
+	margin-left: 10rpx;
+	color: #969799;
+	font-size: 28rpx;
+}
+
+.u-cell__left-icon-wrap,
+.u-cell__right-icon-wrap {
+	@include vue-flex;
+	align-items: center;
+	height: 48rpx;
+}
+
+.u-cell-border:after {
+	position: absolute; 
+	/* #ifndef APP-NVUE */
+	box-sizing: border-box;
+	content: ' ';
+	pointer-events: none;
+	border-bottom: 1px solid $u-border-color;
+	/* #endif */
+	right: 0;
+	left: 0;
+	top: 0;
+	transform: scaleY(0.5);
+}
+
+.u-cell-border {
+	position: relative;
+}
+
+.u-cell__label {
+	margin-top: 6rpx;
+	font-size: 26rpx;
+	line-height: 36rpx;
+	color: $u-tips-color;
+	/* #ifndef APP-NVUE */
+	word-wrap: break-word;
+	/* #endif */
+}
+
+.u-cell__value {
+	overflow: hidden;
+	text-align: right;
+	/* #ifndef APP-NVUE */
+	vertical-align: middle;
+	/* #endif */
+	color: $u-tips-color;
+	font-size: 26rpx;
+}
+
+.u-cell__title,
+.u-cell__value {
+	flex: 1;
+}
+
+.u-cell--required {
+	/* #ifndef APP-NVUE */
+	overflow: visible;
+	/* #endif */
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-cell--required:before {
+	position: absolute;
+	/* #ifndef APP-NVUE */
+	content: '*';
+	/* #endif */
+	left: 8px;
+	margin-top: 4rpx;
+	font-size: 14px;
+	color: $u-type-error;
+}
+
+.u-cell_right {
+	line-height: 1;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-checkbox-group/u-checkbox-group.vue

@@ -0,0 +1,178 @@
+<template>
+	<view class="u-checkbox-group u-clearfix" :class="uFromData.inputAlign == 'right' ? 'flex-end' : ''"><slot></slot></view>
+</template>
+
+<script>
+import Emitter from "../../libs/util/emitter.js";
+/**
+ * checkboxGroup 开关选择器父组件Group
+ * @description 复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便
+ * @tutorial https://www.uviewui.com/components/checkbox.html
+ * @property {String Number} max 最多能选中多少个checkbox（默认999）
+ * @property {String Number} size 组件整体的大小，单位rpx（默认40）
+ * @property {Boolean} disabled 是否禁用所有checkbox（默认false）
+ * @property {String Number} icon-size 图标大小，单位rpx（默认20）
+ * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false)
+ * @property {String} width 宽度，需带单位
+ * @property {String} width 宽度，需带单位
+ * @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle)
+ * @property {Boolean} wrap 是否每个checkbox都换行（默认false）
+ * @property {String} active-color 选中时的颜色，应用到所有子Checkbox组件（默认#2979ff）
+ * @event {Function} change 任一个checkbox状态发生变化时触发，回调为一个对象
+ * @example <u-checkbox-group></u-checkbox-group>
+ */
+export default {
+	name: "u-checkbox-group",
+	emits: ["update:modelValue", "input", "change"],
+	mixins: [Emitter],
+	props: {
+		// 匹配某一个radio组件，如果某个radio的name值等于此值，那么这个radio就被会选中
+		value: {
+			type: [String, Number, Array, Boolean],
+			default: ""
+		},
+		modelValue: {
+			type: [String, Number, Array, Boolean],
+			default: ""
+		},
+		// 最多能选中多少个checkbox
+		max: {
+			type: [Number, String],
+			default: 999
+		},
+		// 所有选中项的 name
+		// value: {
+		// 	default: Array,
+		// 	default() {
+		// 		return []
+		// 	}
+		// },
+		// 是否禁用所有复选框
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 在表单内提交时的标识符
+		name: {
+			type: [Boolean, String],
+			default: ""
+		},
+		// 是否禁止点击提示语选中复选框
+		labelDisabled: {
+			type: Boolean,
+			default: false
+		},
+		// 形状，square为方形，circle为圆型
+		shape: {
+			type: String,
+			default: "square"
+		},
+		// 选中状态下的颜色
+		activeColor: {
+			type: String,
+			default: "#2979ff"
+		},
+		// 组件的整体大小
+		size: {
+			type: [String, Number],
+			default: 34
+		},
+		// 每个checkbox占u-checkbox-group的宽度
+		width: {
+			type: String,
+			default: "auto"
+		},
+		// 是否每个checkbox都换行
+		wrap: {
+			type: Boolean,
+			default: false
+		},
+		// 图标的大小，单位rpx
+		iconSize: {
+			type: [String, Number],
+			default: 20
+		}
+	},
+	data() {
+		return {
+			values: [],
+			uFromData: {
+				inputAlign: "left"
+			}
+		};
+	},
+	created() {
+		// 如果将children定义在data中，在微信小程序会造成循环引用而报错
+		this.children = [];
+	},
+	mounted() {
+		// 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
+		let parent = this.$u.$parent.call(this, "u-form");
+		if (parent) {
+			Object.keys(this.uFromData).map(key => {
+				this.uFromData[key] = parent[key];
+			});
+		}
+	},
+	methods: {
+		emitEvent(obj) {
+			let values = this.values || [];
+			if (obj.value) {
+				let index = values.indexOf(obj.name);
+				if (index === -1) {
+					values.push(obj.name);
+				}
+			} else {
+				let index = values.indexOf(obj.name);
+				if (index > -1) {
+					values.splice(index, 1);
+				}
+			}
+
+			this.$emit("change", values);
+			// 通过emit事件，设置父组件通过v-model双向绑定的值
+			this.$emit("input", values);
+			this.$emit("update:modelValue", values);
+			// 发出事件，用于在表单组件中嵌入checkbox的情况，进行验证
+			// 由于头条小程序执行迟钝，故需要用几十毫秒的延时
+			setTimeout(() => {
+				// 将当前的值发送到 u-form-item 进行校验
+				this.dispatch("u-form-item", "onFieldChange", values);
+			}, 60);
+		},
+		_emitEvent(obj) {
+			let values = this.values || [];
+			if (obj.value) {
+				let index = values.indexOf(obj.name);
+				if (index === -1) {
+					values.push(obj.name);
+				}
+			} else {
+				let index = values.indexOf(obj.name);
+				if (index > -1) {
+					values.splice(index, 1);
+				}
+			}
+			//this.$emit("change", values);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-checkbox-group {
+	/* #ifndef MP || APP-NVUE */
+	display: inline-flex;
+	flex-wrap: wrap;
+	/* #endif */
+}
+.u-checkbox-group.flex-end {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;
+	justify-content: flex-end;
+	flex-wrap: wrap;
+	/* #endif */
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-checkbox/u-checkbox.vue

@@ -0,0 +1,322 @@
+<template>
+	<view class="u-checkbox" :style="[checkboxStyle]">
+		<view class="u-checkbox__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
+			<u-icon class="u-checkbox__icon-wrap__icon" name="checkbox-mark" :size="checkboxIconSize" :color="iconColor" />
+		</view>
+		<view
+			class="u-checkbox__label"
+			@tap="onClickLabel"
+			:style="{
+				fontSize: $u.addUnit(labelSize)
+			}"
+		>
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * checkbox 复选框
+ * @description 该组件需要搭配checkboxGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。
+ * @tutorial https://www.uviewui.com/components/checkbox.html
+ * @property {String Number} icon-size 图标大小，单位rpx（默认20）
+ * @property {String Number} label-size label字体大小，单位rpx（默认28）
+ * @property {String Number} name checkbox组件的标示符
+ * @property {String} shape 形状，外观形状，shape-方形，circle-圆形(默认circle)
+ * @property {Boolean} disabled 是否禁用
+ * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox
+ * @property {String} active-color 选中时的颜色，如设置CheckboxGroup的active-color将失效
+ * @event {Function} change 某个checkbox状态发生变化时触发，回调为一个对象
+ * @example <u-checkbox v-model="checked" :disabled="false">天涯</u-checkbox>
+ */
+export default {
+	name: "u-checkbox",
+	emits: ["update:modelValue", "input", "change"],
+	props: {
+		// 是否为选中状态
+		value: {
+			type: Boolean,
+			default: false
+		},
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		// checkbox的名称
+		name: {
+			type: [String, Number],
+			default: ""
+		},
+		// 形状，square为方形，circle为圆型
+		shape: {
+			type: String,
+			default: ""
+		},
+		// 是否禁用
+		disabled: {
+			type: [String, Boolean],
+			default: ""
+		},
+		// 是否禁止点击提示语选中复选框
+		labelDisabled: {
+			type: [String, Boolean],
+			default: ""
+		},
+		// 选中状态下的颜色，如设置此值，将会覆盖checkboxGroup的activeColor值
+		activeColor: {
+			type: String,
+			default: ""
+		},
+		// 图标的大小，单位rpx
+		iconSize: {
+			type: [String, Number],
+			default: ""
+		},
+		// label的字体大小，rpx单位
+		labelSize: {
+			type: [String, Number],
+			default: ""
+		},
+		// 组件的整体大小
+		size: {
+			type: [String, Number],
+			default: ""
+		}
+	},
+	data() {
+		return {
+			parentDisabled: false,
+			newParams: {}
+		};
+	},
+	created() {
+		// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
+		this.parent = this.$u.$parent.call(this, "u-checkbox-group");
+		// 如果存在u-checkbox-group，将本组件的this塞进父组件的children中
+		this.parent && this.parent.children.push(this);
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		// 是否禁用，如果父组件u-checkbox-group禁用的话，将会忽略子组件的配置
+		isDisabled() {
+			return this.disabled !== "" ? this.disabled : this.parent ? this.parent.disabled : false;
+		},
+		// 是否禁用label点击
+		isLabelDisabled() {
+			return this.labelDisabled !== "" ? this.labelDisabled : this.parent ? this.parent.labelDisabled : false;
+		},
+		// 组件尺寸，对应size的值，默认值为34rpx
+		checkboxSize() {
+			return this.size ? this.size : this.parent ? this.parent.size : 34;
+		},
+		// 组件的勾选图标的尺寸，默认20
+		checkboxIconSize() {
+			return this.iconSize ? this.iconSize : this.parent ? this.parent.iconSize : 20;
+		},
+		// 组件选中激活时的颜色
+		elActiveColor() {
+			return this.activeColor ? this.activeColor : this.parent ? this.parent.activeColor : "primary";
+		},
+		// 组件的形状
+		elShape() {
+			return this.shape ? this.shape : this.parent ? this.parent.shape : "square";
+		},
+		iconStyle() {
+			let style = {};
+			// 既要判断是否手动禁用，还要判断用户v-model绑定的值，如果绑定为false，那么也无法选中
+			if (this.elActiveColor && this.valueCom && !this.isDisabled) {
+				style.borderColor = this.elActiveColor;
+				style.backgroundColor = this.elActiveColor;
+			}
+			style.width = this.$u.addUnit(this.checkboxSize);
+			style.height = this.$u.addUnit(this.checkboxSize);
+			return style;
+		},
+		// checkbox内部的勾选图标，如果选中状态，为白色，否则为透明色即可
+		iconColor() {
+			return this.valueCom ? "#ffffff" : "transparent";
+		},
+		iconClass() {
+			let classes = [];
+			classes.push("u-checkbox__icon-wrap--" + this.elShape);
+			if (this.valueCom == true) classes.push("u-checkbox__icon-wrap--checked");
+			if (this.isDisabled) classes.push("u-checkbox__icon-wrap--disabled");
+			if (this.valueCom && this.isDisabled) classes.push("u-checkbox__icon-wrap--disabled--checked");
+			// 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
+			return classes.join(" ");
+		},
+		checkboxStyle() {
+			let style = {};
+			if (this.parent && this.parent.width) {
+				style.width = this.parent.width;
+				// #ifdef MP
+				// 各家小程序因为它们特殊的编译结构，使用float布局
+				style.float = "left";
+				// #endif
+				// #ifndef MP
+				// H5和APP使用flex布局
+				style.flex = `0 0 ${this.parent.width}`;
+				// #endif
+			}
+			if (this.parent && this.parent.wrap) {
+				style.width = "100%";
+				// #ifndef MP
+				// H5和APP使用flex布局，将宽度设置100%，即可自动换行
+				style.flex = "0 0 100%";
+				// #endif
+			}
+			return style;
+		}
+	},
+	mounted() {
+		this._emitEvent();
+	},
+	watch: {
+		valueCom: {
+			handler: function(newVal, oldVal) {
+				this._emitEvent();
+			}
+		}
+	},
+	methods: {
+		_emitEvent() {
+			let value = this.valueCom;
+			let obj = {
+				value,
+				name: this.name
+			};
+			// 执行父组件u-checkbox-group的事件方法
+			if (this.parent && this.parent.emitEvent) this.parent._emitEvent(obj);
+		},
+		onClickLabel() {
+			if (!this.isLabelDisabled && !this.isDisabled) {
+				this.setValue();
+			}
+		},
+		toggle() {
+			if (!this.isDisabled) {
+				this.setValue();
+			}
+		},
+		emitEvent() {
+			let obj = {
+				value: !this.valueCom,
+				name: this.name
+			};
+			this.$emit("change", obj);
+			// 执行父组件u-checkbox-group的事件方法
+			if (this.parent && this.parent.emitEvent) this.parent.emitEvent(obj);
+		},
+		// 设置input的值，这里通过input事件，设置通过v-model绑定的组件的值
+		setValue() {
+			let value = this.valueCom;
+			// 判断是否超过了可选的最大数量
+			let checkedNum = 0;
+			if (this.parent && this.parent.children) {
+				// 只要父组件的某一个子元素的value为true，就加1(已有的选中数量)
+				this.parent.children.map(val => {
+					if (val.value) checkedNum++;
+				});
+			}
+			// 如果原来为选中状态，那么可以取消
+			if (value == true) {
+				this.emitEvent();
+				this.$emit("input", !value);
+				this.$emit("update:modelValue", !value);
+			} else {
+				// 如果超出最多可选项，提示
+				if (this.parent && checkedNum >= this.parent.max) {
+					return this.$u.toast(`最多可选${this.parent.max}项`);
+				}
+				// 如果原来为未选中状态，需要选中的数量少于父组件中设置的max值，才可以选中
+				this.emitEvent();
+				this.$emit("input", !value);
+				this.$emit("update:modelValue", !value);
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-checkbox {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;
+	/* #endif */
+	align-items: center;
+	overflow: hidden;
+	user-select: none;
+	line-height: 1.8;
+
+	&__icon-wrap {
+		color: $u-content-color;
+		flex: none;
+		display: -webkit-flex;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		width: 42rpx;
+		height: 42rpx;
+		color: transparent;
+		text-align: center;
+		transition-property: color, border-color, background-color;
+		font-size: 20px;
+		border: 1px solid #c8c9cc;
+		transition-duration: 0.2s;
+
+		/* #ifdef MP-TOUTIAO */
+		// 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+		&__icon {
+			line-height: 0;
+		}
+		/* #endif */
+
+		&--circle {
+			border-radius: 100%;
+		}
+
+		&--square {
+			border-radius: 6rpx;
+		}
+
+		&--checked {
+			color: #fff;
+			background-color: $u-type-primary;
+			border-color: $u-type-primary;
+		}
+
+		&--disabled {
+			background-color: #ebedf0;
+			border-color: #c8c9cc;
+		}
+
+		&--disabled--checked {
+			color: #c8c9cc !important;
+		}
+	}
+
+	&__label {
+		word-wrap: break-word;
+		margin-left: 10rpx;
+		margin-right: 24rpx;
+		color: $u-content-color;
+		font-size: 30rpx;
+
+		&--disabled {
+			color: #c8c9cc;
+		}
+	}
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-circle-progress/u-circle-progress.vue

@@ -0,0 +1,220 @@
+<template>
+	<view
+		class="u-circle-progress"
+		:style="{
+			width: widthPx + 'px',
+			height: widthPx + 'px',
+			backgroundColor: bgColor
+		}"
+	>
+		<!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
+		<canvas
+			class="u-canvas-bg"
+			:canvas-id="elBgId"
+			:id="elBgId"
+			:style="{
+				width: widthPx + 'px',
+				height: widthPx + 'px'
+			}"
+		></canvas>
+		<canvas
+			class="u-canvas"
+			:canvas-id="elId"
+			:id="elId"
+			:style="{
+				width: widthPx + 'px',
+				height: widthPx + 'px'
+			}"
+		></canvas>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+/**
+ * circleProgress 环形进度条
+ * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
+ * @tutorial https://www.uviewui.com/components/circleProgress.html
+ * @property {String Number} percent 圆环进度百分比值，为数值类型，0-100
+ * @property {String} inactive-color 圆环的底色，默认为灰色(该值无法动态变更)（默认#ececec）
+ * @property {String} active-color 圆环激活部分的颜色(该值无法动态变更)（默认#19be6b）
+ * @property {String Number} width 整个圆环组件的宽度，高度默认等于宽度值，单位rpx（默认200）
+ * @property {String Number} border-width 圆环的边框宽度，单位rpx（默认14）
+ * @property {String Number} duration 整个圆环执行一圈的时间，单位ms（默认呢1500）
+ * @property {String} type 如设置，active-color值将会失效
+ * @property {String} bg-color 整个组件背景颜色，默认为白色
+ * @example <u-circle-progress active-color="#2979ff" :percent="80"></u-circle-progress>
+ */
+export default {
+	name: 'u-circle-progress',
+	props: {
+		// 圆环进度百分比值
+		percent: {
+			type: Number,
+			default: 0,
+			// 限制值在0到100之间
+			validator: val => {
+				return val >= 0 && val <= 100;
+			}
+		},
+		// 底部圆环的颜色（灰色的圆环）
+		inactiveColor: {
+			type: String,
+			default: '#ececec'
+		},
+		// 圆环激活部分的颜色
+		activeColor: {
+			type: String,
+			default: '#19be6b'
+		},
+		// 圆环线条的宽度，单位rpx
+		borderWidth: {
+			type: [Number, String],
+			default: 14
+		},
+		// 整个圆形的宽度，单位rpx
+		width: {
+			type: [Number, String],
+			default: 200
+		},
+		// 整个圆环执行一圈的时间，单位ms
+		duration: {
+			type: [Number, String],
+			default: 1500
+		},
+		// 主题类型
+		type: {
+			type: String,
+			default: ''
+		},
+		// 整个圆环进度区域的背景色
+		bgColor: {
+			type: String,
+			default: '#ffffff'
+		}
+	},
+	data() {
+		return {
+			// #ifdef MP-WEIXIN
+			elBgId: 'uCircleProgressBgId', // 微信小程序中不能使用this.$u.guid()形式动态生成id值，否则会报错
+			elId: 'uCircleProgressElId',
+			// #endif
+			// #ifndef MP-WEIXIN
+			elBgId: this.$u.guid(), // 非微信端的时候，需用动态的id，否则一个页面多个圆形进度条组件数据会混乱
+			elId: this.$u.guid(),
+			// #endif
+			widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
+			borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
+			startAngle: -Math.PI / 2, // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
+			progressContext: null, // 活动圆的canvas上下文
+			newPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
+			oldPercent: 0 // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
+		};
+	},
+	watch: {
+		percent(nVal, oVal = 0) {
+			if (nVal > 100) nVal = 100;
+			if (nVal < 0) oVal = 0;
+			// 此值其实等于this.percent，命名一个新
+			this.newPercent = nVal;
+			this.oldPercent = oVal;
+			setTimeout(() => {
+				// 无论是百分比值增加还是减少，需要操作还是原来的旧的百分比值
+				// 将此值减少或者新增到新的百分比值
+				this.drawCircleByProgress(oVal);
+			}, 50);
+		}
+	},
+	created() {
+		// 赋值，用于加载后第一个画圆使用
+		this.newPercent = this.percent;
+		this.oldPercent = 0;
+	},
+	computed: {
+		// 有type主题时，优先起作用
+		circleColor() {
+			if (['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >= 0) return this.$u.color[this.type];
+			else return this.activeColor;
+		}
+	},
+	mounted() {
+		// 在h5端，必须要做一点延时才起作用，this.$nextTick()无效(HX2.4.7)
+		setTimeout(() => {
+			this.drawProgressBg();
+			this.drawCircleByProgress(this.oldPercent);
+		}, 50);
+	},
+	methods: {
+		drawProgressBg() {
+			let ctx = uni.createCanvasContext(this.elBgId, this);
+			ctx.setLineWidth(this.borderWidthPx); // 设置圆环宽度
+			ctx.setStrokeStyle(this.inactiveColor); // 线条颜色
+			ctx.beginPath(); // 开始描绘路径
+			// 设置一个原点(110,110)，半径为100的圆的路径到当前路径
+			let radius = this.widthPx / 2;
+			ctx.arc(radius, radius, radius - this.borderWidthPx, 0, 2 * Math.PI, false);
+			ctx.stroke(); // 对路径进行描绘
+			ctx.draw();
+		},
+		drawCircleByProgress(progress) {
+			// 第一次操作进度环时将上下文保存到了this.data中，直接使用即可
+			let ctx = this.progressContext;
+			if (!ctx) {
+				ctx = uni.createCanvasContext(this.elId, this);
+				this.progressContext = ctx;
+			}
+			// 表示进度的两端为圆形
+			ctx.setLineCap('round');
+			// 设置线条的宽度和颜色
+			ctx.setLineWidth(this.borderWidthPx);
+			ctx.setStrokeStyle(this.circleColor);
+			// 将总过渡时间除以100，得出每修改百分之一进度所需的时间
+			let time = Math.floor(this.duration / 100);
+			// 结束角的计算依据为：将2π分为100份，乘以当前的进度值，得出终止点的弧度值，加起始角，为整个圆从默认的
+			// 3点钟方向开始画图，转为更好理解的12点钟方向开始作图，这需要起始角和终止角同时加上this.startAngle值
+			let endAngle = ((2 * Math.PI) / 100) * progress + this.startAngle;
+			ctx.beginPath();
+			// 半径为整个canvas宽度的一半
+			let radius = this.widthPx / 2;
+			ctx.arc(radius, radius, radius - this.borderWidthPx, this.startAngle, endAngle, false);
+			ctx.stroke();
+			ctx.draw();
+			// 如果变更后新值大于旧值，意味着增大了百分比
+			if (this.newPercent > this.oldPercent) {
+				// 每次递增百分之一
+				progress++;
+				// 如果新增后的值，大于需要设置的值百分比值，停止继续增加
+				if (progress > this.newPercent) return;
+			} else {
+				// 同理于上面
+				progress--;
+				if (progress < this.newPercent) return;
+			}
+			setTimeout(() => {
+				// 定时器，每次操作间隔为time值，为了让进度条有动画效果
+				this.drawCircleByProgress(progress);
+			}, time);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+.u-circle-progress {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	align-items: center;
+	justify-content: center;
+}
+
+.u-canvas-bg {
+	position: absolute;
+}
+
+.u-canvas {
+	position: absolute;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-col/u-col.vue

@@ -0,0 +1,156 @@
+<template>
+	<view class="u-col" :class="[
+		'u-col-' + span
+	]" :style="{
+		padding: `0 ${Number(gutter)/2 + 'rpx'}`,
+		marginLeft: 100 / 12 * offset + '%',
+		flex: `0 0 ${100 / 12 * span}%`,
+		alignItems: uAlignItem,
+		justifyContent: uJustify,
+		textAlign: textAlign
+	}"
+	 @tap="click">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	/**
+	 * col 布局单元格
+	 * @description 通过基础的 12 分栏，迅速简便地创建布局（搭配<u-row>使用）
+	 * @tutorial https://www.uviewui.com/components/layout.html
+	 * @property {String Number} span 栅格占据的列数，总12等分（默认0）
+	 * @property {String} text-align 文字水平对齐方式（默认left）
+	 * @property {String Number} offset 分栏左边偏移，计算方式与span相同（默认0）
+	 * @example <u-col span="3"><view class="demo-layout bg-purple"></view></u-col>
+	 */
+	export default {
+		name: "u-col",
+		props: {
+			// 占父容器宽度的多少等分，总分为12份
+			span: {
+				type: [Number, String],
+				default: 12
+			},
+			// 指定栅格左侧的间隔数(总12栏)
+			offset: {
+				type: [Number, String],
+				default: 0
+			},
+			// 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
+			justify: {
+				type: String,
+				default: 'start'
+			},
+			// 垂直对齐方式，可选值为top、center、bottom
+			align: {
+				type: String,
+				default: 'center'
+			},
+			// 文字对齐方式
+			textAlign: {
+				type: String,
+				default: 'left'
+			},
+			// 是否阻止事件传播
+			stop: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				gutter: 20, // 给col添加间距，左右边距各占一半，从父组件u-row获取
+			}
+		},
+		created() {
+			this.parent = false;
+		},
+		mounted() {
+			// 获取父组件实例，并赋值给对应的参数
+			this.parent = this.$u.$parent.call(this, 'u-row');
+			if (this.parent) {
+				this.gutter = this.parent.gutter;
+			}
+		},
+		computed: {
+			uJustify() {
+				if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
+				else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
+				else return this.justify;
+			},
+			uAlignItem() {
+				if (this.align == 'top') return 'flex-start';
+				if (this.align == 'bottom') return 'flex-end';
+				else return this.align;
+			}
+		},
+		methods: {
+			click(e) {
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-col {
+		/* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+		float: left;
+		/* #endif */
+	}
+
+	.u-col-0 {
+		width: 0;
+	}
+
+	.u-col-1 {
+		width: calc(100%/12);
+	}
+
+	.u-col-2 {
+		width: calc(100%/12 * 2);
+	}
+
+	.u-col-3 {
+		width: calc(100%/12 * 3);
+	}
+
+	.u-col-4 {
+		width: calc(100%/12 * 4);
+	}
+
+	.u-col-5 {
+		width: calc(100%/12 * 5);
+	}
+
+	.u-col-6 {
+		width: calc(100%/12 * 6);
+	}
+
+	.u-col-7 {
+		width: calc(100%/12 * 7);
+	}
+
+	.u-col-8 {
+		width: calc(100%/12 * 8);
+	}
+
+	.u-col-9 {
+		width: calc(100%/12 * 9);
+	}
+
+	.u-col-10 {
+		width: calc(100%/12 * 10);
+	}
+
+	.u-col-11 {
+		width: calc(100%/12 * 11);
+	}
+
+	.u-col-12 {
+		width: calc(100%/12 * 12);
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-collapse-item/u-collapse-item.vue

@@ -0,0 +1,205 @@
+<template>
+	<view class="u-collapse-item" :style="[itemStyle]">
+		<view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="[headStyle]">
+			<block v-if="!$slots['title-all']">
+				<view v-if="!$slots['title']" class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' },
+					isShow && activeStyle && !arrow ? activeStyle : '']">
+					{{ title }}
+				</view>
+				<slot v-else name="title" />
+				<view class="u-icon-wrap">
+					<u-icon v-if="arrow" :color="arrowColor" :class="{ 'u-arrow-down-icon-active': isShow }"
+					 class="u-arrow-down-icon" name="arrow-down"></u-icon>
+				</view>
+			</block>
+			<slot v-else name="title-all" />
+		</view>
+		<view class="u-collapse-body" :style="[{
+				height: isShow ? height + 'px' : '0'
+			}]">
+			<view class="u-collapse-content" :id="elId" :style="[bodyStyle]">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * collapseItem 手风琴Item
+	 * @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
+	 * @tutorial https://www.uviewui.com/components/collapse.html
+	 * @property {String} title 面板标题
+	 * @property {String Number} index 主要用于事件的回调，标识那个Item被点击
+	 * @property {Boolean} disabled 面板是否可以打开或收起（默认false）
+	 * @property {Boolean} open 设置某个面板的初始状态是否打开（默认false）
+	 * @property {String Number} name 唯一标识符，如不设置，默认用当前collapse-item的索引值
+	 * @property {String} align 标题的对齐方式（默认left）
+	 * @property {Object} active-style 不显示箭头时，可以添加当前选择的collapse-item活动样式，对象形式
+	 * @event {Function} change 某个item被打开或者收起时触发
+	 * @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
+	 */
+	export default {
+		name: "u-collapse-item",
+    emits: ["change"],
+		props: {
+			// 标题
+			title: {
+				type: String,
+				default: ''
+			},
+			// 标题的对齐方式
+			align: {
+				type: String,
+				default: 'left'
+			},
+			// 是否可以点击收起
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// collapse显示与否
+			open: {
+				type: Boolean,
+				default: false
+			},
+			// 唯一标识符
+			name: {
+				type: [Number, String],
+				default: ''
+			},
+			//活动样式
+			activeStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 标识当前为第几个
+			index: {
+				type: [String, Number],
+				default: ''
+			}
+		},
+		data() {
+			return {
+				isShow: false,
+				elId: this.$u.guid(),
+				height: 0, // body内容的高度
+				headStyle: {}, // 头部样式，对象形式
+				bodyStyle: {}, // 主体部分样式
+				itemStyle: {}, // 每个item的整体样式
+				arrowColor: '', // 箭头的颜色
+				hoverClass: '', // 头部按下时的效果样式类
+				arrow: true, // 是否显示右侧箭头
+				
+			};
+		},
+		watch: {
+			open(val) {
+				this.isShow = val;
+			}
+		},
+		created() {
+			this.parent = false;
+			// 获取u-collapse的信息，放在u-collapse是为了方便，不用每个u-collapse-item写一遍
+			this.isShow = this.open;
+		},
+		methods: {
+			// 异步获取内容，或者动态修改了内容时，需要重新初始化
+			init() {
+				this.parent = this.$u.$parent.call(this, 'u-collapse');
+				if(this.parent) {
+					this.nameSync = this.name ? this.name : this.parent.childrens.length;
+					this.parent.childrens.push(this);
+					this.headStyle = this.parent.headStyle;
+					this.bodyStyle = this.parent.bodyStyle;
+					this.arrowColor = this.parent.arrowColor;
+					this.hoverClass = this.parent.hoverClass;
+					this.arrow = this.parent.arrow;
+					this.itemStyle = this.parent.itemStyle;
+				}
+				this.$nextTick(() => {
+					this.queryRect();
+				});
+			},
+			// 点击collapsehead头部
+			headClick() {
+				if (this.disabled) return;
+				if (this.parent && this.parent.accordion == true) {
+					this.parent.childrens.map(val => {
+						// 自身不设置为false，因为后面有this.isShow = !this.isShow;处理了
+						if (this != val) {
+							val.isShow = false;
+						}
+					});
+				}
+
+				this.isShow = !this.isShow;
+				// 触发本组件的事件
+				this.$emit('change', {
+					index: this.index,
+					show: this.isShow
+				})
+				// 只有在打开时才发出事件
+				if (this.isShow) this.parent && this.parent.onChange();
+				this.$forceUpdate();
+			},
+			// 查询内容高度
+			queryRect() {
+				// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
+				// 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
+				this.$uGetRect('#' + this.elId).then(res => {
+					this.height = res.height;
+				})
+			}
+		},
+		mounted() {
+			this.init();
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-collapse-head {
+		position: relative;
+		@include vue-flex;
+		justify-content: space-between;
+		align-items: center;
+		color: $u-main-color;
+		font-size: 30rpx;
+		line-height: 1;
+		padding: 24rpx 0;
+		text-align: left;
+	}
+
+	.u-collapse-title {
+		flex: 1;
+		overflow: hidden;
+	}
+
+	.u-arrow-down-icon {
+		transition: all 0.3s;
+		margin-right: 20rpx;
+		margin-left: 14rpx;
+	}
+
+	.u-arrow-down-icon-active {
+		transform: rotate(180deg);
+		transform-origin: center center;
+	}
+
+	.u-collapse-body {
+		overflow: hidden;
+		transition: all 0.3s;
+	}
+
+	.u-collapse-content {
+		overflow: hidden;
+		font-size: 28rpx;
+		color: $u-tips-color;
+		text-align: left;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-collapse/u-collapse.vue

@@ -0,0 +1,100 @@
+<template>
+	<view class="u-collapse">
+		<slot />
+	</view>
+</template>
+
+<script>
+	/**
+	 * collapse 手风琴
+	 * @description 通过折叠面板收纳内容区域
+	 * @tutorial https://www.uviewui.com/components/collapse.html
+	 * @property {Boolean} accordion 是否手风琴模式（默认true）
+	 * @property {Boolean} arrow 是否显示标题右侧的箭头（默认true）
+	 * @property {String} arrow-color 标题右侧箭头的颜色（默认#909399）
+	 * @property {Object} head-style 标题自定义样式，对象形式
+	 * @property {Object} body-style 主体自定义样式，对象形式
+	 * @property {String} hover-class 样式类名，按下时有效（默认u-hover-class）
+	 * @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
+	 * @example <u-collapse></u-collapse>
+	 */
+	export default {
+		name:"u-collapse",
+    emits: ["change"],
+		props: {
+			// 是否手风琴模式
+			accordion: {
+				type: Boolean,
+				default: true
+			},
+			// 头部的样式
+			headStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 主体的样式
+			bodyStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 每一个item的样式
+			itemStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 是否显示右侧的箭头
+			arrow: {
+				type: Boolean,
+				default: true
+			},
+			// 箭头的颜色
+			arrowColor: {
+				type: String,
+				default: '#909399'
+			},
+			// 标题部分按压时的样式类，"none"为无效果
+			hoverClass: {
+				type: String,
+				default: 'u-hover-class'
+			}
+		},
+		created() {
+			this.childrens = []
+		},
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			// 重新初始化一次内部的所有子元素的高度计算，用于异步获取数据渲染的情况
+			init() {
+				this.childrens.forEach((vm, index) => {
+					vm.init();
+				})
+			},
+			// collapse item被点击，由collapse item调用父组件方法
+			onChange() {
+				let activeItem = [];
+				this.childrens.forEach((vm, index) => {
+					if (vm.isShow) {
+						activeItem.push(vm.nameSync);
+					}
+				})
+				// 如果是手风琴模式，只有一个匹配结果，也即activeItem长度为1，将其转为字符串
+				if (this.accordion) activeItem = activeItem.join('');
+				this.$emit('change', activeItem);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-column-notice/u-column-notice.vue

@@ -0,0 +1,238 @@
+<template>
+	<view
+		class="u-notice-bar"
+		:style="{
+			background: computeBgColor,
+			padding: padding
+		}"
+		:class="[
+			type ? `u-type-${type}-light-bg` : ''
+		]"
+	>
+		<view class="u-icon-wrap">
+			<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon>
+		</view>
+		<swiper :disable-touch="disableTouch" @change="change" :autoplay="autoplay && playState == 'play'" :vertical="vertical" circular :interval="duration" class="u-swiper">
+			<swiper-item v-for="(item, index) in list" :key="index" class="u-swiper-item">
+				<view
+					class="u-news-item u-line-1"
+					:style="[textStyle]"
+					@tap="click(index)"
+					:class="['u-type-' + type]"
+				>
+					{{ item }}
+				</view>
+			</swiper-item>
+		</swiper>
+		<view class="u-icon-wrap">
+			<u-icon @click="getMore" class="u-right-icon" v-if="moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
+			<u-icon @click="close" class="u-right-icon" v-if="closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+  emits: ["close", "getMore", "end"],
+	props: {
+		// 显示的内容，数组
+		list: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 显示的主题，success|error|primary|info|warning
+		type: {
+			type: String,
+			default: 'warning'
+		},
+		// 是否显示左侧的音量图标
+		volumeIcon: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示右侧的右箭头图标
+		moreIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示右侧的关闭图标
+		closeIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 是否自动播放
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 文字颜色，各图标也会使用文字颜色
+		color: {
+			type: String,
+			default: ''
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: ''
+		},
+		// 滚动方向，row-水平滚动，column-垂直滚动
+		direction: {
+			type: String,
+			default: 'row'
+		},
+		// 是否显示
+		show: {
+			type: Boolean,
+			default: true
+		},
+		// 字体大小，单位rpx
+		fontSize: {
+			type: [Number, String],
+			default: 26
+		},
+		// 滚动一个周期的时间长，单位ms
+		duration: {
+			type: [Number, String],
+			default: 2000
+		},
+		// 音量喇叭的大小
+		volumeSize: {
+			type: [Number, String],
+			default: 34
+		},
+		// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
+		speed: {
+			type: Number,
+			default: 160
+		},
+		// 水平滚动时，是否采用衔接形式滚动
+		isCircular: {
+			type: Boolean,
+			default: true
+		},
+		// 滚动方向，horizontal-水平滚动，vertical-垂直滚动
+		mode: {
+			type: String,
+			default: 'horizontal'
+		},
+		// 播放状态，play-播放，paused-暂停
+		playState: {
+			type: String,
+			default: 'play'
+		},
+		// 是否禁止用手滑动切换
+		// 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
+		disableTouch: {
+			type: Boolean,
+			default: true
+		},
+		// 通知的边距
+		padding: {
+			type: [Number, String],
+			default: '18rpx 24rpx'
+		}
+	},
+	computed: {
+		// 计算字体颜色，如果没有自定义的，就用uview主题颜色
+		computeColor() {
+			if (this.color) return this.color;
+			// 如果是无主题，就默认使用content-color
+			else if(this.type == 'none') return '#606266';
+			else return this.type;
+		},
+		// 文字内容的样式
+		textStyle() {
+			let style = {};
+			if (this.color) style.color = this.color;
+			else if(this.type == 'none') style.color = '#606266';
+			style.fontSize = this.fontSize + 'rpx';
+			return style;
+		},
+		// 垂直或者水平滚动
+		vertical() {
+			if(this.mode == 'horizontal') return false;
+			else return true;
+		},
+		// 计算背景颜色
+		computeBgColor() {
+			if (this.bgColor) return this.bgColor;
+			else if(this.type == 'none') return 'transparent';
+		}
+	},
+	data() {
+		return {
+			// animation: false
+		};
+	},
+	methods: {
+		// 点击通告栏
+		click(index) {
+			this.$emit('click', index);
+		},
+		// 点击关闭按钮
+		close() {
+			this.$emit('close');
+		},
+		// 点击更多箭头按钮
+		getMore() {
+			this.$emit('getMore');
+		},
+		change(e) {
+			let index = e.detail.current;
+			if(index == this.list.length - 1) {
+				this.$emit('end');
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-notice-bar {
+	width: 100%;
+	@include vue-flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: nowrap;
+	padding: 18rpx 24rpx;
+	overflow: hidden;
+}
+
+.u-swiper {
+	font-size: 26rpx;
+	height: 32rpx;
+	@include vue-flex;
+	align-items: center;
+	flex: 1;
+	margin-left: 12rpx;
+}
+
+.u-swiper-item {
+	@include vue-flex;
+	align-items: center;
+	overflow: hidden;
+}
+
+.u-news-item {
+	overflow: hidden;
+}
+
+.u-right-icon {
+	margin-left: 12rpx;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	align-items: center;
+}
+
+.u-left-icon {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+	align-items: center;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-count-down/u-count-down.vue

@@ -0,0 +1,175 @@
+<template>
+	<view class="u-count-down">
+		<slot>
+			<text class="u-count-down__text" :style="customStyle">{{ formattedTime }}</text>
+		</slot>
+	</view>
+</template>
+
+<script>
+import { isSameSecond, parseFormat, parseTimeData } from "./utils";
+/**
+ * u-count-down 倒计时
+ * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+ * @tutorial https://uviewui.com/components/countDown.html
+ * @property {String | Number}	timestamp		倒计时时长，单位ms （默认 0 ）
+ * @property {String}			format		时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒  （默认 'HH:mm:ss' ）
+ * @property {Boolean}			autoStart	是否自动开始倒计时 （默认 true ）
+ * @event {Function} end 倒计时结束时触发
+ * @event {Function} change 倒计时变化时触发
+ * @event {Function} start	开始倒计时
+ * @event {Function} pause	暂停倒计时
+ * @event {Function} reset	重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时
+ * @example <u-count-down :timestamp="timestamp"></u-count-down>
+ */
+export default {
+	name: "u-count-down",  
+	emits: ["change", "end", "finish"],
+	props: {
+		// 倒计时时长，单位ms
+		timestamp: {
+			type: [String, Number],
+			default: 0
+		},
+		// 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒
+		format: {
+			type: String,
+			default: "DD:HH:mm:ss"
+		},
+		// 是否自动开始倒计时
+		autoStart: {
+			type: Boolean,
+			default: true
+		},
+		customStyle: {
+			type: [String, Object],
+			default: ""
+		}
+	},
+	data() {
+		return {
+			timer: null,
+			// 各单位(天，时，分等)剩余时间
+			timeData: parseTimeData(0),
+			// 格式化后的时间，如"03:23:21"
+			formattedTime: "0",
+			// 倒计时是否正在进行中
+			runing: false,
+			endTime: 0, // 结束的毫秒时间戳
+			remainTime: 0 // 剩余的毫秒时间
+		};
+	},
+	watch: {
+		timestamp(n) {
+			this.reset();
+		},
+		format(newVal, oldVal) {
+			this.pause();
+			this.start();
+		}
+	},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			this.reset();
+		},
+		// 开始倒计时
+		start() {
+			if (this.runing) return;
+			// 标识为进行中
+			this.runing = true;
+			// 结束时间戳 = 此刻时间戳 + 剩余的时间
+			this.endTime = Date.now() + this.remainTime;
+			this.toTick();
+		},
+		// 根据是否展示毫秒，执行不同操作函数
+		toTick() {
+			if (this.format.indexOf("SSS") > -1) {
+				this.microTick();
+			} else {
+				this.macroTick();
+			}
+		},
+		macroTick() {
+			this.clearTimeout();
+			// 每隔一定时间，更新一遍定时器的值
+			// 同时此定时器的作用也能带来毫秒级的更新
+			this.timer = setTimeout(() => {
+				// 获取剩余时间
+				const remain = this.getRemainTime();
+				// 重设剩余时间
+				if (!isSameSecond(remain, this.remainTime) || remain === 0) {
+					this.setRemainTime(remain);
+				}
+				// 如果剩余时间不为0，则继续检查更新倒计时
+				if (this.remainTime !== 0) {
+					this.macroTick();
+				}
+			}, 30);
+		},
+		microTick() {
+			this.clearTimeout();
+			this.timer = setTimeout(() => {
+				this.setRemainTime(this.getRemainTime());
+				if (this.remainTime !== 0) {
+					this.microTick();
+				}
+			}, 30);
+		},
+		// 获取剩余的时间
+		getRemainTime() {
+			// 取最大值，防止出现小于0的剩余时间值
+			return Math.max(this.endTime - Date.now(), 0);
+		},
+		// 设置剩余的时间
+		setRemainTime(remain) {
+			this.remainTime = remain;
+			// 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象
+			const timeData = parseTimeData(remain);
+			this.$emit("change", timeData);
+			// 得出格式化后的时间
+			this.formattedTime = parseFormat(this.format, timeData);
+			// 如果时间已到，停止倒计时
+			if (remain <= 0) {
+				this.pause(); 
+				this.$emit("end");
+				this.$emit("finish");
+			}
+		},
+		// 重置倒计时
+		reset() {
+			this.pause();
+			this.remainTime = this.timestamp;
+			this.setRemainTime(this.remainTime);
+			if (this.autoStart) {
+				this.start();
+			}
+		},
+		// 暂停倒计时
+		pause() {
+			this.runing = false;
+			this.clearTimeout();
+		},
+		// 清空定时器
+		clearTimeout() {
+			clearTimeout(this.timer);
+			this.timer = null;
+		}
+	},
+	// #ifndef VUE3
+	beforeDestroy() {
+		this.clearTimeout();
+	},
+	// #endif
+	
+	// #ifdef VUE3
+	beforeUnmount() {
+		this.clearTimeout();
+	},
+	// #endif
+};
+</script>
+
+<style lang="scss"></style>

uniapp/src/uni_modules/vk-uview-ui/components/u-count-down/utils.js

@@ -0,0 +1,62 @@
+// 补0，如1 -> 01
+function padZero(num, targetLength = 2) {
+    let str = `${num}`
+    while (str.length < targetLength) {
+        str = `0${str}`
+    }
+    return str
+}
+const SECOND = 1000
+const MINUTE = 60 * SECOND
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+export function parseTimeData(time) {
+    const days = Math.floor(time / DAY)
+    const hours = Math.floor((time % DAY) / HOUR)
+    const minutes = Math.floor((time % HOUR) / MINUTE)
+    const seconds = Math.floor((time % MINUTE) / SECOND)
+    const milliseconds = Math.floor(time % SECOND)
+    return {
+        days,
+        hours,
+        minutes,
+        seconds,
+        milliseconds
+    }
+}
+export function parseFormat(format, timeData) {
+    let {
+        days,
+        hours,
+        minutes,
+        seconds,
+        milliseconds
+    } = timeData
+    // 如果格式化字符串中不存在DD(天)，则将天的时间转为小时中去
+    if (format.indexOf('DD') === -1) {
+        hours += days * 24
+    } else {
+        // 对天补0
+        format = format.replace('DD', padZero(days))
+    }
+    // 其他同理于DD的格式化处理方式
+    if (format.indexOf('HH') === -1) {
+        minutes += hours * 60
+    } else {
+        format = format.replace('HH', padZero(hours))
+    }
+    if (format.indexOf('mm') === -1) {
+        seconds += minutes * 60
+    } else {
+        format = format.replace('mm', padZero(minutes))
+    }
+    if (format.indexOf('ss') === -1) {
+        milliseconds += seconds * 1000
+    } else {
+        format = format.replace('ss', padZero(seconds))
+    }
+    return format.replace('SSS', padZero(milliseconds, 3))
+}
+export function isSameSecond(time1, time2) {
+    return Math.floor(time1 / 1000) === Math.floor(time2 / 1000)
+}

uniapp/src/uni_modules/vk-uview-ui/components/u-count-to/u-count-to.vue

@@ -0,0 +1,266 @@
+<template>
+	<view
+		class="u-count-num"
+		:style="{
+			fontSize: fontSize + 'rpx',
+			fontWeight: bold ? 'bold' : 'normal',
+			color: color
+		}"
+	>
+		{{ displayValueCom }}
+	</view>
+</template>
+
+<script>
+/**
+ * countTo 数字滚动
+ * @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
+ * @tutorial https://www.uviewui.com/components/countTo.html
+ * @property {String Number} nullVal 空值或NaN时显示的值，默认 - 
+ * @property {String Number} start-val 开始值
+ * @property {String Number} end-val 结束值
+ * @property {String Number} duration 滚动过程所需的时间，单位ms（默认2000）
+ * @property {Boolean} autoplay 是否自动开始滚动（默认true）
+ * @property {String Number} decimals 要显示的小数位数，见官网说明（默认0）
+ * @property {Boolean} use-easing 滚动结束时，是否缓动结尾，见官网说明（默认true）
+ * @property {String} separator 千位分隔符，见官网说明
+ * @property {String} color 字体颜色（默认#303133）
+ * @property {String Number} font-size 字体大小，单位rpx（默认50）
+ * @property {Boolean} bold 字体是否加粗（默认false）
+ * @event {Function} end 数值滚动到目标值时触发
+ * @example <u-count-to ref="uCountTo" :end-val="endVal" :autoplay="autoplay"></u-count-to>
+ */
+export default {
+	name: "u-count-to",
+	emits: ["end"],
+	props: {
+		// 没有值时显示
+		nullVal: {
+			type: [Number, String],
+			default: "-"
+		},
+		// 开始的数值，默认从0增长到某一个数
+		startVal: {
+			type: [Number, String],
+			default: 0
+		},
+		// 要滚动的目标数值，必须
+		endVal: {
+			type: [Number, String],
+			default: 0,
+			required: true
+		},
+		// 滚动到目标数值的动画持续时间，单位为毫秒（ms）
+		duration: {
+			type: [Number, String],
+			default: 2000
+		},
+		// 设置数值后是否自动开始滚动
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 要显示的小数位数
+		decimals: {
+			type: [Number, String],
+			default: 0
+		},
+		// 是否在即将到达目标数值的时候，使用缓慢滚动的效果
+		useEasing: {
+			type: Boolean,
+			default: true
+		},
+		// 十进制分割
+		decimal: {
+			type: [Number, String],
+			default: "."
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: "#303133"
+		},
+		// 字体大小
+		fontSize: {
+			type: [Number, String],
+			default: 50
+		},
+		// 是否加粗字体
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		// 千位分隔符，类似金额的分割(￥23,321.05中的",")
+		separator: {
+			type: String,
+			default: ""
+		}
+	},
+	data() {
+		return {
+			localStartVal: this.startVal,
+			displayValue: this.formatNumber(this.startVal),
+			printVal: null,
+			paused: false, // 是否暂停
+			localDuration: Number(this.duration),
+			startTime: null, // 开始的时间
+			timestamp: null, // 时间戳
+			remaining: null, // 停留的时间
+			rAF: null,
+			lastTime: 0 // 上一次的时间
+		};
+	},
+	computed: {
+		countDown() {
+			return this.startVal > this.endVal;
+		},
+		displayValueCom() {
+			let str;
+			let { displayValue, nullVal } = this;
+			if (isNaN(displayValue)) {
+				str = nullVal;
+			} else {
+				str = displayValue;
+			}
+			return str;
+		}
+	},
+	watch: {
+		startVal() {
+			this.autoplay && this.start();
+		},
+		endVal() {
+			this.autoplay && this.start();
+		}
+	},
+	mounted() {
+		this.autoplay && this.start();
+	},
+	methods: {
+		easingFn(t, b, c, d) {
+			return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
+		},
+		requestAnimationFrame(callback) {
+			const currTime = new Date().getTime();
+			// 为了使setTimteout的尽可能的接近每秒60帧的效果
+			const timeToCall = Math.max(0, 16 - (currTime - this.lastTime));
+			const id = setTimeout(() => {
+				callback(currTime + timeToCall);
+			}, timeToCall);
+			this.lastTime = currTime + timeToCall;
+			return id;
+		},
+
+		cancelAnimationFrame(id) {
+			clearTimeout(id);
+		},
+		// 开始滚动数字
+		start() {
+			this.localStartVal = this.startVal;
+			this.startTime = null;
+			this.localDuration = this.duration;
+			this.paused = false;
+			this.rAF = this.requestAnimationFrame(this.count);
+		},
+		// 暂定状态，重新再开始滚动；或者滚动状态下，暂停
+		reStart() {
+			if (this.paused) {
+				this.resume();
+				this.paused = false;
+			} else {
+				this.stop();
+				this.paused = true;
+			}
+		},
+		// 暂停
+		stop() {
+			this.cancelAnimationFrame(this.rAF);
+		},
+		// 重新开始(暂停的情况下)
+		resume() {
+			this.startTime = null;
+			this.localDuration = this.remaining;
+			this.localStartVal = this.printVal;
+			this.requestAnimationFrame(this.count);
+		},
+		// 重置
+		reset() {
+			this.startTime = null;
+			this.cancelAnimationFrame(this.rAF);
+			this.displayValue = this.formatNumber(this.startVal);
+		},
+		count(timestamp) {
+			if (!this.startTime) this.startTime = timestamp;
+			this.timestamp = timestamp;
+			const progress = timestamp - this.startTime;
+			this.remaining = this.localDuration - progress;
+			if (this.useEasing) {
+				if (this.countDown) {
+					this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration);
+				} else {
+					this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
+				}
+			} else {
+				if (this.countDown) {
+					this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration);
+				} else {
+					this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
+				}
+			}
+			if (this.countDown) {
+				this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
+			} else {
+				this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
+			}
+			this.displayValue = this.formatNumber(this.printVal);
+			if (progress < this.localDuration) {
+				this.rAF = this.requestAnimationFrame(this.count);
+			} else {
+				this.$emit("end");
+			}
+		},
+		// 判断是否数字
+		isNumber(val) {
+			return !isNaN(parseFloat(val));
+		},
+		formatNumber(num) {
+			// 将num转为Number类型，因为其值可能为字符串数值，调用toFixed会报错
+			num = Number(num);
+			num = num.toFixed(Number(this.decimals));
+			num += "";
+			const x = num.split(".");
+			let x1 = x[0];
+			const x2 = x.length > 1 ? this.decimal + x[1] : "";
+			const rgx = /(\d+)(\d{3})/;
+			if (this.separator && !this.isNumber(this.separator)) {
+				while (rgx.test(x1)) {
+					x1 = x1.replace(rgx, "$1" + this.separator + "$2");
+				}
+			}
+			return x1 + x2;
+		},
+		// #ifndef VUE3
+		destroyed() {
+			this.cancelAnimationFrame(this.rAF);
+		},
+		// #endif
+
+		// #ifdef VUE3
+		unmounted() {
+			this.cancelAnimationFrame(this.rAF);
+		}
+		// #endif
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-count-num {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;
+	/* #endif */
+	text-align: center;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-divider/u-divider.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="u-divider" :style="{
+		height: height == 'auto' ? 'auto' : height + 'rpx',
+		backgroundColor: bgColor,
+		marginBottom: marginBottom + 'rpx',
+		marginTop: marginTop + 'rpx'
+	}" @tap="click">
+		<view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="[lineStyle]"></view>
+		<view v-if="useSlot" class="u-divider-text" :style="{
+			color: color,
+			fontSize: fontSize + 'rpx'
+		}"><slot /></view>
+		<view class="u-divider-line" :class="[type ? 'u-divider-line--bordercolor--' + type : '']" :style="[lineStyle]"></view>
+	</view>
+</template>
+
+<script>
+/**
+ * divider 分割线
+ * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
+ * @tutorial https://www.uviewui.com/components/divider.html
+ * @property {String Number} half-width 文字左或右边线条宽度，数值或百分比，数值时单位为rpx
+ * @property {String} border-color 线条颜色，优先级高于type（默认#dcdfe6）
+ * @property {String} color 文字颜色（默认#909399）
+ * @property {String Number} fontSize 字体大小，单位rpx（默认26）
+ * @property {String} bg-color 整个divider的背景颜色（默认呢#ffffff）
+ * @property {String Number} height 整个divider的高度，单位rpx（默认40）
+ * @property {String} type 将线条设置主题色（默认primary）
+ * @property {Boolean} useSlot 是否使用slot传入内容，如果不传入，中间不会有空隙（默认true）
+ * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
+ * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
+ * @event {Function} click divider组件被点击时触发
+ * @example <u-divider color="#fa3534">长河落日圆</u-divider>
+ */
+export default {
+	name: 'u-divider',
+	props: {
+		// 单一边divider横线的宽度(数值)，单位rpx。或者百分比
+		halfWidth: {
+			type: [Number, String],
+			default: 150
+		},
+		// divider横线的颜色，如设置，
+		borderColor: {
+			type: String,
+			default: '#dcdfe6'
+		},
+		// 主题色，可以是primary|info|success|warning|error之一值
+		type: {
+			type: String,
+			default: 'primary'
+		},
+		// 文字颜色
+		color: {
+			type: String,
+			default: '#909399'
+		},
+		// 文字大小，单位rpx
+		fontSize: {
+			type: [Number, String],
+			default: 26
+		},
+		// 整个divider的背景颜色
+		bgColor: {
+			type: String,
+			default: '#ffffff'
+		},
+		// 整个divider的高度单位rpx
+		height: {
+			type: [Number, String],
+			default: 'auto'
+		},
+		// 上边距
+		marginTop: {
+			type: [String, Number],
+			default: 0
+		},
+		// 下边距
+		marginBottom: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否使用slot传入内容，如果不用slot传入内容，先的中间就不会有空隙
+		useSlot: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		lineStyle() {
+			let style = {};
+			if(String(this.halfWidth).indexOf('%') != -1) style.width = this.halfWidth;
+			else style.width = this.halfWidth + 'rpx';
+			// borderColor优先级高于type值
+			if(this.borderColor) style.borderColor = this.borderColor;
+			return style;
+		}
+	},
+	methods: {
+		click() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+.u-divider {
+	width: 100%;
+	position: relative;
+	text-align: center;
+	@include vue-flex;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+	flex-direction: row;
+}
+
+.u-divider-line {
+	border-bottom: 1px solid $u-border-color;
+	transform: scale(1, 0.5);
+	transform-origin: center;
+	
+	&--bordercolor--primary {
+		border-color: $u-type-primary;
+	}
+	
+	&--bordercolor--success {
+		border-color: $u-type-success;
+	}
+	
+	&--bordercolor--error {
+		border-color: $u-type-primary;
+	}
+	
+	&--bordercolor--info {
+		border-color: $u-type-info;
+	}
+	
+	&--bordercolor--warning {
+		border-color: $u-type-warning;
+	}
+}
+
+.u-divider-text {
+	white-space: nowrap;
+	padding: 0 16rpx;
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-dropdown-item/u-dropdown-item.vue

@@ -0,0 +1,166 @@
+<template>
+	<view
+		class="u-dropdown-item"
+		v-if="active"
+		@touchmove.stop.prevent="() => {}"
+		@tap.stop.prevent="() => {}"
+	>
+		<block v-if="!$slots.default && !$slots.$default">
+			<scroll-view
+				scroll-y="true"
+				:style="{
+					height: $u.addUnit(height)
+				}"
+			>
+				<view class="u-dropdown-item__options">
+					<u-cell-group>
+						<u-cell-item
+							@click="cellClick(item.value)"
+							:arrow="false"
+							:title="item.label"
+							v-for="(item, index) in options"
+							:key="index"
+							:title-style="{
+								color: value === item.value ? activeColor : inactiveColor
+							}"
+						>
+							<u-icon
+								v-if="valueCom === item.value"
+								name="checkbox-mark"
+								:color="activeColor"
+								size="32"
+							></u-icon>
+						</u-cell-item>
+					</u-cell-group>
+				</view>
+			</scroll-view>
+		</block>
+		<slot v-else />
+	</view>
+</template>
+
+<script>
+/**
+ * dropdown-item 下拉菜单
+ * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+ * @tutorial http://uviewui.com/components/dropdown.html
+ * @property {String | Number} v-model 双向绑定选项卡选择值
+ * @property {String} title 菜单项标题
+ * @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
+ * @property {Boolean} disabled 是否禁用此选项卡（默认false）
+ * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+ * @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
+ * @example <u-dropdown-item title="标题"></u-dropdown-item>
+ */
+export default {
+	name: "u-dropdown-item",
+	emits: ["update:modelValue", "input", "change"],
+	props: {
+		// 当前选中项的value值
+		value: {
+			type: [Number, String, Array],
+			default: ""
+		},
+		modelValue: {
+			type: [Number, String, Array],
+			default: ""
+		},
+		// 菜单项标题
+		title: {
+			type: [String, Number],
+			default: ""
+		},
+		// 选项数据，如果传入了默认slot，此参数无效
+		options: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 是否禁用此菜单项
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 下拉弹窗的高度
+		height: {
+			type: [Number, String],
+			default: "auto"
+		}
+	},
+	data() {
+		return {
+			active: false, // 当前项是否处于展开状态
+			activeColor: "#2979ff", // 激活时左边文字和右边对勾图标的颜色
+			inactiveColor: "#606266" // 未激活时左边文字和右边对勾图标的颜色
+		};
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		// 监听props是否发生了变化，有些值需要传递给父组件u-dropdown，无法双向绑定
+		propsChange() {
+			return `${this.title}-${this.disabled}`;
+		}
+	},
+	watch: {
+		propsChange(n) {
+			// 当值变化时，通知父组件重新初始化，让父组件执行每个子组件的init()方法
+			// 将所有子组件数据重新整理一遍
+			if (this.parent) this.parent.init();
+		}
+	},
+	created() {
+		// 父组件的实例
+		this.parent = false;
+	},
+	methods: {
+		init() {
+			// 获取父组件u-dropdown
+			let parent = this.$u.$parent.call(this, "u-dropdown");
+			if (parent) {
+				this.parent = parent;
+				// 将子组件的激活颜色配置为父组件设置的激活和未激活时的颜色
+				this.activeColor = parent.activeColor;
+				this.inactiveColor = parent.inactiveColor;
+				// 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性
+				// push进去前，显判断是否已经存在了本实例，因为在子组件内部数据变化时，会通过父组件重新初始化子组件
+				let exist = parent.children.find(val => {
+					return this === val;
+				});
+				if (!exist) parent.children.push(this);
+				if (parent.children.length == 1) this.active = true;
+				// 父组件无法监听children的变化，故将子组件的title，传入父组件的menuList数组中
+				parent.menuList.push({
+					title: this.title,
+					disabled: this.disabled
+				});
+			}
+		},
+		// cell被点击
+		cellClick(value) {
+			// 修改通过v-model绑定的值
+			this.$emit("input", value);
+			this.$emit("update:modelValue", value);
+			// 通知父组件(u-dropdown)收起菜单
+			this.parent.close();
+			// 发出事件，抛出当前勾选项的value
+			this.$emit("change", value);
+		}
+	},
+	mounted() {
+		this.init();
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-dropdown/u-dropdown.vue

@@ -0,0 +1,299 @@
+<template>
+	<view class="u-dropdown">
+		<view class="u-dropdown__menu" :style="{
+			height: $u.addUnit(height)
+		}" :class="{
+			'u-border-bottom': borderBottom
+		}">
+			<view class="u-dropdown__menu__item" v-for="(item, index) in menuList" :key="index" @tap.stop="menuClick(index)">
+				<view class="u-flex">
+					<text class="u-dropdown__menu__item__text" :style="{
+						color: item.disabled ? '#c0c4cc' : (index === current || highlightIndex == index) ? activeColor : inactiveColor,
+						fontSize: $u.addUnit(titleSize)
+					}">{{item.title}}</text>
+					<view class="u-dropdown__menu__item__arrow" :class="{
+						'u-dropdown__menu__item__arrow--rotate': index === current
+					}">
+						<u-icon :custom-style="{display: 'flex'}" :name="menuIcon" :size="$u.addUnit(menuIconSize)" :color="index === current || highlightIndex == index ? activeColor : '#c0c4cc'"></u-icon>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="u-dropdown__content" :style="[contentStyle, {
+			transition: `opacity ${duration / 1000}s linear`,
+			top: $u.addUnit(height),
+			height: contentHeight + 'px'
+		}]"
+		 @tap="maskClick" @touchmove.stop.prevent>
+			<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
+				<slot></slot>
+			</view>
+			<view class="u-dropdown__content__mask"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * dropdown 下拉菜单
+	 * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+	 * @tutorial http://uviewui.com/components/dropdown.html
+	 * @property {String} active-color 标题和选项卡选中的颜色（默认#2979ff）
+	 * @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266）
+	 * @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
+	 * @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
+	 * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+	 * @property {String | Number} height 标题菜单的高度，单位任意（默认80）
+	 * @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0）
+	 * @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false）
+	 * @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
+	 * @event {Function} open 下拉菜单被打开时触发
+	 * @event {Function} close 下拉菜单被关闭时触发
+	 * @example <u-dropdown></u-dropdown>
+	 */
+	export default {
+		name: 'u-dropdown',
+    emits: ["open", "close"],
+		props: {
+			// 菜单标题和选项的激活态颜色
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 菜单标题和选项的未激活态颜色
+			inactiveColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 点击遮罩是否关闭菜单
+			closeOnClickMask: {
+				type: Boolean,
+				default: true
+			},
+			// 点击当前激活项标题是否关闭菜单
+			closeOnClickSelf: {
+				type: Boolean,
+				default: true
+			},
+			// 过渡时间
+			duration: {
+				type: [Number, String],
+				default: 300
+			},
+			// 标题菜单的高度，单位任意，数值默认为rpx单位
+			height: {
+				type: [Number, String],
+				default: 80
+			},
+			// 是否显示下边框
+			borderBottom: {
+				type: Boolean,
+				default: false
+			},
+			// 标题的字体大小
+			titleSize: {
+				type: [Number, String],
+				default: 28
+			},
+			// 下拉出来的内容部分的圆角值
+			borderRadius: {
+				type: [Number, String],
+				default: 0
+			},
+			// 菜单右侧的icon图标
+			menuIcon: {
+				type: String,
+				default: 'arrow-down'
+			},
+			// 菜单右侧图标的大小
+			menuIconSize: {
+				type: [Number, String],
+				default: 26
+			}
+		},
+		data() {
+			return {
+				showDropdown: true, // 是否打开下来菜单,
+				menuList: [], // 显示的菜单
+				active: false, // 下拉菜单的状态
+				// 当前是第几个菜单处于激活状态，小程序中此处不能写成false或者""，否则后续将current赋值为0，
+				// 无能的TX没有使用===而是使用==判断，导致程序认为前后二者没有变化，从而不会触发视图更新
+				current: 99999,
+				// 外层内容的样式，初始时处于底层，且透明
+				contentStyle: {
+					zIndex: -1,
+					opacity: 0
+				},
+				// 让某个菜单保持高亮的状态
+				highlightIndex: 99999,
+				contentHeight: 0
+			}
+		},
+		computed: {
+			// 下拉出来部分的样式
+			popupStyle() {
+				let style = {};
+				// 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
+				style.transform = `translateY(${this.active ? 0 : '-100%'})`
+				style['transition-duration'] = this.duration / 1000 + 's';
+				style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
+				return style;
+			}
+		},
+		created() {
+			// 引用所有子组件(u-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
+			this.children = [];
+		},
+		mounted() {
+			this.getContentHeight();
+		},
+		methods: {
+			init() {
+				// 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
+				// 以保证数据的正确性
+				this.menuList = [];
+				this.children.map(child => {
+					child.init();
+				})
+			},
+			// 点击菜单
+			menuClick(index) {
+				// 判断是否被禁用
+				if (this.menuList[index].disabled) return;
+				// 如果点击时的索引和当前激活项索引相同，意味着点击了激活项，需要收起下拉菜单
+				if (index === this.current && this.closeOnClickSelf) {
+					this.close();
+					// 等动画结束后，再移除下拉菜单中的内容，否则直接移除，也就没有下拉菜单收起的效果了
+					setTimeout(() => {
+						this.children[index].active = false;
+					}, this.duration)
+					return;
+				}
+				this.open(index);
+			},
+			// 打开下拉菜单
+			open(index) {
+				// 重置高亮索引，否则会造成多个菜单同时高亮
+				// this.highlightIndex = 9999;
+				// 展开时，设置下拉内容的样式
+				this.contentStyle = {
+					zIndex: 11,
+				}
+				// 标记展开状态以及当前展开项的索引
+				this.active = true;
+				this.current = index;
+				// 历遍所有的子元素，将索引匹配的项标记为激活状态，因为子元素是通过v-if控制切换的
+				// 之所以不是因display: none，是因为nvue没有display这个属性
+				this.children.map((val, idx) => {
+					val.active = index == idx ? true : false;
+				})
+				this.$emit('open', this.current);
+			},
+			// 设置下拉菜单处于收起状态
+			close() {
+				this.$emit('close', this.current);
+				// 设置为收起状态，同时current归位，设置为空字符串
+				this.active = false;
+				this.current = 99999;
+				// 下拉内容的样式进行调整，不透明度设置为0
+				this.contentStyle = {
+					zIndex: -1,
+					opacity: 0
+				}
+			},
+			// 点击遮罩
+			maskClick() {
+				// 如果不允许点击遮罩，直接返回
+				if (!this.closeOnClickMask) return;
+				this.close();
+			},
+			// 外部手动设置某个菜单高亮
+			highlight(index = undefined) {
+				this.highlightIndex = index !== undefined ? index : 99999;
+			},
+			// 获取下拉菜单内容的高度
+			getContentHeight() {
+				// 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
+				// 才能让遮罩占满菜单一下，直到屏幕底部的高度
+				// this.$u.sys()为uView封装的获取设备信息的方法
+				let windowHeight = this.$u.sys().windowHeight;
+				this.$uGetRect('.u-dropdown__menu').then(res => {
+					// 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)
+					// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
+					// 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
+					// 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
+					this.contentHeight = windowHeight - res.bottom;
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-dropdown {
+		flex: 1;
+		width: 100%;
+		position: relative;
+
+		&__menu {
+			@include vue-flex;
+			position: relative;
+			z-index: 11;
+			height: 80rpx;
+
+			&__item {
+				flex: 1;
+				@include vue-flex;
+				justify-content: center;
+				align-items: center;
+
+				&__text {
+					font-size: 28rpx;
+					color: $u-content-color;
+				}
+
+				&__arrow {
+					margin-left: 6rpx;
+					transition: transform .3s;
+					align-items: center;
+					@include vue-flex;
+
+					&--rotate {
+						transform: rotate(180deg);
+					}
+				}
+			}
+		}
+
+		&__content {
+			position: absolute;
+			z-index: 8;
+			width: 100%;
+			left: 0px;
+			bottom: 0;
+			overflow: hidden;
+			
+
+			&__mask {
+				position: absolute;
+				z-index: 9;
+				background: rgba(0, 0, 0, .3);
+				width: 100%;
+				left: 0;
+				top: 0;
+				bottom: 0;
+			}
+
+			&__popup {
+				position: relative;
+				z-index: 10;
+				transition: all 0.3s;
+				transform: translate3D(0, -100%, 0);
+				overflow: hidden;
+			}
+		}
+
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-empty/u-empty.vue

@@ -0,0 +1,193 @@
+<template>
+	<view class="u-empty" v-if="show" :style="{
+		marginTop: marginTop + 'rpx'
+	}">
+		<u-icon
+			:name="src ? src : 'empty-' + mode"
+			:custom-style="iconStyle"
+			:label="text ? text : icons[mode]"
+			label-pos="bottom"
+			:label-color="color"
+			:label-size="fontSize"
+			:size="iconSize"
+			:color="iconColor"
+			margin-top="14"
+		></u-icon>
+		<view class="u-slot-wrap">
+			<slot name="bottom"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * empty 内容为空
+	 * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
+	 * @tutorial https://www.uviewui.com/components/empty.html
+	 * @property {String} color 文字颜色（默认#c0c4cc）
+	 * @property {String} text 文字提示（默认“无内容”）
+	 * @property {String} src 自定义图标路径，如定义，mode参数会失效
+	 * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
+	 * @property {String} mode 内置的图标，见官网说明（默认data）
+	 * @property {String Number} img-width 图标的宽度，单位rpx（默认240）
+	 * @property {String} img-height 图标的高度，单位rpx（默认auto）
+	 * @property {String Number} margin-top 组件距离上一个元素之间的距离（默认0）
+	 * @property {Boolean} show 是否显示组件（默认true）
+	 * @event {Function} click 点击组件时触发
+	 * @event {Function} close 点击关闭按钮时触发
+	 * @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
+	 */
+	export default {
+		name: "u-empty",
+		props: {
+			// 图标路径
+			src: {
+				type: String,
+				default: ''
+			},
+			// 提示文字
+			text: {
+				type: String,
+				default: ''
+			},
+			// 文字颜色
+			color: {
+				type: String,
+				default: '#c0c4cc'
+			},
+			// 图标的颜色
+			iconColor: {
+				type: String,
+				default: '#c0c4cc'
+			},
+			// 图标的大小
+			iconSize: {
+				type: [String, Number],
+				default: 120
+			},
+			// 文字大小，单位rpx
+			fontSize: {
+				type: [String, Number],
+				default: 26
+			},
+			// 选择预置的图标类型
+			mode: {
+				type: String,
+				default: 'data'
+			},
+			//  图标宽度，单位rpx
+			imgWidth: {
+				type: [String, Number],
+				default: 120
+			},
+			// 图标高度，单位rpx
+			imgHeight: {
+				type: [String, Number],
+				default: 'auto'
+			},
+			// 是否显示组件
+			show: {
+				type: Boolean,
+				default: true
+			},
+			// 组件距离上一个元素之间的距离
+			marginTop: {
+				type: [String, Number],
+				default: 0
+			},
+			iconStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			}
+		},
+		data() {
+			return {
+				icons: {
+					car: '购物车为空',
+					page: '页面不存在',
+					search: '没有搜索结果',
+					address: '没有收货地址',
+					wifi: '没有WiFi',
+					order: '订单为空',
+					coupon: '没有优惠券',
+					favor: '暂无收藏',
+					permission: '无权限',
+					history: '无历史记录',
+					news: '无新闻列表',
+					message: '消息列表为空',
+					list: '列表为空',
+					data: '数据为空'
+				},
+				// icons: [{
+				// 	icon: 'car',
+				// 	text: '购物车为空'
+				// },{
+				// 	icon: 'page',
+				// 	text: '页面不存在'
+				// },{
+				// 	icon: 'search',
+				// 	text: '没有搜索结果'
+				// },{
+				// 	icon: 'address',
+				// 	text: '没有收货地址'
+				// },{
+				// 	icon: 'wifi',
+				// 	text: '没有WiFi'
+				// },{
+				// 	icon: 'order',
+				// 	text: '订单为空'
+				// },{
+				// 	icon: 'coupon',
+				// 	text: '没有优惠券'
+				// },{
+				// 	icon: 'favor',
+				// 	text: '暂无收藏'
+				// },{
+				// 	icon: 'permission',
+				// 	text: '无权限'
+				// },{
+				// 	icon: 'history',
+				// 	text: '无历史记录'
+				// },{
+				// 	icon: 'news',
+				// 	text: '无新闻列表'
+				// },{
+				// 	icon: 'message',
+				// 	text: '消息列表为空'
+				// },{
+				// 	icon: 'list',
+				// 	text: '列表为空'
+				// },{
+				// 	icon: 'data',
+				// 	text: '数据为空'
+				// }],
+
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-empty {
+		@include vue-flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+	}
+
+	.u-image {
+		margin-bottom: 20rpx;
+	}
+
+	.u-slot-wrap {
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 20rpx;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-field/u-field.vue

@@ -0,0 +1,402 @@
+<template>
+	<view class="u-field" :class="{'u-border-top': borderTop, 'u-border-bottom': borderBottom }">
+		<view class="u-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPosition]">
+			<view class="u-label" :class="[required ? 'u-required' : '']" :style="{
+				justifyContent: justifyContent, 
+				flex: labelPosition == 'left' ? `0 0 ${labelWidth}rpx` : '1'
+			}">
+				<view class="u-icon-wrap" v-if="icon">
+					<u-icon size="32" :custom-style="iconStyle" :name="icon" :color="iconColor" class="u-icon"></u-icon>
+				</view>
+				<slot name="icon"></slot>
+				<text class="u-label-text" :class="[$slots.icon || icon ? 'u-label-left-gap' : '']">{{ label }}</text>
+			</view>
+			<view class="fild-body">
+				<view class="u-flex-1 u-flex" :style="[inputWrapStyle]">
+					<textarea v-if="type == 'textarea'" class="u-flex-1 u-textarea-class" :style="[fieldStyle]" :value="valueCom"
+					 :placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled" :maxlength="inputMaxlength"
+					 :focus="focus" :autoHeight="autoHeight" :fixed="fixed" @input="onInput" @blur="onBlur" @focus="onFocus" @confirm="onConfirm"
+					 @tap="fieldClick" />
+					<input
+						v-else
+						:style="[fieldStyle]"
+						:type="type"
+						class="u-flex-1 u-field__input-wrap"
+						:value="valueCom"
+						:password="password || type === 'password'"
+						:placeholder="placeholder"
+						:placeholderStyle="placeholderStyle"
+						:disabled="disabled"
+						:maxlength="inputMaxlength"
+						:focus="focus"
+						:confirmType="confirmType"
+						@focus="onFocus"
+						@blur="onBlur"
+						@input="onInput"
+						@confirm="onConfirm"
+						@tap="fieldClick"
+					/>
+				</view>
+				<u-icon :size="clearSize" v-if="clearable && valueCom != '' && focused" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon" @click="onClear"/>
+				<view class="u-button-wrap"><slot name="right" /></view>
+				<u-icon v-if="rightIcon" @click="rightIconClick" :name="rightIcon" color="#c0c4cc" :style="[rightIconStyle]" size="26" class="u-arror-right" />
+			</view>
+		</view>
+		<view v-if="errorMessage !== false && errorMessage != ''" class="u-error-message" :style="{
+			paddingLeft: labelWidth + 'rpx'
+		}">{{ errorMessage }}</view>
+	</view>
+</template>
+
+<script>
+/**
+ * field 输入框
+ * @description 借助此组件，可以实现表单的输入， 有"text"和"textarea"类型的，此外，借助uView的picker和actionSheet组件可以快速实现上拉菜单，时间，地区选择等， 为表单解决方案的利器。
+ * @tutorial https://www.uviewui.com/components/field.html
+ * @property {String} type 输入框的类型（默认text）
+ * @property {String} icon label左边的图标，限uView的图标名称
+ * @property {Object} icon-style 左边图标的样式，对象形式
+ * @property {Boolean} right-icon 输入框右边的图标名称，限uView的图标名称（默认false）
+ * @property {Boolean} required 是否必填，左边您显示红色"*"号（默认false）
+ * @property {String} label 输入框左边的文字提示
+ * @property {Boolean} password 是否密码输入方式(用点替换文字)，type为text时有效（默认false）
+ * @property {Boolean} clearable 是否显示右侧清空内容的图标控件(输入框有内容，且获得焦点时才显示)，点击可清空输入框内容（默认true）
+ * @property {Number String} label-width label的宽度，单位rpx（默认130）
+ * @property {String} label-align label的文字对齐方式（默认left）
+ * @property {Object} field-style 自定义输入框的样式，对象形式
+ * @property {Number | String} clear-size 清除图标的大小，单位rpx（默认30）
+ * @property {String} input-align 输入框内容对齐方式（默认left）
+ * @property {Boolean} border-bottom 是否显示field的下边框（默认true）
+ * @property {Boolean} border-top 是否显示field的上边框（默认false）
+ * @property {String} icon-color 左边通过icon配置的图标的颜色（默认#606266）
+ * @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效（默认true）
+ * @property {String Boolean} error-message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
+ * @property {String} placeholder 输入框的提示文字
+ * @property {String} placeholder-style placeholder的样式(内联样式，字符串)，如"color: #ddd"
+ * @property {Boolean} focus 是否自动获得焦点（默认false）
+ * @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true（默认false）
+ * @property {Boolean} disabled 是否不可输入（默认false）
+ * @property {Number String} maxlength 最大输入长度，设置为 -1 的时候不限制最大长度（默认140）
+ * @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done）
+ * @event {Function} input 输入框内容发生变化时触发
+ * @event {Function} focus 输入框获得焦点时触发
+ * @event {Function} blur 输入框失去焦点时触发
+ * @event {Function} confirm 点击完成按钮时触发
+ * @event {Function} right-icon-click 通过right-icon生成的图标被点击时触发
+ * @event {Function} click 输入框被点击或者通过right-icon生成的图标被点击时触发，这样设计是考虑到传递右边的图标，一般都为需要弹出"picker"等操作时的场景，点击倒三角图标，理应发出此事件，见上方说明
+ * @example <u-field v-model="mobile" label="手机号" required :error-message="errorMessage"></u-field>
+ */
+export default {
+	name:"u-field",
+  emits: ["update:modelValue", "input", "focus", "blur", "confirm", "right-icon-click", "click"],
+	props: {
+    value: [Number, String],
+    modelValue: [Number, String],
+		icon: String,
+		rightIcon: String,
+		arrowDirection: {
+			type: String,
+			default: 'right'
+		},
+		required: Boolean,
+		label: String,
+		password: Boolean,
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		// 左边标题的宽度单位rpx
+		labelWidth: {
+			type: [Number, String],
+			default: 130
+		},
+		// 对齐方式，left|center|right
+		labelAlign: {
+			type: String,
+			default: 'left'
+		},
+		inputAlign: {
+			type: String,
+			default: 'left'
+		},
+		iconColor: {
+			type: String,
+			default: '#606266'
+		},
+		autoHeight: {
+			type: Boolean,
+			default: true
+		},
+		errorMessage: {
+			type: [String, Boolean],
+			default: ''
+		},
+		placeholder: String,
+		placeholderStyle: String,
+		focus: Boolean,
+		fixed: Boolean,
+		type: {
+			type: String,
+			default: 'text'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		maxlength: {
+			type: [Number, String],
+			default: 140
+		},
+		confirmType: {
+			type: String,
+			default: 'done'
+		},
+		// lable的位置，可选为 left-左边，top-上边
+		labelPosition: {
+			type: String,
+			default: 'left'
+		},
+		// 输入框的自定义样式
+		fieldStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		// 清除按钮的大小
+		clearSize: {
+			type: [Number, String],
+			default: 30
+		},
+		// lable左边的图标样式，对象形式
+		iconStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		// 是否显示上边框
+		borderTop: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示下边框
+		borderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// 是否自动去除两端的空格
+		trim: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			focused: false,
+			itemIndex: 0,
+		};
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+		
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		inputWrapStyle() {
+			let style = {};
+			style.textAlign = this.inputAlign;
+			// 判断lable的位置，如果是left的话，让input左边两边有间隙
+			if(this.labelPosition == 'left') {
+				style.margin = `0 8rpx`;
+			} else {
+				// 如果lable是top的，input的左边就没必要有间隙了
+				style.marginRight = `8rpx`;
+			}
+			return style;
+		},
+		rightIconStyle() {
+			let style = {};
+			let arrowDirectionObj = {
+				"top": "-90deg",
+				"bottom": "90deg",
+				"left": "180deg",
+				"right": "0deg",
+			};
+			let deg = arrowDirectionObj[this.arrowDirection] || "0deg";
+			style.transform = 'rotate('+deg+')';
+			return style;
+		},
+		labelStyle() {
+			let style = {};
+			if(this.labelAlign == 'left') style.justifyContent = 'flext-start';
+			if(this.labelAlign == 'center') style.justifyContent = 'center';
+			if(this.labelAlign == 'right') style.justifyContent = 'flext-end';
+			return style;
+		},
+		// uni不支持在computed中写style.justifyContent = 'center'的形式，故用此方法
+		justifyContent() {
+			if(this.labelAlign == 'left') return 'flex-start';
+			if(this.labelAlign == 'center') return 'center';
+			if(this.labelAlign == 'right') return 'flex-end';
+		},
+		// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
+		inputMaxlength() {
+			return Number(this.maxlength)
+		},
+		// label的位置
+		fieldInnerStyle() {
+			let style = {};
+			if(this.labelPosition == 'left') {
+				style.flexDirection = 'row';
+			} else {
+				style.flexDirection = 'column';
+			}
+			
+			return style;
+		}
+	},
+	methods: {
+		onInput(event) {
+			let value = event.detail.value;
+			// 判断是否去除空格
+			if(this.trim) value = this.$u.trim(value);
+			this.$emit('input', value);
+      this.$emit("update:modelValue", value);
+		},
+		onFocus(event) {
+			this.focused = true;
+			this.$emit('focus', event);
+		},
+		onBlur(event) {
+			// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
+			// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
+			setTimeout(() => {
+				this.focused = false;
+			}, 100)
+			this.$emit('blur', event);
+		},
+		onConfirm(e) {
+			this.$emit('confirm', e.detail.value);
+		},
+		onClear(event) {
+			this.$emit('input', '');
+      this.$emit("update:modelValue", '');
+		},
+		rightIconClick() {
+			this.$emit('right-icon-click');
+			this.$emit('click');
+		},
+		fieldClick() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+	
+.u-field {
+	font-size: 28rpx;
+	padding: 20rpx 28rpx;
+	text-align: left;
+	position: relative;
+	color: $u-main-color;
+}
+
+.u-field-inner {
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-textarea-inner {
+	align-items: flex-start;
+}
+
+.u-textarea-class {
+	min-height: 96rpx;
+	width: auto;
+	font-size: 28rpx;
+}
+
+.fild-body {
+	@include vue-flex;
+	flex: 1;
+	align-items: center;
+}
+
+.u-arror-right {
+	margin-left: 8rpx;
+}
+
+.u-label-text {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;		
+	/* #endif */
+}
+
+.u-label-left-gap {
+	margin-left: 6rpx;
+}
+
+.u-label-postion-top {
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.u-label {
+	width: 130rpx;
+	flex: 1 1 130rpx;
+	text-align: left;
+	position: relative;
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-required::before {
+	content: '*';
+	position: absolute;
+	left: -16rpx;
+	font-size: 14px;
+	color: $u-type-error;
+	height: 9px;
+	line-height: 1;
+}
+
+.u-field__input-wrap {
+	position: relative;
+	overflow: hidden;
+	font-size: 28rpx;
+	height: 48rpx;
+	flex: 1;
+	width: auto;
+}
+
+.u-clear-icon {
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-error-message {
+	color: $u-type-error;
+	font-size: 26rpx;
+	text-align: left;
+}
+
+.placeholder-style {
+	color: rgb(150, 151, 153);
+}
+
+.u-input-class {
+	font-size: 28rpx;
+}
+
+.u-button-wrap {
+	margin-left: 8rpx;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-form-item/u-form-item.vue

@@ -0,0 +1,507 @@
+<template>
+	<view class="u-form-item" :class="{'u-border-bottom': elBorderBottom, 'u-form-item__border-bottom--error': validateState === 'error' && showError('border-bottom')}">
+		<view class="u-form-item__body" :style="{
+			flexDirection: elLabelPosition == 'left' ? 'row' : 'column'
+		}">
+			<!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" -->
+			<view class="u-form-item--left" :style="{
+				width: uLabelWidth,
+				flex: `0 0 ${uLabelWidth}`,
+				marginBottom: elLabelPosition == 'left' ? 0 : '10rpx',
+			}">
+				<!-- 为了块对齐 -->
+				<view class="u-form-item--left__content" v-if="required || leftIcon || label">
+					<!-- nvue不支持伪元素before -->
+					<text v-if="required" class="u-form-item--left__content--required">*</text>
+					<view class="u-form-item--left__content__icon" v-if="leftIcon">
+						<u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon>
+					</view>
+					<view class="u-form-item--left__content__label" :style="[elLabelStyle, {
+						'justify-content': elLabelAlign == 'left' ? 'flex-start' : elLabelAlign == 'center' ? 'center' : 'flex-end'
+					}]">
+						{{label}}
+					</view>
+				</view>
+			</view>
+			<view class="u-form-item--right u-flex">
+				<view class="u-form-item--right__content">
+					<view class="u-form-item--right__content__slot" :style="elLabelPosition == 'left' && elInputAlign == 'right' ? 'text-align:right;display: inline-block;line-height:initial;' : ''">
+						<slot />
+					</view>
+					<view class="u-form-item--right__content__icon u-flex" v-if="$slots.right || rightIcon">
+						<u-icon :custom-style="rightIconStyle" v-if="rightIcon" :name="rightIcon"></u-icon>
+						<slot name="right" />
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="u-form-item__message" v-if="validateState === 'error' && showError('message')" :style="{
+			paddingLeft: elLabelPosition == 'left' ? $u.addUnit(elLabelWidth) : '0',
+			textAlign: elInputAlign == 'right' ? 'right' : 'left'
+		}">{{validateMessage}}</view>
+	</view>
+</template>
+
+<script>
+	import Emitter from '../../libs/util/emitter.js';
+	import schema from '../../libs/util/async-validator';
+	// 去除警告信息
+	schema.warning = function() {};
+
+	/**
+	 * form-item 表单item
+	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
+	 * @tutorial http://uviewui.com/components/form.html
+	 * @property {String} label 左侧提示文字
+	 * @property {Object} prop 表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的
+	 * @property {Boolean} border-bottom 是否显示表单域的下划线边框
+	 * @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
+	 * @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
+	 * @property {Object} label-style lable的样式，对象形式
+	 * @property {String} label-align lable的对齐方式
+	 * @property {String} right-icon 右侧自定义字体图标(限uView内置图标)或图片地址
+	 * @property {String} left-icon 左侧自定义字体图标(限uView内置图标)或图片地址
+	 * @property {Object} left-icon-style 左侧图标的样式，对象形式
+	 * @property {Object} right-icon-style 右侧图标的样式，对象形式
+	 * @property {Boolean} required 是否显示左边的"*"号，这里仅起展示作用，如需校验必填，请通过rules配置必填规则(默认false)
+	 * @example <u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item>
+	 */
+
+	export default {
+		name: 'u-form-item',
+		mixins: [Emitter],
+		inject: {
+			uForm: {
+				default () {
+					return null
+				}
+			}
+		},
+		props: {
+			// input的label提示语
+			label: {
+				type: String,
+				default: ''
+			},
+			// 绑定的值
+			prop: {
+				type: String,
+				default: ''
+			},
+			// 是否显示表单域的下划线边框
+			borderBottom: {
+				type: [String, Boolean],
+				default: ''
+			},
+			// label的位置，left-左边，top-上边
+			labelPosition: {
+				type: String,
+				default: ''
+			},
+			// label的宽度，单位rpx
+			labelWidth: {
+				type: [String, Number],
+				default: ''
+			},
+			// lable的样式，对象形式
+			labelStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// lable字体的对齐方式
+			labelAlign: {
+				type: String,
+				default: ''
+			},
+			// 右侧图标
+			rightIcon: {
+				type: String,
+				default: ''
+			},
+			// 左侧图标
+			leftIcon: {
+				type: String,
+				default: ''
+			},
+			// 左侧图标的样式
+			leftIconStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 左侧图标的样式
+			rightIconStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置
+			required: {
+				type: Boolean,
+				default: false
+			},
+			inputAlign:{
+				type: String,
+				default: ''
+			},
+		},
+		data() {
+			return {
+				initialValue: '', // 存储的默认值
+				// isRequired: false, // 是否必填，由于人性化考虑，必填"*"号通过props的required配置，不再通过rules的规则自动生成
+				validateState: '', // 是否校验成功
+				validateMessage: '', // 校验失败的提示语
+				// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
+				errorType: ['message'],
+				fieldValue: '', // 获取当前子组件input的输入的值
+				// 父组件的参数，在computed计算中，无法得知this.parent发生变化，故将父组件的参数值，放到data中
+				parentData: {
+					borderBottom: true,
+					labelWidth: 90,
+					labelPosition: 'left',
+					labelStyle: {},
+					labelAlign: 'left',
+					inputAlign: 'left',
+				}
+			};
+		},
+		watch: {
+			validateState(val) {
+				this.broadcastInputError();
+			},
+			// 监听u-form组件的errorType的变化
+			"uForm.errorType"(val) {
+				this.errorType = val;
+				this.broadcastInputError();
+			},
+		},
+		computed: {
+			// 计算后的label宽度，由于需要多个判断，故放到computed中
+			uLabelWidth() {
+				// 如果用户设置label为空字符串(微信小程序空字符串最终会变成字符串的'true')，意味着要将label的位置宽度设置为auto
+				return this.elLabelPosition == 'left' ? (this.label === 'true' || this.label === '' ? 'auto' : this.$u.addUnit(this
+					.elLabelWidth)) : '100%';
+			},
+			showError() {
+				return type => {
+					// 如果errorType数组中含有none，或者toast提示类型
+					if (this.errorType.indexOf('none') >= 0) return false;
+					else if (this.errorType.indexOf(type) >= 0) return true;
+					else return false;
+				}
+			},
+			// label的宽度
+			elLabelWidth() {
+				// label默认宽度为90，优先使用本组件的值，如果没有(如果设置为0，也算是配置了值，依然起效)，则用u-form的值
+				return (this.labelWidth != 0 || this.labelWidth != '') ? this.labelWidth : (this.parentData.labelWidth ? this.parentData
+					.labelWidth :
+					90);
+			},
+			// label的样式
+			elLabelStyle() {
+				return Object.keys(this.labelStyle).length ? this.labelStyle : (this.parentData.labelStyle ? this.parentData.labelStyle :
+					{});
+			},
+			// label的位置，左侧或者上方
+			elLabelPosition() {
+				return this.labelPosition ? this.labelPosition : (this.parentData.labelPosition ? this.parentData.labelPosition :
+					'left');
+			},
+			// label的对齐方式
+			elLabelAlign() {
+				return this.labelAlign ? this.labelAlign : (this.parentData.labelAlign ? this.parentData.labelAlign : 'left');
+			},
+			// label的下划线
+			elBorderBottom() {
+				// 子组件的borderBottom默认为空字符串，如果不等于空字符串，意味着子组件设置了值，优先使用子组件的值
+				return this.borderBottom !== '' ? this.borderBottom : this.parentData.borderBottom ? this.parentData.borderBottom :
+					true;
+			},
+			elInputAlign() {
+				return this.inputAlign ? this.inputAlign : (this.parentData.inputAlign ? this.parentData.inputAlign : 'left');
+			},
+		},
+		methods: {
+			broadcastInputError() {
+				// 子组件发出事件，第三个参数为true或者false，true代表有错误
+				this.broadcast('u-input', 'onFormItemError', this.validateState === 'error' && this.showError('border'));
+			},
+			// 判断是否需要required校验
+			setRules() {
+				let that = this;
+				// 由于人性化考虑，必填"*"号通过props的required配置，不再通过rules的规则自动生成
+				// 从父组件u-form拿到当前u-form-item需要验证 的规则
+				// let rules = this.getRules();
+				// if (rules.length) {
+				// 	this.isRequired = rules.some(rule => {
+				// 		// 如果有必填项，就返回，没有的话，就是undefined
+				// 		return rule.required;
+				// 	});
+				// }
+				// #ifndef VUE3
+				// blur事件
+				this.$on('onFieldBlur', that.onFieldBlur);
+				// change事件
+				this.$on('onFieldChange', that.onFieldChange);
+				// #endif
+				// #ifdef VUE3
+
+				// #endif
+			},
+
+			// 从u-form的rules属性中，取出当前u-form-item的校验规则
+			getRules() {
+				// 父组件的所有规则
+				let rules = this.parent.rules;
+				rules = rules ? rules[this.prop] : [];
+				// 保证返回的是一个数组形式
+				return [].concat(rules || []);
+			},
+
+			// blur事件时进行表单校验
+			onFieldBlur() {
+				this.validation('blur');
+			},
+
+			// change事件进行表单校验
+			onFieldChange() {
+				this.validation('change');
+			},
+
+			// 过滤出符合要求的rule规则
+			getFilteredRule(triggerType = '') {
+				let rules = this.getRules();
+				// 整体验证表单时，triggerType为空字符串，此时返回所有规则进行验证
+				if (!triggerType) return rules;
+				// 历遍判断规则是否有对应的事件，比如blur，change触发等的事件
+				// 使用indexOf判断，是因为某些时候设置的验证规则的trigger属性可能为多个，比如['blur','change']
+				// 某些场景可能的判断规则，可能不存在trigger属性，故先判断是否存在此属性
+				return rules.filter(res => res.trigger && res.trigger.indexOf(triggerType) !== -1);
+			},
+
+			getData(dataObj, name, defaultValue) {
+				let newDataObj;
+				if (dataObj) {
+					newDataObj = JSON.parse(JSON.stringify(dataObj));
+					let k = "",
+						d = ".",
+						l = "[",
+						r = "]";
+					name = name.replace(/\s+/g, k) + d;
+					let tstr = k;
+					for (let i = 0; i < name.length; i++) {
+						let theChar = name.charAt(i);
+						if (theChar != d && theChar != l && theChar != r) {
+							tstr += theChar;
+						} else if (newDataObj) {
+							if (tstr != k) newDataObj = newDataObj[tstr];
+							tstr = k;
+						}
+					}
+				}
+				if (typeof newDataObj === "undefined" && typeof defaultValue !== "undefined") newDataObj = defaultValue;
+				return newDataObj;
+			},
+
+			setData(dataObj, name, value) {
+				// 通过正则表达式  查找路径数据
+				let dataValue;
+				if (typeof value === "object") {
+					dataValue = JSON.parse(JSON.stringify(value));
+				} else {
+					dataValue = value;
+				}
+				let regExp = new RegExp("([\\w$]+)|\\[(:\\d)\\]", "g");
+				const patten = name.match(regExp);
+				// 遍历路径  逐级查找  最后一级用于直接赋值
+				for (let i = 0; i < patten.length - 1; i++) {
+					let keyName = patten[i];
+					if (typeof dataObj[keyName] !== "object") dataObj[keyName] = {};
+					dataObj = dataObj[keyName];
+				}
+				// 最后一级
+				dataObj[patten[patten.length - 1]] = dataValue;
+			},
+
+			// 校验数据
+			validation(trigger, callback = () => {}) {
+				// 检验之间，先获取需要校验的值
+				//this.fieldValue = this.parent.model[this.prop];
+				// 修改支持a.b
+				this.fieldValue = this.getData(this.parent.model,this.prop);
+				// blur和change是否有当前方式的校验规则
+				let rules = this.getFilteredRule(trigger);
+				// 判断是否有验证规则，如果没有规则，也调用回调方法，否则父组件u-form会因为
+				// 对count变量的统计错误而无法进入上一层的回调
+				if (!rules || rules.length === 0) {
+					return callback('');
+				}
+				// 设置当前的装填，标识为校验中
+				this.validateState = 'validating';
+				// 调用async-validator的方法
+				let validator = new schema({
+					[this.prop]: rules
+				});
+				validator.validate({
+					[this.prop]: this.fieldValue
+				}, {
+					firstFields: true
+				}, (errors, fields) => {
+					// 记录状态和报错信息
+					this.validateState = !errors ? 'success' : 'error';
+					this.validateMessage = errors ? errors[0].message : '';
+					let field = errors ? errors[0].field : '';
+					// 调用回调方法
+					callback(this.validateMessage, {
+						state: this.validateState,
+						key: field,
+						msg: this.validateMessage
+					});
+				});
+			},
+
+			// 清空当前的u-form-item
+			resetField() {
+				//this.parent.model[this.prop] = this.initialValue;
+				this.setData(this.parent.model,this.prop,this.initialValue);
+				// 设置为`success`状态，只是为了清空错误标记
+				this.validateState = 'success';
+			}
+		},
+
+		// 组件创建完成时，将当前实例保存到u-form中
+		mounted() {
+			// 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
+			this.parent = this.$u.$parent.call(this, 'u-form');
+			if (this.parent) {
+				// 历遍parentData中的属性，将parent中的同名属性赋值给parentData
+				Object.keys(this.parentData).map(key => {
+					this.parentData[key] = this.parent[key];
+				});
+				// 如果没有传入prop，或者uForm为空(如果u-form-input单独使用，就不会有uForm注入)，就不进行校验
+				if (this.prop) {
+					// 将本实例添加到父组件中
+					this.parent.fields.push(this);
+					this.errorType = this.parent.errorType;
+					// 设置初始值
+					this.initialValue = this.fieldValue;
+					// 添加表单校验，这里必须要写在$nextTick中，因为u-form的rules是通过ref手动传入的
+					// 不在$nextTick中的话，可能会造成执行此处代码时，父组件还没通过ref把规则给u-form，导致规则为空
+					this.$nextTick(() => {
+						this.setRules();
+					})
+				}
+			}
+		},
+		// #ifndef VUE3
+		// 组件销毁前，将实例从u-form的缓存中移除
+		beforeDestroy() {
+			// 如果当前没有prop的话表示当前不要进行删除（因为没有注入）
+			if (this.parent && this.prop) {
+				this.parent.fields.map((item, index) => {
+					if (item === this) this.parent.fields.splice(index, 1);
+				})
+			}
+		},
+		// #endif
+
+		// #ifdef VUE3
+		beforeUnmount() {
+			// 如果当前没有prop的话表示当前不要进行删除（因为没有注入）
+			if (this.parent && this.prop) {
+				this.parent.fields.map((item, index) => {
+					if (item === this) this.parent.fields.splice(index, 1);
+				})
+			}
+		},
+		// #endif
+
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-form-item {
+		@include vue-flex;
+		// align-items: flex-start;
+		padding: 15rpx 0;
+		font-size: 28rpx;
+		color: $u-main-color;
+		box-sizing: border-box;
+		line-height: $u-form-item-height;
+		flex-direction: column;
+
+		&__border-bottom--error:after {
+			border-color: $u-type-error;
+		}
+
+		&__body {
+			@include vue-flex;
+		}
+
+		&--left {
+			@include vue-flex;
+			align-items: center;
+
+			&__content {
+				position: relative;
+				@include vue-flex;
+				align-items: center;
+				padding-right: 10rpx;
+				flex: 1;
+
+				&__icon {
+					margin-right: 8rpx;
+				}
+
+				&--required {
+					position: absolute;
+					left: -16rpx;
+					vertical-align: middle;
+					color: $u-type-error;
+					padding-top: 6rpx;
+				}
+
+				&__label {
+					@include vue-flex;
+					align-items: center;
+					flex: 1;
+				}
+			}
+		}
+
+		&--right {
+			flex: 1;
+
+			&__content {
+				@include vue-flex;
+				align-items: center;
+				flex: 1;
+
+				&__slot {
+					flex: 1;
+					@include vue-flex;
+					align-items: center;
+				}
+
+				&__icon {
+					margin-left: 10rpx;
+					color: $u-light-color;
+					font-size: 30rpx;
+				}
+			}
+		}
+
+		&__message {
+			font-size: 24rpx;
+			line-height: 24rpx;
+			color: $u-type-error;
+			margin-top: 12rpx;
+		}
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-form/u-form.vue

@@ -0,0 +1,148 @@
+<template>
+	<view class="u-form"><slot /></view>
+</template>
+
+<script>
+	/**
+	 * form 表单
+	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
+	 * @tutorial http://uviewui.com/components/form.html
+	 * @property {Object} model 表单数据对象
+	 * @property {Boolean} border-bottom 是否显示表单域的下划线边框
+	 * @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
+	 * @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
+	 * @property {Object} label-style lable的样式，对象形式
+	 * @property {String} label-align lable的对齐方式
+	 * @property {Object} rules 通过ref设置，见官网说明
+	 * @property {Array} error-type 错误的提示方式，数组形式，见上方说明(默认['message'])
+	 * @example <u-form :model="form" ref="uForm"></u-form>
+	 */
+
+export default {
+	name: 'u-form',
+	props: {
+		// 当前form的需要验证字段的集合
+		model: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 验证规则
+		// rules: {
+		// 	type: [Object, Function, Array],
+		// 	default() {
+		// 		return {};
+		// 	}
+		// },
+		// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
+		// border-bottom-下边框呈现红色，none-无提示
+		errorType: {
+			type: Array,
+			default() {
+				return ['message', 'toast']
+			}
+		},
+		// 是否显示表单域的下划线边框
+		borderBottom: {
+			type: Boolean,
+			default: true
+		},
+		// label的位置，left-左边，top-上边
+		labelPosition: {
+			type: String,
+			default: 'left'
+		},
+		// label的宽度，单位rpx
+		labelWidth: {
+			type: [String, Number],
+			default: 90
+		},
+		// lable字体的对齐方式
+		labelAlign: {
+			type: String,
+			default: 'left'
+		},
+		// lable的样式，对象形式
+		labelStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		// 表单内所有input的inputAlign属性的值
+		inputAlign: {
+			type: String,
+			default: 'left'
+		},
+		// 表单内所有input的clearable属性的值
+		clearable:{
+			type: Boolean,
+			default: true
+		}
+	},
+	provide() {
+		return {
+			uForm: this
+		};
+	},
+	data() {
+		return {
+			rules: {}
+		};
+	},
+	created() {
+		// 存储当前form下的所有u-form-item的实例
+		// 不能定义在data中，否则微信小程序会造成循环引用而报错
+		this.fields = [];
+	},
+	methods: {
+		setRules(rules) {
+			this.rules = rules;
+		},
+		// 清空所有u-form-item组件的内容，本质上是调用了u-form-item组件中的resetField()方法
+		resetFields() {
+			this.fields.map(field => {
+				field.resetField();
+			});
+		},
+		// 校验全部数据
+		validate(callback) {
+			return new Promise(resolve => {
+				// 对所有的u-form-item进行校验
+				let valid = true; // 默认通过
+				let count = 0; // 用于标记是否检查完毕
+				let errorArr = []; // 存放错误信息
+				let errorObjArr = []; // 存放错误信息对象
+				this.fields.map(field => {
+					// 调用每一个u-form-item实例的validation的校验方法
+					field.validation('', (errorMsg, errObj) => {
+						// 如果任意一个u-form-item校验不通过，就意味着整个表单不通过
+						if (errorMsg) {
+							valid = false;
+							errorArr.push(errorMsg);
+							errorObjArr.push(errObj)
+						}
+
+						// 当历遍了所有的u-form-item时，调用promise的then方法
+						if (++count === this.fields.length) {
+
+							resolve(valid, errorObjArr[0]); // 进入promise的then方法
+							// 判断是否设置了toast的提示方式，只提示最前面的表单域的第一个错误信息
+							if(this.errorType.indexOf('none') === -1 && this.errorType.indexOf('toast') >= 0 && errorArr.length) {
+								this.$u.toast(errorArr[0]);
+							}
+							// 调用回调方法
+							if (typeof callback == 'function') callback(valid, errorObjArr[0]);
+						}
+					});
+				});
+			});
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-full-screen/u-full-screen.vue

@@ -0,0 +1,52 @@
+<template>
+	<u-modal v-model="show" :show-cancel-button="true" confirm-text="升级" title="发现新版本" @cancel="cancel" @confirm="confirm">
+		<view class="u-update-content">
+			<rich-text :nodes="content"></rich-text>
+		</view>
+	</u-modal>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				content: `
+					1. 修复badge组件的size参数无效问题<br>
+					2. 新增Modal模态框组件<br>
+					3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
+					4. 修复键盘组件在微信小程序上遮罩无效的问题
+				`,
+			}
+		},
+		onReady() {
+			this.show = true;
+		},
+		methods: {
+			cancel() {
+				this.closeModal();
+			},
+			confirm() {
+				this.closeModal();
+			},
+			closeModal() {
+				uni.navigateBack();
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-full-content {
+		background-color: #00C777;
+	}
+	
+	.u-update-content {
+		font-size: 26rpx;
+		color: $u-content-color;
+		line-height: 1.7;
+		padding: 30rpx;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-gap/u-gap.vue

@@ -0,0 +1,54 @@
+<template>
+	<view class="u-gap" :style="[gapStyle]"></view>
+</template>
+
+<script>
+/**
+ * gap 间隔槽
+ * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
+ * @tutorial https://www.uviewui.com/components/gap.html
+ * @property {String} bg-color 背景颜色（默认#f3f4f6）
+ * @property {String Number} height 分割槽高度，单位rpx（默认30）
+ * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
+ * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
+ * @example <u-gap height="80" bg-color="#bbb"></u-gap>
+ */
+export default {
+	name: "u-gap",
+	props: {
+		bgColor: {
+			type: String,
+			default: 'transparent ' // 背景透明
+		},
+		// 高度
+		height: {
+			type: [String, Number],
+			default: 30
+		},
+		// 与上一个组件的距离
+		marginTop: {
+			type: [String, Number],
+			default: 0
+		},
+		// 与下一个组件的距离
+		marginBottom: {
+			type: [String, Number],
+			default: 0
+		},
+	},
+	computed: {
+		gapStyle() {
+			return {
+				backgroundColor: this.bgColor,
+				height: this.height + 'rpx',
+				marginTop: this.marginTop + 'rpx',
+				marginBottom: this.marginBottom + 'rpx'
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-grid-item/u-grid-item.vue

@@ -0,0 +1,127 @@
+<template>
+	<view class="u-grid-item" :hover-class="parentData.hoverClass"
+	 :hover-stay-time="200" @tap="click" :style="{
+			background: bgColor,
+			width: width,
+		}">
+		<view class="u-grid-item-box" :style="[customStyle]" :class="[parentData.border ? 'u-border-right u-border-bottom' : '']">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * gridItem 提示
+	 * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配u-grid使用
+	 * @tutorial https://www.uviewui.com/components/grid.html
+	 * @property {String} bg-color 宫格的背景颜色（默认#ffffff）
+	 * @property {String Number} index 点击宫格时，返回的值
+	 * @property {Object} custom-style 自定义样式，对象形式
+	 * @event {Function} click 点击宫格触发
+	 * @example <u-grid-item></u-grid-item>
+	 */
+	export default {
+		name: "u-grid-item",
+    emits: ["click"],
+		props: {
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// 点击时返回的index
+			index: {
+				type: [Number, String],
+				default: ''
+			},
+			// 自定义样式，对象形式
+			customStyle: {
+				type: Object,
+				default() {
+					return {
+						padding: '30rpx 0'
+					}
+				}
+			}
+		},
+		data() {
+			return {
+				parentData: {
+					hoverClass: '', // 按下去的时候，是否显示背景灰色
+					col: 3, // 父组件划分的宫格数
+					border: true, // 是否显示边框，根据父组件决定
+				}
+			};
+		},
+		created() {
+			// 父组件的实例
+			this.updateParentData();
+			// this.parent在updateParentData()中定义
+			this.parent.children.push(this);
+		},
+		computed: {
+			// 每个grid-item的宽度
+			width() {
+				return 100 / Number(this.parentData.col) + '%';
+			},
+		},
+		methods: {
+			// 获取父组件的参数
+			updateParentData() {
+				// 此方法写在mixin中
+				this.getParentData('u-grid');
+			},
+			click() {
+				this.$emit('click', this.index);
+				this.parent && this.parent.click(this.index);
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-grid-item {
+		box-sizing: border-box;
+		background: #fff;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		flex-direction: column;
+		
+		/* #ifdef MP */
+		position: relative;
+		float: left;
+		/* #endif */
+	}
+
+	.u-grid-item-hover {
+		background: #f7f7f7 !important;
+	}
+
+	.u-grid-marker-box {
+		position: absolute;
+		/* #ifndef APP-NVUE */
+		display: inline-flex;		
+		/* #endif */
+		line-height: 0;
+	}
+
+	.u-grid-marker-wrap {
+		position: absolute;
+	}
+
+	.u-grid-item-box {
+		padding: 30rpx 0;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		flex: 1;
+		width: 100%;
+		height: 100%;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-grid/u-grid.vue

@@ -0,0 +1,109 @@
+<template>
+	<view class="u-grid" :class="{'u-border-top u-border-left': border}" :style="[gridStyle]"><slot /></view>
+</template>
+
+<script>
+/**
+ * grid 宫格布局
+ * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
+ * @tutorial https://www.uviewui.com/components/grid.html
+ * @property {String Number} col 宫格的列数（默认3）
+ * @property {Boolean} border 是否显示宫格的边框（默认true）
+ * @property {Boolean} hover-class 点击宫格的时候，是否显示按下的灰色背景（默认false）
+ * @event {Function} click 点击宫格触发
+ * @example <u-grid :col="3" @click="click"></u-grid>
+ */
+export default {
+	name: 'u-grid',
+  emits: ["click"],
+	props: {
+		// 分成几列
+		col: {
+			type: [Number, String],
+			default: 3
+		},
+		// 是否显示边框
+		border: {
+			type: Boolean,
+			default: true
+		},
+		// 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右
+		align: {
+			type: String,
+			default: 'left'
+		},
+		// 宫格按压时的样式类，"none"为无效果
+		hoverClass: {
+			type: String,
+			default: 'u-hover-class'
+		}
+	},
+	data() {
+		return {
+			index: 0,
+		}
+	},
+	watch: {
+		// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
+		parentData() {
+			if(this.children.length) {
+				this.children.map(child => {
+					// 判断子组件(u-radio)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+					typeof(child.updateParentData) == 'function' && child.updateParentData();
+				})
+			}
+		},
+	},
+	created() {
+		// 如果将children定义在data中，在微信小程序会造成循环引用而报错
+		this.children = [];
+	},
+	computed: {
+		// 计算父组件的值是否发生变化
+		parentData() {
+			return [this.hoverClass, this.col, this.size, this.border];
+		},
+		// 宫格对齐方式
+		gridStyle() {
+			let style = {};
+			switch(this.align) {
+				case 'left':
+					style.justifyContent = 'flex-start';
+					break;
+				case 'center':
+					style.justifyContent = 'center';
+					break;
+				case 'right':
+					style.justifyContent = 'flex-end';
+					break;
+				default: style.justifyContent = 'flex-start';
+			};
+			return style;
+		}
+	},
+	methods: {
+		click(index) {
+			this.$emit('click', index);
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+
+.u-grid {
+	width: 100%;
+	/* #ifdef MP */
+	position: relative;
+	box-sizing: border-box;
+	overflow: hidden;
+	/* #endif */
+	
+	/* #ifndef MP */
+	@include vue-flex;
+	flex-wrap: wrap;
+	align-items: center;
+	/* #endif */
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-icon/u-icon.vue

@@ -0,0 +1,369 @@
+<template>
+	<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
+		<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
+		<view
+			v-else
+			class="u-icon__icon"
+			:class="customClass"
+			:style="[iconStyle]"
+			:hover-class="hoverClass"
+			@touchstart="touchstart"
+		>
+			<text
+				v-if="showDecimalIcon"
+				:style="[decimalIconStyle]"
+				:class="decimalIconClass"
+				:hover-class="hoverClass"
+				class="u-icon__decimal"
+			></text>
+		</view>
+		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示，微信小程序不传值默认为null，故需要增加null的判断 -->
+		<text
+			v-if="label !== '' && label !== null"
+			class="u-icon__label"
+			:style="{
+				color: labelColor,
+				fontSize: $u.addUnit(labelSize),
+				marginLeft: labelPos == 'right' ? $u.addUnit(marginLeft) : 0,
+				marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
+				marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
+				marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0
+			}"
+		>
+			{{ label }}
+		</text>
+	</view>
+</template>
+
+<script>
+/**
+ * icon 图标
+ * @description 基于字体的图标集，包含了大多数常见场景的图标。
+ * @tutorial https://www.uviewui.com/components/icon.html
+ * @property {String} name 图标名称，见示例图标集
+ * @property {String} color 图标颜色（默认inherit）
+ * @property {String | Number} size 图标字体大小，单位rpx（默认32）
+ * @property {String | Number} label-size label字体大小，单位rpx（默认28）
+ * @property {String} label 图标右侧的label文字（默认28）
+ * @property {String} label-pos label文字相对于图标的位置，只能right或bottom（默认right）
+ * @property {String} label-color label字体颜色（默认#606266）
+ * @property {Object} custom-style icon的样式，对象形式
+ * @property {String} custom-prefix 自定义字体图标库时，需要写上此值
+ * @property {String | Number} margin-left label在右侧时与图标的距离，单位rpx（默认6）
+ * @property {String | Number} margin-top label在下方时与图标的距离，单位rpx（默认6）
+ * @property {String | Number} margin-bottom label在上方时与图标的距离，单位rpx（默认6）
+ * @property {String | Number} margin-right label在左侧时与图标的距离，单位rpx（默认6）
+ * @property {String} label-pos label相对于图标的位置，只能right或bottom（默认right）
+ * @property {String} index 一个用于区分多个图标的值，点击图标时通过click事件传出
+ * @property {String} hover-class 图标按下去的样式类，用法同uni的view组件的hover-class参数，详情见官网
+ * @property {String} width 显示图片小图标时的宽度
+ * @property {String} height 显示图片小图标时的高度
+ * @property {String} top 图标在垂直方向上的定位
+ * @property {String} top 图标在垂直方向上的定位
+ * @property {String} top 图标在垂直方向上的定位
+ * @property {Boolean} show-decimal-icon 是否为DecimalIcon
+ * @property {String} inactive-color 背景颜色，可接受主题色，仅Decimal时有效
+ * @property {String | Number} percent 显示的百分比，仅Decimal时有效
+ * @event {Function} click 点击图标时触发
+ * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
+ */
+export default {
+	name: "u-icon",
+	emits: ["click", "touchstart"],
+	props: {
+		// 图标类名
+		name: {
+			type: String,
+			default: ""
+		},
+		// 图标颜色，可接受主题色
+		color: {
+			type: String,
+			default: ""
+		},
+		// 字体大小，单位rpx
+		size: {
+			type: [Number, String],
+			default: "inherit"
+		},
+		// 是否显示粗体
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
+		index: {
+			type: [Number, String],
+			default: ""
+		},
+		// 触摸图标时的类名
+		hoverClass: {
+			type: String,
+			default: ""
+		},
+		// 自定义扩展前缀，方便用户扩展自己的图标库
+		customPrefix: {
+			type: String,
+			default: "uicon"
+		},
+		// 图标右边或者下面的文字
+		label: {
+			type: [String, Number],
+			default: ""
+		},
+		// label的位置，只能右边或者下边
+		labelPos: {
+			type: String,
+			default: "right"
+		},
+		// label的大小
+		labelSize: {
+			type: [String, Number],
+			default: "28"
+		},
+		// label的颜色
+		labelColor: {
+			type: String,
+			default: "#606266"
+		},
+		// label与图标的距离(横向排列)
+		marginLeft: {
+			type: [String, Number],
+			default: "6"
+		},
+		// label与图标的距离(竖向排列)
+		marginTop: {
+			type: [String, Number],
+			default: "6"
+		},
+		// label与图标的距离(竖向排列)
+		marginRight: {
+			type: [String, Number],
+			default: "6"
+		},
+		// label与图标的距离(竖向排列)
+		marginBottom: {
+			type: [String, Number],
+			default: "6"
+		},
+		// 图片的mode
+		imgMode: {
+			type: String,
+			default: "aspectFill"
+		},
+		// 自定义样式
+		customStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 用于显示图片小图标时，图片的宽度
+		width: {
+			type: [String, Number],
+			default: ""
+		},
+		// 用于显示图片小图标时，图片的高度
+		height: {
+			type: [String, Number],
+			default: ""
+		},
+		// 用于解决某些情况下，让图标垂直居中的用途
+		top: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否为DecimalIcon
+		showDecimalIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 背景颜色，可接受主题色，仅Decimal时有效
+		inactiveColor: {
+			type: String,
+			default: "#ececec"
+		},
+		// 显示的百分比，仅Decimal时有效
+		percent: {
+			type: [Number, String],
+			default: "50"
+		}
+	},
+	computed: {
+		customClass() {
+			let classes = [];
+			let { customPrefix, name } = this;
+			let index = name.indexOf("-icon-");
+			if (index > -1) {
+				customPrefix = name.substring(0, index + 5);
+				classes.push(name);
+			} else {
+				classes.push(`${customPrefix}-${name}`);
+			}
+			// uView的自定义图标类名为u-iconfont
+			if (customPrefix === "uicon") {
+				classes.push("u-iconfont");
+			} else {
+				classes.push(customPrefix);
+			}
+			// 主题色，通过类配置
+			if (
+				this.showDecimalIcon &&
+				this.inactiveColor &&
+				this.$u.config.type.includes(this.inactiveColor)
+			) {
+				classes.push("u-icon__icon--" + this.inactiveColor);
+			} else if (this.color && this.$u.config.type.includes(this.color))
+				classes.push("u-icon__icon--" + this.color);
+			// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+			// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+			//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+			classes = classes.join(" ");
+			//#endif
+			return classes;
+		},
+		iconStyle() {
+			let style = {};
+			style = {
+				fontSize: this.size == "inherit" ? "inherit" : this.$u.addUnit(this.size),
+				fontWeight: this.bold ? "bold" : "normal",
+				// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+				top: this.$u.addUnit(this.top)
+			};
+			// 非主题色值时，才当作颜色值
+			if (
+				this.showDecimalIcon &&
+				this.inactiveColor &&
+				!this.$u.config.type.includes(this.inactiveColor)
+			) {
+				style.color = this.inactiveColor;
+			} else if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color;
+
+			return style;
+		},
+		// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+		isImg() {
+			return this.name.indexOf("/") !== -1;
+		},
+		imgStyle() {
+			let style = {};
+			// 如果设置width和height属性，则优先使用，否则使用size属性
+			style.width = this.width ? this.$u.addUnit(this.width) : this.$u.addUnit(this.size);
+			style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size);
+			return style;
+		},
+		decimalIconStyle() {
+			let style = {};
+			style = {
+				fontSize: this.size == "inherit" ? "inherit" : this.$u.addUnit(this.size),
+				fontWeight: this.bold ? "bold" : "normal",
+				// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+				top: this.$u.addUnit(this.top),
+				width: this.percent + "%"
+			};
+			// 非主题色值时，才当作颜色值
+			if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color;
+			return style;
+		},
+		decimalIconClass() {
+			let classes = [];
+			classes.push(this.customPrefix + "-" + this.name);
+			// uView的自定义图标类名为u-iconfont
+			if (this.customPrefix == "uicon") {
+				classes.push("u-iconfont");
+			} else {
+				classes.push(this.customPrefix);
+			}
+			// 主题色，通过类配置
+			if (this.color && this.$u.config.type.includes(this.color))
+				classes.push("u-icon__icon--" + this.color);
+			else classes.push("u-icon__icon--primary");
+			// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+			// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+			//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
+			classes = classes.join(" ");
+			//#endif
+			return classes;
+		}
+	},
+	methods: {
+		click() {
+			this.$emit("click", this.index);
+		},
+		touchstart() {
+			this.$emit("touchstart", this.index);
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+@import "../../iconfont.css";
+
+.u-icon {
+	display: inline-flex;
+	align-items: center;
+
+	&--left {
+		flex-direction: row-reverse;
+		align-items: center;
+	}
+
+	&--right {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	&--top {
+		flex-direction: column-reverse;
+		justify-content: center;
+	}
+
+	&--bottom {
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	&__icon {
+		position: relative;
+
+		&--primary {
+			color: $u-type-primary;
+		}
+
+		&--success {
+			color: $u-type-success;
+		}
+
+		&--error {
+			color: $u-type-error;
+		}
+
+		&--warning {
+			color: $u-type-warning;
+		}
+
+		&--info {
+			color: $u-type-info;
+		}
+	}
+
+	&__decimal {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: inline-block;
+		overflow: hidden;
+	}
+
+	&__img {
+		height: auto;
+		will-change: transform;
+	}
+
+	&__label {
+		line-height: 1;
+	}
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-image/u-image.vue

@@ -0,0 +1,267 @@
+<template>
+	<view class="u-image" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
+		<image
+			v-if="!isError"
+			:src="src"
+			:mode="mode"
+			@error="onErrorHandler"
+			@load="onLoadHandler"
+			:lazy-load="lazyLoad"
+			class="u-image__image"
+			:style="{
+				borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
+			}"
+		></image>
+		<view
+			v-if="showLoading && loading"
+			class="u-image__loading"
+			:style="{
+				borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius),
+				backgroundColor: bgColor
+			}"
+		>
+			<slot v-if="$slots.loading" name="loading" />
+			<u-icon v-else :name="loadingIcon" :width="width" :height="height"></u-icon>
+		</view>
+		<view
+			v-if="showError && isError && !loading"
+			class="u-image__error"
+			:style="{
+				borderRadius: shape == 'circle' ? '50%' : $u.addUnit(borderRadius)
+			}"
+		>
+			<slot v-if="$slots.error" name="error" />
+			<u-icon v-else :name="errorIcon" :width="width" :height="height"></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * Image 图片
+ * @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
+ * @tutorial https://uviewui.com/components/image.html
+ * @property {String} src 图片地址
+ * @property {String} mode 裁剪模式，见官网说明
+ * @property {String | Number} width 宽度，单位任意，如果为数值，则为rpx单位（默认100%）
+ * @property {String | Number} height 高度，单位任意，如果为数值，则为rpx单位（默认 auto）
+ * @property {String} shape 图片形状，circle-圆形，square-方形（默认square）
+ * @property {String | Number} border-radius 圆角值，单位任意，如果为数值，则为rpx单位（默认 0）
+ * @property {Boolean} lazy-load 是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效（默认 true）
+ * @property {Boolean} show-menu-by-longpress 是否开启长按图片显示识别小程序码菜单，仅微信小程序有效（默认 false）
+ * @property {String} loading-icon 加载中的图标，或者小图片（默认 photo）
+ * @property {String} error-icon 加载失败的图标，或者小图片（默认 error-circle）
+ * @property {Boolean} show-loading 是否显示加载中的图标或者自定义的slot（默认 true）
+ * @property {Boolean} show-error 是否显示加载错误的图标或者自定义的slot（默认 true）
+ * @property {Boolean} fade 是否需要淡入效果（默认 true）
+ * @property {String Number} width 传入图片路径时图片的宽度
+ * @property {String Number} height 传入图片路径时图片的高度
+ * @property {Boolean} webp 只支持网络资源，只对微信小程序有效（默认 false）
+ * @property {String | Number} duration 搭配fade参数的过渡时间，单位ms（默认 500）
+ * @event {Function} click 点击图片时触发
+ * @event {Function} error 图片加载失败时触发
+ * @event {Function} load 图片加载成功时触发
+ * @example <u-image width="100%" height="300rpx" :src="src"></u-image>
+ */
+export default {
+	name: 'u-image',
+  emits: ["click", "error", "load"],
+	props: {
+		// 图片地址
+		src: {
+			type: String,
+			default: ''
+		},
+		// 裁剪模式
+		mode: {
+			type: String,
+			default: 'aspectFill'
+		},
+		// 宽度，单位任意
+		width: {
+			type: [String, Number],
+			default: '100%'
+		},
+		// 高度，单位任意
+		height: {
+			type: [String, Number],
+			default: 'auto'
+		},
+		// 图片形状，circle-圆形，square-方形
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		// 圆角，单位任意
+		borderRadius: {
+			type: [String, Number],
+			default: 0
+		},
+		// 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
+		lazyLoad: {
+			type: Boolean,
+			default: true
+		},
+		// 开启长按图片显示识别微信小程序码菜单
+		showMenuByLongpress: {
+			type: Boolean,
+			default: true
+		},
+		// 加载中的图标，或者小图片
+		loadingIcon: {
+			type: String,
+			default: 'photo'
+		},
+		// 加载失败的图标，或者小图片
+		errorIcon: {
+			type: String,
+			default: 'error-circle'
+		},
+		// 是否显示加载中的图标或者自定义的slot
+		showLoading: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示加载错误的图标或者自定义的slot
+		showError: {
+			type: Boolean,
+			default: true
+		},
+		// 是否需要淡入效果
+		fade: {
+			type: Boolean,
+			default: true
+		},
+		// 只支持网络资源，只对微信小程序有效
+		webp: {
+			type: Boolean,
+			default: false
+		},
+		// 过渡时间，单位ms
+		duration: {
+			type: [String, Number],
+			default: 500
+		},
+		// 背景颜色，用于深色页面加载图片时，为了和背景色融合
+		bgColor: {
+			type: String,
+			default: '#f3f4f6'
+		}
+	},
+	data() {
+		return {
+			// 图片是否加载错误，如果是，则显示错误占位图
+			isError: false,
+			// 初始化组件时，默认为加载中状态
+			loading: true,
+			// 不透明度，为了实现淡入淡出的效果
+			opacity: 1,
+			// 过渡时间，因为props的值无法修改，故需要一个中间值
+			durationTime: this.duration,
+			// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
+			backgroundStyle: {}
+		};
+	},
+	watch: {
+		src: {
+			immediate: true,
+			handler (n) {
+				if(!n) {
+					// 如果传入null或者''，或者false，或者undefined，标记为错误状态
+					this.isError = true;
+					this.loading = false;
+				} else {
+					this.isError = false;
+                    this.loading = true;
+				}
+			}
+		}
+	},
+	computed: {
+		wrapStyle() {
+			let style = {};
+			// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
+			style.width = this.$u.addUnit(this.width);
+			style.height = this.$u.addUnit(this.height);
+			// 如果是配置了圆形，设置50%的圆角，否则按照默认的配置值
+			style.borderRadius = this.shape == 'circle' ? '50%' : this.$u.addUnit(this.borderRadius);
+			// 如果设置圆角，必须要有hidden，否则可能圆角无效
+			style.overflow = this.borderRadius > 0 ? 'hidden' : 'visible';
+			if (this.fade) {
+				style.opacity = this.opacity;
+				style.transition = `opacity ${Number(this.durationTime) / 1000}s ease-in-out`;
+			}
+			return style;
+		}
+	},
+	methods: {
+		// 点击图片
+		onClick() {
+			this.$emit('click');
+		},
+		// 图片加载失败
+		onErrorHandler(err) {
+			this.loading = false;
+			this.isError = true;
+			this.$emit('error', err);
+		},
+		// 图片加载完成，标记loading结束
+		onLoadHandler() {
+			this.loading = false;
+			this.isError = false;
+			this.$emit('load');
+			// 如果不需要动画效果，就不执行下方代码，同时移除加载时的背景颜色
+			// 否则无需fade效果时，png图片依然能看到下方的背景色
+			if (!this.fade) return this.removeBgColor();
+			// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的灰色)，再改成1，是为了获得过渡效果
+			this.opacity = 0;
+			// 这里设置为0，是为了图片展示到背景全透明这个过程时间为0，延时之后延时之后重新设置为duration，是为了获得背景透明(灰色)
+			// 到图片展示的过程中的淡入效果
+			this.durationTime = 0;
+			// 延时50ms，否则在浏览器H5，过渡效果无效
+			setTimeout(() => {
+				this.durationTime = this.duration;
+				this.opacity = 1;
+				setTimeout(() => {
+					this.removeBgColor();
+				}, this.durationTime);
+			}, 50);
+		},
+		// 移除图片的背景色
+		removeBgColor() {
+			// 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
+			this.backgroundStyle = {
+				backgroundColor: 'transparent'
+			};
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-image {
+	position: relative;
+	transition: opacity 0.5s ease-in-out;
+	&__image {
+		width: 100%;
+		height: 100%;
+	}
+
+	&__loading,
+	&__error {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		background-color: $u-bg-color;
+		color: $u-tips-color;
+		font-size: 46rpx;
+	}
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-index-anchor/u-index-anchor.vue

@@ -0,0 +1,89 @@
+<template>
+	<!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
+	<view>
+		<view class="u-index-anchor-wrapper" :id="$u.guid()" :style="[wrapperStyle]">
+			<view class="u-index-anchor " :class="[active ? 'u-index-anchor--active' : '']" :style="[customAnchorStyle]">
+				<slot v-if="useSlot" />
+				<block v-else>
+					<text>{{ index }}</text>
+				</block>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * indexAnchor 索引列表锚点
+	 * @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
+	 * @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
+	 * @property {Boolean} use-slot 是否使用自定义内容的插槽（默认false）
+	 * @property {String Number} index 索引字符，如果定义了use-slot，此参数自动失效
+	 * @property {Object} custStyle 自定义样式，对象形式，如"{color: 'red'}"
+	 * @event {Function} default 锚点位置显示内容，默认为索引字符
+	 * @example <u-index-anchor :index="item" />
+	 */
+	export default {
+		name: "u-index-anchor",
+		props: {
+			useSlot: {
+				type: Boolean,
+				default: false
+			},
+			index: {
+				type: String,
+				default: ''
+			},
+			customStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			}
+		},
+		data() {
+			return {
+				active: false,
+				wrapperStyle: {},
+				anchorStyle: {}
+			}
+		},
+		created() {
+			this.parent = false;
+		},
+		mounted() {
+			this.parent = this.$u.$parent.call(this, 'u-index-list');
+			if(this.parent) {
+				this.parent.children.push(this);
+				this.parent.updateData();
+			}
+		},
+		computed: {
+			customAnchorStyle() {
+				return Object.assign(this.anchorStyle, this.customStyle);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-index-anchor {
+		box-sizing: border-box;
+		padding: 14rpx 24rpx;
+		color: #606266;
+		width: 100%;
+		font-weight: 500;
+		font-size: 28rpx;
+		line-height: 1.2;
+		background-color: rgb(245, 245, 245);
+	}
+
+	.u-index-anchor--active {
+		right: 0;
+		left: 0;
+		color: #2979ff;
+		background-color: #fff;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-index-list/u-index-list.vue

@@ -0,0 +1,315 @@
+<template>
+	<!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸，所以在外面套一个"壳" -->
+	<view>
+		<view class="u-index-bar">
+			<slot />
+			<view v-if="showSidebar" class="u-index-bar__sidebar" @touchstart.stop.prevent="onTouchMove" @touchmove.stop.prevent="onTouchMove"
+			 @touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop">
+				<view v-for="(item, index) in indexList" :key="index" class="u-index-bar__index" :style="{zIndex: zIndex + 1, color: activeAnchorIndex === index ? activeColor : ''}"
+				 :data-index="index">
+					{{ item }}
+				</view>
+			</view>
+			<view class="u-indexed-list-alert" v-if="touchmove && indexList[touchmoveIndex]" :style="{
+				zIndex: alertZIndex
+			}">
+				<text>{{indexList[touchmoveIndex]}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	var indexList = function() {
+		var indexList = [];
+		var charCodeOfA = 'A'.charCodeAt(0);
+		for (var i = 0; i < 26; i++) {
+			indexList.push(String.fromCharCode(charCodeOfA + i));
+		}
+		return indexList;
+	};
+
+	/**
+	 * indexList 索引列表
+	 * @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
+	 * @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
+	 * @property {Number String} scroll-top 当前滚动高度，自定义组件无法获得滚动条事件，所以依赖接入方传入
+	 * @property {Array} index-list 索引字符列表，数组（默认A-Z）
+	 * @property {Number String} z-index 锚点吸顶时的层级（默认965）
+	 * @property {Boolean} sticky 是否开启锚点自动吸顶（默认true）
+	 * @property {Number String} offset-top 锚点自动吸顶时与顶部的距离（默认0）
+	 * @property {String} highlight-color 锚点和右边索引字符高亮颜色（默认#2979ff）
+	 * @event {Function} select 选中右边索引字符时触发
+	 * @example <u-index-list :scrollTop="scrollTop"></u-index-list>
+	 */
+	export default {
+		name: "u-index-list",
+		props: {
+			sticky: {
+				type: Boolean,
+				default: true
+			},
+			zIndex: {
+				type: [Number, String],
+				default: ''
+			},
+			scrollTop: {
+				type: [Number, String],
+				default: 0,
+			},
+			offsetTop: {
+				type: [Number, String],
+				default: 0
+			},
+			indexList: {
+				type: Array,
+				default () {
+					return indexList()
+				}
+			},
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			}
+		},
+		created() {
+			// #ifdef H5
+			this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 44;
+			// #endif
+			// #ifndef H5
+			this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 0;
+			// #endif
+			// 只能在created生命周期定义children，如果在data定义，会因为循环引用而报错
+			this.children = [];
+		},
+		data() {
+			return {
+				activeAnchorIndex: 0,
+				showSidebar: true,
+				// children: [],
+				touchmove: false,
+				touchmoveIndex: 0,
+			}
+		},
+		watch: {
+			scrollTop() {
+				this.updateData()
+			}
+		},
+		computed: {
+			// 弹出toast的z-index值
+			alertZIndex() {
+				return this.$u.zIndex.toast;
+			}
+		},
+		methods: {
+			updateData() {
+				this.timer && clearTimeout(this.timer);
+				this.timer = setTimeout(() => {
+					this.showSidebar = !!this.children.length;
+					this.setRect().then(() => {
+						this.onScroll();
+					});
+				}, 0);
+			},
+			setRect() {
+				return Promise.all([
+					this.setAnchorsRect(),
+					this.setListRect(),
+					this.setSiderbarRect()
+				]);
+			},
+			setAnchorsRect() {
+				return Promise.all(this.children.map((anchor, index) => anchor
+					.$uGetRect('.u-index-anchor-wrapper')
+					.then((rect) => {
+						Object.assign(anchor, {
+							height: rect.height,
+							top: rect.top
+						});
+					})));
+			},
+			setListRect() {
+				return this.$uGetRect('.u-index-bar').then((rect) => {
+					Object.assign(this, {
+						height: rect.height,
+						top: rect.top + this.scrollTop
+					});
+				});
+			},
+			setSiderbarRect() {
+				return this.$uGetRect('.u-index-bar__sidebar').then(rect => {
+					this.sidebar = {
+						height: rect.height,
+						top: rect.top
+					};
+				});
+			},
+			getActiveAnchorIndex() {
+				const {
+					children
+				} = this;
+				const {
+					sticky
+				} = this;
+				for (let i = this.children.length - 1; i >= 0; i--) {
+					const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
+					const reachTop = sticky ? preAnchorHeight : 0;
+					if (reachTop >= children[i].top) {
+						return i;
+					}
+				}
+				return -1;
+			},
+			onScroll() {
+				const {
+					children = []
+				} = this;
+				if (!children.length) {
+					return;
+				}
+				const {
+					sticky,
+					stickyOffsetTop,
+					zIndex,
+					scrollTop,
+					activeColor
+				} = this;
+				const active = this.getActiveAnchorIndex();
+				this.activeAnchorIndex = active;
+				if (sticky) {
+					let isActiveAnchorSticky = false;
+					if (active !== -1) {
+						isActiveAnchorSticky =
+							children[active].top <= 0;
+					}
+					children.forEach((item, index) => {
+						if (index === active) {
+							let wrapperStyle = '';
+							let anchorStyle = {
+								color: `${activeColor}`
+							};
+							if (isActiveAnchorSticky) {
+								wrapperStyle = {
+									height: `${children[index].height}px`
+								};
+								anchorStyle = {
+									position: 'fixed',
+									top: `${stickyOffsetTop}px`,
+									zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
+									color: `${activeColor}`
+								};
+							}
+							item.active = active;
+							item.wrapperStyle = wrapperStyle;
+							item.anchorStyle = anchorStyle;
+						} else if (index === active - 1) {
+							const currentAnchor = children[index];
+							const currentOffsetTop = currentAnchor.top;
+							const targetOffsetTop = index === children.length - 1 ?
+								this.top :
+								children[index + 1].top;
+							const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
+							const translateY = parentOffsetHeight - currentAnchor.height;
+							const anchorStyle = {
+								position: 'relative',
+								transform: `translate3d(0, ${translateY}px, 0)`,
+								zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
+								color: `${activeColor}`
+							};
+							item.active = active;
+							item.anchorStyle = anchorStyle;
+						} else {
+							item.active = false;
+							item.anchorStyle = '';
+							item.wrapperStyle = '';
+						}
+					});
+				}
+			},
+			onTouchMove(event) {
+				this.touchmove = true;
+				const sidebarLength = this.children.length;
+				const touch = event.touches[0];
+				const itemHeight = this.sidebar.height / sidebarLength;
+				let clientY = 0;
+				clientY = touch.clientY;
+				let index = Math.floor((clientY - this.sidebar.top) / itemHeight);
+				if (index < 0) {
+					index = 0;
+				} else if (index > sidebarLength - 1) {
+					index = sidebarLength - 1;
+				}
+				this.touchmoveIndex = index;
+				this.scrollToAnchor(index);
+			},
+			onTouchStop() {
+				this.touchmove = false;
+				this.scrollToAnchorIndex = null;
+			},
+			scrollToAnchor(index) {
+				if (this.scrollToAnchorIndex === index) {
+					return;
+				}
+				this.scrollToAnchorIndex = index;
+				const anchor = this.children.find((item) => item.index === this.indexList[index]);
+				if (anchor) {
+					this.$emit('select', anchor.index);
+					uni.pageScrollTo({
+						duration: 0,
+						scrollTop: anchor.top + this.scrollTop
+					});
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-index-bar {
+		position: relative
+	}
+
+	.u-index-bar__sidebar {
+		position: fixed;
+		top: 50%;
+		right: 0;
+		@include vue-flex;
+		flex-direction: column;
+		text-align: center;
+		transform: translateY(-50%);
+		user-select: none;
+		z-index: 99;
+	}
+
+	.u-index-bar__index {
+		font-weight: 500;
+		padding: 8rpx 18rpx;
+		font-size: 22rpx;
+		line-height: 1
+	}
+
+	.u-indexed-list-alert {
+		position: fixed;
+		width: 120rpx;
+		height: 120rpx;
+		right: 90rpx;
+		top: 50%;
+		margin-top: -60rpx;
+		border-radius: 24rpx;
+		font-size: 50rpx;
+		color: #fff;
+		background-color: rgba(0, 0, 0, 0.65);
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0;
+		z-index: 9999999;
+	}
+
+	.u-indexed-list-alert text {
+		line-height: 50rpx;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-input/u-input.vue

@@ -0,0 +1,470 @@
+<template>
+	<view
+		class="u-input"
+		:class="{
+			'u-input--border': border,
+			'u-input--error': validateState
+		}"
+		:style="{
+			padding: padding ? padding : `0 ${border ? 20 : 0}rpx`,
+			borderColor: borderColor,
+			textAlign: inputAlignCom,
+			backgroundColor: backgroundColor,
+		}"
+		@tap.stop="inputClick"
+	>
+		<textarea
+			v-if="type == 'textarea'"
+			class="u-input__input u-input__textarea"
+			:style="[getStyle]"
+			:value="defaultValue"
+			:placeholder="placeholder"
+			:placeholderStyle="placeholderStyle"
+			:disabled="disabled"
+			:maxlength="inputMaxlength"
+			:fixed="fixed"
+			:focus="focus"
+			:autoHeight="autoHeight"
+			:selection-end="uSelectionEnd"
+			:selection-start="uSelectionStart"
+			:cursor-spacing="getCursorSpacing"
+			:show-confirm-bar="showConfirmbar"
+			:disable-default-padding="disableDefaultPadding"
+			:adjust-position="adjustPosition"
+			:adjust-keyboard-to="adjustKeyboardTo"
+			@input="handleInput"
+			@blur="handleBlur"
+			@focus="onFocus"
+			@confirm="onConfirm"
+		/>
+		<input
+			v-else
+			class="u-input__input"
+			:type="type == 'password' ? 'text' : type"
+			:style="[getStyle]"
+			:value="defaultValue"
+			:password="type == 'password' && !showPassword"
+			:placeholder="placeholder"
+			:placeholderStyle="placeholderStyle"
+			:disabled="disabled || type === 'select'"
+			:maxlength="inputMaxlength"
+			:focus="focus"
+			:confirmType="confirmType"
+			:cursor-spacing="getCursorSpacing"
+			:selection-end="uSelectionEnd"
+			:selection-start="uSelectionStart"
+			:adjustPosition="adjustPosition"
+			@focus="onFocus"
+			@blur="handleBlur"
+			@input="handleInput"
+			@confirm="onConfirm"
+		/>
+		<view class="u-input__right-icon u-flex">
+			<view
+				class="u-input__right-icon__clear u-input__right-icon__item"
+				@tap="onClear"
+				v-if="clearableCom && valueCom != '' && focused"
+			>
+				<u-icon size="32" name="close-circle-fill" color="#c0c4cc" />
+			</view>
+			<view
+				class="u-input__right-icon__clear u-input__right-icon__item"
+				v-if="passwordIcon && type == 'password'"
+			>
+				<u-icon
+					size="32"
+					:name="!showPassword ? 'eye' : 'eye-fill'"
+					color="#c0c4cc"
+					@click="showPassword = !showPassword"
+				/>
+			</view>
+			<view
+				class="u-input__right-icon--select u-input__right-icon__item"
+				v-if="type == 'select'"
+				:class="{
+					'u-input__right-icon--select--reverse': selectOpen
+				}"
+			>
+				<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import Emitter from "../../libs/util/emitter.js";
+
+/**
+ * input 输入框
+ * @description 此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
+ * @tutorial http://uviewui.com/components/input.html
+ * @property {String} type 模式选择，见官网说明
+ * @property {Boolean} clearable 是否显示右侧的清除图标(默认true)
+ * @property {} v-model 用于双向绑定输入框的值
+ * @property {String} input-align 输入框文字的对齐方式(默认left)
+ * @property {String} placeholder placeholder显示值(默认 '请输入内容')
+ * @property {Boolean} disabled 是否禁用输入框(默认false)
+ * @property {String Number} maxlength 输入框的最大可输入长度(默认140)
+ * @property {String Number} selection-start 光标起始位置，自动聚焦时有效，需与selection-end搭配使用（默认-1）
+ * @property {String Number} maxlength 光标结束位置，自动聚焦时有效，需与selection-start搭配使用（默认-1）
+ * @property {String Number} cursor-spacing 指定光标与键盘的距离，单位px(默认0)
+ * @property {String} placeholderStyle placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;")
+ * @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type为text时生效(默认done)
+ * @property {Object} custom-style 自定义输入框的样式，对象形式
+ * @property {Boolean} focus 是否自动获得焦点(默认false)
+ * @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true(默认false)
+ * @property {Boolean} password-icon type为password时，是否显示右侧的密码查看图标(默认true)
+ * @property {Boolean} border 是否显示边框(默认false)
+ * @property {String} border-color 输入框的边框颜色(默认#dcdfe6)
+ * @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效(默认true)
+ * @property {String Number} height 高度，单位rpx(text类型时为70，textarea时为100)
+ * @example <u-input v-model="value" :type="type" :border="border" />
+ */
+export default {
+	
+	name: "u-input",
+	emits: ["update:modelValue", "input", "change", "blur", "focus", "click", "touchstart"],
+	mixins: [Emitter],
+	props: {
+		value: {
+			type: [String, Number],
+			default: ""
+		},
+		modelValue: {
+			type: [String, Number],
+			default: ""
+		},
+		// 输入框的类型，textarea，text，number
+		type: {
+			type: String,
+			default: "text"
+		},
+		inputAlign: {
+			type: String,
+			default: ""
+		},
+		placeholder: {
+			type: String,
+			default: "请输入内容"
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		maxlength: {
+			type: [Number, String],
+			default: 140
+		},
+		placeholderStyle: {
+			type: String,
+			default: "color: #888888;"
+		},
+		confirmType: {
+			type: String,
+			default: "done"
+		},
+		// 输入框的自定义样式
+		customStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
+		fixed: {
+			type: Boolean,
+			default: false
+		},
+		// 是否自动获得焦点
+		focus: {
+			type: Boolean,
+			default: false
+		},
+		// 密码类型时，是否显示右侧的密码图标
+		passwordIcon: {
+			type: Boolean,
+			default: true
+		},
+		// input|textarea是否显示边框
+		border: {
+			type: Boolean,
+			default: false
+		},
+		// 输入框的边框颜色
+		borderColor: {
+			type: String,
+			default: "#dcdfe6"
+		},
+		autoHeight: {
+			type: Boolean,
+			default: true
+		},
+		// type=select时，旋转右侧的图标，标识当前处于打开还是关闭select的状态
+		// open-打开，close-关闭
+		selectOpen: {
+			type: Boolean,
+			default: false
+		},
+		// 高度，单位rpx
+		height: {
+			type: [Number, String],
+			default: ""
+		},
+		// 是否可清空
+		clearable: {
+			type: [Boolean, String],
+		},
+		// 指定光标与键盘的距离，单位 px
+		cursorSpacing: {
+			type: [Number, String],
+			default: 0
+		},
+		// 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
+		selectionStart: {
+			type: [Number, String],
+			default: -1
+		},
+		// 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
+		selectionEnd: {
+			type: [Number, String],
+			default: -1
+		},
+		// 是否自动去除两端的空格
+		trim: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示键盘上方带有”完成“按钮那一栏
+		showConfirmbar: {
+			type: Boolean,
+			default: false
+		},
+		//是否去掉 iOS 下的默认内边距
+		disableDefaultPadding: {
+			type: Boolean,
+			default: true
+		},
+		// input的背景色
+		backgroundColor: {
+			type: String,
+		},
+		// input的padding
+		padding: {
+			type: String,
+		},
+		adjustPosition: {
+			type: Boolean,
+			default: true
+		},
+		adjustKeyboardTo: {
+			type: String,
+			default:'cursor'
+		}
+	},
+	data() {
+		return {
+			defaultValue: "",
+			inputHeight: 70, // input的高度
+			textareaHeight: 100, // textarea的高度
+			validateState: false, // 当前input的验证状态，用于错误时，边框是否改为红色
+			focused: false, // 当前是否处于获得焦点的状态
+			showPassword: false, // 是否预览密码
+			lastValue: "" ,// 用于头条小程序，判断@input中，前后的值是否发生了变化，因为头条中文下，按下键没有输入内容，也会触发@input时间
+			uForm:{
+				inputAlign: "",
+				clearable: ""
+			}
+		};
+	},
+	watch: {
+		valueCom(nVal, oVal) {
+			this.defaultValue = nVal;
+			// 当值发生变化，且为select类型时(此时input被设置为disabled，不会触发@input事件)，模拟触发@input事件
+			if (nVal != oVal && this.type == "select")
+				this.handleInput({
+					detail: {
+						value: nVal
+					}
+				});
+		}
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+		
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		inputAlignCom(){
+			return this.inputAlign || this.uForm.inputAlign || "left";
+		},
+		clearableCom(){
+			if (typeof this.clearable == "boolean") return this.clearable;
+			if (typeof this.uForm.clearable == "boolean") return this.uForm.clearable;
+			return true;
+		},
+		// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
+		inputMaxlength() {
+			return Number(this.maxlength);
+		},
+		getStyle() {
+			let style = {};
+			// 如果没有自定义高度，就根据type为input还是textare来分配一个默认的高度
+			style.minHeight = this.height
+				? this.height + "rpx"
+				: this.type == "textarea"
+				? this.textareaHeight + "rpx"
+				: this.inputHeight + "rpx";
+			style = Object.assign(style, this.customStyle);
+			return style;
+		},
+		//
+		getCursorSpacing() {
+			return Number(this.cursorSpacing);
+		},
+		// 光标起始位置
+		uSelectionStart() {
+			return String(this.selectionStart);
+		},
+		// 光标结束位置
+		uSelectionEnd() {
+			return String(this.selectionEnd);
+		}
+	},
+	created() {
+		// 监听u-form-item发出的错误事件，将输入框边框变红色
+		// #ifndef VUE3
+		this.$on("onFormItemError", this.onFormItemError);
+		// #endif
+		this.defaultValue = this.valueCom;
+	},
+	mounted() {
+		let parent = this.$u.$parent.call(this, 'u-form');
+		if (parent) {
+			Object.keys(this.uForm).map(key => {
+				this.uForm[key] = parent[key];
+			});
+		}
+	},
+	methods: {
+		/**
+		 * change 事件
+		 * @param event
+		 */
+		handleInput(event) {
+			let value = event.detail.value;
+			// 判断是否去除空格
+			if (this.trim) value = this.$u.trim(value);
+			// vue 原生的方法 return 出去
+			this.$emit("input", value);
+			this.$emit("update:modelValue", value);
+			// 当前model 赋值
+			this.defaultValue = value;
+			// 过一个生命周期再发送事件给u-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
+			// 尚未更新到u-form-item，导致获取的值为空，从而校验混论
+			// 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
+			setTimeout(() => {
+				// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
+				// #ifdef MP-TOUTIAO
+				if (this.$u.trim(value) == this.lastValue) return;
+				this.lastValue = value;
+				// #endif
+				// 将当前的值发送到 u-form-item 进行校验
+				this.dispatch("u-form-item", "onFieldChange", value);
+			}, 40);
+		},
+		/**
+		 * blur 事件
+		 * @param event
+		 */
+		handleBlur(event) {
+			// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
+			// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
+			setTimeout(() => {
+				this.focused = false;
+			}, 100);
+			// vue 原生的方法 return 出去
+			this.$emit("blur", event.detail.value);
+			setTimeout(() => {
+				// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
+				// #ifdef MP-TOUTIAO
+				if (this.$u.trim(value) == this.lastValue) return;
+				this.lastValue = value;
+				// #endif
+				// 将当前的值发送到 u-form-item 进行校验
+				this.dispatch("u-form-item", "onFieldBlur", event.detail.value);
+			}, 40);
+		},
+		onFormItemError(status) {
+			this.validateState = status;
+		},
+		onFocus(event) {
+			this.focused = true;
+			this.$emit("focus");
+		},
+		onConfirm(e) {
+			this.$emit("confirm", e.detail.value);
+		},
+		onClear(event) {
+			this.$emit("input", "");
+			this.$emit("update:modelValue", "");
+		},
+		inputClick() {
+			this.$emit("click");
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-input {
+	position: relative;
+	flex: 1;
+	@include vue-flex;
+
+	&__input {
+		//height: $u-form-item-height;
+		font-size: 30rpx;
+		color: $u-main-color;
+		flex: 1;
+	}
+
+	&__textarea {
+		width: auto;
+		font-size: 30rpx;
+		color: $u-main-color;
+		padding: 10rpx 0;
+		line-height: normal;
+		flex: 1;
+	}
+
+	&--border {
+		border-radius: 6rpx;
+		border-radius: 4px;
+		border: 1px solid $u-form-item-border-color;
+	}
+
+	&--error {
+		border-color: $u-type-error !important;
+	}
+
+	&__right-icon {
+		&__item {
+			margin-left: 10rpx;
+		}
+
+		&--select {
+			transition: transform 0.4s;
+
+			&--reverse {
+				transform: rotate(-180deg);
+			}
+		}
+	}
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-keyboard/u-keyboard.vue

@@ -0,0 +1,285 @@
+<template>
+	<u-popup
+		class=""
+		:blur="blur"
+		:mask="mask"
+		:maskCloseAble="maskCloseAble"
+		mode="bottom"
+		:popup="false"
+		v-model="popupValue"
+		length="auto"
+		:safeAreaInsetBottom="safeAreaInsetBottom"
+		@close="popupClose"
+		:zIndex="uZIndex"
+	>
+		<slot />
+		<view class="u-tooltip" v-if="tooltip">
+			<view
+				class="u-tooltip-item u-tooltip-cancel"
+				hover-class="u-tooltip-cancel-hover"
+				@tap="onCancel"
+			>
+				{{ cancelBtn ? cancelText : "" }}
+			</view>
+			<view v-if="showTips" class="u-tooltip-item u-tooltip-tips">
+				{{
+					tips ? tips : mode == "number" ? "数字键盘" : mode == "card" ? "身份证键盘" : "车牌号键盘"
+				}}
+			</view>
+			<view
+				v-if="confirmBtn"
+				@tap="onConfirm"
+				class="u-tooltip-item u-tooltips-submit"
+				hover-class="u-tooltips-submit-hover"
+			>
+				{{ confirmBtn ? confirmText : "" }}
+			</view>
+		</view>
+		<block v-if="mode == 'number' || mode == 'card'">
+			<u-number-keyboard
+				:random="random"
+				@backspace="backspace"
+				@change="change"
+				:mode="mode"
+				:dotEnabled="dotEnabled"
+			></u-number-keyboard>
+		</block>
+		<block v-else>
+			<u-car-keyboard
+				ref="uCarKeyboard"
+				:random="random"
+				@backspace="backspace"
+				@change="change"
+			></u-car-keyboard>
+		</block>
+	</u-popup>
+</template>
+
+<script>
+/**
+ * keyboard 键盘
+ * @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
+ * @tutorial https://www.uviewui.com/components/keyboard.html
+ * @property {String} mode 键盘类型，见官网基本使用的说明（默认number）
+ * @property {Boolean} dot-enabled 是否显示"."按键，只在mode=number时有效（默认true）
+ * @property {Boolean} tooltip 是否显示键盘顶部工具条（默认true）
+ * @property {String} tips 工具条中间的提示文字，见上方基本使用的说明，如不需要，请传""空字符
+ * @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮（默认true）
+ * @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮（默认true）
+ * @property {Boolean} mask 是否显示遮罩（默认true）
+ * @property {String} confirm-text 确认按钮的文字
+ * @property {String} cancel-text 取消按钮的文字
+ * @property {Number String} z-index 弹出键盘的z-index值（默认1075）
+ * @property {Boolean} random 是否打乱键盘按键的顺序（默认false）
+ * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+ * @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘（默认true）
+ * @event {Function} change 按键被点击(不包含退格键被点击)
+ * @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
+ * @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
+ * @event {Function} backspace 键盘退格键被点击
+ * @example <u-keyboard mode="number" v-model="show"></u-keyboard>
+ */
+export default {
+	name: "u-keyboard",
+	emits: ["update:modelValue", "input", "change", "cancel", "confirm", "backspace"],
+	props: {
+		// 通过双向绑定控制键盘的弹出与收起
+		value: {
+			type: Boolean,
+			default: false
+		},
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		// 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘
+		mode: {
+			type: String,
+			default: "number"
+		},
+
+		// 是否显示键盘的"."符号
+		dotEnabled: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示顶部工具条
+		tooltip: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示工具条中间的提示
+		showTips: {
+			type: Boolean,
+			default: true
+		},
+		// 工具条中间的提示文字
+		tips: {
+			type: String,
+			default: ""
+		},
+		// 是否显示工具条左边的"取消"按钮
+		cancelBtn: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示工具条右边的"完成"按钮
+		confirmBtn: {
+			type: Boolean,
+			default: true
+		},
+		// 是否打乱键盘按键的顺序
+		random: {
+			type: Boolean,
+			default: false
+		},
+		// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+		safeAreaInsetBottom: {
+			type: Boolean,
+			default: false
+		},
+		// 是否允许通过点击遮罩关闭键盘
+		maskCloseAble: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示遮罩，某些时候数字键盘时，用户希望看到自己的数值，所以可能不想要遮罩
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		// z-index值
+		zIndex: {
+			type: [Number, String],
+			default: ""
+		},
+		// 取消按钮的文字
+		cancelText: {
+			type: String,
+			default: "取消"
+		},
+		// 确认按钮的文字
+		confirmText: {
+			type: String,
+			default: "确认"
+		},
+		// 遮罩的模糊度
+		blur: {
+			type: [Number, String],
+			default: 0
+		}
+	},
+	data() {
+		return {
+			popupValue: false
+		};
+	},
+	watch: {
+		valueCom:{
+			immediate: true,
+			handler(v1, v2) {
+				this.popupValue = v1;
+			}
+		}
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		uZIndex() {
+			return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+		}
+	},
+	methods: {
+		change(e) {
+			this.$emit("change", e);
+		},
+		// 键盘关闭
+		popupClose() {
+			// 通过发送input这个特殊的事件名，可以修改父组件传给props的value的变量，也即双向绑定
+			this.$emit("input", false);
+			this.$emit("update:modelValue", false);
+		},
+		// 输入完成
+		onConfirm() {
+			this.popupClose();
+			this.$emit("confirm");
+		},
+		// 取消输入
+		onCancel() {
+			this.popupClose();
+			this.$emit("cancel");
+		},
+		// 退格键
+		backspace(count) {
+			this.$emit("backspace", count);
+		},
+		changeCarInputMode() {
+			if (this.$refs.uCarKeyboard) this.$refs.uCarKeyboard.changeCarInputMode();
+		},
+		updateCarInputMode(abcKey) {
+			if (this.$refs.uCarKeyboard) this.$refs.uCarKeyboard.updateCarInputMode(abcKey);
+		}
+		// 关闭键盘
+		// close() {
+		// 	this.show = false;
+		// },
+		// // 打开键盘
+		// open() {
+		// 	this.show = true;
+		// }
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-keyboard {
+	position: relative;
+	z-index: 1003;
+}
+
+.u-tooltip {
+	@include vue-flex;
+	justify-content: space-between;
+}
+
+.u-tooltip-item {
+	color: #333333;
+	flex: 0 0 33.333333%;
+	text-align: center;
+	padding: 20rpx 10rpx;
+	font-size: 28rpx;
+}
+
+.u-tooltips-submit {
+	text-align: right;
+	flex-grow: 1;
+	flex-wrap: 0;
+	padding-right: 40rpx;
+	color: $u-type-primary;
+}
+
+.u-tooltip-cancel {
+	text-align: left;
+	flex-grow: 1;
+	flex-wrap: 0;
+	padding-left: 40rpx;
+	color: #888888;
+}
+
+.u-tooltips-submit-hover {
+	color: $u-type-success;
+}
+
+.u-tooltip-cancel-hover {
+	color: #333333;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-lazy-load/u-lazy-load.vue

@@ -0,0 +1,254 @@
+<template>
+	<view class="u-wrap" :style="{
+			  opacity: Number(opacity),
+			  borderRadius: borderRadius + 'rpx',
+			  // 因为time值需要改变,所以不直接用duration值(不能改变父组件prop传过来的值)
+			  transition: `opacity ${time / 1000}s ease-in-out`
+		   }"
+	 :class="'u-lazy-item-' + elIndex">
+		<view :class="'u-lazy-item-' + elIndex">
+			<image :style="{borderRadius: borderRadius + 'rpx'}" v-if="!isError" class="u-lazy-item"
+			 :src="isShow ? image : loadingImg" :mode="imgMode" @load="imgLoaded" @error="loadError" @tap="clickImg"></image>
+			<image :style="{borderRadius: borderRadius + 'rpx', height: imgHeight}" class="u-lazy-item error" v-else :src="errorImg"
+			 :mode="imgMode" @load="errorImgLoaded" @tap="clickImg"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * lazyLoad 懒加载
+	 * @description 懒加载使用的场景为：页面有很多图片时，APP会同时加载所有的图片，导致页面卡顿，各个位置的图片出现前后不一致等.
+	 * @tutorial https://www.uviewui.com/components/lazyLoad.html
+	 * @property {String Number} index 用户自定义值，在事件触发时回调，用以区分是哪个图片
+	 * @property {String} image 图片路径
+	 * @property {String} loading-img 预加载时的占位图
+	 * @property {String} error-img 图片加载出错时的占位图
+	 * @property {String} threshold 触发加载时的位置，见上方说明，单位 rpx（默认300）
+	 * @property {String Number} duration 图片加载成功时，淡入淡出时间，单位ms（默认）
+	 * @property {String} effect 图片加载成功时，淡入淡出的css动画效果（默认ease-in-out）
+	 * @property {Boolean} is-effect 图片加载成功时，是否启用淡入淡出效果（默认true）
+	 * @property {String Number} border-radius 图片圆角值，单位rpx（默认0）
+	 * @property {String Number} height 图片高度，注意：实际高度可能受img-mode参数影响（默认450）
+	 * @property {String Number} mg-mode 图片的裁剪模式，详见image组件裁剪模式（默认widthFix）
+	 * @event {Function} click 点击图片时触发
+	 * @event {Function} load 图片加载成功时触发
+	 * @event {Function} error 图片加载失败时触发
+	 * @example <u-lazy-load :image="image" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
+	 */
+	export default {
+		name: 'u-lazy-load',
+    emits: ["click", "load", "error"],
+		props: {
+			index: {
+				type: [Number, String]
+			},
+			// 要显示的图片
+			image: {
+				type: String,
+				default: ''
+			},
+			// 图片裁剪模式
+			imgMode: {
+				type: String,
+				default: 'widthFix'
+			},
+			// 占位图片路径
+			loadingImg: {
+				type: String,
+				default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PDw62trZubm9zc3Li4uKGhoebm5tLS0uHh4c3Nzaenp729vcjIyLKysuvr6141L40AAAcXSURBVHja7NzZlqpGAEBR5lG0//9rIw7IJKJi4or7PGTdtN10wr5SVAEGf/qqArsAiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAg+nmQFMi5Jis+sIniED23jSzIgLTtg2D//iYme/8QBM/9lQ+CAEhbNLM3N9hEHAThX7GPCiBfAxK1b51kD+R7QMLjXg7iCsgWIPUh7pfVozG791oeBPngm48G583uW5GkBvI+SBaM2xXDn1oqum423bX/mgF5FySc2cv93Voug9TdZotsggnkBZB2NzbhrSY5HnoG07jei8dvzsJB/c3W60SALILE46+WCztsbhPR7R2VJq0ukEcT49nyy8QhaKcRa3fYHZD4+ufqOJAcgDz8/59vtw1I3QP5K6JsOG0vm3hce4I8LQp/BaRZGJC3AAn7IKOKXbC+7EdA5vdmmVwOLksgRThqOqiH4XEGsht+peoPUE8U/jJIO5OLH4GEwUslV5G0PTBG5Uiw/Y2jyigO3l9HAHKv9PYb82LloH74dZBoBUgar+l48NsNvtD0fkez9iwrAvIYZDRCl+Xs149Hm/KZmQ+QjUCiO1ei4ru7EsgnQYrkznlQb7thCuRfAzlOAPN72427P4VA/i2Q/DKT/Ls/VR8fvIBsDZIuz7TPF6TCbnk4GJkB2RokejTjuE7/unlgCuSTIO0Cy+Plp6vDfnQlBchy8QtjSHVd3EgmK1bHLm+H6+nXYbz2DuQRSPnqoL7vvq0u70on4zvxgCyWD3b9UyDVdW24PaWaiGTnFZJwPIQAebDpIKheBIm7n124ZthMJipAlkqHO+IZkP1tbfzOJark/A7MgKyvvl60fRqkvXfhuow+t9+q00+0/yyBrK8ZngOtBzldhw2X9tvpNGty0gvkmbPeJ0Cy/r09s/stbmfo0yMWkEdjevgKyOn2t2pxv7UXoibTdCDLje9/Ww1ymqzn87dbp92242ZmMRjI8hASvwKSLq4udqN6ksw8nxXN3tszD9L8Gkg+2mFrQYql5az4tvFj5xOx4VwnSdeBtGdyPwUytxK77pBVlNHdO7OK3rh/eTPUvdutT3fO52tuHMqD4N7llv8pyOQQ//w19YVDfX27+Sfuby9/6nau4pdA8vEdOZuChEH/quHt0Jg+IRJ/5+PrHwKZXfjbDiS73Zo7mu5UkzX7uTsXe0e/7nC3ePf1O69+BUg2XDfZCqSqOu7rGVf8cHBe8zhC2b61dtUHXv0OkGo6ZL4JkpbRYXdUaFevivx2M/1GIOctNh949TtAoumQ+TpIHMX54CJu+8BDd8FkE5BqcZh/59XvAClmTvKfB0nDqIlHo3T70SftyW1eX9dXtgQJqs1f/Q6QaOa/7wmQKtxH8eiGoCRuovODIO3VxOMmruZbHrLyD7z6DSDtGyT7ew1kf9hNn07c986JTovzzem0Id9wUG+Vk/IDr34DSNR7huZJkMFT6vEhqrPx/j5cnlZML8N6/PAzh9Y99Flm5Yde/c9BquDOkvkKkMP58dA4qi9vivE8JOvGz/j8FokfPpr288+pH2ZPOZrLmeGD+7KOh6dqYWJ48ki7yUg0tz0go/fv/LLddfV3sgOLJyaGPY/zrSlh1a36Arkzoue9CyG35ze6E6/dzO2Ga0EGHqdRJIkfn9/8OEjTW8Vq91ZWh39FeehWA7Nu9ft8CpUEk1WWOyDF0OPyEU2Pnzf/bZC0P6IPzmAvu7KauQBVrgKpJ0tG2arHzX8e5Pb3PezNs/PrX+3JMyCLn9XXf37tPFHvt09WfCDDjx+yyn1/p1V11j7GnB/q3leLuVva79S/tzed+db08YpF4uOZtmz/9oXWMq6BCAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiAALELvqt/BBgACqVeUBXxcCkAAAAASUVORK5CYII='
+			},
+			// 加载失败的错误占位图
+			errorImg: {
+				type: String,
+				default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdDMjhENDYyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdDMjhENDcyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0MyOEQ0NDJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0MyOEQ0NTJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhLwhikAAAAzUExURZWVldfX162trcPDw5ubm7i4uNzc3Obm5s3NzaGhoeHh4cjIyKenp9LS0r29vbKysuvr67sDMEkAAAlpSURBVHja7NzpYqMgAIVRUVHc8/5PO66R1WAbOzX97q+ZtDEpR0AWTR7kVyWhCAAhgABCAAGEAAIIAQQQAggBBBACCCAEEEAIIIAQQAgggBBAACGAAEIAAYQAQgABhAACCAEEEAIIIAQQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAsqeX5QWHKIcs/Ptl03lfL4zDFPWfBGmSpPn+IZzSH5KkCL5B+n+oklwz6Iz//R2QzFOabzhEmiRirAmZt/bl0w/dpMbLqeeo4wEdpC7zR5WAPKziHKtO7ql+ReKvIa9BxgNaL5ZtEkpeAGIVp5jKJa09xVo9vgSSzQcszdYvmOqjQNSQ6pHK6rO1n1Xj32788miwHLaZz1Tl9i/yayDlYJ/60/+lp8GSY7OY1B8E4p55bWmfquFk22GLuUUxi78cX+m+BjL2GLkhMrV+/muS6Sfic0CEp5T1Yu2OQdTzsKV0MJV73KVjroyTffxfuv5Tf3fd6iLT9wz8YdVHgUzF2Is9/Xhi5sYJqP1w/GUpjOiHVbaI0w2L+pg3GZzvtokcgHxWDXHaiy78l3sPke01qphamT5c+dqyeAGSumdL/mkggauTam0e3L/mPEiqtzKDbl0Z1Wn8xOa4ySo8X/7TQIJnY/seEKWf12UmC72CKP9xYjr19RPT7NNA+oMO+R0gwmlotAry+C6I0f59ch8yXVQOr0BKYcXt1IUYRyCt+Ur9HGsrQKI79WY9sY9ARPKlzFOFdb41ioD8b5Bp+mqeeRKAxINkESBFGpOpKhgv9OuYpH8A8l4Qa3qp60Kl2/k+rG2sWafuuyCBafb2j4JkgZUob3nWcmicpkxEgmTLLGejTxnWSWCi8lPmsk6DlIHFJv24ojiYyYoGacwL8zXTLEAVaDI/Ybb3NIgKDSv2oXpmHkvNs+PTpMASEdlk7fOZeRk37fwJ6yGnQarQsGIfqqcvx43rTOXY6jf7uKXdRzdLDRPbjIrx1cIj3Kr4KyBFezzgUGuR5893qkOQ19fR2uVBaU+r16LphJNOiatK7PeBZK/Kb+tUn71rcQjSvARpghfH/yG/D2RetTuI3N5QrMWdP46brP7FmKZ//CGQ9At9SL01DLkzY/Vs8Z97fQZ7gelw7jHqCz+/Wile5J4g3Vc79eb5a6oLSue+Ve83gaSv2jp5PxCzjzwFUm9zw9MllSMil1kS4d2E9SaQ1xNo9wMxx0+nQNLnew/WDHvveMAHYm08mofl3TFI/8pD3Q6kMAv6DIi2jTCwRJUvNdDYrrJum9oHhusCbWALonwxBRk1vXMnEGWuT5wAmfYuVGUYpJ7fUZujCN92hvzwWlrFgxSfANKb10DxIMbShnfrynyZZV30imA7P43ArXXHbvBVkTCIuGy25AdBrHmNeBCpL214QdLp9LZarG3IMWrmW0ehtuO7F2PS09UcgqS3B7FKPhpknrStD0HGF/vQRne37LwLG8EbHT4WxN7/Fg0yD9Yr/3br4nnstA+0Il6QxzdBmg8A6a2/IRbkcK9h/uzV8zywF/oSkOyageCPglRWgcWClHnEzs9q/t/SENVXgFijlsq3VtXdCsRp4qObrLLLgjuzSq3fX89ZZW6AfxNIzF6X9FYgThN/fk093KkvHX/hbWd+DqS/FUhlf+G3gohEXzVs3g9iDluWoaW8fL73QhB34u+tIHIf19nLuF4Q98a09Eynnl56q+ePgEhnX+dbQOp6H5XnJ0ACd8dFgkwf12nTOTcEqd2pom+CFF02TIPw6dKmrLS5qOtBpo8b5quUtrwrSGbuqPkeSJqllTFHO02NPxdMrm+y5LKdWyWXjw4vA5nGEtnjuyCFyHqNYvEolzmASm3zK1Eg5zr13lhqV1tlksnVw8Pkwgri7O07AVKLJkutRYw87bPlRpBpNXE8xGb+fhBlvEGrGPLqViu5sILIx9dAmqF1705sxF4M8+R8P5dOdQwi12fMnATpjJ2JSt/POIvU9wPJEs/jduJAjLvU0yFT0i64Yb1bsVi79dA4pEy3TzoHMq2O7Re4vXm5O9+l290NpE4CU+YRIMNye2iaqbVS2AUnn2fsekthYKReVNutVedA5juttyIXrT38mOds+ps9DWhwL7GWc61/DVKPzVN9UHDarf1icU98IOU8tm6L031Iq63t1tKzj3fe/FCpO4F0/i0Z2+yvA1KeGBjqj1qYx8/zoxpKZ1Yl367I1k+sfcft/QPy9csXy/32qX1qLZsrryG5BGQaRj0vc/b7N54XXq293TCLB5HO42Fy517obW19b+qjl3CHp0fdLJcWvmdy1etESi/uAdJrs1hTaUklHuW8qSDdC3UfXVR5cnD3rAFSSqtFb7z7eapErx7rC739jCXfbK3aWiipjXo8UbmxXPa7QQq9R289j2Gr88N7Ag5AlHPRKc37pNZv0CZtX1tVMG6rm8qW1/KlCgQvcMss933ybwXZz3dReW5yce4ByZtHFIhwT9kmjxg8BzbKDUe1PB9edBJqSN7/KM1LmqyuMZ5BpeTUw1aD/uDI0relPfSHa/Wn8Pxq1BNfxy/h3IdwOJqIKumb9CHvTqMefyY82RoQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAQgABhAACCAGEAAIIAQQQAgggBBBACCAEEEAIIIAQQAAhgABCACGAAEIAAYQAAggBBBACCAEEEAIIIAQQQAggfyL/BBgA8PgLdH0TBtkAAAAASUVORK5CYII='
+			},
+			// 图片进入可见区域前多少像素时，单位rpx，开始加载图片
+			// 负数为图片超出屏幕底部多少距离后触发懒加载，正数为图片顶部距离屏幕底部多少距离时触发(图片还没出现在屏幕上)
+			threshold: {
+				type: [Number, String],
+				default: 100
+			},
+			// 淡入淡出动画的过渡时间
+			duration: {
+				type: [Number, String],
+				default: 500
+			},
+			// 渡效果的速度曲线，各个之间差别不大，因为这是淡入淡出，且时间很短，不是那些变形或者移动的情况，会明显
+			// linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
+			effect: {
+				type: String,
+				default: 'ease-in-out'
+			},
+			// 是否使用过渡效果
+			isEffect: {
+				type: Boolean,
+				default: true
+			},
+			// 圆角值
+			borderRadius: {
+				type: [Number, String],
+				default: 0
+			},
+			// 图片高度，单位rpx
+			height: {
+				type: [Number, String],
+				default: '100%'
+			}
+		},
+		data() {
+			return {
+				isShow: false,
+				opacity: 1,
+				time: this.duration,
+				loadStatus: '', // 默认是懒加载中的状态
+				isError: false, // 图片加载失败
+				elIndex: this.$u.guid()
+			}
+		},
+		computed: {
+			// 将threshold从rpx转为px
+			getThreshold() {
+				// 先取绝对值，因为threshold可能是负数，最后根据this.threshold是正数或者负数，重新还原
+				let thresholdPx = uni.upx2px(Math.abs(this.threshold));
+				return this.threshold < 0 ? -thresholdPx : thresholdPx;
+			},
+			// 计算图片的高度，可能为auto，带%，或者直接数值
+			imgHeight() {
+				return this.$u.addUnit(this.height);
+			}
+		},
+		created() {
+			// 由于一些特殊原因，不能将此变量放到data中定义
+			this.observer = {};
+		},
+		watch: {
+			isShow(nVal) {
+				// 如果是不开启过渡效果，直接返回
+				if (!this.isEffect) return;
+				this.time = 0;
+				// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
+				this.opacity = 0;
+				// 延时30ms，否则在浏览器H5，过渡效果无效
+				setTimeout(() => {
+					this.time = this.duration;
+					this.opacity = 1;
+				}, 30)
+			},
+			// 图片路径发生变化时，需要重新标记一些变量，否则会一直卡在某一个状态，比如isError
+			image(n) {
+				if(!n) {
+					// 如果传入null或者''，或者undefined，标记为错误状态
+					this.isError = true;
+				} else {
+					this.init();
+					this.isError = false;
+				}
+			}
+		},
+		methods: {
+			// 用于重新初始化
+			init() {
+				this.isError = false;
+				this.loadStatus = '';
+			},
+			// 点击图片触发的事件,loadlazy-还是懒加载中状态，loading-图片正在加载，loaded-图片加加载完成
+			clickImg() {
+				let whichImg = '';
+				// 如果isShow为false，意味着图片还没开始加载，点击的只能是最开始的占位图
+				if (this.isShow == false) whichImg = 'lazyImg';
+				// 如果isError为true，意味着图片加载失败，这是只剩下错误的占位图，所以点击的只能是错误占位图
+				// 当然，也可以给错误的占位图元素绑定点击事件，看你喜欢~
+				else if (this.isError == true) whichImg = 'errorImg';
+				// 总共三张图片，除了两个占位图，剩下的只能是正常的那张图片了
+				else whichImg = 'realImg';
+				// 只通知当前图片的index
+				this.$emit('click', this.index);
+			},
+			// 图片加载完成事件，可能是加载占位图时触发，也可能是加载真正的图片完成时触发，通过isShow区分
+			imgLoaded(e) {
+				// 占位图加载完成
+				if (this.loadStatus == '') {
+					this.loadStatus = 'lazyed';
+				}
+				// 真正的图片加载完成
+				else if (this.loadStatus == 'lazyed') {
+					this.loadStatus = 'loaded';
+					this.$emit('load', this.index);
+				}
+			},
+			// 错误的图片加载完成
+			errorImgLoaded() {
+				this.$emit('error', this.index);
+			},
+			// 图片加载失败
+			loadError() {
+				this.isError = true;
+			},
+			disconnectObserver(observerName) {
+				const observer = this[observerName];
+				observer && observer.disconnect();
+			},
+		},
+    // #ifndef VUE3
+    // 组件销毁前，将实例从u-form的缓存中移除
+    beforeDestroy() {
+      // 销毁页面时，可能还没触发某张很底部的懒加载图片，所以把这个事件给去掉
+      //observer.disconnect();
+    },
+    // #endif
+
+    // #ifdef VUE3
+    beforeUnmount() {
+
+    },
+    // #endif
+		mounted() {
+			// 此uOnReachBottom事件由mixin.js发出，目的是让页面到底时，保证所有图片都进行加载，做到绝对稳定且可靠
+			this.$nextTick(() => {
+				uni.$once('uOnReachBottom', () => {
+					if (!this.isShow) this.isShow = true;
+				});
+			})
+			// mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果
+			setTimeout(() => {
+				// 这里是组件内获取布局状态，不能用uni.createIntersectionObserver，而必须用this.createIntersectionObserver
+				this.disconnectObserver('contentObserver');
+				const contentObserver = uni.createIntersectionObserver(this);
+				// 要理解这里怎么计算的，请看这个：
+				// https://blog.csdn.net/qq_25324335/article/details/83687695
+				contentObserver.relativeToViewport({
+					bottom: this.getThreshold,
+				}).observe('.u-lazy-item-' + this.elIndex, (res) => {
+					if (res.intersectionRatio > 0) {
+						// 懒加载状态改变
+						this.isShow = true;
+						// 如果图片已经加载，去掉监听，减少性能的消耗
+						this.disconnectObserver('contentObserver');
+					}
+				})
+				this.contentObserver = contentObserver;
+			}, 30)
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-wrap {
+		background-color: #eee;
+		overflow: hidden;
+	}
+
+	.u-lazy-item {
+		width: 100%;
+		// 骗系统开启硬件加速
+		transform: transition3d(0, 0, 0);
+		// 防止图片加载“闪一下”
+		will-change: transform;
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-line-progress/u-line-progress.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="u-progress" :style="{
+		borderRadius: round ? '100rpx' : 0,
+		height: height + 'rpx',
+		backgroundColor: inactiveColor
+	}">
+		<view :class="[
+			type ? `u-type-${type}-bg` : '',
+			striped ? 'u-striped' : '',
+			striped && stripedActive ? 'u-striped-active' : ''
+		]" class="u-active" :style="[progressStyle]">
+			<slot v-if="$slots.default || $slots.$default" />
+			<block v-else-if="showPercent">
+				{{percent + '%'}}
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * lineProgress 线型进度条
+	 * @description 展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
+	 * @tutorial https://www.uviewui.com/components/lineProgress.html
+	 * @property {String Number} percent 进度条百分比值，为数值类型，0-100
+	 * @property {Boolean} round 进度条两端是否为半圆（默认true）
+	 * @property {String} type 如设置，active-color值将会失效
+	 * @property {String} active-color 进度条激活部分的颜色（默认#19be6b）
+	 * @property {String} inactive-color 进度条的底色（默认#ececec）
+	 * @property {Boolean} show-percent 是否在进度条内部显示当前的百分比值数值（默认true）
+	 * @property {String Number} height 进度条的高度，单位rpx（默认28）
+	 * @property {Boolean} striped 是否显示进度条激活部分的条纹（默认false）
+	 * @property {Boolean} striped-active 条纹是否具有动态效果（默认false）
+	 * @example <u-line-progress :percent="70" :show-percent="true"></u-line-progress>
+	 */
+	export default {
+		name: "u-line-progress",
+		props: {
+			// 两端是否显示半圆形
+			round: {
+				type: Boolean,
+				default: true
+			},
+			// 主题颜色
+			type: {
+				type: String,
+				default: ''
+			},
+			// 激活部分的颜色
+			activeColor: {
+				type: String,
+				default: '#19be6b'
+			},
+			inactiveColor: {
+				type: String,
+				default: '#ececec'
+			},
+			// 进度百分比，数值
+			percent: {
+				type: Number,
+				default: 0
+			},
+			// 是否在进度条内部显示百分比的值
+			showPercent: {
+				type: Boolean,
+				default: true
+			},
+			// 进度条的高度，单位rpx
+			height: {
+				type: [Number, String],
+				default: 28
+			},
+			// 是否显示条纹
+			striped: {
+				type: Boolean,
+				default: false
+			},
+			// 条纹是否显示活动状态
+			stripedActive: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+
+			}
+		},
+		computed: {
+			progressStyle() {
+				let style = {};
+				style.width = this.percent + '%';
+				if(this.activeColor) style.backgroundColor = this.activeColor;
+				return style;
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-progress {
+		overflow: hidden;
+		height: 15px;
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		align-items: center;
+		width: 100%;
+		border-radius: 100rpx;
+	}
+
+	.u-active {
+		width: 0;
+		height: 100%;
+		align-items: center;
+		@include vue-flex;
+		justify-items: flex-end;
+		justify-content: space-around;
+		font-size: 20rpx;
+		color: #ffffff;
+		transition: all 0.4s ease;
+	}
+
+	.u-striped {
+		background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+		background-size: 39px 39px;
+	}
+
+	.u-striped-active {
+		animation: progress-stripes 2s linear infinite;
+	}
+
+	@keyframes progress-stripes {
+		0% {
+			background-position: 0 0;
+		}
+
+		100% {
+			background-position: 39px 0;
+		}
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-line/u-line.vue

@@ -0,0 +1,84 @@
+<template>
+	<view class="u-line" :style="[lineStyle]">
+		
+	</view>
+</template>
+
+<script>
+	/**
+	 * line 线条
+	 * @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单
+	 * @tutorial https://www.uviewui.com/components/line.html
+	 * @property {String} color 线条的颜色(默认#e4e7ed)
+	 * @property {String} length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等
+	 * @property {String} direction 线条的方向，row-横向，col-竖向(默认row)
+	 * @property {String} border-style 线条的类型，solid-实线，dashed-方形虚线，dotted-圆点虚线(默认solid)
+	 * @property {Boolean} hair-line 是否显示细线条(默认true)
+	 * @property {String} margin 线条与上下左右元素的间距，字符串形式，如"30rpx"
+	 * @example <u-line color="red"></u-line>
+	 */
+	export default {
+		name: 'u-line',
+		props: {
+			color: {
+				type: String,
+				default: '#e4e7ed'
+			},
+			// 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等
+			length: {
+				type: String,
+				default: '100%'
+			},
+			// 线条方向，col-竖向，row-横向
+			direction: {
+				type: String,
+				default: 'row'
+			},
+			// 是否显示细边框
+			hairLine: {
+				type: Boolean,
+				default: true
+			},
+			// 线条与上下左右元素的间距，字符串形式，如"30rpx"、"20rpx 30rpx"
+			margin: {
+				type: String,
+				default: '0'
+			},
+			// 线条的类型，solid-实线，dashed-方形虚线，dotted-圆点虚线
+			borderStyle: {
+				type: String,
+				default: 'solid'
+			}
+		},
+		computed: {
+			lineStyle() {
+				let style = {};
+				style.margin = this.margin;
+				// 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
+				if(this.direction == 'row') {
+					// 此处采用兼容分开写，兼容nvue的写法
+					style.borderBottomWidth = '1px';
+					style.borderBottomStyle = this.borderStyle;
+					style.width = this.$u.addUnit(this.length);
+					if(this.hairLine) style.transform = 'scaleY(0.5)';
+				} else {
+					// 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
+					style.borderLeftWidth = '1px';
+					style.borderLeftStyle = this.borderStyle;
+					style.height = this.$u.addUnit(this.length);
+					if(this.hairLine) style.transform = 'scaleX(0.5)';
+				}
+				style.borderColor = this.color;
+				return style;
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-line {
+		vertical-align: middle;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-link/u-link.vue

@@ -0,0 +1,89 @@
+<template>
+	<text class="u-link" @tap.stop="openLink" :style="{
+		color: color,
+		fontSize: fontSize + 'rpx',
+		borderBottom: underLine ? `1px solid ${lineColor ? lineColor : color}` : 'none',
+		paddingBottom: underLine ? '0rpx' : '0'
+	}">
+		<slot></slot>
+	</text>
+</template>
+
+<script>
+	/**
+	 * link 超链接
+	 * @description 该组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
+	 * @tutorial https://www.uviewui.com/components/link.html
+	 * @property {String} color 文字颜色（默认#606266）
+	 * @property {String Number} font-size 字体大小，单位rpx（默认28）
+	 * @property {Boolean} under-line 是否显示下划线（默认false）
+	 * @property {String} href 跳转的链接，要带上http(s)
+	 * @property {String} line-color 下划线颜色，默认同color参数颜色 
+	 * @property {String} mp-tips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
+	 * @example <u-link href="http://www.uviewui.com">蜀道难，难于上青天</u-link>
+	 */
+	export default {
+		name: "u-link",
+		props: {
+			// 文字颜色
+			color: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 字体大小，单位rpx
+			fontSize: {
+				type: [String, Number],
+				default: 28
+			},
+			// 是否显示下划线
+			underLine: {
+				type: Boolean,
+				default: false
+			},
+			// 要跳转的链接
+			href: {
+				type: String,
+				default: ''
+			},
+			// 小程序中复制到粘贴板的提示语
+			mpTips: {
+				type: String,
+				default: '链接已复制，请在浏览器打开'
+			},
+			// 下划线颜色
+			lineColor: {
+				type: String,
+				default: ''
+			}
+		},
+		methods: {
+			openLink() {
+				// #ifdef APP-PLUS
+				plus.runtime.openURL(this.href)
+				// #endif
+				// #ifdef H5
+				window.open(this.href)
+				// #endif
+				// #ifdef MP
+				uni.setClipboardData({
+					data: this.href,
+					success: () => {
+						uni.hideToast();
+						this.$nextTick(() => {
+							this.$u.toast(this.mpTips);
+						})
+					}
+				});
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-link {
+		line-height: 1;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-loading-page/u-loading-page.vue

@@ -0,0 +1,25 @@
+<template>
+	<view class="u-loading-page">
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			
+		},
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-loading/u-loading.vue

@@ -0,0 +1,103 @@
+<template>
+	<view v-if="show" class="u-loading" :class="mode == 'circle' ? 'u-loading-circle' : 'u-loading-flower'" :style="[cricleStyle]">
+	</view>
+</template>
+
+<script>
+	/**
+	 * loading 加载动画
+	 * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
+	 * @tutorial https://www.uviewui.com/components/loading.html
+	 * @property {String} mode 模式选择，见官网说明（默认circle）
+	 * @property {String} color 动画活动区域的颜色，只对 mode = flower 模式有效（默认#c7c7c7）
+	 * @property {String Number} size 加载图标的大小，单位rpx（默认34）
+	 * @property {Boolean} show 是否显示动画（默认true）
+	 * @example <u-loading mode="circle"></u-loading>
+	 */
+	export default {
+		name: "u-loading",
+		props: {
+			// 动画的类型
+			mode: {
+				type: String,
+				default: 'circle'
+			},
+			// 动画的颜色
+			color: {
+				type: String,
+				default: '#c7c7c7'
+			},
+			// 加载图标的大小，单位rpx
+			size: {
+				type: [String, Number],
+				default: '34'
+			},
+			// 是否显示动画
+			show: {
+				type: Boolean,
+				default: true
+			}
+		},
+		computed: {
+			// 加载中圆圈动画的样式
+			cricleStyle() {
+				let style = {};
+				style.width = this.size + 'rpx';
+				style.height = this.size + 'rpx';
+				if (this.mode == 'circle') style.borderColor = `#e4e4e4 #e4e4e4 #e4e4e4 ${this.color ? this.color : '#c7c7c7'}`;
+				return style;
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-loading-circle {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		vertical-align: middle;
+		width: 28rpx;
+		height: 28rpx;
+		background: 0 0;
+		border-radius: 50%;
+		border: 2px solid;
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
+		animation: u-circle 1s linear infinite;
+	}
+
+	.u-loading-flower {
+		width: 20px;
+		height: 20px;
+		display: inline-block;
+		vertical-align: middle;
+		-webkit-animation: a 1s steps(12) infinite;
+		animation: u-flower 1s steps(12) infinite;
+		background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
+		background-size: 100%;
+	}
+
+	@keyframes u-flower {
+		0% {
+			-webkit-transform: rotate(0deg);
+			transform: rotate(0deg);
+		}
+
+		to {
+			-webkit-transform: rotate(1turn);
+			transform: rotate(1turn);
+		}
+	}
+
+	@keyframes u-circle {
+		0% {
+			transform: rotate(0);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-loadmore/u-loadmore.vue

@@ -0,0 +1,204 @@
+<template>
+	<view class="u-load-more-wrap" :style="{
+		backgroundColor: bgColor,
+		marginBottom: marginBottom + 'rpx',
+		marginTop: marginTop + 'rpx',
+		height: $u.addUnit(height)
+	}">
+		<u-line color="#d4d4d4" length="50"></u-line>
+		<!-- 加载中和没有更多的状态才显示两边的横线 -->
+		<view :class="status == 'loadmore' || status == 'nomore' ? 'u-more' : ''" class="u-load-more-inner">
+			<view class="u-loadmore-icon-wrap">
+				<u-loading class="u-loadmore-icon" :color="iconColor" :mode="iconType == 'circle' ? 'circle' : 'flower'" :show="status == 'loading' && icon"></u-loading>
+			</view>
+			<!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
+			<view class="u-line-1" :style="[loadTextStyle]" :class="[(status == 'nomore' && isDot == true) ? 'u-dot-text' : 'u-more-text']" @tap="loadMore">
+				{{ showText }}
+			</view>
+		</view>
+		<u-line color="#d4d4d4" length="50"></u-line>
+	</view>
+</template>
+
+<script>
+	/**
+	 * loadmore 加载更多
+	 * @description 此组件一般用于标识页面底部加载数据时的状态。
+	 * @tutorial https://www.uviewui.com/components/loadMore.html
+	 * @property {String} status 组件状态（默认loadmore）
+	 * @property {String} bg-color 组件背景颜色，在页面是非白色时会用到（默认#ffffff）
+	 * @property {Boolean} icon 加载中时是否显示图标（默认true）
+	 * @property {String} icon-type 加载中时的图标类型（默认circle）
+	 * @property {String} icon-color icon-type为circle时有效，加载中的动画图标的颜色（默认#b7b7b7）
+	 * @property {Boolean} is-dot status为nomore时，内容显示为一个"●"（默认false）
+	 * @property {String} color 字体颜色（默认#606266）
+	 * @property {String Number} margin-top 到上一个相邻元素的距离
+	 * @property {String Number} margin-bottom 到下一个相邻元素的距离
+	 * @property {Object} load-text 自定义显示的文字，见上方说明示例
+	 * @event {Function} loadmore status为loadmore时，点击组件会发出此事件
+	 * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
+	 */
+	export default {
+		name: "u-loadmore",
+    emits: ["loadmore"],
+		props: {
+			// 组件背景色
+			bgColor: {
+				type: String,
+				default: 'transparent'
+			},
+			// 是否显示加载中的图标
+			icon: {
+				type: Boolean,
+				default: true
+			},
+			// 字体大小
+			fontSize: {
+				type: String,
+				default: '28'
+			},
+			// 字体颜色
+			color: {
+				type: String, 
+				default: '#606266'
+			},
+			// 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
+			status: {
+				type: String,
+				default: 'loadmore'
+			},
+			// 加载中状态的图标，flower-花朵状图标，circle-圆圈状图标
+			iconType: {
+				type: String,
+				default: 'circle'
+			},
+			// 显示的文字
+			loadText: {
+				type: Object,
+				default () {
+					return {
+						loadmore: '加载更多',
+						loading: '正在加载...',
+						nomore: '没有更多了'
+					}
+				}
+			},
+			// 在“没有更多”状态下，是否显示粗点
+			isDot: {
+				type: Boolean,
+				default: false
+			},
+			// 加载中显示圆圈动画时，动画的颜色
+			iconColor: {
+				type: String,
+				default: '#b7b7b7'
+			},
+			// 上边距
+			marginTop: {
+				type: [String, Number],
+				default: 0
+			},
+			// 下边距
+			marginBottom: {
+				type: [String, Number],
+				default: 0
+			},
+			// 高度，单位rpx
+			height: {
+				type: [String, Number],
+				default: 'auto'
+			}
+		},
+		data() {
+			return {
+				// 粗点
+				dotText: "●"
+			}
+		},
+		computed: {
+			// 加载的文字显示的样式
+			loadTextStyle() {
+				return {
+					color: this.color,
+					fontSize: this.fontSize + 'rpx',
+					position: 'relative',
+					zIndex: 1,
+					backgroundColor: this.bgColor,
+					// 如果是加载中状态，动画和文字需要距离近一点
+				}
+			},
+			// 加载中圆圈动画的样式
+			cricleStyle() {
+				return {
+					borderColor: `#e5e5e5 #e5e5e5 #e5e5e5 ${this.circleColor}`
+				}
+			},
+			// 加载中花朵动画形式
+			// 动画由base64图片生成，暂不支持修改
+			flowerStyle() {
+				return {
+				}
+			},
+			// 显示的提示文字
+			showText() {
+				let text = '';
+				if(this.status == 'loadmore') text = this.loadText.loadmore;
+				else if(this.status == 'loading') text = this.loadText.loading;
+				else if(this.status == 'nomore' && this.isDot) text = this.dotText;
+				else text = this.loadText.nomore;
+				return text;
+			}
+		},
+		methods: {
+			loadMore() {
+				// 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
+				if(this.status == 'loadmore') this.$emit('loadmore');
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	/* #ifdef MP */
+	// 在mp.scss中，赋予了u-line为flex: 1，这里需要一个明确的长度，所以重置掉它
+	// 在组件内部，把组件名(u-line)当做选择器，在微信开发工具会提示不合法，但不影响使用
+	u-line {
+		flex: none;
+	}
+	/* #endif */
+	
+	.u-load-more-wrap {
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.u-load-more-inner {
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0 12rpx;
+	}
+	
+	.u-more {
+		position: relative;
+		@include vue-flex;
+		justify-content: center;
+	}
+	
+	.u-dot-text {
+		font-size: 28rpx;
+	}
+	
+	.u-loadmore-icon-wrap {
+		margin-right: 8rpx;
+	}
+	
+	.u-loadmore-icon {
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-mask/u-mask.vue

@@ -0,0 +1,137 @@
+<template>
+	<view class="u-mask" hover-stop-propagation :style="[maskStyle, zoomStyle, filterStyle]" @tap="click" @touchmove.stop.prevent="() => {}" :class="{
+		'u-mask-zoom': zoom,
+		'u-mask-show': show
+	}">
+		<slot />
+	</view>
+</template>
+
+<script>
+	/**
+	 * mask 遮罩
+	 * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+	 * @tutorial https://www.uviewui.com/components/mask.html
+	 * @property {Boolean} show 是否显示遮罩（默认false）
+	 * @property {String Number} z-index z-index 层级（默认1070）
+	 * @property {Object} custom-style 自定义样式对象，见上方说明
+	 * @property {String Number} duration 动画时长，单位毫秒（默认300）
+	 * @property {Boolean} zoom 是否使用scale对遮罩进行缩放（默认true）
+	 * @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
+	 * @event {Function} click mask-click-able为true时，点击遮罩发送此事件
+	 * @example <u-mask :show="show" @click="show = false"></u-mask>
+	 */
+	export default {
+		name: "u-mask",
+		emits: ["click"],
+		props: {
+			// 是否显示遮罩
+			show: {
+				type: Boolean,
+				default: false
+			},
+			// 层级z-index
+			zIndex: {
+				type: [Number, String],
+				default: ''
+			},
+			// 用户自定义样式
+			customStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
+			zoom: {
+				type: Boolean,
+				default: true
+			},
+			// 遮罩的过渡时间，单位为ms
+			duration: {
+				type: [Number, String],
+				default: 300
+			},
+			// 是否可以通过点击遮罩进行关闭
+			maskClickAble: {
+				type: Boolean,
+				default: true
+			},
+			// 遮罩的模糊度
+			blur: {
+				type: [Number, String],
+				default: 0
+			},
+		},
+		data() {
+			return {
+				zoomStyle: {
+					transform: ''
+				},
+				scale: 'scale(1.2, 1.2)'
+			}
+		},
+		watch: {
+			show(n) {
+				if(n && this.zoom) {
+					// 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果
+					this.zoomStyle.transform = 'scale(1, 1)';
+				} else if(!n && this.zoom) {
+					// 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果
+					this.zoomStyle.transform = this.scale;
+				}
+			}
+		},
+		computed: {
+			maskStyle() {
+				let style = {};
+				style.backgroundColor = "rgba(0, 0, 0, 0.6)";
+				if(this.show) style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask;
+				else style.zIndex = -1;
+				style.transition = `all ${this.duration / 1000}s ease-in-out`;
+				// 判断用户传递的对象是否为空，不为空就进行合并
+				if (Object.keys(this.customStyle).length) style = { 
+					...style,
+					...this.customStyle
+				};
+				return style;
+			},
+			filterStyle() {
+				let { blur } = this;
+				let style = {};
+				if (blur) {
+					style.backdropFilter = `blur(${blur}rpx)`;
+				}
+				return style;
+			}
+		},
+		methods: {
+			click() {
+				if (!this.maskClickAble) return;
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		opacity: 0;
+		transition: transform 0.3s;
+	}
+
+	.u-mask-show {
+		opacity: 1;
+	}
+	
+	.u-mask-zoom {
+		transform: scale(1.2, 1.2);
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-message-input/u-message-input.vue

@@ -0,0 +1,327 @@
+<template>
+	<view class="u-char-box">
+		<view class="u-char-flex">
+			<input :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxlength" class="u-input" @input="getVal"/>
+			<view v-for="(item, index) in loopCharArr" :key="index">
+				<view :class="[breathe && charArrLength == index ? 'u-breathe' : '', 'u-char-item',
+				charArrLength === index && mode == 'box' ? 'u-box-active' : '',
+				mode === 'box' ? 'u-box' : '']" :style="{
+					fontWeight: bold ? 'bold' : 'normal',
+					fontSize: fontSize + 'rpx',
+					width: width + 'rpx',
+					height: width + 'rpx',
+					color: inactiveColor,
+					borderColor: charArrLength === index && mode == 'box' ? activeColor : inactiveColor
+				}">
+					<view class="u-placeholder-line" :style="{
+							display: charArrLength === index ? 'block' : 'none',
+							height: width * 0.5 +'rpx'
+						}"
+						v-if="mode !== 'middleLine'"
+					></view>
+					<view v-if="mode === 'middleLine' && charArrLength <= index" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']"
+					 class="u-middle-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
+					<view v-if="mode === 'bottomLine'" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-buttom-line-active' : '']"
+					 class="u-bottom-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
+					<block v-if="!dotFill"> {{ charArr[index] ? charArr[index] : ''}}</block>
+					<block v-else>
+						<text class="u-dot">{{ charArr[index] ? '●' : ''}}</text>
+					</block>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * messageInput 验证码输入框
+	 * @description 该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用
+	 * @tutorial https://www.uviewui.com/components/messageInput.html
+	 * @property {String Number} maxlength 输入字符个数（默认4）
+	 * @property {Boolean} dot-fill 是否用圆点填充（默认false）
+	 * @property {String} mode 模式选择，见上方"基本使用"说明（默认box）
+	 * @property {String Number} value 预置值
+	 * @property {Boolean} breathe 是否开启呼吸效果，见上方说明（默认true）
+	 * @property {Boolean} focus 是否自动获取焦点（默认false）
+	 * @property {Boolean} bold 字体和输入横线是否加粗（默认true）
+	 * @property {String Number} font-size 字体大小，单位rpx（默认60）
+	 * @property {String} active-color 当前激活输入框的样式（默认#2979ff）
+	 * @property {String} inactive-color 非激活输入框的样式，文字颜色同此值（默认#606266）
+	 * @property {String | Number} width 输入框宽度，单位rpx，高等于宽（默认80）
+	 * @property {Boolean} disabled-keyboard 禁止点击输入框唤起系统键盘（默认false）
+	 * @event {Function} change 输入内容发生改变时触发，具体见官网说明
+	 * @event {Function} finish 输入字符个数达maxlength值时触发，见官网说明
+	 * @example <u-message-input mode="bottomLine"></u-message-input>
+	 */
+	export default {
+		name: "u-message-input",
+    emits: ["update:modelValue", "input","change", "finish"],
+		props: {
+      // 预置值
+      value: {
+      	type: [String, Number],
+      	default: ''
+      },
+			modelValue: {
+				type: [String, Number],
+				default: ''
+			},
+			// 最大输入长度
+			maxlength: {
+				type: [Number, String],
+				default: 4
+			},
+			// 是否用圆点填充
+			dotFill: {
+				type: Boolean,
+				default: false
+			},
+			// 显示模式，box-盒子模式，bottomLine-横线在底部模式，middleLine-横线在中部模式
+			mode: {
+				type: String,
+				default: "box"
+			},
+			// 当前激活输入item，是否带有呼吸效果
+			breathe: {
+				type: Boolean,
+				default: true
+			},
+			// 是否自动获取焦点
+			focus: {
+				type: Boolean,
+				default: false
+			},
+			// 字体是否加粗
+			bold: {
+				type: Boolean,
+				default: false
+			},
+			// 字体大小
+			fontSize: {
+				type: [String, Number],
+				default: 60
+			},
+			// 激活样式
+			activeColor: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 未激活的样式
+			inactiveColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 输入框的大小，单位rpx，宽等于高
+			width: {
+				type: [Number, String],
+				default: '80'
+			},
+			// 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+			disabledKeyboard: {
+				type: Boolean,
+				default: false
+			}
+		},
+		watch: {
+			// maxlength: {
+			// 	// 此值设置为true，会在组件加载后无需maxlength变化就会执行一次本监听函数，无需再created生命周期中处理
+			// 	immediate: true,
+			// 	handler(val) {
+			// 		this.maxlength = Number(val);
+			// 	}
+			// }, 
+			valueCom: {
+				immediate: true,
+				handler(val) {
+					// 转为字符串
+					val = String(val);
+					// 超出部分截掉
+					this.valueModel = val.substring(0, Number(this.maxlength));
+				}
+			},
+		},
+		data() {
+			return {
+				valueModel: ""
+			}
+		},
+		computed: {
+			valueCom(){
+				// #ifndef VUE3
+				return this.value;
+				// #endif
+				
+				// #ifdef VUE3
+				return this.modelValue;
+				// #endif
+			},
+			// 是否显示呼吸灯效果
+			animationClass() {
+				return (index) => {
+					if (this.breathe && this.charArr.length == index) return 'u-breathe';
+					else return '';
+				}
+			},
+			// 用于显示字符
+			charArr() {
+				return this.valueModel.split('');
+			},
+			charArrLength() {
+				return this.charArr.length;
+			},
+			// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
+			loopCharArr() {
+				return new Array(Number(this.maxlength));
+			}
+		},
+		methods: {
+			getVal(e) {
+				let {
+					value
+				} = e.detail
+				this.valueModel = value;
+				// 判断长度是否超出了maxlength值，理论上不会发生，因为input组件设置了maxlength属性值
+				if (String(value).length > Number(this.maxlength)) return;
+				// 未达到maxlength之前，发送change事件，达到后发送finish事件
+				this.$emit('change', value);
+				this.$emit("input", value);
+				this.$emit("update:modelValue", value);
+				if (String(value).length == Number(this.maxlength)) {
+					this.$emit('finish', value);
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	@keyframes breathe {
+		0% {
+			opacity: 0.3;
+		}
+
+		50% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0.3;
+		}
+	}
+
+	.u-char-box {
+		text-align: center;
+	}
+
+	.u-char-flex {
+		@include vue-flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		position: relative;
+	}
+
+	.u-input {
+		position: absolute;
+		top: 0;
+		left: -100%;
+		width: 200%;
+		height: 100%;
+		text-align: left;
+		z-index: 9;
+		opacity: 0;
+		background: none;
+	}
+
+	.u-char-item {
+		position: relative;
+		width: 90rpx;
+		height: 90rpx;
+		margin: 10rpx 10rpx;
+		font-size: 60rpx;
+		font-weight: bold;
+		color: $u-main-color;
+		line-height: 90rpx;
+		@include vue-flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.u-middle-line {
+		border: none;
+	}
+
+	.u-box {
+		box-sizing: border-box;
+		border: 2rpx solid #cccccc;
+		border-radius: 6rpx;
+	}
+
+	.u-box-active {
+		overflow: hidden;
+		animation-timing-function: ease-in-out;
+		animation-duration: 1500ms;
+		animation-iteration-count: infinite;
+		animation-direction: alternate;
+		border: 2rpx solid $u-type-primary;
+	}
+
+	.u-middle-line-active {
+		background: $u-type-primary;
+	}
+
+	.u-breathe {
+		animation: breathe 2s infinite ease;
+	}
+
+	.u-placeholder-line {
+		/* #ifndef APP-NVUE */
+		display: none;
+		/* #endif */
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: 2rpx;
+		height: 40rpx;
+		background: #333333;
+		animation: twinkling 1.5s infinite ease;
+	}
+
+	.u-animation-breathe {
+		animation-name: breathe;
+	}
+
+	.u-dot {
+		font-size: 34rpx;
+		line-height: 34rpx;
+	}
+
+	.u-middle-line {
+		height: 4px;
+		background: #000000;
+		width: 80%;
+		position: absolute;
+		border-radius: 2px;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.u-buttom-line-active {
+		background: $u-type-primary;
+	}
+
+	.u-bottom-line {
+		height: 4px;
+		background: #000000;
+		width: 80%;
+		position: absolute;
+		border-radius: 2px;
+		bottom: 0;
+		left: 50%;
+		transform: translate(-50%);
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-modal/u-modal.vue

@@ -0,0 +1,336 @@
+<template>
+	<view>
+		<u-popup
+			:blur="blur"
+			:zoom="zoom"
+			mode="center"
+			:popup="false"
+			:z-index="uZIndex"
+			v-model="popupValue"
+			:length="width"
+			:mask-close-able="maskCloseAble"
+			:border-radius="borderRadius"
+			@close="popupClose"
+			:negative-top="negativeTop"
+		>
+			<view class="u-model">
+				<view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]">
+					{{ title }}
+				</view>
+				<view class="u-model__content">
+					<view :style="[contentStyle]" v-if="$slots.default || $slots.$default"><slot /></view>
+					<view v-else class="u-model__content__message" :style="[contentStyle]">
+						{{ content }}
+					</view>
+				</view>
+				<view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton">
+					<view
+						v-if="showCancelButton"
+						:hover-stay-time="100"
+						hover-class="u-model__btn--hover"
+						class="u-model__footer__button"
+						:style="[cancelBtnStyle]"
+						@tap="cancel"
+					>
+						{{ cancelText }}
+					</view>
+					<view
+						v-if="showConfirmButton || $slots['confirm-button']"
+						:hover-stay-time="100"
+						:hover-class="asyncClose ? 'none' : 'u-model__btn--hover'"
+						class="u-model__footer__button hairline-left"
+						:style="[confirmBtnStyle]"
+						@tap="confirm"
+					>
+						<slot v-if="$slots['confirm-button']" name="confirm-button"></slot>
+						<block v-else>
+							<u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
+							<block v-else>{{ confirmText }}</block>
+						</block>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+/**
+ * modal 模态框
+ * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
+ * @tutorial https://www.uviewui.com/components/modal.html
+ * @property {Boolean} value 是否显示模态框
+ * @property {String | Number} z-index 层级
+ * @property {String} title 模态框标题（默认"提示"）
+ * @property {String | Number} width 模态框宽度（默认600）
+ * @property {String} content 模态框内容（默认"内容"）
+ * @property {Boolean} show-title 是否显示标题（默认true）
+ * @property {Boolean} async-close 是否异步关闭，只对确定按钮有效（默认false）
+ * @property {Boolean} show-confirm-button 是否显示确认按钮（默认true）
+ * @property {Stringr | Number} negative-top modal往上偏移的值
+ * @property {Boolean} show-cancel-button 是否显示取消按钮（默认false）
+ * @property {Boolean} mask-close-able 是否允许点击遮罩关闭modal（默认false）
+ * @property {String} confirm-text 确认按钮的文字内容（默认"确认"）
+ * @property {String} cancel-text 取消按钮的文字内容（默认"取消"）
+ * @property {String} cancel-color 取消按钮的颜色（默认"#606266"）
+ * @property {String} confirm-color 确认按钮的文字内容（默认"#2979ff"）
+ * @property {String | Number} border-radius 模态框圆角值，单位rpx（默认16）
+ * @property {Object} title-style 自定义标题样式，对象形式
+ * @property {Object} content-style 自定义内容样式，对象形式
+ * @property {Object} cancel-style 自定义取消按钮样式，对象形式
+ * @property {Object} confirm-style 自定义确认按钮样式，对象形式
+ * @property {Boolean} zoom 是否开启缩放模式（默认true）
+ * @event {Function} confirm 确认按钮被点击
+ * @event {Function} cancel 取消按钮被点击
+ * @example <u-modal :src="title" :content="content"></u-modal>
+ */
+export default {
+	name: "u-modal",
+	emits: ["update:modelValue", "input", "confirm", "cancel"],
+	props: {
+		// 是否显示Modal
+		value: {
+			type: Boolean,
+			default: false
+		},
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		// 层级z-index
+		zIndex: {
+			type: [Number, String],
+			default: ""
+		},
+		// 标题
+		title: {
+			type: [String],
+			default: "提示"
+		},
+		// 弹窗宽度，可以是数值(rpx)，百分比，auto等
+		width: {
+			type: [Number, String],
+			default: 600
+		},
+		// 弹窗内容
+		content: {
+			type: String,
+			default: "内容"
+		},
+		// 是否显示标题
+		showTitle: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示确认按钮
+		showConfirmButton: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示取消按钮
+		showCancelButton: {
+			type: Boolean,
+			default: false
+		},
+		// 确认文案
+		confirmText: {
+			type: String,
+			default: "确认"
+		},
+		// 取消文案
+		cancelText: {
+			type: String,
+			default: "取消"
+		},
+		// 确认按钮颜色
+		confirmColor: {
+			type: String,
+			default: "#2979ff"
+		},
+		// 取消文字颜色
+		cancelColor: {
+			type: String,
+			default: "#606266"
+		},
+		// 圆角值
+		borderRadius: {
+			type: [Number, String],
+			default: 16
+		},
+		// 标题的样式
+		titleStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 内容的样式
+		contentStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 取消按钮的样式
+		cancelStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 确定按钮的样式
+		confirmStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 是否开启缩放效果
+		zoom: {
+			type: Boolean,
+			default: true
+		},
+		// 是否异步关闭，只对确定按钮有效
+		asyncClose: {
+			type: Boolean,
+			default: false
+		},
+		// 是否允许点击遮罩关闭modal
+		maskCloseAble: {
+			type: Boolean,
+			default: false
+		},
+		// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
+		negativeTop: {
+			type: [String, Number],
+			default: 0
+		},
+		// 遮罩的模糊度
+		blur: {
+			type: [Number, String],
+			default: 0
+		}
+	},
+	data() {
+		return {
+			loading: false, // 确认按钮是否正在加载中
+			popupValue: false
+		};
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		cancelBtnStyle() {
+			return Object.assign(
+				{
+					color: this.cancelColor
+				},
+				this.cancelStyle
+			);
+		},
+		confirmBtnStyle() {
+			return Object.assign(
+				{
+					color: this.confirmColor
+				},
+				this.confirmStyle
+			);
+		},
+		uZIndex() {
+			return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+		}
+	},
+	watch: {
+		// 如果是异步关闭时，外部修改v-model的值为false时，重置内部的loading状态
+		// 避免下次打开的时候，状态混乱
+		valueCom(n) {
+			if (n === true) this.loading = false;
+			this.popupValue = n;
+		}
+	},
+	methods: {
+		confirm() {
+			// 异步关闭
+			if (this.asyncClose) {
+				this.loading = true;
+			} else {
+				this.$emit("input", false);
+				this.$emit("update:modelValue", false);
+			}
+			this.$emit("confirm");
+		},
+		cancel() {
+			this.$emit("cancel");
+			this.$emit("input", false);
+			this.$emit("update:modelValue", false);
+			// 目前popup弹窗关闭有一个延时操作，此处做一个延时
+			// 避免确认按钮文字变成了"确定"字样，modal还没消失，造成视觉不好的效果
+			setTimeout(() => {
+				this.loading = false;
+			}, 300);
+		},
+		// 点击遮罩关闭modal，设置v-model的值为false，否则无法第二次弹起modal
+		popupClose() {
+			this.$emit("input", false);
+			this.$emit("update:modelValue", false);
+		},
+		// 清除加载中的状态
+		clearLoading() {
+			this.loading = false;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-model {
+	height: auto;
+	overflow: hidden;
+	font-size: 32rpx;
+	background-color: #fff;
+
+	&__btn--hover {
+		background-color: rgb(230, 230, 230);
+	}
+
+	&__title {
+		padding-top: 48rpx;
+		font-weight: 500;
+		text-align: center;
+		color: $u-main-color;
+	}
+
+	&__content {
+		&__message {
+			padding: 48rpx;
+			font-size: 30rpx;
+			text-align: center;
+			color: $u-content-color;
+		}
+	}
+
+	&__footer {
+		@include vue-flex;
+
+		&__button {
+			flex: 1;
+			height: 100rpx;
+			line-height: 100rpx;
+			font-size: 32rpx;
+			box-sizing: border-box;
+			cursor: pointer;
+			text-align: center;
+			border-radius: 4rpx;
+		}
+	}
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-navbar/u-navbar.vue

@@ -0,0 +1,322 @@
+<template>
+	<view class="">
+		<view class="u-navbar" :style="[navbarStyle]" :class="{ 'u-navbar-fixed': isFixed, 'u-border-bottom': borderBottom }">
+			<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+			<view class="u-navbar-inner" :style="[navbarInnerStyle]">
+				<view class="u-back-wrap" v-if="isBack" @tap="goBack">
+					<view class="u-icon-wrap">
+						<u-icon :name="backIconName" :color="backIconColor" :size="backIconSize"></u-icon>
+					</view>
+					<view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]">{{ backText }}</view>
+				</view>
+				<view class="u-navbar-content-title" v-if="title || customTitle" :style="[titleStyle]">
+                    <slot name="title" v-if="customTitle"></slot>
+                    <view
+                        v-else
+                        class="u-title u-line-1"
+                        :style="{
+							color: titleColor,
+							fontSize: titleSize + 'rpx',
+							fontWeight: titleBold ? 'bold' : 'normal'
+						}">
+                        {{ title }}
+                    </view>
+				</view>
+				<view class="u-slot-content">
+					<slot></slot>
+				</view>
+				<view class="u-slot-right">
+					<slot name="right"></slot>
+				</view>
+			</view>
+		</view>
+		<!-- 解决fixed定位后导航栏塌陷的问题 -->
+		<view class="u-navbar-placeholder" v-if="isFixed && !immersive" :style="{ width: '100%', height: Number(navbarHeight) + statusBarHeight + 'px' }"></view>
+	</view>
+</template>
+
+<script>
+	// 获取系统状态栏的高度
+	let systemInfo = uni.getSystemInfoSync();
+	let menuButtonInfo = {};
+	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
+	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
+	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+	// #endif
+	/**
+	 * navbar 自定义导航栏
+	 * @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uniapp自带的导航栏。
+	 * @tutorial https://www.uviewui.com/components/navbar.html
+	 * @property {String Number} height 导航栏高度(不包括状态栏高度在内，内部自动加上)，注意这里的单位是px（默认44）
+	 * @property {String} back-icon-color 左边返回图标的颜色（默认#606266）
+	 * @property {String} back-icon-name 左边返回图标的名称，只能为uView自带的图标（默认arrow-left）
+	 * @property {String Number} back-icon-size 左边返回图标的大小，单位rpx（默认30）
+	 * @property {String} back-text 返回图标右边的辅助提示文字
+	 * @property {Object} back-text-style 返回图标右边的辅助提示文字的样式，对象形式（默认{ color: '#606266' }）
+	 * @property {String} title 导航栏标题，如设置为空字符，将会隐藏标题占位区域
+	 * @property {String Number} title-width 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位rpx（默认250）
+	 * @property {String} title-color 标题的颜色（默认#606266）
+	 * @property {String Number} title-size 导航栏标题字体大小，单位rpx（默认32）
+	 * @property {Function} custom-back 自定义返回逻辑方法
+	 * @property {String Number} z-index 固定在顶部时的z-index值（默认980）
+	 * @property {Boolean} is-back 是否显示导航栏左边返回图标和辅助文字（默认true）
+	 * @property {Object} background 导航栏背景设置，见官网说明（默认{ background: '#ffffff' }）
+	 * @property {Boolean} is-fixed 导航栏是否固定在顶部（默认true）
+	 * @property {Boolean} immersive 沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效（默认false）
+	 * @property {Boolean} border-bottom 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值（默认true）
+	 * @example <u-navbar back-text="返回" title="剑未配妥，出门已是江湖"></u-navbar>
+	 */
+	export default {
+		name: "u-navbar",
+		props: {
+			// 导航栏高度，单位px，非rpx
+			height: {
+				type: [String, Number],
+				default: ''
+			},
+			// 返回箭头的颜色
+			backIconColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 左边返回的图标
+			backIconName: {
+				type: String,
+				default: 'nav-back'
+			},
+			// 左边返回图标的大小，rpx
+			backIconSize: {
+				type: [String, Number],
+				default: '44'
+			},
+			// 返回的文字提示
+			backText: {
+				type: String,
+				default: ''
+			},
+			// 返回的文字的 样式
+			backTextStyle: {
+				type: Object,
+				default () {
+					return {
+						color: '#606266'
+					}
+				}
+			},
+            // 自定义导航栏标题
+            customTitle: {
+                type: Boolean,
+                default: false
+            },
+			// 导航栏标题
+			title: {
+				type: String,
+				default: ''
+			},
+			// 标题的宽度，如果需要自定义右侧内容，且右侧内容很多时，可能需要减少这个宽度，单位rpx
+			titleWidth: {
+				type: [String, Number],
+				default: '250'
+			},
+			// 标题的颜色
+			titleColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 标题字体是否加粗
+			titleBold: {
+				type: Boolean,
+				default: false
+			},
+			// 标题的字体大小
+			titleSize: {
+				type: [String, Number],
+				default: 32
+			},
+			isBack: {
+				type: [Boolean, String],
+				default: true
+			},
+			// 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
+			background: {
+				type: Object,
+				default () {
+					return {
+						background: '#ffffff'
+					}
+				}
+			},
+			// 导航栏是否固定在顶部
+			isFixed: {
+				type: Boolean,
+				default: true
+			},
+			// 是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效
+			immersive: {
+				type: Boolean,
+				default: false
+			},
+			// 是否显示导航栏的下边框
+			borderBottom: {
+				type: Boolean,
+				default: true
+			},
+			zIndex: {
+				type: [String, Number],
+				default: ''
+			},
+			// 自定义返回逻辑
+			customBack: {
+				type: Function,
+				default: null
+			}
+		},
+		data() {
+			return {
+				menuButtonInfo: menuButtonInfo,
+				statusBarHeight: systemInfo.statusBarHeight
+			};
+		},
+		computed: {
+			// 导航栏内部盒子的样式
+			navbarInnerStyle() {
+				let style = {};
+				// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
+				style.height = this.navbarHeight + 'px';
+				// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
+				// #ifdef MP
+				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
+				style.marginRight = rightButtonWidth + 'px';
+				// #endif
+				return style;
+			},
+			// 整个导航栏的样式
+			navbarStyle() {
+				let style = {};
+				style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar;
+				// 合并用户传递的背景色对象
+				Object.assign(style, this.background);
+				return style;
+			},
+			// 导航中间的标题的样式
+			titleStyle() {
+				let style = {};
+				// #ifndef MP
+				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
+				style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
+				// #endif
+				// #ifdef MP
+				// 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间，是通过绝对定位实现的
+				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
+				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
+				style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth +
+					'px';
+				// #endif
+				style.width = uni.upx2px(this.titleWidth) + 'px';
+				return style;
+			},
+			// 转换字符数值为真正的数值
+			navbarHeight() {
+				// #ifdef APP-PLUS || H5
+				return this.height ? this.height : 44;
+				// #endif
+				// #ifdef MP
+				// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
+				// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
+				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
+				let height = systemInfo.platform == 'ios' ? 44 : 48;
+				return this.height ? this.height : height;
+				// #endif
+			}
+		},
+		created() {},
+		methods: {
+			goBack() {
+				// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
+				if (typeof this.customBack === 'function') {
+					// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
+					// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
+					this.customBack.bind(this.$u.$parent.call(this))();
+				} else {
+					uni.navigateBack();
+				}
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-navbar {
+		width: 100%;
+	}
+
+	.u-navbar-fixed {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		z-index: 991;
+	}
+
+	.u-status-bar {
+		width: 100%;
+	}
+
+	.u-navbar-inner {
+		@include vue-flex;
+		justify-content: space-between;
+		position: relative;
+		align-items: center;
+	}
+
+	.u-back-wrap {
+		@include vue-flex;
+		align-items: center;
+		flex: 1;
+		flex-grow: 0;
+		padding: 14rpx 14rpx 14rpx 24rpx;
+	}
+
+	.u-back-text {
+		padding-left: 4rpx;
+		font-size: 30rpx;
+	}
+
+	.u-navbar-content-title {
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 60rpx;
+		text-align: center;
+		flex-shrink: 0;
+	}
+
+	.u-navbar-centent-slot {
+		flex: 1;
+	}
+
+	.u-title {
+		line-height: 60rpx;
+		font-size: 32rpx;
+		flex: 1;
+	}
+
+	.u-navbar-right {
+		flex: 1;
+		@include vue-flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
+	.u-slot-content {
+		flex: 1;
+		@include vue-flex;
+		align-items: center;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-notice-bar/u-notice-bar.vue

@@ -0,0 +1,273 @@
+<template>
+	<view class="u-notice-bar-wrap" v-if="isShow" :style="{
+		borderRadius: borderRadius + 'rpx',
+	}">
+		<block v-if="mode == 'horizontal' && isCircular">
+			<u-row-notice
+				:type="type"
+				:color="color"
+				:bgColor="bgColor"
+				:list="list"
+				:volumeIcon="volumeIcon"
+				:moreIcon="moreIcon"
+				:volumeSize="volumeSize"
+				:closeIcon="closeIcon"
+				:mode="mode"
+				:fontSize="fontSize"
+				:speed="speed"
+				:playState="playState"
+				:padding="padding"
+				@getMore="getMore"
+				@close="close"
+				@click="click"
+			></u-row-notice>
+		</block>
+		<block v-if="mode == 'vertical' || (mode == 'horizontal' && !isCircular)">
+			<u-column-notice
+				:type="type"
+				:color="color"
+				:bgColor="bgColor"
+				:list="list"
+				:volumeIcon="volumeIcon"
+				:moreIcon="moreIcon"
+				:closeIcon="closeIcon"
+				:mode="mode"
+				:volumeSize="volumeSize"
+				:disable-touch="disableTouch"
+				:fontSize="fontSize"
+				:duration="duration"
+				:playState="playState"
+				:padding="padding"
+				@getMore="getMore"
+				@close="close"
+				@click="click"
+				@end="end"
+			></u-column-notice>
+		</block>
+	</view>
+</template>
+<script>
+/**
+ * noticeBar 滚动通知
+ * @description 该组件用于滚动通告场景，有多种模式可供选择
+ * @tutorial https://www.uviewui.com/components/noticeBar.html
+ * @property {Array} list 滚动内容，数组形式，见上方说明
+ * @property {String} type 显示的主题（默认warning）
+ * @property {Boolean} volume-icon 是否显示小喇叭图标（默认true）
+ * @property {Boolean} more-icon 是否显示右边的向右箭头（默认false）
+ * @property {Boolean} close-icon 是否显示关闭图标（默认false）
+ * @property {Boolean} autoplay 是否自动播放（默认true）
+ * @property {String} color 文字颜色
+ * @property {String Number} bg-color 背景颜色
+ * @property {String} mode 滚动模式（默认horizontal）
+ * @property {Boolean} show 是否显示（默认true）
+ * @property {String Number} font-size 字体大小，单位rpx（默认28）
+ * @property {String Number} volume-size 左边喇叭的大小（默认34）
+ * @property {String Number} duration 滚动周期时长，只对步进模式有效，横向衔接模式无效，单位ms（默认2000）
+ * @property {String Number} speed 水平滚动时的滚动速度，即每秒移动多少距离，只对水平衔接方式有效，单位rpx（默认160）
+ * @property {String Number} font-size 字体大小，单位rpx（默认28）
+ * @property {Boolean} is-circular mode为horizontal时，指明是否水平衔接滚动（默认true）
+ * @property {String} play-state 播放状态，play - 播放，paused - 暂停（默认play）
+ * @property {String Nubmer} border-radius 通知栏圆角（默认为0）
+ * @property {String Nubmer} padding 内边距，字符串，与普通的内边距css写法一直（默认"18rpx 24rpx"）
+ * @property {Boolean} no-list-hidden 列表为空时，是否显示组件（默认false）
+ * @property {Boolean} disable-touch 是否禁止通过手动滑动切换通知，只有mode = vertical，或者mode = horizontal且is-circular = false时有效（默认true）
+ * @event {Function} click 点击通告文字触发，只有mode = vertical，或者mode = horizontal且is-circular = false时有效
+ * @event {Function} close 点击右侧关闭图标触发
+ * @event {Function} getMore 点击右侧向右图标触发
+ * @event {Function} end 列表的消息每次被播放一个周期时触发，只有mode = vertical，或者mode = horizontal且is-circular = false时有效
+ * @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
+ */
+export default {
+	name: "u-notice-bar",
+  emits: ["click", "close", "getMore", "end"],
+	props: {
+		// 显示的内容，数组
+		list: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 显示的主题，success|error|primary|info|warning
+		type: {
+			type: String,
+			default: 'warning'
+		},
+		// 是否显示左侧的音量图标
+		volumeIcon: {
+			type: Boolean,
+			default: true
+		},
+		// 音量喇叭的大小
+		volumeSize: {
+			type: [Number, String],
+			default: 34
+		},
+		// 是否显示右侧的右箭头图标
+		moreIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示右侧的关闭图标
+		closeIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 是否自动播放
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 文字颜色，各图标也会使用文字颜色
+		color: {
+			type: String,
+			default: ''
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: ''
+		},
+		// 滚动方向，horizontal-水平滚动，vertical-垂直滚动
+		mode: {
+			type: String,
+			default: 'horizontal'
+		},
+		// 是否显示
+		show: {
+			type: Boolean,
+			default: true
+		},
+		// 字体大小，单位rpx
+		fontSize: {
+			type: [Number, String],
+			default: 28
+		},
+		// 滚动一个周期的时间长，单位ms
+		duration: {
+			type: [Number, String],
+			default: 2000
+		},
+		// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
+		speed: {
+			type: [Number, String],
+			default: 160
+		},
+		// 水平滚动时，是否采用衔接形式滚动
+		// 水平衔接模式，采用的是swiper组件，水平滚动
+		isCircular: {
+			type: Boolean,
+			default: true
+		},
+		// 播放状态，play-播放，paused-暂停
+		playState: {
+			type: String,
+			default: 'play'
+		},
+		// 是否禁止用手滑动切换
+		// 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
+		disableTouch: {
+			type: Boolean,
+			default: true
+		},
+		// 滚动通知设置圆角
+		borderRadius: {
+			type: [Number, String],
+			default: 0
+		},
+		// 通知的边距
+		padding: {
+			type: [Number, String],
+			default: '18rpx 24rpx'
+		},
+		// list列表为空时，是否显示组件
+		noListHidden: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		// 如果设置show为false，或者设置了noListHidden为true，且list长度又为零的话，隐藏组件
+		isShow() {
+			if(this.show == false || (this.noListHidden == true && this.list.length == 0)) return false;
+			else return true;
+		}
+	},
+	methods: {
+		// 点击通告栏
+		click(index) {
+			this.$emit('click', index);
+		},
+		// 点击关闭按钮
+		close() {
+			this.$emit('close');
+		},
+		// 点击更多箭头按钮
+		getMore() {
+			this.$emit('getMore');
+		},
+		// 滚动一个周期结束，只对垂直，或者水平步进形式有效
+		end() {
+			this.$emit('end');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-notice-bar-wrap {
+	overflow: hidden;
+}
+
+.u-notice-bar {
+	padding: 18rpx 24rpx;
+	overflow: hidden;
+}
+
+.u-direction-row {
+	@include vue-flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.u-left-icon {
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-notice-box {
+	flex: 1;
+	@include vue-flex;
+	overflow: hidden;
+	margin-left: 12rpx;
+}
+
+.u-right-icon {
+	margin-left: 12rpx;
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-notice-content {
+	line-height: 1;
+	white-space: nowrap;
+	font-size: 26rpx;
+	animation: u-loop-animation 10s linear infinite both;
+	text-align: right;
+	// 这一句很重要，为了能让滚动左右连接起来
+	padding-left: 100%;
+}
+
+@keyframes u-loop-animation {
+	0% {
+		transform: translate3d(0, 0, 0);
+	}
+
+	100% {
+		transform: translate3d(-100%, 0, 0);
+	}
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-number-box/u-number-box.vue

@@ -0,0 +1,477 @@
+<!-- 步进器 -->
+<template>
+	<view class="u-numberbox">
+		<view
+			class="u-icon-minus"
+			@touchstart.prevent="btnTouchStart('minus')"
+			@touchend.stop.prevent="clearTimer"
+			:class="{ 'u-icon-disabled': disabled || inputVal <= min }"
+			:style="{
+				background: bgColor,
+				height: inputHeight + 'rpx',
+				color: color,
+				fontSize: size + 'rpx',
+				minHeight: '1.4em'
+			}"
+		>
+			<view :style="'font-size:' + (Number(size) + 4) + 'rpx'" class="num-btn">－</view>
+		</view>
+		<input
+			:disabled="disabledInput || disabled"
+			:cursor-spacing="getCursorSpacing"
+			:class="{ 'u-input-disabled': disabled }"
+			v-model="inputVal"
+			class="u-number-input"
+			@blur="onBlur"
+			type="number"
+			:style="{
+				color: color,
+				fontSize: size + 'rpx',
+				background: bgColor || '#f6f7f8',
+				height: inputHeight + 'rpx',
+				width: inputWidth + 'rpx'
+			}"
+		/>
+		<view
+			class="u-icon-plus"
+			@touchstart.prevent="btnTouchStart('plus')"
+			@touchend.stop.prevent="clearTimer"
+			:class="{ 'u-icon-disabled': disabled || inputVal >= max }"
+			:style="{
+				background: bgColor,
+				height: inputHeight + 'rpx',
+				color: color,
+				fontSize: size + 'rpx',
+				minHeight: '1.4em'
+			}"
+		>
+			<view :style="'font-size:' + (Number(size) + 4) + 'rpx'" class="num-btn">＋</view>
+		</view>
+	</view>
+</template>
+<script>
+/**
+ * numberBox 步进器
+ * @description 该组件一般用于商城购物选择物品数量的场景。注意：该输入框只能输入大于或等于0的整数，不支持小数输入
+ * @tutorial https://www.uviewui.com/components/numberBox.html
+ * @property {Number} value 输入框初始值（默认1）
+ * @property {String} bg-color 输入框和按钮的背景颜色（默认#F2F3F5）
+ * @property {Number} min 用户可输入的最小值（默认0）
+ * @property {Number} max 用户可输入的最大值（默认99999）
+ * @property {Number} step 步长，每次加或减的值（默认1）
+ * @property {Number} stepFirst 步进值，首次增加或最后减的值(默认step值和一致）
+ * @property {Boolean} disabled 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false）
+ * @property {Boolean} disabled-input 是否禁止输入框手动输入值（默认false）
+ * @property {Boolean} positive-integer 是否只能输入正整数（默认true）
+ * @property {String | Number} size 输入框文字和按钮字体大小，单位rpx（默认26）
+ * @property {String} color 输入框文字和加减按钮图标的颜色（默认#323233）
+ * @property {String | Number} input-width 输入框宽度，单位rpx（默认80）
+ * @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50）
+ * @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
+ * @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
+ * @property {String | Number} press-time 开启长按触发后，每触发一次需要多久，单位ms(默认250)
+ * @property {String | Number} cursor-spacing 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认200）
+ * @event {Function} change 输入框内容发生变化时触发，对象形式
+ * @event {Function} blur 输入框失去焦点时触发，对象形式
+ * @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)，对象形式
+ * @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式
+ * @example <u-numberbox :min="1" :max="100"></u-numberbox>
+ */
+export default {
+	name: "u-numberbox",
+	emits: ["update:modelValue", "input", "change", "blur", "plus", "minus"],
+	props: {
+		// 预显示的数字
+		value: {
+			type: Number,
+			default: 1
+		},
+		modelValue: {
+			type: Number,
+			default: 1
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: "#F2F3F5"
+		},
+		// 最小值
+		min: {
+			type: Number,
+			default: 0
+		},
+		// 最大值
+		max: {
+			type: Number,
+			default: 99999
+		},
+		// 步进值，每次加或减的值
+		step: {
+			type: Number,
+			default: 1
+		},
+		// 步进值，首次增加或最后减的值
+		stepFirst: {
+			type: Number,
+			default: 0
+		},
+		// 是否只能输入 step 的倍数
+		stepStrictly: {
+			type: Boolean,
+			default: false
+		},
+		// 是否禁用加减操作
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// input的字体大小，单位rpx
+		size: {
+			type: [Number, String],
+			default: 26
+		},
+		// 加减图标的颜色
+		color: {
+			type: String,
+			default: "#323233"
+		},
+		// input宽度，单位rpx
+		inputWidth: {
+			type: [Number, String],
+			default: 80
+		},
+		// input高度，单位rpx
+		inputHeight: {
+			type: [Number, String],
+			default: 50
+		},
+		// index索引，用于列表中使用，让用户知道是哪个numberbox发生了变化，一般使用for循环出来的index值即可
+		index: {
+			type: [Number, String],
+			default: ""
+		},
+		// 是否禁用输入框，与disabled作用于输入框时，为OR的关系，即想要禁用输入框，又可以加减的话
+		// 设置disabled为false，disabledInput为true即可
+		disabledInput: {
+			type: Boolean,
+			default: false
+		},
+		// 输入框于键盘之间的距离
+		cursorSpacing: {
+			type: [Number, String],
+			default: 100
+		},
+		// 是否开启长按连续递增或递减
+		longPress: {
+			type: Boolean,
+			default: true
+		},
+		// 开启长按触发后，每触发一次需要多久
+		pressTime: {
+			type: [Number, String],
+			default: 250
+		},
+		// 是否只能输入大于或等于0的整数(正整数)
+		positiveInteger: {
+			type: Boolean,
+			default: true
+		}
+	},
+	watch: {
+		valueCom(v1, v2) {
+			// 只有value的改变是来自外部的时候，才去同步inputVal的值，否则会造成循环错误
+			if (!this.changeFromInner) {
+				this.inputVal = v1;
+				// 因为inputVal变化后，会触发this.handleChange()，在其中changeFromInner会再次被设置为true，
+				// 造成外面修改值，也导致被认为是内部修改的混乱，这里进行this.$nextTick延时，保证在运行周期的最后处
+				// 将changeFromInner设置为false
+				this.$nextTick(function() {
+					this.changeFromInner = false;
+				});
+			}
+		},
+		inputVal(v1, v2) {
+			// 为了让用户能够删除所有输入值，重新输入内容，删除所有值后，内容为空字符串
+			if (v1 == "") return;
+			let value = 0;
+			// 首先判断是否数值，并且在min和max之间，如果不是，使用原来值
+			let tmp = this.isNumber(v1);
+			if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
+			else value = v2;
+			// 判断是否只能输入大于等于0的整数
+			if (this.positiveInteger) {
+				// 小于0，或者带有小数点，
+				if (v1 < 0 || String(v1).indexOf(".") !== -1) {
+					value = v2;
+					// 双向绑定input的值，必须要使用$nextTick修改显示的值
+					this.$nextTick(() => {
+						this.inputVal = v2;
+					});
+				}
+			}
+			// 发出change事件
+			this.handleChange(value, "change");
+		},
+		min(v1) {
+			if (v1 !== undefined && v1 != "" && this.valueCom < v1) {
+				this.$emit("input", v1);
+			}
+		},
+		max(v1) {
+			if (v1 !== undefined && v1 != "" && this.valueCom > v1) {
+				this.$emit("input", v1);
+			}
+		}
+	},
+	data() {
+		return {
+			inputVal: 1, // 输入框中的值，不能直接使用props中的value，因为应该改变props的状态
+			timer: null, // 用作长按的定时器
+			changeFromInner: false, // 值发生变化，是来自内部还是外部
+			innerChangeTimer: null, // 内部定时器
+		};
+	},
+	created() {
+		this.inputVal = Number(this.valueCom);
+	},
+	mounted() {
+
+	},
+	computed: {
+		getCursorSpacing() {
+			// 先将值转为px单位，再转为数值
+			return Number(uni.upx2px(this.cursorSpacing));
+		},
+		valueCom(){
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		}
+	},
+	methods: {
+		// 点击退格键
+		btnTouchStart(callback) {
+			// 先执行一遍方法，否则会造成松开手时，就执行了clearTimer，导致无法实现功能
+			this[callback]();
+			// 如果没开启长按功能，直接返回
+			if (!this.longPress) return;
+			clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
+			this.timer = null;
+			this.timer = setInterval(() => {
+				// 执行加或减函数
+				this[callback]();
+			}, this.pressTime);
+		},
+		clearTimer() {
+			this.$nextTick(() => {
+				clearInterval(this.timer);
+				this.timer = null;
+			});
+		},
+		minus() {
+			this.computeVal("minus");
+		},
+		plus() {
+			this.computeVal("plus");
+		},
+		// 为了保证小数相加减出现精度溢出的问题
+		calcPlus(num1, num2) {
+			let baseNum, baseNum1, baseNum2;
+			try {
+				baseNum1 = num1.toString().split(".")[1].length;
+			} catch (e) {
+				baseNum1 = 0;
+			}
+			try {
+				baseNum2 = num2.toString().split(".")[1].length;
+			} catch (e) {
+				baseNum2 = 0;
+			}
+			baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
+			let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; //精度
+			return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
+		},
+		// 为了保证小数相加减出现精度溢出的问题
+		calcMinus(num1, num2) {
+			let baseNum, baseNum1, baseNum2;
+			try {
+				baseNum1 = num1.toString().split(".")[1].length;
+			} catch (e) {
+				baseNum1 = 0;
+			}
+			try {
+				baseNum2 = num2.toString().split(".")[1].length;
+			} catch (e) {
+				baseNum2 = 0;
+			}
+			baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
+			let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
+			return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
+		},
+		computeVal(type) {
+			uni.hideKeyboard();
+			if (this.disabled) return;
+			let value = 0;
+			// 新增stepFirst开始
+			// 减
+			if (type === "minus") {
+				if (this.stepFirst > 0 && this.inputVal == this.stepFirst) {
+					value = this.min;
+				} else {
+					value = this.calcMinus(this.inputVal, this.step);
+				}
+			} else if (type === "plus") {
+				if (this.stepFirst > 0 && this.inputVal < this.stepFirst) {
+					value = this.stepFirst;
+				} else {
+					value = this.calcPlus(this.inputVal, this.step);
+				}
+			}
+			if (this.stepStrictly) {
+				let strictly = value % this.step;
+				if (strictly > 0) {
+					value -= strictly;
+				}
+				if (this.stepFirst > 0 && value > 0 && value < this.stepFirst) {
+					if (type === "minus") {
+						value = 0;
+					} else if (type === "plus") {
+						value = this.stepFirst + (this.step - (this.stepFirst % this.step));
+					}
+				}
+			}
+			if (value > this.max) {
+				value = this.max;
+			} else if (value < this.min) {
+				value = this.min;
+			}
+			// 新增stepFirst结束
+			this.inputVal = value;
+			this.handleChange(value, type);
+		},
+		// 处理用户手动输入的情况
+		onBlur(event) {
+			let val = 0;
+			let value = event.detail.value;
+			// 如果为非0-9数字组成，或者其第一位数值为0，直接让其等于min值
+			// 这里不直接判断是否正整数，是因为用户传递的props min值可能为0
+			if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
+			val = +value;
+
+			// 新增stepFirst开始
+			if (this.stepFirst > 0 && this.inputVal < this.stepFirst && this.inputVal > 0) {
+				val = this.stepFirst;
+			}
+			// 新增stepFirst结束
+			if (this.stepStrictly) {
+				let strictly = val % this.step;
+				if (strictly > 0) {
+					val -= strictly;
+				}
+				if (this.stepFirst > 0 && val > 0 && val < this.stepFirst) {
+					val = this.stepFirst + (this.step - (this.stepFirst % this.step));
+				}
+			}
+			if (val > this.max) {
+				val = this.max;
+			} else if (val < this.min) {
+				val = this.min;
+			}
+			this.$nextTick(() => {
+				this.inputVal = val;
+			});
+			this.handleChange(val, "blur");
+		},
+		handleChange(value, type) {
+			if (this.disabled) return;
+			// 清除定时器，避免造成混乱
+			if (this.innerChangeTimer) {
+				clearTimeout(this.innerChangeTimer);
+				this.innerChangeTimer = null;
+			}
+			// 发出input事件，修改通过v-model绑定的值，达到双向绑定的效果
+			this.changeFromInner = true;
+			// 一定时间内，清除changeFromInner标记，否则内部值改变后
+			// 外部通过程序修改value值，将会无效
+			this.innerChangeTimer = setTimeout(() => {
+				this.changeFromInner = false;
+			}, 150);
+			this.$emit("input", Number(value));
+			this.$emit("update:modelValue", Number(value));
+			this.$emit(type, {
+				// 转为Number类型
+				value: Number(value),
+				index: this.index
+			});
+		},
+		/**
+		 * 验证十进制数字
+		 */
+		isNumber(value) {
+			return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.u-numberbox {
+	display: inline-flex;
+	align-items: center;
+}
+
+.u-number-input {
+	position: relative;
+	text-align: center;
+	padding: 0;
+	margin: 0 6rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+    border-radius: 8rpx;
+}
+
+.u-icon-plus,
+.u-icon-minus {
+	width: 60rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.u-icon-plus {
+	border-radius: 0 8rpx 8rpx 0;
+}
+
+.u-icon-minus {
+	border-radius: 8rpx 0 0 8rpx;
+}
+
+.u-icon-disabled {
+	color: #c8c9cc !important;
+	background: #f7f8fa !important;
+}
+
+.u-input-disabled {
+	color: #c8c9cc !important;
+	background-color: #f2f3f5 !important;
+}
+/* #ifdef H5 */
+.num-btn {
+	font-weight: 550;
+	position: relative;
+	top: -4rpx;
+}
+/* #endif */
+/* #ifndef H5 */
+.num-btn {
+	font-weight: 550;
+	position: relative;
+	top: 0rpx;
+}
+/* #endif */
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-number-keyboard/u-number-keyboard.vue

@@ -0,0 +1,170 @@
+<template>
+	<view class="u-keyboard" @touchmove.stop.prevent>
+		<view class="u-keyboard-grids">
+			<view
+			    class="u-keyboard-grids-item"
+			    :class="[btnBgGray(index) ? 'u-bg-gray' : '', index <= 2 ? 'u-border-top' : '', index < 9 ? 'u-border-bottom' : '', (index + 1) % 3 != 0 ? 'u-border-right' : '']"
+			    :style="[itemStyle(index)]"
+			    v-for="(item, index) in numList"
+			    :key="index"
+			    :hover-class="hoverClass(index)"
+			    :hover-stay-time="100"
+					@touchstart.stop="keyboardClick(item)"
+			    >
+				<view class="u-keyboard-grids-btn">{{ item }}</view>
+			</view>
+			<view class="u-keyboard-grids-item u-bg-gray" hover-class="u-hover-class" :hover-stay-time="100" @touchstart.stop="backspaceClick"
+			    @touchend="clearTimer">
+				<view class="u-keyboard-back u-keyboard-grids-btn">
+					<u-icon name="backspace" :size="38" :bold="true"></u-icon>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+    name: "u-number-keyboard",
+    emits: ["change", "backspace"],
+		props: {
+			// 键盘的类型，number-数字键盘，card-身份证键盘
+			mode: {
+				type: String,
+				default: 'number'
+			},
+			// 是否显示键盘的"."符号
+			dotEnabled: {
+				type: Boolean,
+				default: true
+			},
+			// 是否打乱键盘按键的顺序
+			random: {
+				type: Boolean,
+				default: false
+			},
+			// 是否开启震动
+			vibrate: {
+				type: Boolean,
+				default: false
+			},
+		},
+		data() {
+			return {
+				backspace: 'backspace', // 退格键内容
+				dot: '.', // 点
+				timer: null, // 长按多次删除的事件监听
+				cardX: 'X' // 身份证的X符号
+			};
+		},
+		computed: {
+			// 键盘需要显示的内容
+			numList() {
+				let tmp = [];
+				if (!this.dotEnabled && this.mode == 'number') {
+					if (!this.random) {
+						return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
+					} else {
+						return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
+					}
+				} else if (this.dotEnabled && this.mode == 'number') {
+					if (!this.random) {
+						return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0];
+					} else {
+						return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0]);
+					}
+				} else if (this.mode == 'card') {
+					if (!this.random) {
+						return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0];
+					} else {
+						return this.$u.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]);
+					}
+				}
+			},
+			// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
+			itemStyle() {
+				return index => {
+					let style = {};
+					if (this.mode == 'number' && !this.dotEnabled && index == 9) style.flex = '0 0 66.6666666666%';
+					return style;
+				};
+			},
+			// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候
+			btnBgGray() {
+				return index => {
+					if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && this.dotEnabled))) return true;
+					else return false;
+				};
+			},
+			hoverClass() {
+				return index => {
+					if (!this.random && index == 9 && (this.mode == 'number' && this.dotEnabled || this.mode == 'card')) return 'u-hover-class';
+					else return 'u-keyboard-hover';
+				}
+			}
+		},
+		methods: {
+			// 点击退格键
+			backspaceClick() {
+				let count = 1;
+				this.$emit('backspace', count);
+				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
+				this.timer = null;
+				this.timer = setInterval(() => {
+					count++;
+					this.$emit('backspace', count);
+				}, 250);
+				if(this.vibrate) uni.vibrateShort();
+			},
+			clearTimer() {
+				clearInterval(this.timer);
+				this.timer = null;
+			},
+			// 获取键盘显示的内容
+			keyboardClick(val) {
+				// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
+				if (this.dotEnabled && val != this.dot && val != this.cardX) val = Number(val);
+				this.$emit('change', val);
+				if(this.vibrate) uni.vibrateShort();
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-keyboard {
+		position: relative;
+		z-index: 1003;
+	}
+
+	.u-keyboard-grids {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.u-keyboard-grids-item {
+		flex: 0 0 33.3333333333%;
+		text-align: center;
+		font-size: 50rpx;
+		color: #333;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 110rpx;
+		font-weight: 500;
+	}
+
+	.u-bg-gray {
+		background-color: #e7e6eb;
+	}
+
+	.u-keyboard-back {
+		font-size: 36rpx;
+	}
+
+	.u-keyboard-hover {
+		background-color: #e7e6eb;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-picker/u-picker.vue

@@ -0,0 +1,892 @@
+<!-- 选择器 -->
+<template>
+	<u-popup
+		:maskCloseAble="maskCloseAble"
+		mode="bottom"
+		:popup="false"
+		v-model="popupValue"
+		length="auto"
+		:safeAreaInsetBottom="safeAreaInsetBottom"
+		@close="close"
+		:z-index="uZIndex"
+		:blur="blur"
+	>
+		<view class="u-datetime-picker">
+			<view class="u-picker-header" @touchmove.stop.prevent="">
+				<view
+					class="u-btn-picker u-btn-picker--tips"
+					:style="{ color: cancelColor }"
+					hover-class="u-opacity"
+					:hover-stay-time="150"
+					@click="getResult('cancel')"
+				>
+					{{ cancelText }}
+				</view>
+				<view class="u-picker__title">{{ title }}</view>
+				<view
+					class="u-btn-picker u-btn-picker--primary"
+					:style="{ color: moving ? cancelColor : confirmColor }"
+					hover-class="u-opacity"
+					:hover-stay-time="150"
+					@touchmove.stop=""
+					@click.stop="getResult('confirm')"
+				>
+					{{ confirmText }}
+				</view>
+			</view>
+			<view class="u-picker-body">
+				<picker-view
+					v-if="mode == 'region'"
+					:value="valueArr"
+					@change="change"
+					class="u-picker-view"
+					@pickstart="pickstart"
+					@pickend="pickend"
+				>
+					<picker-view-column v-if="!reset && params.province">
+						<view class="u-column-item" v-for="(item, index) in provinces" :key="index">
+							<view class="u-line-1">{{ item.name }}</view>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!reset && params.city">
+						<view class="u-column-item" v-for="(item, index) in citys" :key="index">
+							<view class="u-line-1">{{ item.name }}</view>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!reset && params.area">
+						<view class="u-column-item" v-for="(item, index) in areas" :key="index">
+							<view class="u-line-1">{{ item.name }}</view>
+						</view>
+					</picker-view-column>
+				</picker-view>
+				<picker-view
+					v-else-if="mode == 'time'"
+					:value="valueArr"
+					@change="change"
+					class="u-picker-view"
+					@pickstart="pickstart"
+					@pickend="pickend"
+				>
+					<picker-view-column v-if="!reset && params.year">
+						<view class="u-column-item" v-for="(item, index) in years" :key="index">
+							{{ item }}
+							<text class="u-text" v-if="showTimeTag">年</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!reset && params.month">
+						<view class="u-column-item" v-for="(item, index) in months" :key="index">
+							{{ formatNumber(item) }}
+							<text class="u-text" v-if="showTimeTag">月</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!reset && params.day">
+						<view class="u-column-item" v-for="(item, index) in days" :key="index">
+							{{ formatNumber(item) }}
+							<text class="u-text" v-if="showTimeTag">日</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!reset && params.hour">
+						<view class="u-column-item" v-for="(item, index) in hours" :key="index">
+							{{ formatNumber(item) }}
+							<text class="u-text" v-if="showTimeTag">时</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!reset && params.minute">
+						<view class="u-column-item" v-for="(item, index) in minutes" :key="index">
+							{{ formatNumber(item) }}
+							<text class="u-text" v-if="showTimeTag">分</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="!reset && params.second">
+						<view class="u-column-item" v-for="(item, index) in seconds" :key="index">
+							{{ formatNumber(item) }}
+							<text class="u-text" v-if="showTimeTag">秒</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+				<picker-view
+					v-else-if="mode == 'selector'"
+					:value="valueArr"
+					@change="change"
+					class="u-picker-view"
+					@pickstart="pickstart"
+					@pickend="pickend"
+				>
+					<picker-view-column v-if="!reset">
+						<view class="u-column-item" v-for="(item, index) in range" :key="index">
+							<view class="u-line-1">{{ getItemValue(item, "selector") }}</view>
+						</view>
+					</picker-view-column>
+				</picker-view>
+				<picker-view
+					v-else-if="mode == 'multiSelector'"
+					:value="valueArr"
+					@change="change"
+					class="u-picker-view"
+					@pickstart="pickstart"
+					@pickend="pickend"
+				>
+					<picker-view-column v-if="!reset" v-for="(item, index) in range" :key="index">
+						<view class="u-column-item" v-for="(item1, index1) in item" :key="index1">
+							<view class="u-line-1">{{ getItemValue(item1, "multiSelector") }}</view>
+						</view>
+					</picker-view-column>
+				</picker-view>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+import provinces from "../../libs/address/provinces.json";
+import citys from "../../libs/address/citys.json";
+import areas from "../../libs/address/areas.json";
+/**
+ * picker picker弹出选择器
+ * @description 此选择器有两种弹出模式：一是时间模式，可以配置年，日，月，时，分，秒参数 二是地区模式，可以配置省，市，区参数
+ * @tutorial https://www.uviewui.com/components/picker.html
+ * @property {Object} params 需要显示的参数，见官网说明
+ * @property {String} mode 模式选择，region-地区类型，time-时间类型（默认time）
+ * @property {String Number} start-year 可选的开始年份，mode=time时有效（默认1950）
+ * @property {String Number} end-year 可选的结束年份，mode=time时有效（默认2050）
+ * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+ * @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
+ * @property {String} cancel-color 取消按钮的颜色（默认#606266）
+ * @property {String} confirm-color 确认按钮的颜色（默认#2979ff）
+ * @property {String} default-time 默认选中的时间，mode=time时有效
+ * @property {String} confirm-text 确认按钮的文字
+ * @property {String} cancel-text 取消按钮的文字
+ * @property {String} default-region 默认选中的地区，中文形式，mode=region时有效
+ * @property {String} default-code 默认选中的地区，编号形式，mode=region时有效
+ * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
+ * @property {String Number} z-index 弹出时的z-index值（默认1075）
+ * @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个
+ * @property {Array} range 自定义选择的数据，mode=selector或mode=multiSelector时有效
+ * @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容
+ * @event {Function} confirm 点击确定按钮，返回当前选择的值
+ * @event {Function} cancel 点击取消按钮，返回当前选择的值
+ * @example <u-picker v-model="show" mode="time"></u-picker>
+ */
+export default {
+	name: "u-picker",
+	emits: ["update:modelValue", "input", "confirm", "cancel"],
+	props: {
+		// 通过双向绑定控制组件的弹出与收起
+		value: {
+			type: Boolean,
+			default: false
+		},
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		// picker中需要显示的参数
+		params: {
+			type: Object,
+			default() {
+				return {
+					year: true,
+					month: true,
+					day: true,
+					hour: false,
+					minute: false,
+					second: false,
+					province: true,
+					city: true,
+					area: true,
+					timestamp: true
+				};
+			}
+		},
+		// 当mode=selector或者mode=multiSelector时，提供的数组
+		range: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
+		defaultSelector: {
+			type: Array,
+			default() {
+				return [0];
+			}
+		},
+		// 当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
+		rangeKey: {
+			type: String,
+			default: ""
+		},
+		// 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式
+		mode: {
+			type: String,
+			default: "time"
+		},
+		// 年份开始时间
+		startYear: {
+			type: [String, Number],
+			default: 1950
+		},
+		// 年份结束时间
+		endYear: {
+			type: [String, Number],
+			default: 2050
+		},
+		// "取消"按钮的颜色
+		cancelColor: {
+			type: String,
+			default: "#606266"
+		},
+		// "确定"按钮的颜色
+		confirmColor: {
+			type: String,
+			default: "#2979ff"
+		},
+		// 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02
+		defaultTime: {
+			type: String,
+			default: ""
+		},
+		// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
+		defaultRegion: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 时间模式时，是否显示后面的年月日中文提示
+		showTimeTag: {
+			type: Boolean,
+			default: true
+		},
+		// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
+		areaCode: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		safeAreaInsetBottom: {
+			type: Boolean,
+			default: false
+		},
+		// 是否允许通过点击遮罩关闭Picker
+		maskCloseAble: {
+			type: Boolean,
+			default: true
+		},
+		// 弹出的z-index值
+		zIndex: {
+			type: [String, Number],
+			default: 0
+		},
+		// 顶部标题
+		title: {
+			type: String,
+			default: ""
+		},
+		// 取消按钮的文字
+		cancelText: {
+			type: String,
+			default: "取消"
+		},
+		// 确认按钮的文字
+		confirmText: {
+			type: String,
+			default: "确认"
+		},
+		// 遮罩的模糊度
+		blur: {
+			type: [String, Number],
+			default: 0
+		}
+	},
+	data() {
+		return {
+			popupValue: false,
+			years: [],
+			months: [],
+			days: [],
+			hours: [],
+			minutes: [],
+			seconds: [],
+			year: 0,
+			month: 0,
+			day: 0,
+			hour: 0,
+			minute: 0,
+			second: 0,
+			reset: false,
+			startDate: "",
+			endDate: "",
+			valueArr: [],
+			provinces: provinces,
+			citys: citys[0],
+			areas: areas[0][0],
+			province: 0,
+			city: 0,
+			area: 0,
+			moving: false // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
+		};
+	},
+	mounted() {
+		this.init();
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		propsChange() {
+			// 引用这几个变量，是为了监听其变化
+			return `${this.mode}-${this.defaultTime}-${this.startYear}-${this.endYear}-${
+				this.defaultRegion
+			}-${this.areaCode}`;
+		},
+		regionChange() {
+			// 引用这几个变量，是为了监听其变化
+			return `${this.province}-${this.city}`;
+		},
+		yearAndMonth() {
+			return `${this.year}-${this.month}`;
+		},
+		uZIndex() {
+			// 如果用户有传递z-index值，优先使用
+			return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+		}
+	},
+	watch: {
+		propsChange() {
+			this.reset = true;
+			setTimeout(() => this.init(), 10);
+		},
+		// 如果地区发生变化，为了让picker联动起来，必须重置this.citys和this.areas
+		regionChange(val) {
+			this.citys = citys[this.province];
+			this.areas = areas[this.province][this.city];
+		},
+		// watch监听月份的变化，实时变更日的天数，因为不同月份，天数不一样
+		// 一个月可能有30，31天，甚至闰年2月的29天，平年2月28天
+		yearAndMonth(val) {
+			if (this.params.year) this.setDays();
+		},
+		// 微信和QQ小程序由于一些奇怪的原因(故同时对所有平台均初始化一遍)，需要重新初始化才能显示正确的值
+		valueCom(n) {
+			if (n) {
+				this.reset = true;
+				setTimeout(() => this.init(), 10);
+			}
+			this.popupValue = n;
+		}
+	},
+	methods: {
+		// 标识滑动开始，只有微信小程序才有这样的事件
+		pickstart() {
+			// #ifdef MP-WEIXIN
+			this.moving = true;
+			// #endif
+		},
+		// 标识滑动结束
+		pickend() {
+			// #ifdef MP-WEIXIN
+			this.moving = false;
+			// #endif
+		},
+		// 对单列和多列形式的判断是否有传入变量的情况
+		getItemValue(item, mode) {
+			// 目前(2020-05-25)uni-app对微信小程序编译有错误，导致v-if为false中的内容也执行，错误导致
+			// 单列模式或者多列模式中的getItemValue同时被执行，故在这里再加一层判断
+			if (this.mode == mode) {
+				return typeof item == "object" ? item[this.rangeKey] : item;
+			}
+		},
+		// 小于10前面补0，用于月份，日期，时分秒等
+		formatNumber(num) {
+			return +num < 10 ? "0" + num : String(num);
+		},
+		// 生成递进的数组
+		generateArray: function(start, end) {
+			// 转为数值格式，否则用户给end-year等传递字符串值时，下面的end+1会导致字符串拼接，而不是相加
+			start = Number(start);
+			end = Number(end);
+			end = end > start ? end : start;
+			// 生成数组，获取其中的索引，并剪出来
+			return [...Array(end + 1).keys()].slice(start);
+		},
+		getIndex: function(arr, val) {
+			let index = arr.indexOf(val);
+			// 如果index为-1(即找不到index值)，~(-1)=-(-1)-1=0，导致条件不成立
+			return ~index ? index : 0;
+		},
+		//日期时间处理
+		initTimeValue() {
+			// 格式化时间，在IE浏览器(uni不存在此情况)，无法识别日期间的"-"间隔符号
+			let fdate = this.defaultTime.replace(/\-/g, "/");
+			fdate = fdate && fdate.indexOf("/") == -1 ? `2020/01/01 ${fdate}` : fdate;
+			let time = null;
+			if (fdate) time = new Date(fdate);
+			else time = new Date();
+			// 获取年日月时分秒
+			this.year = time.getFullYear();
+			this.month = Number(time.getMonth()) + 1;
+			this.day = time.getDate();
+			this.hour = time.getHours();
+			this.minute = time.getMinutes();
+			this.second = time.getSeconds();
+		},
+		init() {
+			this.valueArr = [];
+			this.reset = false;
+			if (this.mode == "time") {
+				this.initTimeValue();
+				if (this.params.year) {
+					this.valueArr.push(0);
+					this.setYears();
+				}
+				if (this.params.month) {
+					this.valueArr.push(0);
+					this.setMonths();
+				}
+				if (this.params.day) {
+					this.valueArr.push(0);
+					this.setDays();
+				}
+				if (this.params.hour) {
+					this.valueArr.push(0);
+					this.setHours();
+				}
+				if (this.params.minute) {
+					this.valueArr.push(0);
+					this.setMinutes();
+				}
+				if (this.params.second) {
+					this.valueArr.push(0);
+					this.setSeconds();
+				}
+			} else if (this.mode == "region") {
+				if (this.params.province) {
+					this.valueArr.push(0);
+					this.setProvinces();
+				}
+				if (this.params.city) {
+					this.valueArr.push(0);
+					this.setCitys();
+				}
+				if (this.params.area) {
+					this.valueArr.push(0);
+					this.setAreas();
+				}
+			} else if (this.mode == "selector") {
+				this.valueArr = this.defaultSelector;
+			} else if (this.mode == "multiSelector") {
+				this.valueArr = this.defaultSelector;
+				this.multiSelectorValue = this.defaultSelector;
+			}
+			this.$forceUpdate();
+		},
+		// 设置picker的某一列值
+		setYears() {
+			// 获取年份集合
+			this.years = this.generateArray(this.startYear, this.endYear);
+			// 设置this.valueArr某一项的值，是为了让picker预选中某一个值
+			this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.years, this.year));
+		},
+		setMonths() {
+			this.months = this.generateArray(1, 12);
+			this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month));
+		},
+		setDays() {
+			let totalDays = new Date(this.year, this.month, 0).getDate();
+			this.days = this.generateArray(1, totalDays);
+			let index = 0;
+			// 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法
+			// 因为this.month和this.year变化时，会触发watch中的this.setDays()，导致this.valueArr.length计算有误
+			if (this.params.year && this.params.month) index = 2;
+			else if (this.params.month) index = 1;
+			else if (this.params.year) index = 1;
+			else index = 0;
+			// 当月份变化时，会导致日期的天数也会变化，如果原来选的天数大于变化后的天数，则重置为变化后的最大值
+			// 比如原来选中3月31日，调整为2月后，日期变为最大29，这时如果day值继续为31显然不合理，于是将其置为29(picker-column从1开始)
+			if (this.day > this.days.length) this.day = this.days.length;
+			this.valueArr.splice(index, 1, this.getIndex(this.days, this.day));
+		},
+		setHours() {
+			this.hours = this.generateArray(0, 23);
+			this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour));
+		},
+		setMinutes() {
+			this.minutes = this.generateArray(0, 59);
+			this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute));
+		},
+		setSeconds() {
+			this.seconds = this.generateArray(0, 59);
+			this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.seconds, this.second));
+		},
+		setProvinces() {
+			// 判断是否需要province参数
+			if (!this.params.province) return;
+			let tmp = "";
+			let useCode = false;
+			// 如果同时配置了defaultRegion和areaCode，优先使用areaCode参数
+			if (this.areaCode.length) {
+				tmp = this.areaCode[0];
+				useCode = true;
+			} else if (this.defaultRegion.length) tmp = this.defaultRegion[0];
+			else tmp = 0;
+			// 历遍省份数组匹配
+			provinces.map((v, k) => {
+				if (useCode ? v.code == tmp : v.name == tmp) {
+					tmp = k;
+				}
+			});
+			this.province = tmp;
+			this.provinces = provinces;
+			// 设置默认省份的值
+			this.valueArr.splice(0, 1, this.province);
+		},
+		setCitys() {
+			if (!this.params.city) return;
+			let tmp = "";
+			let useCode = false;
+			if (this.areaCode.length) {
+				tmp = this.areaCode[1];
+				useCode = true;
+			} else if (this.defaultRegion.length) tmp = this.defaultRegion[1];
+			else tmp = 0;
+			citys[this.province].map((v, k) => {
+				if (useCode ? v.code == tmp : v.name == tmp) {
+					tmp = k;
+				}
+			});
+			this.city = tmp;
+			this.citys = citys[this.province];
+			this.valueArr.splice(1, 1, this.city);
+		},
+		setAreas() {
+			if (!this.params.area) return;
+			let tmp = "";
+			let useCode = false;
+			if (this.areaCode.length) {
+				tmp = this.areaCode[2];
+				useCode = true;
+			} else if (this.defaultRegion.length) tmp = this.defaultRegion[2];
+			else tmp = 0;
+			areas[this.province][this.city].map((v, k) => {
+				if (useCode ? v.code == tmp : v.name == tmp) {
+					tmp = k;
+				}
+			});
+			this.area = tmp;
+			this.areas = areas[this.province][this.city];
+			this.valueArr.splice(2, 1, this.area);
+		},
+		close() {
+			this.$emit("input", false);
+			this.$emit("update:modelValue", false);
+		},
+		// 用户更改picker的列选项
+		change(e) {
+			this.valueArr = e.detail.value;
+			let i = 0;
+			if (this.mode == "time") {
+				// 这里使用i++，是因为this.valueArr数组的长度是不确定长度的，它根据this.params的值来配置长度
+				// 进入if规则，i会加1，保证了能获取准确的值
+				if (this.params.year) this.year = this.years[this.valueArr[i++]];
+				if (this.params.month) this.month = this.months[this.valueArr[i++]];
+				if (this.params.day) this.day = this.days[this.valueArr[i++]];
+				if (this.params.hour) this.hour = this.hours[this.valueArr[i++]];
+				if (this.params.minute) this.minute = this.minutes[this.valueArr[i++]];
+				if (this.params.second) this.second = this.seconds[this.valueArr[i++]];
+			} else if (this.mode == "region") {
+				if (this.params.province) this.province = this.valueArr[i++];
+				if (this.params.city) this.city = this.valueArr[i++];
+				if (this.params.area) this.area = this.valueArr[i++];
+			} else if (this.mode == "multiSelector") {
+				let index = null;
+				// 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化
+				this.defaultSelector.map((val, idx) => {
+					if (val != e.detail.value[idx]) index = idx;
+				});
+				// 为了让用户对多列变化时，对动态设置其他列的变更
+				if (index != null) {
+					this.$emit("columnchange", {
+						column: index,
+						index: e.detail.value[index]
+					});
+				}
+			}
+		},
+		// 用户点击确定按钮
+		getResult(event = null) {
+			// #ifdef MP-WEIXIN
+			if (this.moving) return;
+			// #endif
+			let result = {};
+			// 只返回用户在this.params中配置了为true的字段
+			if (this.mode == "time") {
+				if (this.params.year) result.year = this.formatNumber(this.year || 0);
+				if (this.params.month) result.month = this.formatNumber(this.month || 0);
+				if (this.params.day) result.day = this.formatNumber(this.day || 0);
+				if (this.params.hour) result.hour = this.formatNumber(this.hour || 0);
+				if (this.params.minute) result.minute = this.formatNumber(this.minute || 0);
+				if (this.params.second) result.second = this.formatNumber(this.second || 0);
+				if (this.params.timestamp) result.timestamp = this.getTimestamp();
+			} else if (this.mode == "region") {
+				if (this.params.province) result.province = provinces[this.province];
+				if (this.params.city) result.city = citys[this.province][this.city];
+				if (this.params.area) result.area = areas[this.province][this.city][this.area];
+			} else if (this.mode == "selector") {
+				result = this.valueArr;
+			} else if (this.mode == "multiSelector") {
+				result = this.valueArr;
+			}
+			if (event) this.$emit(event, result);
+			this.close();
+		},
+		// 获取时间戳
+		getTimestamp() {
+			// yyyy-mm-dd为安卓写法，不支持iOS，需要使用"/"分隔，才能二者兼容
+			let time =
+				this.year +
+				"/" +
+				this.month +
+				"/" +
+				this.day +
+				" " +
+				this.hour +
+				":" +
+				this.minute +
+				":" +
+				this.second;
+			return new Date(time).getTime() / 1000;
+		},
+		// 获得数据源
+		getDateSource() {
+			return {
+				provinces,
+				citys,
+				areas
+			};
+		},
+		// 智能识别省市区
+		regionDiscern(addressText){
+			// 街道地址
+			let address = "";
+			// 省
+			let province = {};
+			// 市
+			let city = {};
+			// 区
+			let area = {};
+			if (!addressText) return { code: -1, msg: "地址文本不能为空" };
+			addressText.trim(); // 去除前后空格
+			// 省
+			// 1.先找出省份，通过匹配前面两个字(中国34个省份中，前面两个字不会重复)
+			let firstTwoKey = addressText.substring(0, 2); //字符串开始的两个字符
+			// 所在省的下标
+			let provinceIndex = -1;
+			
+			for (let i = 0; i < provinces.length; i++) {
+				let { code, name } = provinces[i];
+				if (name.indexOf(firstTwoKey) == 0) {
+					province = { code, name };
+					provinceIndex = i;
+					break;
+				}
+			}
+			if (provinceIndex == -1) return { code: -1, msg: `省份【${firstTwoKey}】没有找到，请输入正确的地址` };
+			
+			// 获取市
+			let citysArr = citys[provinceIndex];
+			// 所在市的下标
+			let cityIndex = -1;
+			
+			for (let i = 0; i < citysArr.length; i++) {
+				let { name, code } = citysArr[i];
+				// 除去最后一个 市 字
+				let cityName = name.substr(0, name.length - 1);
+				// 用城市的名字去匹配 addressText 地址
+				if (addressText.indexOf(cityName) > -1) {
+					city = { code, name };
+					cityIndex = i;
+					break;
+				}
+			}
+			if (cityIndex == -1) return { code: -1, msg: `地级市没有找到，请输入正确的地址` };
+			
+			// 区
+			let areasArr = areas[provinceIndex][cityIndex];
+			// 所在区的下标
+			let areaIndex = -1;
+			
+			for (let i = 0; i < areasArr.length; i++) {
+				let { code, name } = areasArr[i];
+				// 区名(县名)一般为3个字，如江干区，有可能会简写成 江干
+				// 区名(县名)为2个字时，不会简写，如蓉县
+				let reg = name;
+				if (name.length > 2) reg += `|${name.substr(0, name.length - 1)}`;
+				// 查找地址中是否存在该区名
+				let areaRegExp = new RegExp(reg);
+				
+				if (addressText.search(areaRegExp) > -1) {
+					area = { code, name };
+					// 详情地址
+					address = addressText.replace(new RegExp(reg), "{{~}}").split("{{~}}")[1];
+					areaIndex = i;
+					break;
+				}
+			}
+			if (areaIndex == -1) return { code: -1, msg: "县级市没有找到，请输入正确的地址" };
+			let formatted_address = `${province.name}${city.name}${area.name}${address}`;
+			let res = {
+				code: 0,
+				msg: "ok",
+				data: {
+					province, // 省
+					city,	// 市
+					area,	// 区
+					address, // 街道地址
+					formatted_address, // 完整格式化地址
+				}
+			};
+			return res;
+		},
+		
+		// 智能识别收货信息
+		addressDiscern(text) {
+			// 收货人姓名
+			let name = "";
+			// 收货人手机
+			let mobile = "";
+			// 街道地址
+			let address = "";
+			// 省
+			let province = {};
+			// 市
+			let city = {};
+			// 区
+			let area = {};
+
+			if (!text) return { code: -1, msg: "地址文本不能为空" };
+			//let newText = text.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,' ');
+			let textArr = text.split(/[^\u4e00-\u9fa5a-zA-Z0-9+-（）()]+/g).filter(v => v.length);
+			if (textArr.length != 3) return { code: -1, msg: "地址格式不正确，请按姓名 手机号 收货地址格式。" };
+			// 获取姓名和手机号
+			let temp;
+			let addressText; // 地址原文
+			for (let [k, v] of textArr.entries()) {
+				if (/^1[3,4,5,6,7,8,9][0-9]{9}$/.test(v)) {
+					mobile = v;
+					continue;
+				}
+				//记录第一次出现的字符串
+				if (!temp) {
+					temp = v;
+					continue;
+				}
+				// 当前字符串的长度和之前字符串的长度的对比，进而确定姓名和地址信息
+				temp.length > v.length? ((addressText = temp), (name = v)): ((addressText = v), (name = temp));
+			}
+			let positionRes = this.regionDiscern(addressText);
+			if (positionRes.code !== 0) return positionRes;
+			
+			let res = {
+				code: 0,
+				msg: "ok",
+				data: {
+					name, // 姓名
+					mobile, // 手机号
+					position: positionRes.data, // 省市区街道信息
+				}
+			};
+			return res;
+		}
+		
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.u-datetime-picker {
+	position: relative;
+	z-index: 999;
+}
+
+.u-picker-view {
+	height: 100%;
+	box-sizing: border-box;
+}
+
+.u-picker-header {
+	width: 100%;
+	height: 90rpx;
+	padding: 0 40rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	box-sizing: border-box;
+	font-size: 30rpx;
+	background: #fff;
+	position: relative;
+}
+
+.u-picker-header::after {
+	content: "";
+	position: absolute;
+	border-bottom: 1rpx solid #eaeef1;
+	-webkit-transform: scaleY(0.5);
+	transform: scaleY(0.5);
+	bottom: 0;
+	right: 0;
+	left: 0;
+}
+
+.u-picker__title {
+	color: $u-content-color;
+}
+
+.u-picker-body {
+	width: 100%;
+	height: 500rpx;
+	overflow: hidden;
+	background-color: #fff;
+}
+
+.u-column-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 32rpx;
+	color: $u-main-color;
+	padding: 0 8rpx;
+}
+
+.u-text {
+	font-size: 24rpx;
+	padding-left: 8rpx;
+}
+
+.u-btn-picker {
+	padding: 16rpx;
+	box-sizing: border-box;
+	text-align: center;
+	text-decoration: none;
+}
+
+.u-opacity {
+	opacity: 0.5;
+}
+
+.u-btn-picker--primary {
+	color: $u-type-primary;
+}
+
+.u-btn-picker--tips {
+	color: $u-tips-color;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-popup/u-popup.vue

@@ -0,0 +1,477 @@
+<template>
+	<view v-if="visibleSync" :style="[{
+		zIndex: uZindex - 1
+	}]" class="u-drawer" hover-stop-propagation>
+		<u-mask :blur="blur" :duration="duration" :custom-style="maskCustomStyle" :maskClickAble="maskCloseAble" :z-index="uZindex - 2" :show="showDrawer && mask" @click="maskClick"></u-mask>
+		<!-- 移除	@tap.stop.prevent -->
+		<view
+			class="u-drawer-content"
+			@tap="modeCenterClose(mode)"
+			:class="[
+				safeAreaInsetBottom ? 'safe-area-inset-bottom' : '',
+				'u-drawer-' + mode,
+				showDrawer ? 'u-drawer-content-visible' : '',
+				zoom && mode == 'center' ? 'u-animation-zoom' : ''
+			]"
+			@touchmove.stop.prevent
+			:style="[style,customStyle]"
+		>
+			<view class="u-mode-center-box" @tap.stop.prevent @touchmove.stop.prevent v-if="mode == 'center'" :style="[customStyle,centerStyle]">
+				<u-icon
+					@click="close"
+					v-if="closeable"
+					class="u-close"
+					:class="['u-close--' + closeIconPos]"
+					:name="closeIcon"
+					:color="closeIconColor"
+					:size="closeIconSize"
+				></u-icon>
+				<scroll-view class="u-drawer__scroll-view" scroll-y="true">
+					<slot></slot>
+				</scroll-view>
+			</view>
+			<scroll-view class="u-drawer__scroll-view" scroll-y="true" v-else>
+				<slot></slot>
+			</scroll-view>
+			<view @tap="close" class="u-close" :class="['u-close--' + closeIconPos]">
+				<u-icon
+					v-if="mode != 'center' && closeable"
+					:name="closeIcon"
+					:color="closeIconColor"
+					:size="closeIconSize"
+				></u-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * popup 弹窗
+ * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
+ * @tutorial https://www.uviewui.com/components/popup.html
+ * @property {String} mode 弹出方向（默认left）
+ * @property {Boolean} mask 是否显示遮罩（默认true）
+ * @property {Stringr | Number} length mode=left | 见官网说明（默认auto）
+ * @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true）
+ * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+ * @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true）
+ * @property {Object} custom-style 用户自定义样式
+ * @property {Stringr | Number} negative-top 中部弹出时，往上偏移的值
+ * @property {Numberr | String} border-radius 弹窗圆角值（默认0）
+ * @property {Numberr | String} z-index 弹出内容的z-index值（默认1075）
+ * @property {Boolean} closeable 是否显示关闭图标（默认false）
+ * @property {String} close-icon 关闭图标的名称，只能uView的内置图标
+ * @property {String} close-icon-pos 自定义关闭图标位置（默认top-right）
+ * @property {String} close-icon-color 关闭图标的颜色（默认#909399）
+ * @property {Number | String} close-icon-size 关闭图标的大小，单位rpx（默认30）
+ * @event {Function} open 弹出层打开
+ * @event {Function} close 弹出层收起
+ * @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup>
+ */
+export default {
+	name: 'u-popup',
+  emits: ["update:modelValue", "input", "open", "close"],
+	props: {
+    value: {
+    	type: Boolean,
+    	default: false
+    },
+    modelValue: {
+    	type: Boolean,
+    	default: false
+    },
+		/**
+		 * 显示状态
+		 */
+		show: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * 弹出方向，left|right|top|bottom|center
+		 */
+		mode: {
+			type: String,
+			default: 'left'
+		},
+		/**
+		 * 是否显示遮罩
+		 */
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		// 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto"
+		// 或者百分比"50%"，表示由内容撑开高度或者宽度
+		length: {
+			type: [Number, String],
+			default: 'auto'
+		},
+		// 是否开启缩放动画，只在mode=center时有效
+		zoom: {
+			type: Boolean,
+			default: true
+		},
+		// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
+		safeAreaInsetBottom: {
+			type: Boolean,
+			default: false
+		},
+		// 是否可以通过点击遮罩进行关闭
+		maskCloseAble: {
+			type: Boolean,
+			default: true
+		},
+		// 用户自定义样式
+		customStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
+		// 对v-model双向绑定多层调用造成报错不能修改props值的问题
+		popup: {
+			type: Boolean,
+			default: true
+		},
+		// 显示显示弹窗的圆角，单位rpx
+		borderRadius: {
+			type: [Number, String],
+			default: 0
+		},
+		zIndex: {
+			type: [Number, String],
+			default: ''
+		},
+		// 是否显示关闭图标
+		closeable: {
+			type: Boolean,
+			default: false
+		},
+		// 关闭图标的名称，只能uView的内置图标
+		closeIcon: {
+			type: String,
+			default: 'close'
+		},
+		// 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
+		closeIconPos: {
+			type: String,
+			default: 'top-right'
+		},
+		// 关闭图标的颜色
+		closeIconColor: {
+			type: String,
+			default: '#909399'
+		},
+		// 关闭图标的大小，单位rpx
+		closeIconSize: {
+			type: [String, Number],
+			default: '30'
+		},
+		// 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto"
+		// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
+		width: {
+			type: String,
+			default: ''
+		},
+		// 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
+		// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
+		height: {
+			type: String,
+			default: ''
+		},
+		// 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
+		negativeTop: {
+			type: [String, Number],
+			default: 0
+		},
+		// 遮罩的样式，一般用于修改遮罩的透明度
+		maskCustomStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		// 遮罩打开或收起的动画过渡时间，单位ms
+		duration: {
+			type: [String, Number],
+			default: 250
+		},
+		// 遮罩的模糊度
+		blur: {
+			type: [String, Number],
+			default: 0
+		},
+		
+	},
+	data() {
+		return {
+			visibleSync: false,
+			showDrawer: false,
+			timer: null,
+			closeFromInner: false, // value的值改变，是发生在内部还是外部
+		};
+	},
+	computed: {
+		valueCom(){
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+			
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
+		style() {
+			let style = {};
+			// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
+			if (this.mode == 'left' || this.mode == 'right') {
+				style = {
+					width: this.width ? this.getUnitValue(this.width) : this.getUnitValue(this.length),
+					height: '100%',
+					transform: `translate3D(${this.mode == 'left' ? '-100%' : '100%'},0px,0px)`
+				};
+			} else if (this.mode == 'top' || this.mode == 'bottom') {
+				style = {
+					width: '100%',
+					height: this.height ? this.getUnitValue(this.height) : this.getUnitValue(this.length),
+					transform: `translate3D(0px,${this.mode == 'top' ? '-100%' : '100%'},0px)`
+				};
+			}
+			style.zIndex = this.uZindex;
+			// 如果用户设置了borderRadius值，添加弹窗的圆角
+			if (this.borderRadius) {
+				switch (this.mode) {
+					case 'left':
+						style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`;
+						break;
+					case 'top':
+						style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`;
+						break;
+					case 'right':
+						style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`;
+						break;
+					case 'bottom':
+						style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`;
+						break;
+					default:
+				}
+				// 不加可能圆角无效
+				style.overflow = 'hidden';
+			}
+			if(this.duration) style.transition = `all ${this.duration / 1000}s linear`;
+			return style;
+		},
+		// 中部弹窗的特有样式
+		centerStyle() {
+			let style = {};
+			style.width = this.width ? this.getUnitValue(this.width) : this.getUnitValue(this.length);
+			// 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开高度
+			style.height = this.height ? this.getUnitValue(this.height) : 'auto';
+			style.zIndex = this.uZindex;
+			style.marginTop = `-${this.$u.addUnit(this.negativeTop)}`;
+			if (this.borderRadius) {
+				style.borderRadius = `${this.borderRadius}rpx`;
+				// 不加可能圆角无效
+				style.overflow = 'hidden';
+			}
+			return style;
+		},
+		// 计算整理后的z-index值
+		uZindex() {
+			return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+		}
+	},
+	watch: {
+		valueCom(val) {
+			if (val) {
+				this.open();
+			} else if(!this.closeFromInner) {
+				this.close();
+			}
+			this.closeFromInner = false;
+		},
+	},
+	mounted() {
+		// 组件渲染完成时，检查value是否为true，如果是，弹出popup
+		this.valueCom && this.open();
+	},
+  methods: {
+		// 判断传入的值，是否带有单位，如果没有，就默认用rpx单位
+		getUnitValue(val) {
+			if(/(%|px|rpx|auto)$/.test(val)) return val;
+			else return val + 'rpx'
+		},
+		// 遮罩被点击
+		maskClick() {
+			this.close();
+		},
+		close() {
+			// 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
+			// 造成@close事件触发两次
+			this.closeFromInner = true;
+			this.change('showDrawer', 'visibleSync', false);
+		},
+		// 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗
+		// 让其只在mode=center时起作用
+		modeCenterClose(mode) {
+			if (mode != 'center' || !this.maskCloseAble) return;
+			this.close();
+		},
+		open() {
+			this.change('visibleSync', 'showDrawer', true);
+		},
+		// 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
+		// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
+		change(param1, param2, status) {
+			// 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
+			if (this.popup == true) {
+				this.$emit('input', status);
+        this.$emit("update:modelValue", status);
+			}
+			this[param1] = status;
+			if(status) {
+				// #ifdef H5 || MP
+				this.timer = setTimeout(() => {
+					this[param2] = status;
+					this.$emit(status ? 'open' : 'close');
+				}, 50);
+				// #endif
+				// #ifndef H5 || MP
+				this.$nextTick(() => {
+					this[param2] = status;
+					this.$emit(status ? 'open' : 'close');
+				})
+				// #endif
+			} else {
+				this.timer = setTimeout(() => {
+					this[param2] = status;
+					this.$emit(status ? 'open' : 'close');
+				}, this.duration);
+			}
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+
+.u-drawer {
+	/* #ifndef APP-NVUE */
+	display: block;
+	/* #endif */
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+}
+
+.u-drawer-content {
+	/* #ifndef APP-NVUE */
+	display: block;
+	/* #endif */
+	position: absolute;
+	z-index: 1003;
+	transition: all 0.25s linear;
+}
+
+.u-drawer__scroll-view {
+	width: 100%;
+	height: 100%;
+}
+
+.u-drawer-left {
+	top: 0;
+	bottom: 0;
+	left: 0;
+	background-color: #ffffff;
+}
+
+.u-drawer-right {
+	right: 0;
+	top: 0;
+	bottom: 0;
+	background-color: #ffffff;
+}
+
+.u-drawer-top {
+	top: 0;
+	left: 0;
+	right: 0;
+	background-color: #ffffff;
+}
+
+.u-drawer-bottom {
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: #ffffff;
+}
+
+.u-drawer-center {
+	@include vue-flex;
+	flex-direction: column;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	top: 0;
+	justify-content: center;
+	align-items: center;
+	opacity: 0;
+	z-index: 99999;
+}
+
+.u-mode-center-box {
+	min-width: 100rpx;
+	min-height: 100rpx;
+	/* #ifndef APP-NVUE */
+	display: block;
+	/* #endif */
+	position: relative;
+	background-color: #ffffff;
+}
+
+.u-drawer-content-visible.u-drawer-center {
+	transform: scale(1);
+	opacity: 1;
+}
+
+.u-animation-zoom {
+	transform: scale(1.15);
+}
+
+.u-drawer-content-visible {
+	transform: translate3D(0px, 0px, 0px) !important;
+}
+
+.u-close {
+	position: absolute;
+	z-index: 3;
+}
+
+.u-close--top-left {
+	top: 30rpx;
+	left: 30rpx;
+}
+
+.u-close--top-right {
+	top: 30rpx;
+	right: 30rpx;
+}
+
+.u-close--bottom-left {
+	bottom: 30rpx;
+	left: 30rpx;
+}
+
+.u-close--bottom-right {
+	right: 30rpx;
+	bottom: 30rpx;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-radio-group/u-radio-group.vue

@@ -0,0 +1,176 @@
+<template>
+	<view class="u-radio-group u-clearfix" :class="uFromData.inputAlign == 'right' ? 'flex-end' : ''">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+import Emitter from "../../libs/util/emitter.js";
+/**
+ * radioRroup 单选框父组件
+ * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio使用
+ * @tutorial https://www.uviewui.com/components/radio.html
+ * @property {Boolean} disabled 是否禁用所有radio（默认false）
+ * @property {String Number} size 组件整体的大小，单位rpx（默认40）
+ * @property {String} active-color 选中时的颜色，应用到所有子Radio组件（默认#2979ff）
+ * @property {String Number} icon-size 图标大小，单位rpx（默认20）
+ * @property {String} shape 外观形状，shape-方形，circle-圆形(默认circle)
+ * @property {Boolean} label-disabled 是否禁止点击文本操作checkbox(默认false)
+ * @property {String} width 宽度，需带单位
+ * @property {Boolean} wrap 是否每个radio都换行（默认false）
+ * @event {Function} change 任一个radio状态发生变化时触发
+ * @example <u-radio-group v-model="value"></u-radio-group>
+ */
+export default {
+	name: "u-radio-group",
+	emits: ["update:modelValue", "input", "change"],
+	mixins: [Emitter],
+	props: {
+		// 匹配某一个radio组件，如果某个radio的name值等于此值，那么这个radio就被会选中
+		value: {
+			type: [String, Number],
+			default: ""
+		},
+		modelValue: {
+			type: [String, Number],
+			default: ""
+		},
+		// 是否禁用所有单选框
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 选中状态下的颜色
+		activeColor: {
+			type: String,
+			default: "#2979ff"
+		},
+		// 组件的整体大小
+		size: {
+			type: [String, Number],
+			default: 34
+		},
+		// 是否禁止点击提示语选中复选框
+		labelDisabled: {
+			type: Boolean,
+			default: false
+		},
+		// 形状，square为方形，circle为圆型
+		shape: {
+			type: String,
+			default: "circle"
+		},
+		// 图标的大小，单位rpx
+		iconSize: {
+			type: [String, Number],
+			default: 20
+		},
+		// 每个checkbox占u-checkbox-group的宽度
+		width: {
+			type: [String, Number],
+			default: "auto"
+		},
+		// 是否每个checkbox都换行
+		wrap: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			uFromData: {
+				inputAlign: "left"
+			}
+		};
+	},
+	created() {
+		// 如果将children定义在data中，在微信小程序会造成循环引用而报错
+		this.children = [];
+	},
+	mounted() {
+		// 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
+		let parent = this.$u.$parent.call(this, "u-form");
+		if (parent) {
+			Object.keys(this.uFromData).map(key => {
+				this.uFromData[key] = parent[key];
+			});
+		}
+	},
+	watch: {
+		// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
+		parentData() {
+			if (this.children.length) {
+				this.children.map(child => {
+					// 判断子组件(u-radio)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+					typeof child.updateParentData == "function" && child.updateParentData();
+				});
+			}
+		}
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		// 这里computed的变量，都是子组件u-radio需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
+		// 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(u-radio-group)
+		// 拉取父组件新的变化后的参数
+		parentData() {
+			return [
+				this.valueCom,
+				this.disabled,
+				this.activeColor,
+				this.size,
+				this.labelDisabled,
+				this.shape,
+				this.iconSize,
+				this.width,
+				this.wrap
+			];
+		}
+	},
+	methods: {
+		// 该方法有子组件radio调用，当一个radio被选中的时候，给父组件设置value值(props传递的value)
+		setValue(val) {
+			// 通过子组件传递过来的val值(此被选中的子组件内部已将parentValue设置等于val的值)，将其他
+			// u-radio设置未选中的状态
+			this.children.map(child => {
+				if (child.parentData.value != val) child.parentData.value = "";
+			});
+			// 通过emit事件，设置父组件通过v-model双向绑定的值
+			this.$emit("input", val);
+			this.$emit("update:modelValue", val);
+			this.$emit("change", val);
+			// 等待下一个周期再执行，因为this.$emit('input')作用于父组件，再反馈到子组件内部，需要时间
+			// 由于头条小程序执行迟钝，故需要用几十毫秒的延时
+			setTimeout(() => {
+				// 将当前的值发送到 u-form-item 进行校验
+				this.dispatch("u-form-item", "onFieldChange", val);
+			}, 60);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-radio-group {
+	/* #ifndef MP || APP-NVUE */
+	display: inline-flex;
+	flex-wrap: wrap;
+	/* #endif */
+}
+.u-radio-group.flex-end {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;
+	justify-content: flex-end;
+	flex-wrap: wrap;
+	/* #endif */
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-radio/u-radio.vue

@@ -0,0 +1,276 @@
+<template>
+	<view class="u-radio" :style="[radioStyle]">
+		<view class="u-radio__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
+			<u-icon
+				class="u-radio__icon-wrap__icon"
+				name="checkbox-mark"
+				:size="elIconSize"
+				:color="iconColor"
+			/>
+		</view>
+		<view class="u-radio__label" @tap="onClickLabel" :style="{ fontSize: $u.addUnit(labelSize) }">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * radio 单选框
+ * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio-group使用
+ * @tutorial https://www.uviewui.com/components/radio.html
+ * @property {String Number} icon-size 图标大小，单位rpx（默认24）
+ * @property {String Number} label-size label字体大小，单位rpx（默认28）
+ * @property {String Number} name radio组件的标示符
+ * @property {String} shape 形状，见上方说明（默认circle）
+ * @property {Boolean} disabled 是否禁用（默认false）
+ * @property {Boolean} label-disabled 点击文本是否可以操作radio（默认true）
+ * @property {String} active-color 选中时的颜色，如设置parent的active-color将失效
+ * @event {Function} change 某个radio状态发生变化时触发(选中状态)
+ * @example <u-radio :label-disabled="false">门掩黄昏，无计留春住</u-radio>
+ */
+export default {
+	name: "u-radio",
+	emits: ["change"],
+	props: {
+		// radio的名称
+		name: {
+			type: [String, Number],
+			default: ""
+		},
+		// 组件的整体大小
+		size: {
+			type: [String, Number],
+			default: 34
+		},
+		// 形状，square为方形，circle为原型
+		shape: {
+			type: String,
+			default: ""
+		},
+		// 是否禁用
+		disabled: {
+			type: [String, Boolean],
+			default: ""
+		},
+		// 是否禁止点击提示语选中复选框
+		labelDisabled: {
+			type: [String, Boolean],
+			default: ""
+		},
+		// 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
+		activeColor: {
+			type: String,
+			default: ""
+		},
+		// 图标的大小，单位rpx
+		iconSize: {
+			type: [String, Number],
+			default: ""
+		},
+		// label的字体大小，rpx单位
+		labelSize: {
+			type: [String, Number],
+			default: ""
+		}
+	},
+	data() {
+		return {
+			// 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.shape的形式
+			// 故只能使用如此方法
+			parentData: {
+				iconSize: null,
+				labelDisabled: null,
+				disabled: null,
+				shape: null,
+				activeColor: null,
+				size: null,
+				width: null,
+				height: null,
+				value: null,
+				wrap: null
+			}
+		};
+	},
+	created() {
+		this.parent = false;
+		// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
+		this.updateParentData();
+		this.parent.children.push(this);
+	},
+	computed: {
+		// 是否禁用，如果父组件u-raios-group禁用的话，将会忽略子组件的配置
+		elDisabled() {
+			return this.disabled !== ""? this.disabled: this.parentData.disabled !== null? this.parentData.disabled: false;
+		},
+		// 是否禁用label点击
+		elLabelDisabled() {
+			return this.labelDisabled !== ""? this.labelDisabled: this.parentData.labelDisabled !== null? this.parentData.labelDisabled: false;
+		},
+		// 组件尺寸，对应size的值，默认值为34rpx
+		elSize() {
+			return this.size ? this.size : this.parentData.size ? this.parentData.size : 34;
+		},
+		// 组件的勾选图标的尺寸，默认20
+		elIconSize() {
+			return this.iconSize? this.iconSize: this.parentData.iconSize? this.parentData.iconSize: 20;
+		},
+		// 组件选中激活时的颜色
+		elActiveColor() {
+			return this.activeColor? this.activeColor: this.parentData.activeColor? this.parentData.activeColor: "primary";
+		},
+		// 组件的形状
+		elShape() {
+			return this.shape ? this.shape : this.parentData.shape ? this.parentData.shape : "circle";
+		},
+		// 设置radio的状态，要求radio的name等于parent的value时才为选中状态
+		iconStyle() {
+			let style = {};
+			if (this.elActiveColor && this.parentData.value === this.name && !this.elDisabled) {
+				style.borderColor = this.elActiveColor;
+				style.backgroundColor = this.elActiveColor;
+			}
+			style.width = this.$u.addUnit(this.elSize);
+			style.height = this.$u.addUnit(this.elSize);
+			return style;
+		},
+		iconColor() {
+			return this.name === this.parentData.value ? "#ffffff" : "transparent";
+		},
+		iconClass() {
+			let classes = [];
+			classes.push("u-radio__icon-wrap--" + this.elShape);
+			if (this.name === this.parentData.value) classes.push("u-radio__icon-wrap--checked");
+			if (this.elDisabled) classes.push("u-radio__icon-wrap--disabled");
+			if (this.name === this.parentData.value && this.elDisabled)
+				classes.push("u-radio__icon-wrap--disabled--checked");
+			// 支付宝小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
+			return classes.join(" ");
+		},
+		radioStyle() {
+			let style = {};
+			if (this.parentData.width) {
+				style.width = this.$u.addUnit(this.parentData.width);
+				// #ifdef MP
+				// 各家小程序因为它们特殊的编译结构，使用float布局
+				style.float = "left";
+				// #endif
+				// #ifndef MP
+				// H5和APP使用flex布局
+				style.flex = `0 0 ${this.$u.addUnit(this.parentData.width)}`;
+				// #endif
+			}
+			if (this.parentData.wrap) {
+				style.width = "100%";
+				// #ifndef MP
+				// H5和APP使用flex布局，将宽度设置100%，即可自动换行
+				style.flex = "0 0 100%";
+				// #endif
+			}
+			return style;
+		}
+	},
+	methods: {
+		updateParentData() {
+			this.getParentData("u-radio-group");
+		},
+		onClickLabel() {
+			if (!this.elLabelDisabled && !this.elDisabled) {
+				this.setRadioCheckedStatus();
+			}
+		},
+		toggle() {
+			if (!this.elDisabled) {
+				this.setRadioCheckedStatus();
+			}
+		},
+		emitEvent() {
+			// u-radio的name不等于父组件的v-model的值时(意味着未选中)，才发出事件，避免多次点击触发事件
+			if (this.parentData.value != this.name) this.$emit("change", this.name);
+		},
+		// 改变组件选中状态
+		// 这里的改变的依据是，更改本组件的parentData.value值为本组件的name值，同时通过父组件遍历所有u-radio实例
+		// 将本组件外的其他u-radio的parentData.value都设置为空(由computed计算后，都被取消选中状态)，因而只剩下一个为选中状态
+		setRadioCheckedStatus() {
+			this.emitEvent();
+			if (this.parent) {
+				this.parent.setValue(this.name);
+				this.parentData.value = this.name;
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-radio {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;
+	/* #endif */
+	align-items: center;
+	overflow: hidden;
+	user-select: none;
+	line-height: 1.8;
+
+	&__icon-wrap {
+		color: $u-content-color;
+		@include vue-flex;
+		flex: none;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		width: 42rpx;
+		height: 42rpx;
+		color: transparent;
+		text-align: center;
+		transition-property: color, border-color, background-color;
+		font-size: 20px;
+		border: 1px solid #c8c9cc;
+		transition-duration: 0.2s;
+
+		/* #ifdef MP-TOUTIAO */
+		// 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
+		&__icon {
+			line-height: 0;
+		}
+		/* #endif */
+
+		&--circle {
+			border-radius: 100%;
+		}
+
+		&--square {
+			border-radius: 3px;
+		}
+
+		&--checked {
+			color: #fff;
+			background-color: #2979ff;
+			border-color: #2979ff;
+		}
+
+		&--disabled {
+			background-color: #ebedf0;
+			border-color: #c8c9cc;
+		}
+
+		&--disabled--checked {
+			color: #c8c9cc !important;
+		}
+	}
+
+	&__label {
+		word-wrap: break-word;
+		margin-left: 10rpx;
+		margin-right: 24rpx;
+		color: $u-content-color;
+		font-size: 30rpx;
+
+		&--disabled {
+			color: #c8c9cc;
+		}
+	}
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-rate/u-rate.vue

@@ -0,0 +1,293 @@
+<template>
+	<view class="u-rate" :id="elId" @touchmove.stop.prevent="touchMove">
+		<view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]">
+			<u-icon
+				:name="activeIndex > index ? elActiveIcon : inactiveIcon"
+				@click="click(index + 1, $event)"
+				:color="activeIndex > index ? elActiveColor : inactiveColor"
+				:custom-style="{
+					fontSize: size + 'rpx',
+					padding: `0 ${gutter / 2 + 'rpx'}`
+				}"
+				:custom-prefix="customPrefix"
+				:show-decimal-icon="showDecimalIcon(index)"
+				:percent="decimal"
+				:inactive-color="inactiveColor"
+			></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>/**
+ * rate 评分
+ * @description 该组件一般用于满意度调查，星型评分的场景
+ * @tutorial https://www.uviewui.com/components/rate.html
+ * @property {String Number} count 最多可选的星星数量（默认5）
+ * @property {String Number} current 默认选中的星星数量（默认0）
+ * @property {Boolean} disabled 是否禁止用户操作（默认false）
+ * @property {String Number} size 星星的大小，单位rpx（默认32）
+ * @property {String} inactive-color 未选中星星的颜色（默认#b2b2b2）
+ * @property {String} active-color 选中的星星颜色（默认#FA3534）
+ * @property {String} active-icon 选中时的图标名，只能为uView的内置图标（默认star-fill）
+ * @property {String} inactive-icon 未选中时的图标名，只能为uView的内置图标（默认star）
+ * @property {String} gutter 星星之间的距离（默认10）
+ * @property {String Number} min-count 最少选中星星的个数（默认0）
+ * @property {Boolean} allow-half 是否允许半星选择（默认false）
+ * @event {Function} change 选中的星星发生变化时触发
+ * @example <u-rate :count="count" :current="2"></u-rate>
+ */
+
+export default {
+	name: 'u-rate',
+  emits: ["update:modelValue", "input", "change"],
+	props: {
+		// 用于v-model双向绑定选中的星星数量
+		// 1.4.5版新增
+		value: {
+			type: [Number, String],
+			default: -1
+		},
+    modelValue: {
+      type: [Number, String],
+      default: -1
+    },
+		// 要显示的星星数量
+		count: {
+			type: [Number, String],
+			default: 5
+		},
+		// 当前需要默认选中的星星(选中的个数)
+		// 1.4.5后通过value双向绑定，不再建议使用此参数
+		current: {
+			type: [Number, String],
+			default: 0
+		},
+		// 是否不可选中
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 星星的大小，单位rpx
+		size: {
+			type: [Number, String],
+			default: 32
+		},
+		// 未选中时的颜色
+		inactiveColor: {
+			type: String,
+			default: '#b2b2b2'
+		},
+		// 选中的颜色
+		activeColor: {
+			type: String,
+			default: '#FA3534'
+		},
+		// 星星之间的间距，单位rpx
+		gutter: {
+			type: [Number, String],
+			default: 10
+		},
+		// 最少能选择的星星个数
+		minCount: {
+			type: [Number, String],
+			default: 0
+		},
+		// 是否允许半星(功能尚未实现)
+		allowHalf: {
+			type: Boolean,
+			default: false
+		},
+		// 选中时的图标(星星)
+		activeIcon: {
+			type: String,
+			default: 'star-fill'
+		},
+		// 未选中时的图标(星星)
+		inactiveIcon: {
+			type: String,
+			default: 'star'
+		},
+		// 自定义扩展前缀，方便用户扩展自己的图标库
+		customPrefix: {
+			type: String,
+			default: 'uicon'
+		},
+		colors: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		icons: {
+			type: Array,
+			default() {
+				return []
+			}
+		}
+	},
+	data() {
+		return {
+			// 生成一个唯一id，否则一个页面多个评分组件，会造成冲突
+			elId: this.$u.guid(),
+			elClass: this.$u.guid(),
+			starBoxLeft: 0, // 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离
+			// 当前激活的星星的index，如果存在value，优先使用value，因为它可以双向绑定(1.4.5新增)
+			activeIndex: 0,
+			starWidth: 0, // 每个星星的宽度
+			starWidthArr: [] //每个星星最右边到组件盒子最左边的距离
+		}
+	},
+	created() {
+		this.activeIndex = this.valueCom != -1 ? this.valueCom : this.current;
+	},
+	watch: {
+		current(val) {
+			this.activeIndex = val
+		},
+		valueCom(val) {
+			this.activeIndex = val
+		}
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+		
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		decimal() {
+			if (this.disabled) {
+				return this.activeIndex * 100 % 100
+			} else if (this.allowHalf) {
+				return 50
+			}
+		},
+		elActiveIcon() {
+			const len = this.icons.length
+			// 此处规则类似于下方的elActiveColor参数，都是根据一定的规则，显示不同的图标
+			// 结果可能如此：icons参数传递了3个图标，当选中两个时，用第一个图标，4个时，用第二个图标
+			// 第三个时，用第三个图标作为激活的图标
+			if (len && len <= this.count) {
+				const step = Math.round(this.activeIndex / Math.round(this.count / len))
+				if (step < 1) return this.icons[0]
+				if (step > len) return this.icons[len - 1]
+				return this.icons[step - 1]
+			}
+			return this.activeIcon
+		},
+		elActiveColor() {
+			const len = this.colors.length
+			// 如果有设置colors参数(此参数用于将图标分段，比如一共5颗星，colors传3个颜色值，那么根据一定的规则，2颗星可能为第一个颜色
+			// 4颗星为第二个颜色值，5颗星为第三个颜色值)
+			if (len && len <= this.count) {
+				const step = Math.round(this.activeIndex / Math.round(this.count / len))
+				if (step < 1) return this.colors[0]
+				if (step > len) return this.colors[len - 1]
+				return this.colors[step - 1]
+			}
+			return this.activeColor
+		}
+	},
+	methods: {
+		// 获取评分组件盒子的布局信息
+		getElRectById() {
+			// uView封装的获取节点的方法，详见文档
+			this.$uGetRect('#' + this.elId).then(res => {
+				this.starBoxLeft = res.left
+			})
+		},
+		// 获取单个星星的尺寸
+		getElRectByClass() {
+			// uView封装的获取节点的方法，详见文档
+			this.$uGetRect('.' + this.elClass).then(res => {
+				this.starWidth = res.width
+				// 把每个星星右边到组件盒子左边的距离放入数组中
+				for (let i = 0; i < this.count; i++) {
+					this.starWidthArr[i] = (i + 1) * this.starWidth
+				}
+			})
+		},
+		// 手指滑动
+		touchMove(e) {
+			if (this.disabled) {
+				return
+			}
+			if (!e.changedTouches[0]) {
+				return
+			}
+			const movePageX = e.changedTouches[0].pageX
+			// 滑动点相对于评分盒子左边的距离
+			const distance = movePageX - this.starBoxLeft
+
+			// 如果滑动到了评分盒子的左边界，就设置为0星
+			if (distance <= 0) {
+				this.activeIndex = 0
+			}
+			// 滑动的距离，相当于多少颗星星
+			let index = Math.ceil(distance / this.starWidth)
+			this.activeIndex = index > this.count ? this.count : index
+			// 对最少颗星星的限制
+			if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
+			this.emitEvent()
+		},
+		// 通过点击，直接选中
+		click(index, e) {
+			if (this.disabled) {
+				return
+			}
+			// 半星选择，尚未实现
+			if (this.allowHalf) {
+			}
+			// 对第一个星星特殊处理，只有一个的时候，点击可以取消，否则无法作0星评价
+			if (index == 1) {
+				if (this.activeIndex == 1) {
+					this.activeIndex = 0
+				} else {
+					this.activeIndex = 1
+				}
+			} else {
+				this.activeIndex = index
+			}
+			// 对最少颗星星的限制
+			if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
+			this.emitEvent()
+		},
+		// 发出事件
+		emitEvent() {
+			// 发出change事件
+			this.$emit('change', this.activeIndex)
+			// 同时修改双向绑定的value的值
+			if (this.valueCom != -1) {
+				this.$emit('input', this.activeIndex)
+        this.$emit("update:modelValue", this.activeIndex);
+			}
+		},
+		showDecimalIcon(index) {
+			return this.disabled && parseInt(this.activeIndex) === index
+		}
+	},
+	mounted() {
+		this.getElRectById()
+		this.getElRectByClass()
+	}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+
+.u-rate {
+	display: -webkit-inline-flex;
+	display: inline-flex;
+	align-items: center;
+	margin: 0;
+	padding: 0;
+}
+
+.u-icon {
+	box-sizing: border-box;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-read-more/u-read-more.vue

@@ -0,0 +1,181 @@
+<template>
+	<view class="">
+		<view class="u-content" :class="[elId]" :style="{ 
+			height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
+			textIndent: textIndent
+		}">
+			<slot></slot>
+		</view>
+		<view @tap="toggleReadMore" v-if="isLongContent" class="u-content__showmore-wrap"
+		    :class="{ 'u-content__show-more': showMore }"
+		    :style="[innerShadowStyle]">
+			<text class="u-content__showmore-wrap__readmore-btn" :style="{
+				fontSize: fontSize + 'rpx',
+				color: color
+			}">
+				{{ showMore ? openText : closeText }}
+			</text>
+			<view class="u-content__showmore-wrap__readmore-btn__icon u-flex">
+				<u-icon :color="color" :size="fontSize" :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * readMore 阅读更多
+	 * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
+	 * @tutorial https://www.uviewui.com/components/readMore.html
+	 * @property {String Number} show-height 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
+	 * @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
+	 * @property {String} close-text 关闭时的提示文字（默认“展开阅读全文”）
+	 * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
+	 * @property {String} text-indent 段落首行缩进的字符个数（默认2em）
+	 * @property {String} open-text 展开时的提示文字（默认“收起”）
+	 * @property {String} color 提示文字的颜色（默认#2979ff）
+	 * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
+	 */
+	export default {
+		name: "u-read-more",
+    emits: ["open", "close"],
+		props: {
+			// 默认的显示占位高度，单位为rpx
+			showHeight: {
+				type: [Number, String],
+				default: 400
+			},
+			// 展开后是否显示"收起"按钮
+			toggle: {
+				type: Boolean,
+				default: false
+			},
+			// 关闭时的提示文字
+			closeText: {
+				type: String,
+				default: '展开阅读全文'
+			},
+			// 展开时的提示文字
+			openText: {
+				type: String,
+				default: '收起'
+			},
+			// 提示的文字颜色
+			color: {
+				type: String,
+				default: '#2979ff'
+			},
+			// 提示文字的大小
+			fontSize: {
+				type: [String, Number],
+				default: 28
+			},
+			// 是否显示阴影
+			shadowStyle: {
+				type: Object,
+				default () {
+					return {
+						backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
+						paddingTop: "300rpx",
+						marginTop: "-300rpx"
+					}
+				}
+			},
+			// 段落首行缩进的字符个数
+			textIndent: {
+				type: String,
+				default: '2em'
+			},
+			// open和close事件时，将此参数返回在回调参数中
+			index: {
+				type: [Number, String],
+				default: ''
+			}
+		},
+		watch: {
+			paramsChange(val) {
+				this.init();
+			}
+		},
+		computed: {
+			paramsChange() {
+				return `${this.toggle}-${this.showHeight}`;
+			},
+			// 展开后无需阴影，收起时才需要阴影样式
+			innerShadowStyle() {
+				if (this.showMore) return {};
+				else return this.shadowStyle
+			}
+		},
+		data() {
+			return {
+				isLongContent: false, // 是否需要隐藏一部分内容
+				showMore: false, // 当前隐藏与显示的状态，true-显示，false-收起
+				elId: this.$u.guid(), // 生成唯一class
+			};
+		},
+		mounted() {
+			this.$nextTick(() => {
+				this.init();
+			})
+		},
+		methods: {
+			init() {
+				this.$uGetRect('.' + this.elId).then(res => {
+					// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
+                    console.log(res.height)
+					if (res.height > uni.upx2px(this.showHeight)) {
+						this.isLongContent = true;
+						this.showMore = false;
+					}
+				})
+			},
+			// 展开或者收起
+			toggleReadMore() {
+				this.showMore = !this.showMore;
+				// 如果toggle为false，隐藏"收起"部分的内容
+				if (this.toggle == false) this.isLongContent = false;
+				// 发出打开或者收齐的事件
+				this.$emit(this.showMore ? 'open' : 'close', this.index);
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-content {
+		font-size: 30rpx;
+		color: $u-content-color;
+		line-height: 1.8;
+		text-align: left;
+		overflow: hidden;
+
+		&__show-more {
+			padding-top: 0;
+			background: none;
+			margin-top: 20rpx;
+		}
+
+		&__showmore-wrap {
+			position: relative;
+			width: 100%;
+			padding-bottom: 26rpx;
+			@include vue-flex;
+			align-items: center;
+			justify-content: center;
+
+			&__readmore-btn {
+				@include vue-flex;
+				align-items: center;
+				justify-content: center;
+				line-height: 1;
+
+				&__icon {
+					margin-left: 14rpx;
+				}
+			}
+		}
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-row-notice/u-row-notice.vue

@@ -0,0 +1,270 @@
+<template>
+	<view
+		v-if="show"
+		class="u-notice-bar"
+		:style="{
+			background: computeBgColor,
+			padding: padding
+		}"
+		:class="[
+			type ? `u-type-${type}-light-bg` : ''
+		]"
+	>
+		<view class="u-direction-row">
+			<view class="u-icon-wrap">
+				<u-icon class="u-left-icon" v-if="volumeIcon" name="volume-fill" :size="volumeSize" :color="computeColor"></u-icon>
+			</view>
+			<view class="u-notice-box" id="u-notice-box">
+				<view
+					class="u-notice-content"
+					id="u-notice-content"
+					:style="{
+						animationDuration: animationDuration,
+						animationPlayState: animationPlayState,
+					}"
+				>
+					<text class="u-notice-text" @tap="click" :style="[textStyle]"
+					:class="['u-type-' + type]">{{showText}}</text>
+				</view>
+			</view>
+			<view class="u-icon-wrap">
+				<u-icon @click="getMore" class="u-right-icon" v-if="moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
+				<u-icon @click="close" class="u-right-icon" v-if="closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+  emits: ["close", "getMore"],
+	props: {
+		// 显示的内容，数组
+		list: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 显示的主题，success|error|primary|info|warning|none
+		// none主题默认为透明背景，黑色(contentColor)字体
+		type: {
+			type: String,
+			default: 'warning'
+		},
+		// 是否显示左侧的音量图标
+		volumeIcon: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示右侧的右箭头图标
+		moreIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示右侧的关闭图标
+		closeIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 是否自动播放
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 文字颜色，各图标也会使用文字颜色
+		color: {
+			type: String,
+			default: ''
+		},
+		// 背景颜色
+		bgColor: {
+			type: String,
+			default: ''
+		},
+		// 是否显示
+		show: {
+			type: Boolean,
+			default: true
+		},
+		// 字体大小，单位rpx
+		fontSize: {
+			type: [Number, String],
+			default: 26
+		},
+		// 音量喇叭的大小
+		volumeSize: {
+			type: [Number, String],
+			default: 34
+		},
+		// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
+		speed: {
+			type: [Number, String],
+			default: 160
+		},
+		// 播放状态，play-播放，paused-暂停
+		playState: {
+			type: String,
+			default: 'play'
+		},
+		// 通知的边距
+		padding: {
+			type: [Number, String],
+			default: '18rpx 24rpx'
+		}
+	},
+	data() {
+		return {
+			textWidth: 0, // 滚动的文字宽度
+			boxWidth: 0, // 供文字滚动的父盒子的宽度，和前者一起为了计算滚动速度
+			animationDuration: '10s', // 动画执行时间
+			animationPlayState: 'paused', // 动画的开始和结束执行
+			showText: '' // 显示的文本
+		};
+	},
+	watch: {
+		list: {
+			immediate: true,
+			handler(val) {
+				this.showText = val.join('，');
+				this.$nextTick(() => {
+					this.initSize();
+				});
+			}
+		},
+		playState(val) {
+			if(val == 'play') this.animationPlayState = 'running';
+			else this.animationPlayState = 'paused';
+		},
+		speed(val) {
+			this.initSize();
+		}
+	},
+	computed: {
+		// 计算字体颜色，如果没有自定义的，就用uview主题颜色
+		computeColor() {
+			if (this.color) return this.color;
+			// 如果是无主题，就默认使用content-color
+			else if(this.type == 'none') return '#606266';
+			else return this.type;
+		},
+		// 文字内容的样式
+		textStyle() {
+			let style = {};
+			if (this.color) style.color = this.color;
+			else if(this.type == 'none') style.color = '#606266';
+			style.fontSize = this.fontSize + 'rpx';
+			return style;
+		},
+		// 计算背景颜色
+		computeBgColor() {
+			if (this.bgColor) return this.bgColor;
+			else if(this.type == 'none') return 'transparent';
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initSize();
+		});
+	},
+	methods: {
+		initSize() {
+			let query = [],
+				boxWidth = 0,
+				textWidth = 0;
+			let textQuery = new Promise((resolve, reject) => {
+				uni.createSelectorQuery()
+					.in(this)
+					.select(`#u-notice-content`)
+					.boundingClientRect()
+					.exec(ret => {
+						this.textWidth = ret[0].width;
+						resolve();
+					});
+			});
+			query.push(textQuery);
+			Promise.all(query).then(() => {
+				// 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
+				// 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
+				this.animationDuration = `${this.textWidth / uni.upx2px(this.speed)}s`;
+				// 这里必须这样开始动画，否则在APP上动画速度不会改变(HX版本2.4.6，IOS13)
+				this.animationPlayState = 'paused';
+				setTimeout(() => {
+					if(this.playState == 'play' && this.autoplay) this.animationPlayState = 'running';
+				}, 10);
+			});
+		},
+		// 点击通告栏
+		click(index) {
+			this.$emit('click');
+		},
+		// 点击关闭按钮
+		close() {
+			this.$emit('close');
+		},
+		// 点击更多箭头按钮
+		getMore() {
+			this.$emit('getMore');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+	
+.u-notice-bar {
+	padding: 18rpx 24rpx;
+	overflow: hidden;
+}
+
+.u-direction-row {
+	@include vue-flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.u-left-icon {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;
+	/* #endif */
+	align-items: center;
+}
+
+.u-notice-box {
+	flex: 1;
+	@include vue-flex;
+	overflow: hidden;
+	margin-left: 12rpx;
+}
+
+.u-right-icon {
+	margin-left: 12rpx;
+	display: inline-flex;
+	align-items: center;
+}
+
+.u-notice-content {
+	animation: u-loop-animation 10s linear infinite both;
+	text-align: right;
+	// 这一句很重要，为了能让滚动左右连接起来
+	padding-left: 100%;
+	@include vue-flex;
+	flex-wrap: nowrap;
+}
+
+.u-notice-text {
+	font-size: 26rpx;
+	word-break: keep-all;
+	white-space: nowrap
+}
+
+@keyframes u-loop-animation {
+	0% {
+		transform: translate3d(0, 0, 0);
+	}
+
+	100% {
+		transform: translate3d(-100%, 0, 0);
+	}
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-row/u-row.vue

@@ -0,0 +1,84 @@
+<template>
+	<view class="u-row" :style="{
+			alignItems: uAlignItem,
+			justifyContent: uJustify
+		}"
+		@tap="click"
+	>
+		<slot />
+	</view>
+</template>
+
+<script>
+	/**
+	 * row 行布局
+	 * @description 通过基础的 12 分栏，迅速简便地创建布局。
+	 * @tutorial https://www.uviewui.com/components/layout.html#row-props
+	 * @property {String Number} gutter 栅格间隔，左右各为此值的一半，单位rpx（默认0）
+	 * @property {String} justify 水平排列方式(微信小程序暂不支持)默认（start(或flex-start)）
+	 * @property {String} align 垂直排列方式（默认center）
+	 * @example <u-row gutter="16"></u-row>
+	 */
+	export default {
+		name: "u-row",
+		props: {
+			// 给col添加间距，左右边距各占一半
+			gutter: {
+				type: [String, Number],
+				default: 20
+			},
+			// 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
+			justify: {
+				type: String,
+				default: 'start'
+			},
+			// 垂直对齐方式，可选值为top、center、bottom
+			align: {
+				type: String,
+				default: 'center'
+			},
+			// 是否阻止事件传播
+			stop: {
+				type: Boolean,
+				default: true
+			}
+		},
+		computed: {
+			uJustify() {
+				if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
+				else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
+				else return this.justify;
+			},
+			uAlignItem() {
+				if (this.align == 'top') return 'flex-start';
+				if (this.align == 'bottom') return 'flex-end';
+				else return this.align;
+			}
+		},
+		methods: {
+			click(e) {
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-row {
+		// 由于微信小程序编译后奇怪的页面结构，只能使用float布局实现，flex无法实现
+		/* #ifndef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+		@include vue-flex;
+		/* #endif */
+		flex-wrap: wrap;
+	}
+
+	.u-row:after {
+		/* #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO */
+		display: table;
+		clear: both;
+		content: "";
+		/* #endif */
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-search/u-search.vue

@@ -0,0 +1,357 @@
+<template>
+	<view class="u-search" @tap="clickHandler" :style="{
+		margin: margin,
+	}">
+		<view
+			class="u-content"
+			:style="{
+				backgroundColor: bgColor,
+				borderRadius: shape == 'round' ? '100rpx' : '10rpx',
+				border: borderStyle,
+				height: height + 'rpx'
+			}"
+		>
+			<view class="u-icon-wrap">
+				<u-icon class="u-clear-icon" :size="30" :name="searchIcon" :color="searchIconColor ? searchIconColor : color"></u-icon>
+			</view>
+			<input
+				confirm-type="search"
+				@blur="blur"
+				:value="valueCom"
+				@confirm="search"
+				@input="inputChange"
+				:disabled="disabled"
+				@focus="getFocus"
+				:focus="focus"
+				:maxlength="maxlength"
+				placeholder-class="u-placeholder-class"
+				:placeholder="placeholder"
+				:placeholder-style="`color: ${placeholderColor}`"
+				class="u-input"
+				type="text"
+				:style="[{
+					textAlign: inputAlign,
+					color: color,
+					backgroundColor: bgColor,
+				}, inputStyle]"
+			/>
+			<view class="u-close-wrap" v-if="keyword && clearabled && focused" @tap="clear">
+				<u-icon class="u-clear-icon" name="close-circle-fill" size="34" color="#c0c4cc"></u-icon>
+			</view>
+		</view>
+		<view :style="[actionStyle]" class="u-action" 
+			:class="[showActionBtn || show ? 'u-action-active' : '']" 
+			@tap.stop.prevent="custom"
+		>{{ actionText }}</view>
+	</view>
+</template>
+
+<script>
+/**
+ * search 搜索框
+ * @description 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
+ * @tutorial https://www.uviewui.com/components/search.html
+ * @property {String} shape 搜索框形状，round-圆形，square-方形（默认round）
+ * @property {String} bg-color 搜索框背景颜色（默认#f2f2f2）
+ * @property {String} border-color 边框颜色，配置了颜色，才会有边框
+ * @property {String} placeholder 占位文字内容（默认“请输入关键字”）
+ * @property {Boolean} clearabled 是否启用清除控件（默认true）
+ * @property {Boolean} focus 是否自动获得焦点（默认false）
+ * @property {Boolean} show-action 是否显示右侧控件（默认true）
+ * @property {String} action-text 右侧控件文字（默认“搜索”）
+ * @property {Object} action-style 右侧控件的样式，对象形式
+ * @property {String} input-align 输入框内容水平对齐方式（默认left）
+ * @property {Object} input-style 自定义输入框样式，对象形式
+ * @property {Boolean} disabled 是否启用输入框（默认false）
+ * @property {String} search-icon-color 搜索图标的颜色，默认同输入框字体颜色
+ * @property {String} color 输入框字体颜色（默认#606266）
+ * @property {String} placeholder-color placeholder的颜色（默认#909399）
+ * @property {String} search-icon 输入框左边的图标，可以为uView图标名称或图片路径
+ * @property {String} margin 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"
+ * @property {Boolean} animation 是否开启动画，见上方说明（默认false）
+ * @property {String} value 输入框初始值
+ * @property {String | Number} maxlength 输入框最大能输入的长度，-1为不限制长度
+ * @property {Boolean} input-style input输入框的样式，可以定义文字颜色，大小等，对象形式
+ * @property {String | Number} height 输入框高度，单位rpx（默认64）
+ * @event {Function} change 输入框内容发生变化时触发
+ * @event {Function} search 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发
+ * @event {Function} custom 用户点击右侧控件时触发
+ * @event {Function} clear 用户点击清除按钮时触发
+ * @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
+ */
+export default {
+	name: "u-search",
+  emits: ["update:modelValue", "input", "change", "search", "custom", "clear", "focus", "blur"],
+	props: {
+    // 输入框的初始化内容
+    value: {
+    	type: String,
+    	default: ''
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    },
+		// 搜索框形状，round-圆形，square-方形
+		shape: {
+			type: String,
+			default: 'round'
+		},
+		// 搜索框背景色，默认值#f2f2f2
+		bgColor: {
+			type: String,
+			default: '#f2f2f2'
+		},
+		// 占位提示文字
+		placeholder: {
+			type: String,
+			default: '请输入关键字'
+		},
+		// 是否启用清除控件
+		clearabled: {
+			type: Boolean,
+			default: true
+		},
+		// 是否自动聚焦
+		focus: {
+			type: Boolean,
+			default: false
+		},
+		// 是否在搜索框右侧显示取消按钮
+		showAction: {
+			type: Boolean,
+			default: true
+		},
+		// 右边控件的样式
+		actionStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		// 取消按钮文字
+		actionText: {
+			type: String,
+			default: '搜索'
+		},
+		// 输入框内容对齐方式，可选值为 left|center|right
+		inputAlign: {
+			type: String,
+			default: 'left'
+		},
+		// 是否启用输入框
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 开启showAction时，是否在input获取焦点时才显示
+		animation: {
+			type: Boolean,
+			default: false
+		},
+		// 边框颜色，只要配置了颜色，才会有边框
+		borderColor: {
+			type: String,
+			default: 'none'
+		},
+		// 搜索框高度，单位rpx
+		height: {
+			type: [Number, String],
+			default: 64
+		},
+		// input输入框的样式，可以定义文字颜色，大小等，对象形式
+		inputStyle: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		// 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档)
+		maxlength: {
+			type: [Number, String],
+			default: '-1'
+		},
+		// 搜索图标的颜色，默认同输入框字体颜色
+		searchIconColor: {
+			type: String,
+			default: ''
+		},
+		// 输入框字体颜色
+		color: {
+			type: String,
+			default: '#606266'
+		},
+		// placeholder的颜色
+		placeholderColor: {
+			type: String,
+			default: '#909399'
+		},
+		// 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法
+		margin: {
+			type: String,
+			default: '0'
+		},
+		// 左边输入框的图标，可以为uView图标名称或图片路径
+		searchIcon: {
+			type: String,
+			default: 'search'
+		}
+	},
+	data() {
+		return {
+			keyword: '',
+			showClear: false, // 是否显示右边的清除图标
+			show: false,
+			// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
+			focused: this.focus
+			// 绑定输入框的值
+			// inputValue: this.value
+		};
+	},
+	watch: {
+		keyword(nVal) {
+			// 双向绑定值，让v-model绑定的值双向变化
+			this.$emit('input', nVal);
+      this.$emit("update:modelValue", nVal);
+			// 触发change事件，事件效果和v-model双向绑定的效果一样，让用户多一个选择
+			this.$emit('change', nVal);
+		},
+		valueCom: {
+			immediate: true,
+			handler(nVal) {
+				this.keyword = nVal;
+			}
+		}
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+		
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		},
+		showActionBtn() {
+			if (!this.animation && this.showAction) return true;
+			else return false;
+		},
+		// 样式，根据用户传入的颜色值生成，如果不传入，默认为none
+		borderStyle() {
+			if (this.borderColor) return `1px solid ${this.borderColor}`;
+			else return 'none';
+		},
+	},
+	methods: {
+		// 目前HX2.6.9 v-model双向绑定无效，故监听input事件获取输入框内容的变化
+		inputChange(e) {
+			this.keyword = e.detail.value;
+		},
+		// 清空输入
+		// 也可以作为用户通过this.$refs形式调用清空输入框内容
+		clear() {
+			this.keyword = '';
+			// 延后发出事件，避免在父组件监听clear事件时，value为更新前的值(不为空)
+			this.$nextTick(() => {
+				this.$emit('clear');
+			})
+		},
+		// 确定搜索
+		search(e) {
+			this.$emit('search', e.detail.value);
+			try{
+				// 收起键盘
+				uni.hideKeyboard();
+			}catch(e){}
+		},
+		// 点击右边自定义按钮的事件
+		custom() {
+			this.$emit('custom', this.keyword);
+			try{
+				// 收起键盘
+				uni.hideKeyboard();
+			}catch(e){}
+		},
+		// 获取焦点
+		getFocus() {
+			this.focused = true;
+			// 开启右侧搜索按钮展开的动画效果
+			if (this.animation && this.showAction) this.show = true;
+			this.$emit('focus', this.keyword);
+		},
+		// 失去焦点
+		blur() {
+			// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
+			// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
+			setTimeout(() => {
+				this.focused = false;
+			}, 100)
+			this.show = false;
+			this.$emit('blur', this.keyword);
+		},
+		// 点击搜索框，只有disabled=true时才发出事件，因为禁止了输入，意味着是想跳转真正的搜索页
+		clickHandler() {
+			if(this.disabled) this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-search {
+	@include vue-flex;
+	align-items: center;
+	flex: 1;
+}
+
+.u-content {
+	@include vue-flex;
+	align-items: center;
+	padding: 0 18rpx;
+	flex: 1;
+}
+
+.u-clear-icon {
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-input {
+	flex: 1;
+	font-size: 28rpx;
+	line-height: 1;
+	margin: 0 10rpx;
+	color: $u-tips-color;
+}
+
+.u-close-wrap {
+	width: 40rpx;
+	height: 100%;
+	@include vue-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+}
+
+.u-placeholder-class {
+	color: $u-tips-color;
+}
+
+.u-action {
+	font-size: 28rpx;
+	color: $u-main-color;
+	width: 0;
+	overflow: hidden;
+	transition: all 0.3s;
+	white-space: nowrap;
+	text-align: center;
+}
+
+.u-action-active {
+	width: 80rpx;
+	margin-left: 10rpx;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-section/u-section.vue

@@ -0,0 +1,154 @@
+<template>
+	<view class="u-section">
+		<view class="u-section__title" :style="{
+			fontWeight: bold ? 'bold' : 'normal',
+			color: color,
+			fontSize: fontSize + 'rpx',
+			paddingLeft: showLine ? (fontSize * 0.7) + 'rpx' : 0
+		}" :class="{
+			'u-section--line': showLine
+		}">
+			<view class="u-section__title__icon-wrap u-flex" :style="[lineStyle]" v-if="showLine">
+				<u-icon top="0" name="column-line" :size="fontSize * 1.25" bold :color="lineColor ? lineColor : color"></u-icon>
+			</view>
+			<text class="u-flex u-section__title__text">{{title}}</text>
+		</view>
+		<view class="u-section__right-info" v-if="right || $slots.right" :style="{
+			color: subColor
+		}" @tap="rightClick"> 
+			<slot name="right" v-if="$slots.right" />
+			<block v-else>
+				{{subTitle}}
+				<view class="u-section__right-info__icon-arrow u-flex" v-if="arrow">
+					<u-icon name="arrow-right" size="24" :color="subColor"></u-icon>
+				</view>
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * section 查看更多
+	 * @description 该组件一般用于分类信息有很多，但是限于篇幅只能列出一部分，让用户通过"查看更多"获得更多信息的场景，实际效果见演示。
+	 * @tutorial https://www.uviewui.com/components/section.html
+	 * @property {String} title 左边主标题
+	 * @property {String} sub-title 右边副标题（默认更多）
+	 * @property {Boolean} right 是否显示右边的内容（默认true）
+	 * @property {Boolean} showLine 是否显示左边的竖条（默认true）
+	 * @property {Boolean} arrow 是否显示右边箭头（默认true）
+	 * @property {String Number} font-size 主标题的字体大小（默认28）
+	 * @property {Boolean} bold 主标题是否加粗（默认true）
+	 * @property {String} color 主标题颜色（默认#303133）
+	 * @event {Function} click 组件右侧的内容被点击时触发，用于跳转"更多"
+	 * @example <u-section title="今日热门" :right="false"></u-section>
+	 */
+	export default {
+		name: "u-section",
+		props: {
+			// 标题信息
+			title: {
+				type: String,
+				default: ''
+			},
+			// 右边副标题内容
+			subTitle: {
+				type: String,
+				default: '更多'
+			},
+			// 是否显示右边的内容
+			right: {
+				type: Boolean,
+				default: true
+			},
+			fontSize: {
+				type: [Number, String],
+				default: 28
+			},
+			// 主标题是否加粗
+			bold: {
+				type: Boolean,
+				default: true
+			},
+			// 主标题的颜色
+			color: {
+				type: String,
+				default: '#303133'
+			},
+			// 右边副标题的颜色
+			subColor: {
+				type: String,
+				default: '#909399'
+			},
+			// 是否显示左边的竖条
+			showLine: {
+				type: Boolean,
+				default: true
+			},
+			// 左边竖线的颜色
+			lineColor: {
+				type: String,
+				default: ''
+			},
+			// 是否显示右边箭头
+			arrow: {
+				type: Boolean,
+				default: true
+			},
+		},
+		computed: {
+			// 左边竖条的样式
+			lineStyle() {
+				// 由于安卓和iOS的，需要稍微调整绝对定位的top值，才能让左边的竖线和右边的文字垂直居中
+				return {
+					// 由于竖线为字体图标，具有比实际线宽更宽的宽度，所以也需要根据字体打下动态调整
+					left: -(Number(this.fontSize) * 0.9) + 'rpx',
+					top: -(Number(this.fontSize) * (this.$u.os() == 'ios' ? 0.14 : 0.15)) + 'rpx',
+				}
+			}
+		},
+		methods: {
+			rightClick() {
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.u-section {
+		@include vue-flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		
+		&__title {
+			position: relative;
+			font-size: 28rpx;
+			padding-left: 20rpx;
+			@include vue-flex;
+			align-items: center;
+			
+			&__icon-wrap {
+				position: absolute;
+			}
+			
+			&__text {
+				line-height: 1;
+			}
+		}
+		
+		&__right-info {
+			color: $u-tips-color;
+			font-size: 26rpx;
+			@include vue-flex;
+			align-items: center;
+			
+			&__icon-arrow {
+				margin-left: 6rpx;
+			}
+		}
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-select/u-select.vue

@@ -0,0 +1,437 @@
+<template>
+	<view class="u-select">
+		<!-- <view class="u-select__action" :class="{
+			'u-select--border': border
+		}" @tap.stop="selectHandler">
+			<view class="u-select__action__icon" :class="{
+				'u-select__action__icon--reverse': value == true
+			}">
+				<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
+			</view>
+		</view> -->
+		<u-popup :blur="blur" :maskCloseAble="maskCloseAble" mode="bottom" :popup="false" v-model="popupValue" length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="close" :z-index="uZIndex">
+			<view class="u-select">
+				<view class="u-select__header" @touchmove.stop.prevent="">
+					<view
+						class="u-select__header__cancel u-select__header__btn"
+						:style="{ color: cancelColor }"
+						hover-class="u-hover-class"
+						:hover-stay-time="150"
+						@tap="getResult('cancel')"
+					>
+						{{cancelText}}
+					</view>
+					<view class="u-select__header__title">
+						{{title}}
+					</view>
+					<view
+						class="u-select__header__confirm u-select__header__btn"
+						:style="{ color: moving ? cancelColor : confirmColor }"
+						hover-class="u-hover-class"
+						:hover-stay-time="150"
+						@touchmove.stop=""
+						@tap.stop="getResult('confirm')"
+					>
+						{{confirmText}}
+					</view>
+				</view>
+				<view class="u-select__body">
+					<picker-view @change="columnChange" class="u-select__body__picker-view" :value="defaultSelector" @pickstart="pickstart" @pickend="pickend">
+						<picker-view-column v-for="(item, index) in columnData" :key="index">
+							<view class="u-select__body__picker-view__item" v-for="(item1, index1) in item" :key="index1">
+								<view class="u-line-1">{{ item1[labelName] }}</view>
+							</view>
+						</picker-view-column>
+					</picker-view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	/**
+	 * select 列选择器
+	 * @description 此选择器用于单列，多列，多列联动的选择场景。(从1.3.0版本起，不建议使用Picker组件的单列和多列模式，Select组件是专门为列选择而构造的组件，更简单易用。)
+	 * @tutorial http://uviewui.com/components/select.html
+	 * @property {String} mode 模式选择，"single-column"-单列模式，"mutil-column"-多列模式，"mutil-column-auto"-多列联动模式
+	 * @property {Array} list 列数据，数组形式，见官网说明
+	 * @property {Boolean} v-model 布尔值变量，用于控制选择器的弹出与收起
+	 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
+	 * @property {String} cancel-color 取消按钮的颜色（默认#606266）
+	 * @property {String} confirm-color 确认按钮的颜色(默认#2979ff)
+	 * @property {String} confirm-text 确认按钮的文字
+	 * @property {String} cancel-text 取消按钮的文字
+	 * @property {String} default-value 提供的默认选中的下标，见官网说明
+	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
+	 * @property {String Number} z-index 弹出时的z-index值(默认10075)
+	 * @property {String} value-name 自定义list数据的value属性名 1.3.6
+	 * @property {String} label-name 自定义list数据的label属性名 1.3.6
+	 * @property {String} child-name 自定义list数据的children属性名，只对多列联动模式有效 1.3.7
+	 * @event {Function} confirm 点击确定按钮，返回当前选择的值
+	 * @example <u-select v-model="show" :list="list"></u-select>
+	 */
+
+export default {
+  emits: ["update:modelValue", "input", "confirm"],
+	props: {
+    // 通过双向绑定控制组件的弹出与收起
+    value: {
+    	type: Boolean,
+    	default: false
+    },
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+		// 列数据
+		list: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 是否显示边框
+		border: {
+			type: Boolean,
+			default: true
+		},
+		// "取消"按钮的颜色
+		cancelColor: {
+			type: String,
+			default: '#606266'
+		},
+		// "确定"按钮的颜色
+		confirmColor: {
+			type: String,
+			default: '#2979ff'
+		},
+		// 弹出的z-index值
+		zIndex: {
+			type: [String, Number],
+			default: 0
+		},
+		safeAreaInsetBottom: {
+			type: Boolean,
+			default: false
+		},
+		// 是否允许通过点击遮罩关闭Picker
+		maskCloseAble: {
+			type: Boolean,
+			default: true
+		},
+		// 提供的默认选中的下标
+		defaultValue: {
+			type: Array,
+			default() {
+				return [0];
+			}
+		},
+		// 模式选择，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动
+		mode: {
+			type: String,
+			default: 'single-column'
+		},
+		// 自定义value属性名
+		valueName: {
+			type: String,
+			default: 'value'
+		},
+		// 自定义label属性名
+		labelName: {
+			type: String,
+			default: 'label'
+		},
+		// 自定义多列联动模式的children属性名
+		childName: {
+			type: String,
+			default: 'children'
+		},
+		// 顶部标题
+		title: {
+			type: String,
+			default: ''
+		},
+		// 取消按钮的文字
+		cancelText: {
+			type: String,
+			default: '取消'
+		},
+		// 确认按钮的文字
+		confirmText: {
+			type: String,
+			default: '确认'
+		},
+		// 遮罩的模糊度
+		blur: {
+			type: [Number, String],
+			default: 0
+		},
+	},
+	data() {
+		return {
+      popupValue: false,
+			// 用于列改变时，保存当前的索引，下一次变化时比较得出是哪一列发生了变化
+			defaultSelector: [0],
+			// picker-view的数据
+			columnData: [],
+			// 每次队列发生变化时，保存选择的结果
+			selectValue: [],
+			// 上一次列变化时的index
+			lastSelectIndex: [],
+			// 列数
+			columnNum: 0,
+			// 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
+			moving: false
+		};
+	},
+	watch: {
+		// 在select弹起的时候，重新初始化所有数据
+		value: {
+			immediate: true,
+			handler(val) {
+				if(val) setTimeout(() => this.init(), 10);
+        this.popupValue = val;
+			}
+		},
+    modelValue: {
+    	immediate: true,
+    	handler(val) {
+    		if(val) setTimeout(() => this.init(), 10);
+        this.popupValue = val;
+    	}
+    },
+	},
+	computed: {
+		uZIndex() {
+			// 如果用户有传递z-index值，优先使用
+			return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+		},
+	},
+	methods: {
+		// 标识滑动开始，只有微信小程序才有这样的事件
+		pickstart() {
+			// #ifdef MP-WEIXIN
+			this.moving = true;
+			// #endif
+		},
+		// 标识滑动结束
+		pickend() {
+			// #ifdef MP-WEIXIN
+			this.moving = false;
+			// #endif
+		},
+		init() {
+			this.setColumnNum();
+			this.setDefaultSelector();
+			this.setColumnData();
+			this.setSelectValue();
+		},
+		// 获取默认选中列下标
+		setDefaultSelector() {
+			// 如果没有传入默认选中的值，生成长度为columnNum，用0填充的数组
+			this.defaultSelector = this.defaultValue.length == this.columnNum ? this.defaultValue : Array(this.columnNum).fill(0);
+			this.lastSelectIndex = this.$u.deepClone(this.defaultSelector);
+		},
+		// 计算列数
+		setColumnNum() {
+			// 单列的列数为1
+			if(this.mode == 'single-column') this.columnNum = 1;
+			// 多列时，this.list数组长度就是列数
+			else if(this.mode == 'mutil-column') this.columnNum = this.list.length;
+			// 多列联动时，通过历遍this.list的第一个元素，得出有多少列
+			else if(this.mode == 'mutil-column-auto') {
+				let num = 1;
+				let column = this.list;
+				// 只要有元素并且第一个元素有children属性，继续历遍
+				while(column[0][this.childName]) {
+					column = column[0] ? column[0][this.childName] : {};
+					num ++;
+				}
+				this.columnNum = num;
+			}
+		},
+		// 获取需要展示在picker中的列数据
+		setColumnData() {
+			let data = [];
+			this.selectValue = [];
+			if(this.mode == 'mutil-column-auto') {
+				// 获得所有数据中的第一个元素
+				let column = this.list[this.defaultSelector.length ? this.defaultSelector[0] : 0];
+				// 通过循环所有的列数，再根据设定列的数组，得出当前需要渲染的整个列数组
+				for (let i = 0; i < this.columnNum; i++) {
+					// 第一列默认为整个list数组
+					if (i == 0) {
+						data[i] = this.list;
+						column = column[this.childName];
+					} else {
+						// 大于第一列时，判断是否有默认选中的，如果没有就用该列的第一项
+						data[i] = column;
+						column = column[this.defaultSelector[i]][this.childName];
+					}
+				}
+			} else if(this.mode == 'single-column') {
+				data[0] = this.list;
+			} else {
+				data = this.list;
+			}
+			this.columnData = data;
+		},
+		// 获取默认选中的值，如果没有设置defaultValue，就默认选中每列的第一个
+		setSelectValue() {
+			let tmp = null;
+			for(let i = 0; i < this.columnNum; i++) {
+				tmp = this.columnData[i][this.defaultSelector[i]];
+				let data = {
+					value: tmp ? tmp[this.valueName] : null,
+					label: tmp ? tmp[this.labelName] : null
+				};
+				// 判断是否存在额外的参数，如果存在，就返回
+				if(tmp && tmp.extra) data.extra = tmp.extra;
+				this.selectValue.push(data)
+			}
+		},
+		// 列选项
+		columnChange(e) {
+			let index = null;
+			let columnIndex = e.detail.value;
+			// 由于后面是需要push进数组的，所以需要先清空数组
+			this.selectValue = [];
+			if(this.mode == 'mutil-column-auto') {
+				// 对比前后两个数组，寻找变更的是哪一列，如果某一个元素不同，即可判定该列发生了变化
+				this.lastSelectIndex.map((val, idx) => {
+					if (val != columnIndex[idx]) index = idx;
+				});
+				this.defaultSelector = columnIndex;
+				for (let i = index + 1; i < this.columnNum; i++) {
+					// 当前变化列的下一列的数据，需要获取上一列的数据，同时需要指定是上一列的第几个的children，再往后的
+					// 默认是队列的第一个为默认选项
+					this.columnData[i] = this.columnData[i - 1][i - 1 == index ? columnIndex[index] : 0][this.childName];
+					// 改变的列之后的所有列，默认选中第一个
+					this.defaultSelector[i] = 0;
+				}
+				// 在历遍的过程中，可能由于上一步修改this.columnData，导致产生连锁反应，程序触发columnChange，会有多次调用
+				// 只有在最后一次数据稳定后的结果是正确的，此前的历遍中，可能会产生undefined，故需要判断
+				columnIndex.map((item, index) => {
+					let data = this.columnData[index][columnIndex[index]];
+					let tmp = {
+						value: data ? data[this.valueName] : null,
+						label: data ? data[this.labelName] : null,
+					};
+					// 判断是否有需要额外携带的参数
+					if(data && data.extra !== undefined) tmp.extra = data.extra;
+					this.selectValue.push(tmp);
+
+				})
+				// 保存这一次的结果，用于下次列发生变化时作比较
+				this.lastSelectIndex = columnIndex;
+			} else if(this.mode == 'single-column') {
+				let data = this.columnData[0][columnIndex[0]];
+				// 初始默认选中值
+				let tmp = {
+					value: data ? data[this.valueName] : null,
+					label: data ? data[this.labelName] : null,
+				};
+				// 判断是否有需要额外携带的参数
+				if(data && data.extra !== undefined) tmp.extra = data.extra;
+				this.selectValue.push(tmp);
+			} else if(this.mode == 'mutil-column') {
+				// 初始默认选中值
+				columnIndex.map((item, index) => {
+					let data = this.columnData[index][columnIndex[index]];
+					// 初始默认选中值
+					let tmp = {
+						value: data ? data[this.valueName] : null,
+						label: data ? data[this.labelName] : null,
+					};
+					// 判断是否有需要额外携带的参数
+					if(data && data.extra !== undefined) tmp.extra = data.extra;
+					this.selectValue.push(tmp);
+				})
+			}
+		},
+		close() {
+			this.$emit('input', false);
+      this.$emit("update:modelValue", false);
+		},
+		// 点击确定或者取消
+		getResult(event = null) {
+			// #ifdef MP-WEIXIN
+			if (this.moving) return;
+			// #endif
+			if (event) this.$emit(event, this.selectValue);
+			this.close();
+		},
+		selectHandler() {
+			this.$emit('click');
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+
+.u-select {
+
+	&__action {
+		position: relative;
+		line-height: $u-form-item-height;
+		height: $u-form-item-height;
+
+		&__icon {
+			position: absolute;
+			right: 20rpx;
+			top: 50%;
+			transition: transform .4s;
+			transform: translateY(-50%);
+			z-index: 1;
+
+			&--reverse {
+				transform: rotate(-180deg) translateY(50%);
+			}
+		}
+	}
+
+	&__hader {
+		&__title {
+			color: $u-content-color;
+		}
+	}
+
+	&--border {
+		border-radius: 6rpx;
+		border-radius: 4px;
+		border: 1px solid $u-form-item-border-color;
+	}
+
+	&__header {
+		@include vue-flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 80rpx;
+		padding: 0 40rpx;
+	}
+
+	&__body {
+		width: 100%;
+		height: 500rpx;
+		overflow: hidden;
+		background-color: #fff;
+
+		&__picker-view {
+			height: 100%;
+			box-sizing: border-box;
+
+			&__item {
+				@include vue-flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 32rpx;
+				color: $u-main-color;
+				padding: 0 8rpx;
+			}
+		}
+	}
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-skeleton/u-skeleton.vue

@@ -0,0 +1,199 @@
+<template>
+	<view v-if="loading" :style="{
+		width: windowWinth + 'px', 
+		height: windowHeight + 'px', 
+		backgroundColor: bgColor, 
+		position: 'absolute', 
+		left: left + 'px', 
+		top: top + 'px', 
+		zIndex: 9998, 
+		overflow: 'hidden'
+	}"
+	 @touchmove.stop.prevent>
+		<view v-for="(item, index) in RectNodes" :key="$u.guid()" :class="[animation ? 'skeleton-fade' : '']" :style="{
+			width: item.width + 'px', 
+			height: item.height + 'px', 
+			backgroundColor: elColor, 
+			position: 'absolute', 
+			left: (item.left - left) + 'px', 
+			top: (item.top - top) + 'px'
+		}"></view>
+		<view v-for="(item, index) in circleNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
+			width: item.width + 'px', 
+			height: item.height + 'px', 
+			backgroundColor: elColor, 
+			borderRadius: item.width/2 + 'px', 
+			position: 'absolute', 
+			left: (item.left - left) + 'px',
+			top: (item.top - top) + 'px'
+		}"></view>
+		<view v-for="(item, index) in filletNodes" :key="$u.guid()" :class="animation ? 'skeleton-fade' : ''" :style="{
+			width: item.width + 'px', 
+			height: item.height + 'px', 
+			backgroundColor: elColor, 
+			borderRadius: borderRadius + 'rpx', 
+			position: 'absolute', 
+			left: (item.left - left) + 'px',
+			top: (item.top - top) + 'px'
+		}"></view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * skeleton 骨架屏
+	 * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
+	 * @tutorial https://www.uviewui.com/components/skeleton.html
+	 * @property {String} el-color 骨架块状元素的背景颜色（默认#e5e5e5）
+	 * @property {String} bg-color 骨架组件背景颜色（默认#ffffff）
+	 * @property {Boolean} animation 骨架块是否显示动画效果（默认false）
+	 * @property {String Number} border-radius u-skeleton-fillet类名元素，对应的骨架块的圆角大小，单位rpx（默认10）
+	 * @property {Boolean} loading 是否显示骨架组件，请求完成后，将此值设置为false（默认true）
+	 * @example <u-skeleton :loading="true" :animation="true"></u-skeleton>
+	 */
+	export default {
+		name: "u-skeleton",
+		props: {
+			// 需要渲染的元素背景颜色，十六进制或者rgb等都可以
+			elColor: {
+				type: String,
+				default: '#e5e5e5'
+			},
+			// 整个骨架屏页面的背景颜色
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// 是否显示加载动画
+			animation: {
+				type: Boolean,
+				default: false
+			},
+			// 圆角值，只对类名为u-skeleton-fillet的元素生效，为数值，不带单位
+			borderRadius: {
+				type: [String, Number],
+				default: "10"
+			},
+			// 是否显示骨架，true-显示，false-隐藏
+			loading: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				windowWinth: 750, // 骨架屏宽度
+				windowHeight: 1500, // 骨架屏高度
+				filletNodes: [], // 圆角元素
+				circleNodes: [], // 圆形元素
+				RectNodes: [], // 矩形元素
+				top: 0,
+				left: 0,
+			}
+		},
+		methods: {
+			// 查询各节点的信息
+			selecterQueryInfo() {
+				// 获取整个父组件容器的高度，当做骨架屏的高度 
+				// 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
+				let query = '';
+				// #ifdef MP-WEIXIN
+				query = uni.createSelectorQuery().in(this.$parent);
+				// #endif
+				// #ifndef MP-WEIXIN
+				query = uni.createSelectorQuery()
+				// #endif
+				query.selectAll('.u-skeleton').boundingClientRect().exec((res) => {
+					this.windowHeight = res[0][0].height;
+					this.windowWinth = res[0][0].width;
+					this.top = res[0][0].bottom - res[0][0].height;
+					this.left = res[0][0].left;
+				});
+				// 矩形骨架元素
+				this.getRectEls();
+				// 圆形骨架元素
+				this.getCircleEls();
+				// 圆角骨架元素
+				this.getFilletEls();
+			},
+			// 矩形元素列表
+			getRectEls() {
+				let query = '';
+				// 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
+				// #ifdef MP-WEIXIN
+				query = uni.createSelectorQuery().in(this.$parent);
+				// #endif
+				// #ifndef MP-WEIXIN
+				query = uni.createSelectorQuery()
+				// #endif
+				query.selectAll('.u-skeleton-rect').boundingClientRect().exec((res) => {
+					this.RectNodes = res[0];
+				});
+			},
+			// 圆角元素列表
+			getFilletEls() {
+				let query = '';
+				// 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
+				// #ifdef MP-WEIXIN
+				query = uni.createSelectorQuery().in(this.$parent);
+				// #endif
+				// #ifndef MP-WEIXIN
+				query = uni.createSelectorQuery()
+				// #endif
+				query.selectAll('.u-skeleton-fillet').boundingClientRect().exec((res) => {
+					this.filletNodes = res[0];
+				});
+			},
+			// 圆形元素列表
+			getCircleEls() {
+				let query = '';
+				// 在微信小程序中，如果把骨架屏放入组件中使用的话，需要调in(this)上下文为父组件才有效
+				// #ifdef MP-WEIXIN
+				query = uni.createSelectorQuery().in(this.$parent);
+				// #endif
+				// #ifndef MP-WEIXIN
+				query = uni.createSelectorQuery()
+				// #endif
+				query.selectAll('.u-skeleton-circle').boundingClientRect().exec((res) => {
+					this.circleNodes = res[0];
+				});
+			}
+		},
+		// 组件被挂载
+		mounted() {
+			// 获取系统信息
+			let systemInfo = uni.getSystemInfoSync();
+			this.windowHeight = systemInfo.windowHeight;
+			this.windowWinth = systemInfo.windowWidth;
+			this.selecterQueryInfo();
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+	
+	.skeleton-fade {
+		width: 100%;
+		height: 100%;
+		background: rgb(194, 207, 214);
+		animation-duration: 1.5s;
+		animation-name: blink;
+		animation-timing-function: ease-in-out;
+		animation-iteration-count: infinite;
+	}
+
+	@keyframes blink {
+		0% {
+			opacity: 1;
+		}
+
+		50% {
+			opacity: 0.4;
+		}
+
+		100% {
+			opacity: 1;
+		}
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-slider/u-slider.vue

@@ -0,0 +1,290 @@
+<template>
+	<view
+		class="u-slider"
+		@tap="onClick"
+		:class="[disabled ? 'u-slider--disabled' : '']"
+		:style="{
+			backgroundColor: inactiveColor
+		}"
+	>
+		<view
+			class="u-slider__gap"
+			:style="[
+				barStyle,
+				{
+					height: height + 'rpx',
+					backgroundColor: activeColor
+				}
+			]"
+		>
+			<view
+				class="u-slider__button-wrap"
+				@touchstart.stop="onTouchStart"
+				@touchmove.stop="onTouchMove"
+				@touchend="onTouchEnd"
+				@touchcancel="onTouchEnd"
+			>
+				<slot v-if="$slots.default || $slots.$default" />
+				<view
+					v-else
+					class="u-slider__button"
+					:style="[
+						blockStyle,
+						{
+							height: blockWidth + 'rpx',
+							width: blockWidth + 'rpx',
+							backgroundColor: blockColor
+						}
+					]"
+				></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * slider 滑块选择器
+ * @tutorial https://uviewui.com/components/slider.html
+ * @property {Number | String} value 滑块默认值（默认0）
+ * @property {Number | String} min 最小值（默认0）
+ * @property {Number | String} max 最大值（默认100）
+ * @property {Number | String} step 步长（默认1）
+ * @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
+ * @property {Number | String} height 滑块条高度，单位rpx（默认6）
+ * @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
+ * @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff）
+ * @property {String} blockColor 滑块颜色（默认#ffffff）
+ * @property {Object} blockStyle 给滑块自定义样式，对象形式
+ * @property {Boolean} disabled 是否禁用滑块(默认为false)
+ * @event {Function} start 滑动触发
+ * @event {Function} moving 正在滑动中
+ * @event {Function} end 滑动结束
+ * @example <u-slider v-model="value" />
+ */
+export default {
+	name: "u-slider",
+	emits: ["update:modelValue", "input", "start", "moving", "end"],
+	props: {
+		// 当前进度百分比值，范围0-100
+		value: {
+			type: [Number, String],
+			default: 0
+		},
+		modelValue: {
+			type: [Number, String],
+			default: 0
+		},
+		// 是否禁用滑块
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 滑块宽度，高等于宽，单位rpx
+		blockWidth: {
+			type: [Number, String],
+			default: 30
+		},
+		// 最小值
+		min: {
+			type: [Number, String],
+			default: 0
+		},
+		// 最大值
+		max: {
+			type: [Number, String],
+			default: 100
+		},
+		// 步进值
+		step: {
+			type: [Number, String],
+			default: 1
+		},
+		// 滑块条高度，单位rpx
+		height: {
+			type: [Number, String],
+			default: 6
+		},
+		// 进度条的激活部分颜色
+		activeColor: {
+			type: String,
+			default: "#2979ff"
+		},
+		// 进度条的背景颜色
+		inactiveColor: {
+			type: String,
+			default: "#c0c4cc"
+		},
+		// 滑块的背景颜色
+		blockColor: {
+			type: String,
+			default: "#ffffff"
+		},
+		// 用户对滑块的自定义颜色
+		blockStyle: {
+			type: Object,
+			default() {
+				return {};
+			}
+		}
+	},
+	data() {
+		return {
+			startX: 0,
+			status: "end",
+			newValue: 0,
+			distanceX: 0,
+			startValue: 0,
+			barStyle: {},
+			sliderRect: {
+				left: 0,
+				width: 0
+			}
+		};
+	},
+	watch: {
+		valueCom(n) {
+			// 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
+			if (this.status == "end") this.updateValue(this.valueCom, false);
+		}
+	},
+	created() {
+		this.updateValue(this.valueCom, false);
+	},
+	mounted() {
+		// 获取滑块条的尺寸信息
+		this.$uGetRect(".u-slider").then(rect => {
+			this.sliderRect = rect;
+		});
+	},
+	computed: {
+		valueCom() {
+			// #ifndef VUE3
+			return this.value;
+			// #endif
+
+			// #ifdef VUE3
+			return this.modelValue;
+			// #endif
+		}
+	},
+	methods: {
+		onTouchStart(event) {
+			if (this.disabled) return;
+			this.startX = 0;
+			// 触摸点集
+			let touches = event.touches[0];
+			// 触摸点到屏幕左边的距离
+			this.startX = touches.clientX;
+			// 此处的this.value虽为props值，但是通过$emit('input')进行了修改
+			this.startValue = this.format(this.valueCom);
+			// 标示当前的状态为开始触摸滑动
+			this.status = "start";
+		},
+		onTouchMove(event) {
+			if (this.disabled) return;
+			// 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
+			// 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
+			if (this.status == "start") this.$emit("start");
+			let touches = event.touches[0];
+			// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
+			this.distanceX = touches.clientX - this.sliderRect.left;
+			// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
+			// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+			this.newValue = (this.distanceX / this.sliderRect.width) * 100;
+			this.status = "moving";
+			// 发出moving事件
+			this.$emit("moving");
+			this.updateValue(this.newValue, true);
+		},
+		onTouchEnd() {
+			if (this.disabled) return;
+			if (this.status === "moving") {
+				this.updateValue(this.newValue, false);
+				this.$emit("end");
+			}
+			this.status = "end";
+		},
+		updateValue(value, drag) {
+			// 去掉小数部分，同时也是对step步进的处理
+			const width = this.format(value);
+			// 不允许滑动的值超过max最大值，百分比也不能超过100
+			if (width > this.max || width > 100) return;
+			// 设置移动的百分比值
+			let barStyle = {
+				width: width + "%"
+			};
+			// 移动期间无需过渡动画
+			if (drag == true) {
+				barStyle.transition = "none";
+			} else {
+				// 非移动期间，删掉对过渡为空的声明，让css中的声明起效
+				delete barStyle.transition;
+			}
+			// 修改value值
+			this.$emit("input", width);
+			this.$emit("update:modelValue", width);
+			this.barStyle = barStyle;
+		},
+		format(value) {
+			// 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
+			return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
+		},
+		onClick(event) {
+			if (this.disabled) return;
+			// 直接点击滑块的情况，计算方式与onTouchMove方法相同
+			const value = ((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * 100;
+			this.updateValue(value, false);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-slider {
+	position: relative;
+	border-radius: 999px;
+	border-radius: 999px;
+	background-color: #ebedf0;
+}
+
+.u-slider:before {
+	position: absolute;
+	right: 0;
+	left: 0;
+	content: "";
+	top: -8px;
+	bottom: -8px;
+	z-index: -1;
+}
+
+.u-slider__gap {
+	position: relative;
+	border-radius: inherit;
+	transition: width 0.2s;
+	transition: width 0.2s;
+	background-color: #1989fa;
+}
+
+.u-slider__button {
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+	background-color: #fff;
+	cursor: pointer;
+}
+
+.u-slider__button-wrap {
+	position: absolute;
+	top: 50%;
+	right: 0;
+	transform: translate3d(50%, -50%, 0);
+}
+
+.u-slider--disabled {
+	opacity: 0.5;
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-steps/u-steps.vue

@@ -0,0 +1,200 @@
+<template>
+	<view class="">
+		<view
+			class="u-steps"
+			:style="{
+				flexDirection: direction
+			}"
+		>
+			<view class="u-steps__item" 
+				:class="['u-steps__item--' + direction]" 
+				v-for="(item, index) in list" :key="index"
+			>
+				<view
+					class="u-steps__item__num"
+					v-if="mode == 'number'"
+					:style="{
+						backgroundColor: current < index ? 'transparent' : activeColor,
+						borderColor: current < index ? unActiveColor : activeColor
+					}"
+				>
+					<text v-if="current < index" :style="{
+						color: current < index ? unActiveColor : activeColor,
+					}">
+						{{ index + 1 }}
+					</text>
+					<u-icon v-else size="22" color="#ffffff" :name="icon"></u-icon>
+				</view>
+				<view class="u-steps__item__dot" v-if="mode == 'dot'" :style="{ 
+					backgroundColor: index <= current ? activeColor : unActiveColor 
+				}"></view>
+				<text class="u-line-1" :style="{ 
+					color: index <= current ? activeColor : unActiveColor,
+				}" :class="['u-steps__item__text--' + direction]">
+					{{ item.name }}
+				</text>
+				<view class="u-steps__item__line" :class="['u-steps__item__line--' + mode]" v-if="index < list.length - 1">
+					<u-line :direction="direction" length="100%" :hair-line="false" :color="unActiveColor"></u-line>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * steps 步骤条
+ * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
+ * @tutorial https://www.uviewui.com/components/steps.html
+ * @property {String} mode 设置模式（默认dot）
+ * @property {Array} list 数轴条数据，数组。具体见上方示例
+ * @property {String} type type主题（默认primary）
+ * @property {String} direction row-横向，column-竖向（默认row）
+ * @property {Number String} current 设置当前处于第几步
+ * @property {String} active-color 已完成步骤的激活颜色，如设置，type值会失效
+ * @property {String} un-active-color 未激活的颜色，用于表示未完成步骤的颜色（默认#606266）
+ * @example <u-steps :list="numList" active-color="#fa3534"></u-steps>
+ */
+export default {
+	name: 'u-steps',
+	props: {
+		// 步骤条的类型，dot|number
+		mode: {
+			type: String,
+			default: 'dot'
+		},
+		// 步骤条的数据
+		list: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 主题类型, primary|success|info|warning|error
+		type: {
+			type: String,
+			default: 'primary'
+		},
+		// 当前哪一步是激活的
+		current: {
+			type: [Number, String],
+			default: 0
+		},
+		// 激活步骤的颜色
+		activeColor: {
+			type: String,
+			default: '#2979ff'
+		},
+		// 未激活的颜色
+		unActiveColor: {
+			type: String,
+			default: '#909399'
+		},
+		// 自定义图标
+		icon: {
+			type: String,
+			default: 'checkmark'
+		},
+		// step的排列方向，row-横向，column-竖向
+		direction: {
+			type: String,
+			default: 'row'
+		}
+	},
+	data() {
+		return {};
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+$u-steps-item-number-width: 44rpx;
+$u-steps-item-dot-width: 20rpx;
+
+.u-steps {
+	@include vue-flex;
+	
+	.u-steps__item {
+		flex: 1;
+		text-align: center;
+		position: relative;
+		min-width: 100rpx;
+		font-size: 26rpx;
+		color: #8799a3;
+		@include vue-flex;
+		justify-content: center;
+		flex-direction: column;
+		align-items: center;
+		
+		&--row {
+			@include vue-flex;
+			flex-direction: column;
+			
+			.u-steps__item__line {
+				position: absolute;
+				z-index: 0;
+				left: 75%;
+				width: 50%;
+				
+				&--dot {
+					top: calc(#{$u-steps-item-dot-width} / 2);
+				}
+				
+				&--number {
+					top: calc(#{$u-steps-item-number-width} / 2);
+				}
+			}
+		}
+		
+		&--column {
+			@include vue-flex;
+			flex-direction: row;
+			justify-content: flex-start;
+			min-height: 120rpx;
+			
+			.u-steps__item__line {
+				position: absolute;
+				z-index: 0;
+				height: 50%;
+				top: 75%;
+				
+				&--dot {
+					left: calc(#{$u-steps-item-dot-width} / 2);
+				}
+				
+				&--number {
+					left: calc(#{$u-steps-item-number-width} / 2);
+				}
+			}
+		}
+		
+		&__num {
+			@include vue-flex;
+			align-items: center;
+			justify-content: center;
+			width: $u-steps-item-number-width;
+			height: $u-steps-item-number-width;
+			border: 1px solid #8799a3;
+			border-radius: 50%;
+			overflow: hidden;
+		}
+		
+		&__dot {
+			width: $u-steps-item-dot-width;
+			height: $u-steps-item-dot-width;
+			@include vue-flex;
+			border-radius: 50%;
+		}
+		
+		&__text--row {
+			margin-top: 14rpx;
+		}
+		
+		&__text--column {
+			margin-left: 14rpx;
+		}
+	}
+}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-sticky/u-sticky.vue

@@ -0,0 +1,169 @@
+<template>
+	<view class="">
+		<view class="u-sticky-wrap" :class="[elClass]" :style="{
+			height: fixed ? height + 'px' : 'auto',
+			backgroundColor: bgColor
+		}">
+			<view class="u-sticky" :style="{
+				position: fixed ? 'fixed' : 'static',
+				top: stickyTop + 'px',
+				left: left + 'px',
+				width: typeof width == 'string' ? width : width + 'px',
+				zIndex: uZIndex
+			}">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * sticky 吸顶
+	 * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+	 * @tutorial https://www.uviewui.com/components/sticky.html
+	 * @property {String Number} offset-top 吸顶时与顶部的距离，单位rpx（默认0）
+	 * @property {String Number} index 自定义标识，用于区分是哪一个组件
+	 * @property {Boolean} enable 是否开启吸顶功能（默认true）
+	 * @property {String} bg-color 组件背景颜色（默认#ffffff）
+	 * @property {String Number} z-index 吸顶时的z-index值（默认970）
+	 * @property {String Number} h5-nav-height 导航栏高度，自定义导航栏时(无导航栏时需设置为0)，需要传入此值，单位px（默认44）
+	 * @event {Function} fixed 组件吸顶时触发
+	 * @event {Function} unfixed 组件取消吸顶时触发
+	 * @example <u-sticky offset-top="200"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky>
+	 */
+	export default {
+		name: "u-sticky",
+    emits: ["fixed", "unfixed"],
+		props: {
+			// 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
+			offsetTop: {
+				type: [Number, String],
+				default: 0
+			},
+			//列表中的索引值
+			index: {
+				type: [Number, String],
+				default: ''
+			},
+			// 是否开启吸顶功能
+			enable: {
+				type: Boolean,
+				default: true
+			},
+			// h5顶部导航栏的高度
+			h5NavHeight: {
+				type: [Number, String],
+				default: 44
+			},
+			// 吸顶区域的背景颜色
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// z-index值
+			zIndex: {
+				type: [Number, String],
+				default: ''
+			}
+		},
+		data() {
+			return {
+				fixed: false,
+				height: 'auto',
+				stickyTop: 0,
+				elClass: this.$u.guid(),
+				left: 0,
+				width: 'auto',
+			};
+		},
+		watch: {
+			offsetTop(val) {
+				this.initObserver();
+			},
+			enable(val) {
+				if (val == false) {
+					this.fixed = false;
+					this.disconnectObserver('contentObserver');
+				} else {
+					this.initObserver();
+				}
+			}
+		},
+		computed: {
+			uZIndex() {
+				return this.zIndex ? this.zIndex : this.$u.zIndex.sticky;
+			}
+		},
+		mounted() {
+			this.$nextTick(() => {
+				this.initObserver();
+			})
+		},
+		methods: {
+			initObserver() {
+				if (!this.enable) return;
+				// #ifdef H5
+				this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.h5NavHeight : this.h5NavHeight;
+				// #endif
+				// #ifndef H5
+				this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) : 0;
+				// #endif
+
+				this.disconnectObserver('contentObserver');
+				this.$uGetRect('.' + this.elClass).then((res) => {
+					this.height = res.height;
+					this.left = res.left;
+					this.width = res.width || '100%';
+					this.$nextTick(() => {
+						this.observeContent();
+					});
+				});
+				
+			},
+			observeContent() {
+				this.disconnectObserver('contentObserver');
+				const contentObserver = uni.createIntersectionObserver(this,{
+					thresholds: [0.95, 0.98, 1]
+				});
+				contentObserver.relativeToViewport({
+					top: -this.stickyTop
+				});
+				contentObserver.observe('.' + this.elClass, res => {
+					if (!this.enable) return;
+					this.setFixed(res.boundingClientRect.top);
+				});
+				this.contentObserver = contentObserver;
+			},
+			setFixed(top) {
+				const fixed = top < this.stickyTop;
+				if (fixed) this.$emit('fixed', this.index);
+				else if(this.fixed) this.$emit('unfixed', this.index);
+				this.fixed = fixed;
+			},
+			disconnectObserver(observerName) {
+				const observer = this[observerName];
+				observer && observer.disconnect();
+			},
+		},
+    // #ifndef VUE3
+    beforeDestroy() {
+      this.disconnectObserver('contentObserver');
+    },
+    // #endif
+    
+    // #ifdef VUE3
+    beforeUnmount() {
+      this.disconnectObserver('contentObserver');
+    },
+    // #endif
+	};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-sticky {
+		z-index: 9999999999;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-subsection/u-subsection.vue

@@ -0,0 +1,362 @@
+<template>
+	<view class="u-subsection" :style="[subsectionStyle]">
+		<view class="u-item u-line-1" :style="[itemStyle(index)]" @tap="click(index)" :class="[noBorderRight(index), 'u-item-' + index]"
+		 v-for="(item, index) in listInfo" :key="index">
+			<view :style="[textStyle(index)]" class="u-item-text u-line-1">{{ item.name }}</view>
+			<u-badge v-if="item.num > 0" :count="item.num" :offset="offset" size="mini"></u-badge>
+		</view>
+		<view class="u-item-bg" :style="[itemBarStyle]"></view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * subsection 分段器
+	 * @description 该分段器一般用于用户从几个选项中选择某一个的场景
+	 * @tutorial https://www.uviewui.com/components/subsection.html
+	 * @property {Array} list 选项的数组，形式见上方"基本使用"
+	 * @property {String Number} current 初始化时默认选中的选项索引值（默认0）
+	 * @property {String} active-color 激活时的颜色，mode为subsection时固定为白色（默认#303133）
+	 * @property {String} inactive-color 未激活时字体的颜色，mode为subsection时无效（默认#606266）
+	 * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
+	 * @property {String Number} font-size 字体大小，单位rpx（默认28）
+	 * @property {String Number} height 组件高度，单位rpx（默认70）
+	 * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
+	 * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
+	 * @property {String} bg-color 组件背景颜色，mode为button时有效（默认#eeeeef）
+	 * @property {String} button-color 按钮背景颜色，mode为button时有效（默认#ffffff）
+	 * @event {Function} change 分段器选项发生改变时触发
+	 * @example <u-subsection active-color="#ff9900"></u-subsection>
+	 */
+	export default {
+		name: "u-subsection",
+    emits: ["change"],
+		props: {
+			// tab的数据
+			list: {
+				type: Array,
+				default () {
+					return [];
+				}
+			},
+			// 当前活动的tab的index
+			current: {
+				type: [Number, String],
+				default: 0
+			},
+			// 激活的颜色
+			activeColor: {
+				type: String,
+				default: '#303133'
+			},
+			// 未激活的颜色
+			inactiveColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
+			mode: {
+				type: String,
+				default: 'button'
+			},
+			// 字体大小，单位rpx
+			fontSize: {
+				type: [Number, String],
+				default: 28
+			},
+			// 是否开启动画效果
+			animation: {
+				type: Boolean,
+				default: true
+			},
+			// 组件的高度，单位rpx
+			height: {
+				type: [Number, String],
+				default: 70
+			},
+			// 激活tab的字体是否加粗
+			bold: {
+				type: Boolean,
+				default: true
+			},
+			// mode=button时，组件背景颜色
+			bgColor: {
+				type: String,
+				default: '#eeeeef'
+			},
+			// mode = button时，滑块背景颜色
+			buttonColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// 在切换分段器的时候，是否让设备震一下
+			vibrateShort: {
+				type: Boolean,
+				default: false
+			},
+			offset: {
+				type: Array,
+				default: function(){
+					return [0,0]
+				}
+			},
+		},
+		data() {
+			return {
+				itemBgStyle: {
+					width: 0,
+					left: 0,
+					backgroundColor: '#ffffff',
+					height: '100%',
+					transition: ''
+				},
+				currentIndex: this.current,
+				buttonPadding: 3, // mode = button 时，组件的内边距
+				borderRadius: 5, // 圆角值
+				firstTimeVibrateShort: true // 组件初始化时，会触发current变化，此时不应震动
+			};
+		},
+		watch: {
+			current: {
+				immediate: true,
+				handler(nVal) {
+					this.currentIndex = nVal;
+					this.changeSectionStatus(nVal);
+				}
+			}
+		},
+		computed: {
+			listInfo(){
+				let { list =[] } = this;
+				return this.list.map((val, index) => {
+					if (typeof val != 'object') {
+						let obj = {
+							width: 0,
+							name: val,
+						};
+						return obj;
+					} else {
+						val.width = 0;
+						return val;
+					}
+				});
+			},
+			// 设置mode=subsection时，滑块特有的样式
+			noBorderRight() {
+				return index => {
+					if (this.mode != 'subsection') return;
+					let classs = '';
+					// 不显示右边的边框
+					if (index < this.list.length - 1) classs += ' u-none-border-right';
+					// 显示整个组件的左右边圆角
+					if (index == 0) classs += ' u-item-first';
+					if (index == this.list.length - 1) classs += ' u-item-last';
+					return classs;
+				};
+			},
+			// 文字的样式
+			textStyle() {
+				return index => {
+					let style = {};
+					// 设置字体颜色
+					if (this.mode == 'subsection') {
+						if (index == this.currentIndex) {
+							style.color = '#ffffff';
+						} else {
+							style.color = this.activeColor;
+						}
+					} else {
+						if (index == this.currentIndex) {
+							style.color = this.activeColor;
+						} else {
+							style.color = this.inactiveColor;
+						}
+					}
+					// 字体加粗
+					if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
+					// 文字大小
+					style.fontSize = this.fontSize + 'rpx';
+					return style;
+				};
+			},
+			// 每个分段器item的样式
+			itemStyle() {
+				return index => {
+					let style = {};
+					if (this.mode == 'subsection') {
+						// 设置border的样式
+						style.borderColor = this.activeColor;
+						style.borderWidth = '1px';
+						style.borderStyle = 'solid';
+					}
+					return style;
+				};
+			},
+			// mode=button时，外层view的样式
+			subsectionStyle() {
+				let style = {};
+				style.height = uni.upx2px(this.height) + 'px';
+				if (this.mode == 'button') {
+					style.backgroundColor = this.bgColor;
+					style.padding = `${this.buttonPadding}px`;
+					style.borderRadius = `${this.borderRadius}px`;
+				}
+				return style;
+			},
+			// 滑块的样式
+			itemBarStyle() {
+				let style = {};
+				style.backgroundColor = this.activeColor;
+				style.zIndex = 1;
+				if (this.mode == 'button') {
+					style.backgroundColor = this.buttonColor;
+					style.borderRadius = `${this.borderRadius}px`;
+					style.bottom = `${this.buttonPadding}px`;
+					style.height = uni.upx2px(this.height) - this.buttonPadding * 2 + 'px';
+					style.zIndex = 0;
+				}
+				return Object.assign(this.itemBgStyle, style);
+			}
+		},
+		mounted() {
+			setTimeout(() => {
+				this.getTabsInfo();
+			}, 10);
+		},
+		methods: {
+			// 改变滑块的样式
+			changeSectionStatus(nVal) {
+				if (this.mode == 'subsection') {
+					// 根据滑块在最左边和最右边时，显示左边和右边的圆角
+					if (nVal == this.list.length - 1) {
+						this.itemBgStyle.borderRadius = `0 ${this.buttonPadding}px ${this.buttonPadding}px 0`;
+					}
+					if (nVal == 0) {
+						this.itemBgStyle.borderRadius = `${this.buttonPadding}px 0 0 ${this.buttonPadding}px`;
+					}
+					if (nVal > 0 && nVal < this.list.length - 1) {
+						this.itemBgStyle.borderRadius = '0';
+					}
+				}
+				// 更新滑块的位置
+				setTimeout(() => {
+					this.itemBgLeft();
+				}, 10);
+				if (this.vibrateShort && !this.firstTimeVibrateShort) {
+					// 使手机产生短促震动，微信小程序有效，APP(HX 2.6.8)和H5无效
+					// #ifndef H5
+					uni.vibrateShort();
+					// #endif
+				}
+				// 第一次过后，设置firstTimeVibrateShort为false，让其下一次可以震动(如果允许震动的话)
+				this.firstTimeVibrateShort = false;
+			},
+			click(index) {
+				// 不允许点击当前激活选项
+				if (index == this.currentIndex) return;
+				this.currentIndex = index;
+				this.changeSectionStatus(index);
+				this.$emit('change', Number(index));
+			},
+			// 获取各个tab的节点信息
+			getTabsInfo() {
+				let view = uni.createSelectorQuery().in(this);
+				for (let i = 0; i < this.list.length; i++) {
+					view.select('.u-item-' + i).boundingClientRect();
+				}
+				view.exec(res => {
+					if (!res.length) {
+						setTimeout(() => {
+							this.getTabsInfo();
+							return;
+						}, 10);
+					}
+					// 将分段器每个item的宽度，放入listInfo数组
+					res.map((val, index) => {
+						this.listInfo[index].width = val.width;
+					});
+					// 初始化滑块的宽度
+					if (this.mode == 'subsection') {
+						this.itemBgStyle.width = this.listInfo[0].width + 'px';
+					} else if (this.mode == 'button') {
+						this.itemBgStyle.width = this.listInfo[0].width + 'px';
+					}
+					// 初始化滑块的位置
+					this.itemBgLeft();
+				});
+			},
+			itemBgLeft() {
+				// 根据是否开启动画效果，
+				if (this.animation) {
+					this.itemBgStyle.transition = 'all 0.35s';
+				} else {
+					this.itemBgStyle.transition = 'all 0s';
+				}
+				let left = 0;
+				// 计算当前活跃item到组件左边的距离
+				this.listInfo.map((val, index) => {
+					if (index < this.currentIndex) left += val.width;
+				});
+				// 根据mode不同模式，计算滑块需要移动的距离
+				if (this.mode == 'subsection') {
+					this.itemBgStyle.left = left + 'px';
+				} else if (this.mode == 'button') {
+					this.itemBgStyle.left = left + this.buttonPadding + 'px';
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-subsection {
+		@include vue-flex;
+		align-items: center;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.u-item {
+		flex: 1;
+		text-align: center;
+		font-size: 26rpx;
+		height: 100%;
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		color: $u-main-color;
+		padding: 0 6rpx;
+		position: relative;
+	}
+
+	.u-item-bg {
+		background-color: $u-type-primary;
+		position: absolute;
+		z-index: -1;
+	}
+
+	.u-none-border-right {
+		border-right: none !important;
+	}
+
+	.u-item-first {
+		border-top-left-radius: 8rpx;
+		border-bottom-left-radius: 8rpx;
+	}
+
+	.u-item-last {
+		border-top-right-radius: 8rpx;
+		border-bottom-right-radius: 8rpx;
+	}
+
+	.u-item-text {
+		transition: all 0.35s;
+		color: $u-main-color;
+		@include vue-flex;
+		align-items: center;
+		position: relative;
+		z-index: 3;
+	}
+</style>

uniapp/src/uni_modules/vk-uview-ui/components/u-swipe-action/u-swipe-action.vue

@@ -0,0 +1,257 @@
+<template>
+	<view class="">
+		<movable-area class="u-swipe-action" :style="{ backgroundColor: bgColor }">
+			<movable-view
+				class="u-swipe-view"
+				@change="change"
+				@touchend="touchend"
+				@touchstart="touchstart"
+				direction="horizontal"
+				:disabled="disabled"
+				:x="moveX"
+				:style="{
+					width: movableViewWidth ? movableViewWidth : '100%'
+				}"
+			>
+				<view
+					class="u-swipe-content"
+					@tap.stop="contentClick"
+				>
+					<slot></slot>
+				</view>
+				<view class="u-swipe-del" v-if="showBtn" @tap.stop="btnClick(index)" :style="[btnStyle(item.style)]" v-for="(item, index) in options" :key="index">
+					<view class="u-btn-text">{{ item.text }}</view>
+				</view>
+			</movable-view>
+		</movable-area>
+	</view>
+</template>
+
+<script>
+/**
+ * swipeAction 左滑单元格
+ * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。
+ * @tutorial https://www.uviewui.com/components/swipeAction.html
+ * @property {String} bg-color 整个组件背景颜色（默认#ffffff）
+ * @property {Array} options 数组形式，可以配置背景颜色和文字
+ * @property {String Number} index 标识符，点击时候用于区分点击了哪一个，用v-for循环时的index即可
+ * @property {String Number} btn-width 按钮宽度，单位rpx（默认180）
+ * @property {Boolean} disabled 是否禁止某个swipeAction滑动（默认false）
+ * @property {Boolean} show 打开或者关闭某个组件（默认false）
+ * @event {Function} click 点击组件时触发
+ * @event {Function} close 组件触发关闭状态时
+ * @event {Function} content-click 点击内容时触发
+ * @event {Function} open 组件触发打开状态时
+ * @example <u-swipe-action btn-text="收藏">...</u-swipe-action>
+ */
+export default {
+	name: 'u-swipe-action',
+  emits: ["click", "content-click", "open", "close"],
+	props: {
+		// index值，用于得知点击删除的是哪个按钮
+		index: {
+			type: [Number, String],
+			default: ''
+		},
+		// 滑动按钮的宽度，单位为rpx
+		btnWidth: {
+			type: [String, Number],
+			default: 180
+		},
+		// 是否禁止某个action滑动
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 打开或者关闭组件
+		show: {
+			type: Boolean,
+			default: false
+		},
+		// 组件背景颜色
+		bgColor: {
+			type: String,
+			default: '#ffffff'
+		},
+		// 是否使手机发生短促震动，目前只在iOS的微信小程序有效(2020-05-06)
+		vibrateShort: {
+			type: Boolean,
+			default: false
+		},
+		// 按钮操作参数
+		options: {
+			type: Array,
+			default() {
+				return [];
+			}
+		}
+	},
+	watch: {
+		show: {
+			immediate: true,
+			handler(nVal, oVal) {
+				if (nVal) {
+					this.open();
+				} else {
+					this.close();
+				}
+			}
+		}
+	},
+	data() {
+		return {
+			moveX: 0, // movable-view元素在x轴上需要移动的目标移动距离，用于展开或收起滑动的按钮
+			scrollX: 0, // movable-view移动过程中产生的change事件中的x轴移动值
+			status: false, // 滑动的状态，表示当前是展开还是关闭按钮的状态
+			movableAreaWidth: 0, // 滑动区域
+			elId: this.$u.guid(), // id，用于通知另外组件关闭时的识别
+			showBtn: false, // 刚开始渲染视图时不显示右边的按钮，避免视图闪动
+		};
+	},
+	computed: {
+		movableViewWidth() {
+			return this.movableAreaWidth + this.allBtnWidth + 'px';
+		},
+		innerBtnWidth() {
+			return uni.upx2px(this.btnWidth);
+		},
+		allBtnWidth() {
+			return uni.upx2px(this.btnWidth) * this.options.length;
+		},
+		btnStyle() {
+			return style => {
+				let css = {};
+				style.width = this.btnWidth + 'rpx';
+				return style;
+			};
+		}
+	},
+	mounted() {
+		this.getActionRect();
+	},
+	methods: {
+		// 点击按钮
+		btnClick(index) {
+			this.status = false;
+			// this.index为点击的几个组件，index为点击某个组件的第几个按钮(options数组的索引)
+			this.$emit('click', this.index, index);
+		},
+		// movable-view元素移动事件
+		change(e) {
+			this.scrollX = e.detail.x;
+		},
+		// 关闭按钮状态
+		close() {
+			this.moveX = 0;
+			this.status = false;
+		},
+		// 打开按钮的状态
+		open() {
+			if (this.disabled) return;
+			this.moveX = -this.allBtnWidth;
+			this.status = true;
+		},
+		// 用户手指离开movable-view元素，停止触摸
+		touchend() {
+			this.moveX = this.scrollX;
+			// 停止触摸时候，判断当前是展开还是关闭状态
+			// 关闭状态
+			// 这一步很重要，需要先给this.moveX一个变化的随机值，否则因为前后设置的为同一个值
+			// props单向数据流的原因，导致movable-view元素不会发生变化，切记，详见文档：
+			// https://uniapp.dcloud.io/use?id=%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98
+			this.$nextTick(function() {
+				if (this.status == false) {
+					// 关闭状态左滑，产生的x轴位移为负值，也就是说滑动的距离大于按钮的四分之一宽度，自动展开按钮
+					if (this.scrollX <= -this.allBtnWidth / 4) {
+						this.moveX = -this.allBtnWidth; // 按钮宽度的负值，即为展开状态movable-view元素左滑的距离
+						this.status = true; // 标志当前为展开状态
+						this.emitOpenEvent();
+						// 产生震动效果
+						if (this.vibrateShort) uni.vibrateShort();
+					} else {
+						this.moveX = 0; // 如果距离没有按钮宽度的四分之一，自动收起
+						this.status = false;
+						this.emitCloseEvent();
+					}
+				} else {
+					// 如果在打开的状态下，右滑动的距离X轴偏移超过按钮的四分之一(负值反过来的四分之三)，自动收起按钮
+					if (this.scrollX > (-this.allBtnWidth * 3) / 4) {
+						this.moveX = 0;
+						this.$nextTick(() => {
+							this.moveX = 101;
+						});
+						this.status = false;
+						this.emitCloseEvent();
+					} else {
+						this.moveX = -this.allBtnWidth;
+						this.status = true;
+						this.emitOpenEvent();
+					}
+				}
+			});
+		},
+		emitOpenEvent() {
+			this.$emit('open', this.index);
+		},
+		emitCloseEvent() {
+			this.$emit('close', this.index);
+		},
+		// 开始触摸
+		touchstart() {},
+		getActionRect() {
+			this.$uGetRect('.u-swipe-action').then(res => {
+				this.movableAreaWidth = res.width;
+				// 等视图更新完后，再显示右边的可滑动按钮，防止这些按钮会"闪一下"
+				this.$nextTick(() => {
+					this.showBtn = true;
+				})
+			});
+		},
+		// 点击内容触发事件
+		contentClick() {
+			// 点击内容时，如果当前为打开状态，收起组件
+			if (this.status == true) {
+				this.status = 'close';
+				this.moveX = 0;
+			}
+			this.$emit('content-click', this.index);
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../libs/css/style.components.scss";
+	
+.u-swipe-action {
+	width: auto;
+	height: initial;
+	position: relative;
+	overflow: hidden;
+}
+
+.u-swipe-view {
+	@include vue-flex;
+	height: initial;
+	position: relative;
+	/* 这一句很关键，覆盖默认的绝对定位 */
+}
+
+.u-swipe-content {
+	flex: 1;
+	min-width: 0;
+}
+
+.u-swipe-del {
+	position: relative;
+	font-size: 30rpx;
+	color: #ffffff;
+}
+
+.u-btn-text {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+</style>