diff --git a/src/uni_modules/uview-plus/components/up-button/button.uts b/src/uni_modules/uview-plus/components/up-button/button.uts
new file mode 100644
index 000000000..a3fea3952
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-button/button.uts
@@ -0,0 +1,42 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 16:51:27
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/button.js
+ */
+export default {
+    // button组件
+    button: {
+        hairline: false,
+        type: 'info',
+        size: 'normal',
+        shape: 'square',
+        plain: false,
+        disabled: false,
+        loading: false,
+        loadingText: '',
+        loadingMode: 'spinner',
+        loadingSize: 15,
+        openType: '',
+        formType: '',
+        appParameter: '',
+        hoverStopPropagation: true,
+        lang: 'en',
+        sessionFrom: '',
+        sendMessageTitle: '',
+        sendMessagePath: '',
+        sendMessageImg: '',
+        showMessageCard: false,
+        dataName: '',
+        throttleTime: 0,
+        hoverStartTime: 0,
+        hoverStayTime: 200,
+        text: '',
+        icon: '',
+        iconColor: '',
+        color: ''
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-button/props.js b/src/uni_modules/uview-plus/components/up-button/props.js
index d01f0ab2a..5ce97066e 100644
--- a/src/uni_modules/uview-plus/components/up-button/props.js
+++ b/src/uni_modules/uview-plus/components/up-button/props.js
@@ -1,6 +1,7 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
-export const props = defineMixin({
+import defProps from '../../libs/config/props'
+
+export const propsButton = defineMixin({
     props: {
         // 是否细边框
         hairline: {
diff --git a/src/uni_modules/uview-plus/components/up-button/props.uts b/src/uni_modules/uview-plus/components/up-button/props.uts
new file mode 100644
index 000000000..95c63797b
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-button/props.uts
@@ -0,0 +1,156 @@
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './button.uts'
+let btnProp = defProps['button'] as UTSJSONObject
+
+export const propsButton = defineMixin({
+    props: {
+        // 是否细边框
+        hairline: {
+            type: Boolean,
+            default: btnProp['hairline']
+        },
+        // 按钮的预置样式，info，primary，error，warning，success
+        type: {
+            type: String,
+            default: btnProp['type']
+        },
+        // 按钮尺寸，large，normal，small，mini
+        size: {
+            type: String,
+            default: btnProp['size']
+        },
+        // 按钮形状，circle（两边为半圆），square（带圆角）
+        shape: {
+            type: String,
+            default: btnProp['shape']
+        },
+        // 按钮是否镂空
+        plain: {
+            type: Boolean,
+            default: btnProp['plain']
+        },
+        // 是否禁止状态
+        disabled: {
+            type: Boolean,
+            default: btnProp['disabled']
+        },
+        // 是否加载中
+        loading: {
+            type: Boolean,
+            default: btnProp['loading']
+        },
+        // 加载中提示文字
+        loadingText: {
+            type: [String],
+            default: btnProp['loadingText']
+        },
+        // 加载状态图标类型
+        loadingMode: {
+            type: String,
+            default: btnProp['loadingMode']
+        },
+        // 加载图标大小
+        loadingSize: {
+            type: Number,
+            default: btnProp['loadingSize']
+        },
+        // 开放能力，具体请看uniapp稳定关于button组件部分说明
+        // https://uniapp.dcloud.io/component/button
+        openType: {
+            type: String,
+            default: btnProp['openType']
+        },
+        // 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+        // 取值为submit（提交表单），reset（重置表单）
+        formType: {
+            type: String,
+            default: btnProp['formType']
+        },
+        // 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+        // 只微信小程序、QQ小程序有效
+        appParameter: {
+            type: String,
+            default: btnProp['appParameter']
+        },
+        // 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
+        hoverStopPropagation: {
+            type: Boolean,
+            default: btnProp['hoverStopPropagation']
+        },
+        // 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
+        lang: {
+            type: String,
+            default: btnProp['lang']
+        },
+        // 会话来源，open-type="contact"时有效。只微信小程序有效
+        sessionFrom: {
+            type: String,
+            default: btnProp['sessionFrom']
+        },
+        // 会话内消息卡片标题，open-type="contact"时有效
+        // 默认当前标题，只微信小程序有效
+        sendMessageTitle: {
+            type: String,
+            default: btnProp['sendMessageTitle']
+        },
+        // 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+        // 默认当前分享路径，只微信小程序有效
+        sendMessagePath: {
+            type: String,
+            default: btnProp['sendMessagePath']
+        },
+        // 会话内消息卡片图片，open-type="contact"时有效
+        // 默认当前页面截图，只微信小程序有效
+        sendMessageImg: {
+            type: String,
+            default: btnProp['sendMessageImg']
+        },
+        // 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
+        // 用户点击后可以快速发送小程序消息，open-type="contact"时有效
+        showMessageCard: {
+            type: Boolean,
+            default: btnProp['showMessageCard']
+        },
+        // 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+        dataName: {
+            type: String,
+            default: btnProp['dataName']
+        },
+        // 节流，一定时间内只能触发一次
+        throttleTime: {
+            type: Number,
+            default: btnProp['throttleTime']
+        },
+        // 按住后多久出现点击态，单位毫秒
+        hoverStartTime: {
+            type: Number,
+            default: btnProp['hoverStartTime']
+        },
+        // 手指松开后点击态保留时间，单位毫秒
+        hoverStayTime: {
+            type: Number,
+            default: btnProp['hoverStayTime']
+        },
+        // 按钮文字，之所以通过props传入，是因为slot传入的话
+        // nvue中无法控制文字的样式
+        text: {
+            type: [String],
+            default: btnProp['text']
+        },
+        // 按钮图标
+        icon: {
+            type: String,
+            default: btnProp['icon']
+        },
+        // 按钮图标
+        iconColor: {
+            type: String,
+            default: btnProp['iconColor']
+        },
+        // 按钮颜色，支持传入linear-gradient渐变色
+        color: {
+            type: String,
+            default: btnProp['color']
+        }
+    }
+});
diff --git a/src/uni_modules/uview-plus/components/up-button/up-button.nvue b/src/uni_modules/uview-plus/components/up-button/up-button.nvue
new file mode 100644
index 000000000..0eeb81f42
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-button/up-button.nvue
@@ -0,0 +1,447 @@
+<template>
+    <button
+        :hover-start-time="hoverStartTime"
+        :hover-stay-time="hoverStayTime"
+        :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"
+        :hover-class="!disabled && !loading ? 'up-button--active' : ''"
+        class="up-button up-reset-button"
+        :style="[baseColor, nvueTextStyle, addStyle(customStyle)]"
+        @tap="clickHandler"
+        :class="bemClass"
+    >
+        <template v-if="loading">
+            <up-loading-icon
+                :mode="loadingMode"
+                :size="loadingSize * 1.15"
+                :color="loadingColor"
+            ></up-loading-icon>
+            <text
+                class="up-button__text up-button__loading-text"
+                :style="[{ fontSize: textSize + 'px' }, nvueTextStyle]"
+                >{{ loadingText != '' ? loadingText : text }}</text
+            >
+        </template>
+        <template v-else>
+            <up-icon
+                v-if="icon"
+                :name="icon"
+                :color="iconColorCom"
+                :size="parseInt(textSize) * 1.35"
+                :customStyle="{ marginRight: '2px' }"
+            ></up-icon>
+            <slot>
+                <text
+                    class="up-button__text"
+                    :style="[{ fontSize: textSize + 'px'}, nvueTextStyle]"
+                    >{{ text }}</text
+                >
+            </slot>
+        </template>
+    </button>
+</template>
+
+<script lang="uts">
+import { buttonMixin } from "../../libs/mixin/button";
+import { openType } from "../../libs/mixin/openType";
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { propsButton } from "./props";
+import config from '../../libs/config/config';
+import { addStyle } from '../../libs/function/index';
+import { throttle } from '../../libs/function/throttle';
+/**
+ * button 按钮
+ * @description Button 按钮
+ * @tutorial https://ijry.github.io/uview-plus/components/button.html
+ *
+ * @property {Boolean}			hairline				是否显示按钮的细边框 (默认 true )
+ * @property {String}			type					按钮的预置样式，info，primary，error，warning，success (默认 'info' )
+ * @property {String}			size					按钮尺寸，large，normal，mini （默认 normal）
+ * @property {String}			shape					按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
+ * @property {Boolean}			plain					按钮是否镂空，背景色透明 （默认 false）
+ * @property {Boolean}			disabled				是否禁用 （默认 false）
+ * @property {Boolean}			loading					按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) （默认 false）
+ * @property {String}	        loadingText				加载中提示文字
+ * @property {String}			loadingMode				加载状态图标类型 （默认 'spinner' ）
+ * @property {Number}	        loadingSize				加载图标大小 （默认 15 ）
+ * @property {String}			openType				开放能力，具体请看uniapp稳定关于button组件部分说明
+ * @property {String}			formType				用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+ * @property {String}			appParameter			打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）
+ * @property {Boolean}			hoverStopPropagation	指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true ）
+ * @property {String}			lang					指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
+ * @property {String}			sessionFrom				会话来源，openType="contact"时有效
+ * @property {String}			sendMessageTitle		会话内消息卡片标题，openType="contact"时有效
+ * @property {String}			sendMessagePath			会话内消息卡片点击跳转小程序路径，openType="contact"时有效
+ * @property {String}			sendMessageImg			会话内消息卡片图片，openType="contact"时有效
+ * @property {Boolean}			showMessageCard			是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认false）
+ * @property {String}			dataName				额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+ * @property {String | Number}	throttleTime			节流，一定时间内只能触发一次 （默认 0 )
+ * @property {String | Number}	hoverStartTime			按住后多久出现点击态，单位毫秒 （默认 0 )
+ * @property {String | Number}	hoverStayTime			手指松开后点击态保留时间，单位毫秒 （默认 200 )
+ * @property {String | Number}	text					按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
+ * @property {String}			icon					按钮图标
+ * @property {String}			iconColor				按钮图标颜色
+ * @property {String}			color					按钮颜色，支持传入linear-gradient渐变色
+ * @property {Object}			customStyle				定义需要用到的外部样式
+ *
+ * @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 <up-button>月落</up-button>
+ */
+export default {
+    name: "up-button",
+    // #ifdef MP
+    mixins: [mpMixin, mixin, button, openType, propsButton],
+    // #endif
+    // #ifndef MP
+    mixins: [mpMixin, mixin, propsButton],
+    // #endif
+    computed: {
+        // 生成bem风格的类名
+        bemClass(): String {
+            // this.bem为一个computed变量，在mixin中
+			let ret = ""
+            if (this.color == '') {
+                ret = this.bem(
+                    "button",
+                    [this.type, this.shape, this.size] ,
+                    [
+						["disabled", this.disabled],
+						["plain", this.plain],
+						["hairline", this.hairline],
+					]
+                );
+				console.log(ret)
+            } else {
+                // 由于nvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式
+                ret = this.bem(
+                    "button",
+                    [this.shape, this.size] ,
+                    [
+                    	["disabled", this.disabled],
+                    	["plain", this.plain],
+                    	["hairline", this.hairline],
+                    ]
+                );
+            }
+			return ret
+        },
+        loadingColor(): string {
+            if (this.plain) {
+                // 如果有设置color值，则用color值，否则使用type主题颜色
+                return this.color != ''
+                    ? this.color
+                    : config.getString(`color.up-${this.type}`) as String;
+            }
+            if (this.type === "info") {
+                return "#c9c9c9";
+            }
+            return "rgb(200, 200, 200)";
+        },
+        iconColorCom(): any {
+            // 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
+            // up-icon的color能接受一个主题颜色的值
+			if (this.iconColor != '') return this.iconColor;
+			if (this.plain) {
+                return this.color != '' ? this.color : this.type;
+            } else {
+                return this.type === "info" ? "#000000" : "#ffffff";
+            }
+        },
+        baseColor(): any {
+            let style = {
+				color: ''
+			};
+            if (this.color != '') {
+                // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
+                style.color = this.plain ? this.color : "white";
+                if (!this.plain) {
+                    // 非镂空，背景色使用自定义的颜色
+                    style["background-color"] = this.color;
+                }
+                if (this.color.indexOf("gradient") !== -1) {
+                    // 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
+                    // weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
+                    // 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
+                    style['borderTopWidth'] = 0;
+                    style['borderRightWidth'] = 0;
+                    style['borderBottomWidth'] = 0;
+                    style['borderLeftWidth'] = 0;
+                    if (!this.plain) {
+                        style['backgroundImage'] = this.color;
+                    }
+                } else {
+                    // 非渐变色，则设置边框相关的属性
+                    style['borderColor'] = this.color;
+                    style['borderWidth'] = "1px";
+                    style['borderStyle'] = "solid";
+                }
+            }
+            return style;
+        },
+        // nvue版本按钮的字体不会继承父组件的颜色，需要对每一个text组件进行单独的设置
+        nvueTextStyle(): any {
+            let style = {};
+            // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
+            if (this.type === "info") {
+                style['color'] = "#323233";
+            }
+			console.debug(this.color)
+            if (this.color != '') {
+                style['color'] = this.plain ? this.color : "white";
+            }
+            style['fontSize'] = this.textSize + "px";
+            return style;
+        },
+        // 字体大小
+        textSize(): String {
+            let fontSize = '14';
+            if (this.size === "large") fontSize = '16';
+            if (this.size === "normal") fontSize = '14';
+            if (this.size === "small") fontSize = '12';
+            if (this.size === "mini") fontSize = '10';
+            return fontSize;
+        },
+    },
+	emits: ['click', 'getphonenumber', 'getuserinfo',
+		'error', 'opensetting', 'launchapp'],
+    methods: {
+		addStyle(val: any): any {
+			return addStyle(val)
+		},
+        clickHandler(): void {
+            // 非禁止并且非加载中，才能点击
+            if (!this.disabled && !this.loading) {
+				// 进行节流控制，每throttle毫秒内，只在开始处执行
+				throttle(() => {
+					this.$emit("click");
+				}, this.throttleTime);
+            }
+        },
+        // 下面为对接uniapp官方按钮开放能力事件回调的对接
+        getphonenumber(res: UTSJSONObject): void {
+            this.$emit("getphonenumber", res);
+        },
+        getuserinfo(res: UTSJSONObject): void {
+            this.$emit("getuserinfo", res);
+        },
+        error(res: UTSJSONObject): void {
+            this.$emit("error", res);
+        },
+        opensetting(res: UTSJSONObject): void {
+            this.$emit("opensetting", res);
+        },
+        launchapp(res: UTSJSONObject): void {
+            this.$emit("launchapp", res);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+@import "./vue.scss";
+
+$up-button-up-button-height: 40px !default;
+$up-button-text-font-size: 15px !default;
+$up-button-loading-text-font-size: 15px !default;
+$up-button-loading-text-margin-left: 4px !default;
+$up-button-large-width: 100% !default;
+$up-button-large-height: 50px !default;
+$up-button-normal-padding: 0 12px !default;
+$up-button-large-padding: 0 15px !default;
+$up-button-normal-font-size: 14px !default;
+$up-button-small-min-width: 60px !default;
+$up-button-small-height: 30px !default;
+$up-button-small-padding: 0px 8px !default;
+$up-button-mini-padding: 0px 8px !default;
+$up-button-small-font-size: 12px !default;
+$up-button-mini-height: 22px !default;
+$up-button-mini-font-size: 10px !default;
+$up-button-mini-min-width: 50px !default;
+$up-button-disabled-opacity: 0.5 !default;
+$up-button-info-color: #323233 !default;
+$up-button-info-background-color: #fff !default;
+$up-button-info-border-color: #ebedf0 !default;
+$up-button-info-border-width: 1px !default;
+$up-button-info-border-style: solid !default;
+$up-button-success-color: #fff !default;
+$up-button-success-background-color: $up-success !default;
+$up-button-success-border-color: $up-button-success-background-color !default;
+$up-button-success-border-width: 1px !default;
+$up-button-success-border-style: solid !default;
+$up-button-primary-color: #fff !default;
+$up-button-primary-background-color: $up-primary !default;
+$up-button-primary-border-color: $up-button-primary-background-color !default;
+$up-button-primary-border-width: 1px !default;
+$up-button-primary-border-style: solid !default;
+$up-button-error-color: #fff !default;
+$up-button-error-background-color: $up-error !default;
+$up-button-error-border-color: $up-button-error-background-color !default;
+$up-button-error-border-width: 1px !default;
+$up-button-error-border-style: solid !default;
+$up-button-warning-color: #fff !default;
+$up-button-warning-background-color: $up-warning !default;
+$up-button-warning-border-color: $up-button-warning-background-color !default;
+$up-button-warning-border-width: 1px !default;
+$up-button-warning-border-style: solid !default;
+$up-button-block-width: 100% !default;
+$up-button-circle-border-top-right-radius: 100px !default;
+$up-button-circle-border-top-left-radius: 100px !default;
+$up-button-circle-border-bottom-left-radius: 100px !default;
+$up-button-circle-border-bottom-right-radius: 100px !default;
+$up-button-square-border-top-right-radius: 3px !default;
+$up-button-square-border-top-left-radius: 3px !default;
+$up-button-square-border-bottom-left-radius: 3px !default;
+$up-button-square-border-bottom-right-radius: 3px !default;
+$up-button-icon-min-width: 1em !default;
+$up-button-plain-background-color: #fff !default;
+$up-button-hairline-border-width: 0.5px !default;
+$up-button-active-opacity:0.75 !default;
+
+.up-button {
+    height: $up-button-up-button-height;
+    position: relative;
+	box-sizing: border-box;
+	// @include flex;
+ //    align-items: center;
+ //    justify-content: center;
+ //    flex-direction: row;
+
+    &__text {
+        font-size: $up-button-text-font-size;
+		color: #fff;
+    }
+
+    &__loading-text {
+        font-size: $up-button-loading-text-font-size;
+        margin-left: $up-button-loading-text-margin-left;
+    }
+
+    &--large {
+        width: $up-button-large-width;
+        height: $up-button-large-height;
+        padding: $up-button-large-padding;
+    }
+
+    &--normal {
+        padding: $up-button-normal-padding;
+        font-size: $up-button-normal-font-size;
+    }
+
+    &--small {
+        min-width: $up-button-small-min-width;
+        height: $up-button-small-height;
+        padding: $up-button-small-padding;
+        font-size: $up-button-small-font-size;
+    }
+
+    &--mini {
+        height: $up-button-mini-height;
+        font-size: $up-button-mini-font-size;
+        min-width: $up-button-mini-min-width;
+        padding: $up-button-mini-padding;
+    }
+
+    &--disabled {
+        opacity: $up-button-disabled-opacity;
+    }
+
+	&--active {
+		opacity: $up-button-active-opacity;
+	}
+
+    &--info {
+        color: $up-button-info-color;
+        background-color: $up-button-info-background-color;
+        border-color: $up-button-info-border-color;
+        border-width: $up-button-info-border-width;
+        border-style: $up-button-info-border-style;
+    }
+
+    &--success {
+        color: $up-button-success-color;
+        background-color: $up-button-success-background-color;
+        border-color: $up-button-success-border-color;
+        border-width: $up-button-success-border-width;
+        border-style: $up-button-success-border-style;
+    }
+
+    &--primary {
+        color: $up-button-primary-color;
+        background-color: $up-button-primary-background-color;
+        border-color: $up-button-primary-border-color;
+        border-width: $up-button-primary-border-width;
+        border-style: $up-button-primary-border-style;
+    }
+
+    &--error {
+        color: $up-button-error-color;
+        background-color: $up-button-error-background-color;
+        border-color: $up-button-error-border-color;
+        border-width: $up-button-error-border-width;
+        border-style: $up-button-error-border-style;
+    }
+
+    &--warning {
+        color: $up-button-warning-color;
+        background-color: $up-button-warning-background-color;
+        border-color: $up-button-warning-border-color;
+        border-width: $up-button-warning-border-width;
+        border-style: $up-button-warning-border-style;
+    }
+
+    &--block {
+        @include flex;
+        width: $up-button-block-width;
+    }
+
+    &--circle {
+        border-top-right-radius: $up-button-circle-border-top-right-radius;
+        border-top-left-radius: $up-button-circle-border-top-left-radius;
+        border-bottom-left-radius: $up-button-circle-border-bottom-left-radius;
+        border-bottom-right-radius: $up-button-circle-border-bottom-right-radius;
+    }
+
+    &--square {
+        border-bottom-left-radius: $up-button-square-border-top-right-radius;
+        border-bottom-right-radius: $up-button-square-border-top-left-radius;
+        border-top-left-radius: $up-button-square-border-bottom-left-radius;
+        border-top-right-radius: $up-button-square-border-bottom-right-radius;
+    }
+
+    &__icon {
+        min-width: $up-button-icon-min-width;
+        line-height: inherit !important;
+        vertical-align: top;
+    }
+
+    &--plain {
+        background-color: $up-button-plain-background-color;
+    }
+
+    &--hairline {
+        border-width: $up-button-hairline-border-width !important;
+    }
+}
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-button/up-button.vue b/src/uni_modules/uview-plus/components/up-button/up-button.vue
index 5609a3f57..a0d6fc73e 100644
--- a/src/uni_modules/uview-plus/components/up-button/up-button.vue
+++ b/src/uni_modules/uview-plus/components/up-button/up-button.vue
@@ -114,7 +114,7 @@ import { buttonMixin } from "../../libs/mixin/button";
 import { openType } from "../../libs/mixin/openType";
 import { mpMixin } from '../../libs/mixin/mpMixin';
 import { mixin } from '../../libs/mixin/mixin';
-import { props } from "./props";
+import { propsButton } from "./props";
 import { addStyle } from '../../libs/function/index';
 import { throttle } from '../../libs/function/throttle';
 import color from '../../libs/config/color';
@@ -165,10 +165,10 @@ import color from '../../libs/config/color';
 export default {
     name: "up-button",
     // #ifdef MP
-    mixins: [mpMixin, mixin, buttonMixin, openType, props],
+    mixins: [mpMixin, mixin, buttonMixin, openType, propsButton],
     // #endif
     // #ifndef MP
-    mixins: [mpMixin, mixin, props],
+    mixins: [mpMixin, mixin, propsButton],
     // #endif
     data() {
         return {};
diff --git a/src/uni_modules/uview-plus/components/up-cell-group/cellGroup.uts b/src/uni_modules/uview-plus/components/up-cell-group/cellGroup.uts
new file mode 100644
index 000000000..1fc7e4fee
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-cell-group/cellGroup.uts
@@ -0,0 +1,17 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 16:54:16
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/cellGroup.js
+ */
+export default {
+    // cell-group组件的props
+    cellGroup: {
+        title: '',
+        border: true,
+        customStyle: {}
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-cell-group/props.uts b/src/uni_modules/uview-plus/components/up-cell-group/props.uts
new file mode 100644
index 000000000..56dbb9c89
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-cell-group/props.uts
@@ -0,0 +1,18 @@
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from '../../libs/config/props.uts'
+let cellGroup = defProps['cellGroup'] as UTSJSONObject
+
+export const props = defineMixin({
+    props: {
+        // 分组标题
+        title: {
+            type: String,
+            default: cellGroup['title']
+        },
+        // 是否显示外边框
+        border: {
+            type: Boolean,
+            default: cellGroup['border']
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-cell-group/up-cell-group.uvue b/src/uni_modules/uview-plus/components/up-cell-group/up-cell-group.uvue
new file mode 100644
index 000000000..a2db6f190
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-cell-group/up-cell-group.uvue
@@ -0,0 +1,69 @@
+<template>
+    <view :style="[addStyle(customStyle)]" :class="[customClass]" class="up-cell-group">
+        <view v-if="title" class="up-cell-group__title">
+            <slot name="title">
+				<text class="up-cell-group__title__text">{{ title }}</text>
+			</slot>
+        </view>
+        <view class="up-cell-group__wrapper">
+			<up-line v-if="border"></up-line>
+            <slot />
+        </view>
+    </view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addStyle } from '../../libs/function/index';
+	/**
+	 * cellGroup  单元格
+	 * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/cell.html
+	 * 
+	 * @property {String}	title		分组标题
+	 * @property {Boolean}	border		是否显示外边框 (默认 true )
+	 * @property {Object}	customStyle	定义需要用到的外部样式
+	 * 
+	 * @event {Function} click 	点击cell列表时触发
+	 * @example <up-cell-group title="设置喜好">
+	 */
+	export default {
+		name: 'up-cell-group',
+		mixins: [mpMixin, mixin, props],
+		methods: {
+			addStyle(val: any): any {
+				return addStyle(val)
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	
+	$up-cell-group-title-padding: 16px 16px 8px !default;
+	$up-cell-group-title-font-size: 15px !default;
+	$up-cell-group-title-line-height: 16px !default;
+	$up-cell-group-title-color: $up-main-color !default;
+
+    .up-cell-group {
+		flex: 1;
+		
+        &__title {
+            padding: $up-cell-group-title-padding;
+
+            &__text {
+                font-size: $up-cell-group-title-font-size;
+                line-height: $up-cell-group-title-line-height;
+                color: $up-cell-group-title-color;
+            }
+        }
+		
+		&__wrapper {
+			position: relative;
+		}
+    }
+</style>
+
diff --git a/src/uni_modules/uview-plus/components/up-cell/cell.uts b/src/uni_modules/uview-plus/components/up-cell/cell.uts
new file mode 100644
index 000000000..6783f17b2
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-cell/cell.uts
@@ -0,0 +1,35 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-23 20:53:09
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/cell.js
+ */
+export default {
+	// cell组件的props
+	cell: {
+		customClass: '',
+		title: '',
+		label: '',
+		value: '',
+		icon: '',
+		disabled: false,
+		border: true,
+		center: false,
+		url: '',
+		linkType: 'navigateTo',
+		clickable: false,
+		isLink: false,
+		required: false,
+		arrowDirection: '',
+		iconStyle: {},
+		rightIconStyle: {},
+		rightIcon: 'arrow-right',
+		titleStyle: {},
+		size: '',
+		stop: true,
+		name: ''
+	}
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-cell/props.js b/src/uni_modules/uview-plus/components/up-cell/props.js
index 73f52106d..a508602fb 100644
--- a/src/uni_modules/uview-plus/components/up-cell/props.js
+++ b/src/uni_modules/uview-plus/components/up-cell/props.js
@@ -1,6 +1,7 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
-export const props = defineMixin({
+import defProps from '../../libs/config/props'
+
+export const propsCell = defineMixin({
     props: {
         // 标题
         title: {
diff --git a/src/uni_modules/uview-plus/components/up-cell/props.uts b/src/uni_modules/uview-plus/components/up-cell/props.uts
new file mode 100644
index 000000000..fe55256aa
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-cell/props.uts
@@ -0,0 +1,107 @@
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from '../../libs/config/props.uts'
+
+export const propsCell = defineMixin({
+    props: {
+        // 标题
+        title: {
+            type: String,
+            default: defProps.getString('cell.title')
+        },
+        // 标题下方的描述信息
+        label: {
+            type: String,
+            default: defProps.getString('cell.label')
+        },
+        // 右侧的内容
+        value: {
+            type: String,
+            default: defProps.getString('cell.value')
+        },
+        // 左侧图标名称，或者图片链接(本地文件建议使用绝对地址)
+        icon: {
+            type: String,
+            default: defProps.getString('cell.icon')
+        },
+        // 是否禁用cell
+        disabled: {
+            type: Boolean,
+            default: defProps.getBoolean('cell.disabled')
+        },
+        // 是否显示下边框
+        border: {
+            type: Boolean,
+            default: defProps.getBoolean('cell.border')
+        },
+        // 内容是否垂直居中(主要是针对右侧的value部分)
+        center: {
+            type: Boolean,
+            default: defProps.getBoolean('cell.center')
+        },
+        // 点击后跳转的URL地址
+        url: {
+            type: String,
+            default: defProps.getString('cell.url')
+        },
+        // 链接跳转的方式，内部使用的是uView封装的route方法，可能会进行拦截操作
+        linkType: {
+            type: String,
+            default: defProps.getString('cell.linkType')
+        },
+        // 是否开启点击反馈(表现为点击时加上灰色背景)
+        clickable: {
+            type: Boolean,
+            default: defProps.getBoolean('cell.clickable')
+        },
+        // 是否展示右侧箭头并开启点击反馈
+        isLink: {
+            type: Boolean,
+            default: defProps.getBoolean('cell.isLink')
+        },
+        // 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件)
+        required: {
+            type: Boolean,
+            default: defProps.getBoolean('cell.required')
+        },
+        // 右侧的图标箭头
+        rightIcon: {
+            type: String,
+            default: defProps.getString('cell.rightIcon')
+        },
+        // 右侧箭头的方向，可选值为：left，up，down
+        arrowDirection: {
+            type: String,
+            default: defProps.getString('cell.arrowDirection')
+        },
+        // 左侧图标样式
+        iconStyle: {
+            type: Object,
+            default: defProps.getAny('cell.iconStyle')
+        },
+        // 右侧箭头图标的样式
+        rightIconStyle: {
+            type: Object,
+            default: defProps.getAny('cell.rightIconStyle')
+        },
+        // 标题的样式
+        titleStyle: {
+            type: Object,
+    		default: defProps.getAny('cell.titleStyle')
+        },
+        // 单位元的大小，可选值为large
+        size: {
+            type: String,
+            default: defProps.getString('cell.size')
+        },
+        // 点击cell是否阻止事件传播
+        stop: {
+            type: Boolean,
+            default: defProps.getBoolean('cell.stop')
+        },
+        // 标识符，cell被点击时返回
+        name: {
+            type: String,
+            default: defProps.getString('cell.name')
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-cell/up-cell.uvue b/src/uni_modules/uview-plus/components/up-cell/up-cell.uvue
new file mode 100644
index 000000000..9a75c4595
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-cell/up-cell.uvue
@@ -0,0 +1,259 @@
+<template>
+	<view class="up-cell" :class="[customClass]" :style="[addStyle(customStyle)]"
+		:hover-class="(!disabled && (clickable || isLink)) ? 'up-cell--clickable' : ''" :hover-stay-time="250"
+		@tap="clickHandler">
+		<view class="up-cell__body"
+			aclass="[ center && 'up-cell--center', size === 'large' && 'up-cell__body--large']">
+			<view class="up-cell__body__content">
+				<view class="up-cell__left-icon-wrap"
+					v-if="$slots['icon'] !== null || icon != ''">
+					<slot name="icon" v-if="$slots['icon'] !== null">
+					</slot>
+					<up-icon v-else :name="icon"
+						:custom-style="iconStyle"
+						:size="size === 'large' ? 22 : 18"></up-icon>
+				</view>
+				<view class="up-cell__title">
+					<slot name="title" v-if="$slots['title'] !== null || title == ''">
+					</slot>
+						<text v-else class="up-cell__title-text"
+							:style="[titleTextStyle]"
+							aclass="[disabled && 'up-cell--disabled', size === 'large' && 'up-cell__title-text--large']">
+							{{ title }}
+							</text>
+					<slot name="label">
+						<text class="up-cell__label" v-if="label"
+							aclass="[disabled && 'up-cell--disabled', size === 'large' && 'up-cell__label--large']">
+							{{ label }}
+							</text>
+					</slot>
+				</view>
+			</view>
+			<slot name="value">
+				<text class="up-cell__value"
+					aclass="[disabled && 'up-cell--disabled', size === 'large' && 'up-cell__value--large']"
+					v-if="testEmpty(value) == false">{{ value }}</text>
+			</slot>
+			<view class="up-cell__right-icon-wrap"
+				v-if="$slots['right-icon'] !== null || isLink"
+				:class="[`up-cell__right-icon-wrap--${arrowDirection}`]">
+				<slot name="right-icon">
+					<up-icon v-if="rightIcon" :name="rightIcon"
+						:custom-style="rightIconStyle" :color="disabled ? '#c8c9cc' : 'info'"
+						:size="size === 'large' ? 18 : 16"></up-icon>
+				</slot>
+			</view>
+			<view class="up-cell__right-icon-wrap" v-if="$slots['righticon'] !== null"
+				:class="[`up-cell__right-icon-wrap--${arrowDirection}`]">
+				<slot name="righticon">
+				</slot>
+			</view>
+		</view>
+		<up-line v-if="border"></up-line>
+	</view>
+</template>
+
+<script>
+	import { propsCell } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addStyle } from '../../libs/function/index';
+	import { empty as testEmpty } from '../../libs/function/test.uts';
+	/**
+	 * cell  单元格
+	 * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/cell.html
+	 * @property {String | Number}	title			标题
+	 * @property {String | Number}	label			标题下方的描述信息
+	 * @property {String | Number}	value			右侧的内容
+	 * @property {String}			icon			左侧图标名称，或者图片链接(本地文件建议使用绝对地址)
+	 * @property {Boolean}			disabled		是否禁用cell	
+	 * @property {Boolean}			border			是否显示下边框 (默认 true )
+	 * @property {Boolean}			center			内容是否垂直居中(主要是针对右侧的value部分) (默认 false )
+	 * @property {String}			url				点击后跳转的URL地址
+	 * @property {String}			linkType		链接跳转的方式，内部使用的是uView封装的route方法，可能会进行拦截操作 (默认 'navigateTo' )
+	 * @property {Boolean}			clickable		是否开启点击反馈(表现为点击时加上灰色背景) （默认 false ） 
+	 * @property {Boolean}			isLink			是否展示右侧箭头并开启点击反馈 （默认 false ）
+	 * @property {Boolean}			required		是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) （默认 false ）
+	 * @property {String}			rightIcon		右侧的图标箭头 （默认 'arrow-right'）
+	 * @property {String}			arrowDirection	右侧箭头的方向，可选值为：left，up，down
+	 * @property {Object}			rightIconStyle	右侧箭头图标的样式
+	 * @property {Object}			titleStyle		标题的样式
+	 * @property {Object}			iconStyle		左侧图标样式
+	 * @property {String}			size			单位元的大小，可选值为 large，normal，mini 
+	 * @property {Boolean}			stop			点击cell是否阻止事件传播 (默认 true )
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * 
+	 * @event {Function}			click			点击cell列表时触发
+	 * @example 该组件需要搭配cell-group组件使用，见官方文档示例
+	 */
+	export default {
+		name: 'up-cell',
+		data() {
+			return {
+
+			}
+		},
+		mixins: [mpMixin, mixin, propsCell],
+		computed: {
+			titleTextStyle(): object {
+				return addStyle(this.titleStyle)
+			}
+		},
+		emits: ['click'],
+		created() {
+		// 	console.log(this.$props)
+		},
+		methods: {
+			addStyle(val: any): any {
+				return addStyle(val)
+			},
+			testEmpty(val: any): any {
+				return testEmpty(val)
+			},
+			// 点击cell
+			clickHandler(e: any) {
+				if (this.disabled) return
+				this.$emit('click', {
+					name: this.name
+				})
+				// 如果配置了url(此props参数通过mixin引入)参数，跳转页面
+				// this.openPage()
+				// 是否阻止事件传播
+			// 	this.stop && this.preventEvent(e)
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	$up-cell-padding: 10px 15px !important;
+	$up-cell-font-size: 15px !important;
+	$up-cell-line-height: 24px !important;
+	$up-cell-color: $up-main-color !important;
+	$up-cell-icon-size: 16px !important;
+	$up-cell-title-font-size: 15px !important;
+	$up-cell-title-line-height: 22px !important;
+	$up-cell-title-color: $up-main-color !important;
+	$up-cell-label-font-size: 12px !important;
+	$up-cell-label-color: $up-tips-color !important;
+	$up-cell-label-line-height: 18px !important;
+	$up-cell-value-font-size: 14px !important;
+	$up-cell-value-color: $up-content-color !important;
+	$up-cell-clickable-color: $up-bg-color !important;
+	$up-cell-disabled-color: #c8c9cc !important;
+	$up-cell-padding-top-large: 13px !important;
+	$up-cell-padding-bottom-large: 13px !important;
+	$up-cell-value-font-size-large: 15px !important;
+	$up-cell-label-font-size-large: 14px !important;
+	$up-cell-title-font-size-large: 16px !important;
+	$up-cell-left-icon-wrap-margin-right: 4px !important;
+	$up-cell-right-icon-wrap-margin-left: 4px !important;
+	$up-cell-title-flex:1 !important;
+	$up-cell-label-margin-top:5px !important;
+
+
+	.up-cell {
+		&__body {
+			@include flex();
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			/* #endif */
+			padding: $up-cell-padding;
+			// font-size: $up-cell-font-size;
+			// color: $up-cell-color;
+			// line-height: $up-cell-line-height;
+			align-items: center;
+
+			&__content {
+				@include flex(row);
+				align-items: center;
+				flex: 1;
+			}
+
+			&--large {
+				padding-top: $up-cell-padding-top-large;
+				padding-bottom: $up-cell-padding-bottom-large;
+			}
+		}
+
+		&__left-icon-wrap,
+		&__right-icon-wrap {
+			@include flex();
+			align-items: center;
+			// height: $up-cell-line-height;
+		// 	font-size: $up-cell-icon-size;
+		}
+
+		&__left-icon-wrap {
+			margin-right: $up-cell-left-icon-wrap-margin-right;
+		}
+
+		&__right-icon-wrap {
+			margin-left: $up-cell-right-icon-wrap-margin-left;
+			transition: transform 0.3s;
+
+			&--up {
+				transform: rotate(-90deg);
+			}
+
+			&--down {
+				transform: rotate(90deg);
+			}
+		}
+
+		&__title {
+			flex: $up-cell-title-flex;
+
+			&-text {
+				font-size: $up-cell-title-font-size;
+				line-height: $up-cell-title-line-height;
+				color: $up-cell-title-color;
+
+				&--large {
+					font-size: $up-cell-title-font-size-large;
+				}
+			}
+
+		}
+
+		&__label {
+			margin-top: $up-cell-label-margin-top;
+			font-size: $up-cell-label-font-size;
+			color: $up-cell-label-color;
+			line-height: $up-cell-label-line-height;
+
+			&--large {
+				font-size: $up-cell-label-font-size-large;
+			}
+		}
+
+		&__value {
+			text-align: right;
+			margin-left: auto;
+			font-size: $up-cell-value-font-size;
+			line-height: $up-cell-line-height;
+			color: $up-cell-value-color;
+			&--large {
+				font-size: $up-cell-value-font-size-large;
+			}
+		}
+
+		&--clickable {
+			background-color: $up-cell-clickable-color;
+		}
+
+		&--disabled {
+			color: $up-cell-disabled-color;
+			/* #ifndef APP-NVUE */
+			cursor: not-allowed;
+			/* #endif */
+		}
+
+		&--center {
+			align-items: center;
+		}
+	}
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-cell/up-cell.vue b/src/uni_modules/uview-plus/components/up-cell/up-cell.vue
index 7549ba667..c53ffc80b 100644
--- a/src/uni_modules/uview-plus/components/up-cell/up-cell.vue
+++ b/src/uni_modules/uview-plus/components/up-cell/up-cell.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-	import { props } from './props';
+	import { propsCell } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
 	import { addStyle } from '../../libs/function/index';
@@ -87,7 +87,7 @@
 
 			}
 		},
-		mixins: [mpMixin, mixin, props],
+		mixins: [mpMixin, mixin, propsCell],
 		computed: {
 			titleTextStyle() {
 				return addStyle(this.titleStyle)
diff --git a/src/uni_modules/uview-plus/components/up-gap/gap.uts b/src/uni_modules/uview-plus/components/up-gap/gap.uts
new file mode 100644
index 000000000..ffc413f50
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-gap/gap.uts
@@ -0,0 +1,19 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:05:25
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/gap.js
+ */
+export default {
+    // gap组件
+    gap: {
+        bgColor: 'transparent',
+        height: 20,
+        marginTop: 0,
+        marginBottom: 0,
+        customStyle: {}
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-gap/props.js b/src/uni_modules/uview-plus/components/up-gap/props.js
index 77b1d7ca1..d2ca45413 100644
--- a/src/uni_modules/uview-plus/components/up-gap/props.js
+++ b/src/uni_modules/uview-plus/components/up-gap/props.js
@@ -1,6 +1,7 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
-export const props = defineMixin({
+import defProps from '../../libs/config/props'
+
+export const propsGap = defineMixin({
     props: {
         // 背景颜色（默认transparent）
         bgColor: {
diff --git a/src/uni_modules/uview-plus/components/up-gap/props.uts b/src/uni_modules/uview-plus/components/up-gap/props.uts
new file mode 100644
index 000000000..5d549b63c
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-gap/props.uts
@@ -0,0 +1,28 @@
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from '../../libs/config/props.uts'
+let gap = defProps['gap'] as UTSJSONObject
+
+export const propsGap = defineMixin({
+    props: {
+        // 背景颜色（默认transparent）
+        bgColor: {
+            type: String,
+            default: gap['bgColor']
+        },
+        // 分割槽高度，单位px（默认30）
+        height: {
+            type: Number,
+            default: gap['height']
+        },
+        // 与上一个组件的距离
+        marginTop: {
+            type: Number,
+            default: gap['marginTop']
+        },
+        // 与下一个组件的距离
+        marginBottom: {
+            type: Number,
+            default: gap['marginBottom']
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-gap/up-gap.uvue b/src/uni_modules/uview-plus/components/up-gap/up-gap.uvue
new file mode 100644
index 000000000..57b1ca9cd
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-gap/up-gap.uvue
@@ -0,0 +1,44 @@
+<template>
+	<view class="up-gap" :style="[gapStyle]"></view>
+</template>
+
+<script>
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { propsGap } from './props';
+	import { addStyle, addUnit, deepMerge } from '../../libs/function/index';
+	/**
+	 * gap 间隔槽
+	 * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
+	 * @tutorial https://ijry.github.io/uview-plus/components/gap.html
+	 * @property {String}			bgColor			背景颜色 （默认 'transparent' ）
+	 * @property {String | Number}	height			分割槽高度，单位px （默认 20 ）
+	 * @property {String | Number}	marginTop		与前一个组件的距离，单位px（ 默认 0 ）
+	 * @property {String | Number}	marginBottom	与后一个组件的距离，单位px （默认 0 ）
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * 
+	 * @example <up-gap height="80" bg-color="#bbb"></up-gap>
+	 */
+	export default {
+		name: "up-gap",
+		mixins: [mpMixin, mixin, propsGap],
+		computed: {
+			gapStyle(): any {
+				let style = {
+					backgroundColor: this.bgColor,
+					// height: addUnit(this.height),
+					// marginTop: addUnit(this.marginTop),
+					// marginBottom: addUnit(this.marginBottom)
+				} as UTSJSONObject
+				return deepMerge(
+					style,
+					addStyle(this.customStyle)
+				)
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-gap/up-gap.vue b/src/uni_modules/uview-plus/components/up-gap/up-gap.vue
index 252c00ba5..b32b5a61c 100644
--- a/src/uni_modules/uview-plus/components/up-gap/up-gap.vue
+++ b/src/uni_modules/uview-plus/components/up-gap/up-gap.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-	import { props } from './props';
+	import { propsGap } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
 	import { addStyle, addUnit, deepMerge } from '../../libs/function/index.js';
@@ -21,7 +21,7 @@
 	 */
 	export default {
 		name: "up-gap",
-		mixins: [mpMixin, mixin, props],
+		mixins: [mpMixin, mixin, propsGap],
 		computed: {
 			gapStyle() {
 				const style = {
diff --git a/src/uni_modules/uview-plus/components/up-icon/icon.uts b/src/uni_modules/uview-plus/components/up-icon/icon.uts
new file mode 100644
index 000000000..5aa7bfc95
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-icon/icon.uts
@@ -0,0 +1,33 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 18:00:14
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/icon.js
+ */
+import config from '../../libs/config/config.uts'
+
+export default {
+    // icon组件
+    icon: {
+        name: '',
+        color: config.getString('color.up-content-color'),
+        size: '16px',
+        bold: false,
+        index: '',
+        hoverClass: '',
+        customPrefix: 'upicon',
+        label: '',
+        labelPos: 'right',
+        labelSize: '15px',
+        labelColor: config.getString('color.up-content-color'),
+        space: '3px',
+        imgMode: '',
+        width: '',
+        height: '',
+        top: 0,
+        stop: false
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-icon/props.js b/src/uni_modules/uview-plus/components/up-icon/props.js
index d5bdfdb3b..f3fc504f3 100644
--- a/src/uni_modules/uview-plus/components/up-icon/props.js
+++ b/src/uni_modules/uview-plus/components/up-icon/props.js
@@ -1,6 +1,6 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
-export const props = defineMixin({
+import defProps from '../../libs/config/props'
+export const propsIcon = defineMixin({
     props: {
         // 图标类名
         name: {
diff --git a/src/uni_modules/uview-plus/components/up-icon/props.uts b/src/uni_modules/uview-plus/components/up-icon/props.uts
new file mode 100644
index 000000000..bf12c59f0
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-icon/props.uts
@@ -0,0 +1,92 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props'
+
+export const propsIcon = defineMixin({
+    props: {
+        // 图标类名
+        name: {
+            type: String,
+            default: defProps.getString('icon.name')
+        },
+        // 图标颜色，可接受主题色
+        color: {
+            type: String,
+            default: defProps.getString('icon.color')
+        },
+        // 字体大小，单位px
+        size: {
+            type: [String],
+            default: defProps.getString('icon.size')
+        },
+        // 是否显示粗体
+        bold: {
+            type: Boolean,
+            default: defProps.getBoolean('icon.bold')
+        },
+        // 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
+        index: {
+            type: [String],
+            default: defProps.getString('icon.index')
+        },
+        // 触摸图标时的类名
+        hoverClass: {
+            type: String,
+            default: defProps.getString('icon.hoverClass')
+        },
+        // 自定义扩展前缀，方便用户扩展自己的图标库
+        customPrefix: {
+            type: String,
+            default: defProps.getString('icon.customPrefix')
+        },
+        // 图标右边或者下面的文字
+        label: {
+            type: [String],
+            default: defProps.getString('icon.label')
+        },
+        // label的位置，只能右边或者下边
+        labelPos: {
+            type: String,
+            default: defProps.getString('icon.labelPos')
+        },
+        // label的大小
+        labelSize: {
+            type: [String],
+            default: defProps.getString('icon.labelSize')
+        },
+        // label的颜色
+        labelColor: {
+            type: String,
+            default: defProps.getString('icon.labelColor')
+        },
+        // label与图标的距离
+        space: {
+            type: [String],
+            default: defProps.getString('icon.space')
+        },
+        // 图片的mode
+        imgMode: {
+            type: String,
+            default: defProps.getString('icon.imgMode')
+        },
+        // 用于显示图片小图标时，图片的宽度
+        width: {
+            type: [String],
+            default: defProps.getString('icon.width')
+        },
+        // 用于显示图片小图标时，图片的高度
+        height: {
+            type: [String],
+            default: defProps.getString('icon.height')
+        },
+        // 用于解决某些情况下，让图标垂直居中的用途
+        top: {
+            type: [String],
+            default: defProps.getString('icon.top')
+        },
+        // 是否阻止事件传播
+        stop: {
+            type: Boolean,
+            default: defProps.getBoolean('icon.stop')
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-icon/up-icon.uvue b/src/uni_modules/uview-plus/components/up-icon/up-icon.uvue
new file mode 100644
index 000000000..b4c0c8f2e
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-icon/up-icon.uvue
@@ -0,0 +1,229 @@
+<template>
+	<view
+	    class="up-icon"
+	    @tap="clickHandler"
+	    :class="['up-icon--' + labelPos]"
+	>
+		<image
+		    class="up-icon__img"
+		    v-if="isImg"
+		    :src="name"
+		    :mode="imgMode"
+		    :style="[imgStyle, addStyle(customStyle)]"
+		></image>
+		<text
+		    v-else
+		    class="up-icon__icon"
+		    :class="uClasses"
+		    :style="[iconStyle, addStyle(customStyle)]"
+		    :hover-class="hoverClass"
+		>{{icon}}</text>
+		<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
+		<text
+		    v-if="label !== ''" 
+		    class="up-icon__label"
+		    :style="{
+			color: labelColor,
+			fontSize: addUnit(labelSize),
+			marginLeft: labelPos == 'right' ? addUnit(space) : 0,
+			marginTop: labelPos == 'bottom' ? addUnit(space) : 0,
+			marginRight: labelPos == 'left' ? addUnit(space) : 0,
+			marginBottom: labelPos == 'top' ? addUnit(space) : 0,
+		}"
+		>{{ label }}</text>
+	</view>
+</template>
+
+<script>
+	// 引入图标名称，已经对应的unicode
+	import icons from './icons'
+	import { propsIcon } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle } from '../../libs/function/index';
+	import config from '../../libs/config/config';
+	/**
+	 * icon 图标
+	 * @description 基于字体的图标集，包含了大多数常见场景的图标。
+	 * @tutorial https://ijry.github.io/uview-plus/components/icon.html
+	 * @property {String}			name			图标名称，见示例图标集
+	 * @property {String}			color			图标颜色,可接受主题色 （默认 color['up-content-color'] ）
+	 * @property {String | Number}	size			图标字体大小，单位px （默认 '16px' ）
+	 * @property {Boolean}			bold			是否显示粗体 （默认 false ）
+	 * @property {String | Number}	index			点击图标的时候传递事件出去的index（用于区分点击了哪一个）
+	 * @property {String}			hoverClass		图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
+	 * @property {String}			customPrefix	自定义扩展前缀，方便用户扩展自己的图标库 （默认 'upicon' ）
+	 * @property {String | Number}	label			图标右侧的label文字
+	 * @property {String}			labelPos		label相对于图标的位置，只能right或bottom （默认 'right' ）
+	 * @property {String | Number}	labelSize		label字体大小，单位px （默认 '15px' ）
+	 * @property {String}			labelColor		图标右侧的label文字颜色 （ 默认 color['up-content-color'] ）
+	 * @property {String | Number}	space			label与图标的距离，单位px （默认 '3px' ）
+	 * @property {String}			imgMode			图片的mode
+	 * @property {String}	width			显示图片小图标时的宽度
+	 * @property {String}	height			显示图片小图标时的高度
+	 * @property {String}	top				图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途  （默认 0 ）
+	 * @property {Boolean}			stop			是否阻止事件传播 （默认 false ）
+	 * @property {Object}			customStyle		icon的样式，对象形式
+	 * @event {Function} click 点击图标时触发
+	 * @event {Function} touchstart 事件触摸时触发
+	 * @example <up-icon name="photo" color="#2979ff" size="28"></up-icon>
+	 */
+	export default {
+		name: 'up-icon',
+		data() {
+			return {
+
+			}
+		},
+		emits: ['click'],
+		mixins: [mpMixin, mixin, propsIcon],
+		computed: {
+			uClasses() : any {
+				let classes:Array<string> = []
+				classes.push(this.customPrefix + '-' + this.name)
+				// uview-plus的自定义图标类名为up-iconfont
+				if (this.customPrefix == 'upicon') {
+					classes.push('up-iconfont')
+				} else {
+					// 不能缺少这一步，否则自定义图标会无效
+					classes.push(this.customPrefix)
+				}
+				// 主题色，通过类配置
+				// if (this.color != ''
+				// 	&& config.getArray('type')?.includes(this.color) as Boolean
+				// ) classes.push('up-icon__icon--' + this.color)
+				// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
+				// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
+				return classes.join(' ')
+			},
+			iconStyle(): any {
+				let style = {
+					fontSize: addUnit(this.size),
+					lineHeight: addUnit(this.size),
+					fontWeight: this.bold ? 'bold' : 'normal',
+					// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
+					top: addUnit(this.top)
+				}
+				// 非主题色值时，才当作颜色值
+				let types = config.getArray('type')
+				console.log('###', types)
+				// if (this.color != '' && types.includes(this.color)) {
+				// 	style['color'] = this.color
+				// }
+
+				return style
+			},
+			// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+			isImg(): any {
+				return this.name.indexOf('/') !== -1
+			},
+			imgStyle(): any {
+				let style = {}
+				// 如果设置width和height属性，则优先使用，否则使用size属性
+				style['width'] = this.width != '' ? addUnit(this.width) : addUnit(this.size)
+				style['height'] = this.height != '' ? addUnit(this.height) : addUnit(this.size)
+				return style
+			},
+			// 通过图标名，查找对应的图标
+			icon(): string {
+				// 使用自定义图标的时候页面上会把name属性也展示出来，所以在这里处理一下
+				if (this.customPrefix !== "upicon") return "";
+				// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
+				if (icons['upicon-' + this.name] != null) {
+					return icons['upicon-' + this.name] as string
+				} else {
+					return this.name
+				}
+			}
+		},
+		created() {
+		},
+		methods: {
+			addStyle(val: any): any {
+				return addStyle(val)
+			},
+			addUnit(val: any): string {
+				return addUnit(val)
+			},
+			clickHandler(e: any) {
+				this.$emit('click', this.index)
+				// 是否阻止事件冒泡
+			// 	this.stop && this.preventEvent(e)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	@import "/static/iconfont/iconfont.css";
+
+	// 变量定义
+	$up-icon-primary: $up-primary !default;
+	$up-icon-success: $up-success !default;
+	$up-icon-info: $up-info !default;
+	$up-icon-warning: $up-warning !default;
+	$up-icon-error: $up-error !default;
+	$up-icon-label-line-height:1 !default;
+
+	.up-icon {
+		display: 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 {
+			font-family: iconfont;
+			position: relative;
+			// @include flex;
+			// align-items: center;
+
+			&--primary {
+				color: $up-icon-primary;
+			}
+
+			&--success {
+				color: $up-icon-success;
+			}
+
+			&--error {
+				color: $up-icon-error;
+			}
+
+			&--warning {
+				color: $up-icon-warning;
+			}
+
+			&--info {
+				color: $up-icon-info;
+			}
+		}
+
+		&__img {
+			height: auto;
+			// will-change: transform;
+		}
+
+		&__label {
+			line-height: $up-icon-label-line-height;
+		}
+	}
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-icon/up-icon.vue b/src/uni_modules/uview-plus/components/up-icon/up-icon.vue
index 4043fd9e7..115e70de7 100644
--- a/src/uni_modules/uview-plus/components/up-icon/up-icon.vue
+++ b/src/uni_modules/uview-plus/components/up-icon/up-icon.vue
@@ -48,7 +48,7 @@
 
 	// 引入图标名称，已经对应的unicode
 	import icons from './icons'
-	import { props } from './props';
+	import { propsIcon } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
 	import { addUnit, addStyle } from '../../libs/function/index';
@@ -87,7 +87,7 @@
 			}
 		},
 		emits: ['click'],
-		mixins: [mpMixin, mixin, props],
+		mixins: [mpMixin, mixin, propsIcon],
 		computed: {
 			uClasses() {
 				let classes = []
diff --git a/src/uni_modules/uview-plus/components/up-image/image.uts b/src/uni_modules/uview-plus/components/up-image/image.uts
new file mode 100644
index 000000000..478fd8edb
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-image/image.uts
@@ -0,0 +1,30 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:01:51
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/image.js
+ */
+export default {
+    // image组件
+    image: {
+        src: '',
+        mode: 'aspectFill',
+        width: '300',
+        height: '225',
+        shape: 'square',
+        radius: '0',
+        lazyLoad: false,
+        showMenuByLongpress: true,
+        loadingIcon: 'photo',
+        errorIcon: 'error-circle',
+        showLoading: true,
+        showError: true,
+        fade: true,
+        webp: false,
+        duration: 500,
+        bgColor: '#f3f4f6'
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-image/props.js b/src/uni_modules/uview-plus/components/up-image/props.js
index 9f02d6e7d..f8feb0386 100644
--- a/src/uni_modules/uview-plus/components/up-image/props.js
+++ b/src/uni_modules/uview-plus/components/up-image/props.js
@@ -1,6 +1,7 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
-export const props = defineMixin({
+import defProps from '../../libs/config/props'
+
+export const propsImage = defineMixin({
     props: {
         // 图片地址
         src: {
diff --git a/src/uni_modules/uview-plus/components/up-image/props.uts b/src/uni_modules/uview-plus/components/up-image/props.uts
new file mode 100644
index 000000000..458f8856f
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-image/props.uts
@@ -0,0 +1,87 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props'
+
+export const propsImage = defineMixin({
+    props: {
+        // 图片地址
+        src: {
+            type: String,
+            default: defProps.getString('image.src')
+        },
+        // 裁剪模式
+        mode: {
+            type: String,
+            default: defProps.getString('image.mode')
+        },
+        // 宽度，单位任意
+        width: {
+            type: [String],
+            default: defProps.getString('image.width')
+        },
+        // 高度，单位任意
+        height: {
+            type: [String],
+            default: defProps.getString('image.height')
+        },
+        // 图片形状，circle-圆形，square-方形
+        shape: {
+            type: String,
+            default: defProps.getString('image.shape')
+        },
+        // 圆角，单位任意
+        radius: {
+            type: [String],
+            default: defProps.getString('image.radius')
+        },
+        // 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
+        lazyLoad: {
+            type: Boolean,
+            default: defProps.getBoolean('image.lazyLoad')
+        },
+        // 开启长按图片显示识别微信小程序码菜单
+        showMenuByLongpress: {
+            type: Boolean,
+            default: defProps.getBoolean('image.showMenuByLongpress')
+        },
+        // 加载中的图标，或者小图片
+        loadingIcon: {
+            type: String,
+            default: defProps.getString('image.loadingIcon')
+        },
+        // 加载失败的图标，或者小图片
+        errorIcon: {
+            type: String,
+            default: defProps.getString('image.errorIcon')
+        },
+        // 是否显示加载中的图标或者自定义的slot
+        showLoading: {
+            type: Boolean,
+            default: defProps.getBoolean('image.showLoading')
+        },
+        // 是否显示加载错误的图标或者自定义的slot
+        showError: {
+            type: Boolean,
+            default: defProps.getBoolean('image.showError')
+        },
+        // 是否需要淡入效果
+        fade: {
+            type: Boolean,
+            default: defProps.getBoolean('image.fade')
+        },
+        // 只支持网络资源，只对微信小程序有效
+        webp: {
+            type: Boolean,
+            default: defProps.getBoolean('image.webp')
+        },
+        // 过渡时间，单位ms
+        duration: {
+            type: [Number],
+            default: defProps.getNumber('image.duration')
+        },
+        // 背景颜色，用于深色页面加载图片时，为了和背景色融合
+        bgColor: {
+            type: String,
+            default: defProps.getString('image.bgColor')
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-image/up-image.uvue b/src/uni_modules/uview-plus/components/up-image/up-image.uvue
new file mode 100644
index 000000000..6fe88d563
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-image/up-image.uvue
@@ -0,0 +1,238 @@
+<template>
+	<view
+		mode="fade"
+		:show="show"
+		:duration="fade ? 1000 : 0"
+	>
+		<view
+			class="up-image"
+			@tap="onClick"
+			:style="[wrapStyle, backgroundStyle]"
+		>
+			<image
+				:src="src"
+				:mode="mode"
+				@error="onErrorHandler"
+				@load="onLoadHandler"
+				:lazy-load="lazyLoad"
+				class="up-image__image"
+				:style="{
+					borderRadius: shape == 'circle' ? '10000px' : addUnit(radius),
+					width: addUnit(width),
+					height: addUnit(height)
+				}"
+			></image>
+			<view
+				v-if="showLoading && loading"
+				class="up-image__loading"
+				:style="{
+					borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
+					backgroundColor: this.bgColor,
+					width: addUnit(width),
+					height: addUnit(height)
+				}"
+			>
+				<slot name="loading">
+					<up-icon
+						:name="loadingIcon"
+						:width="width"
+						:height="height"
+					></up-icon>
+				</slot>
+			</view>
+			<view
+				v-if="showError && isError && !loading"
+				class="up-image__error"
+				:style="{
+					borderRadius: shape == 'circle' ? '50%' : addUnit(radius),
+					width: addUnit(width),
+					height: addUnit(height)
+				}"
+			>
+				<slot name="error">
+					<up-icon
+						:name="errorIcon"
+						:width="width"
+						:height="height"
+					></up-icon>
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { nextTick } from 'vue';
+	import { propsImage } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
+	/**
+	 * Image 图片
+	 * @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/image.html
+	 * @property {String}			src 				图片地址
+	 * @property {String}			mode 				裁剪模式，见官网说明 （默认 'aspectFill' ）
+	 * @property {String }			width 				宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
+	 * @property {String }			height 				高度，单位任意，如果为数值，则为px单位 （默认 '225' ）
+	 * @property {String}			shape 				图片形状，circle-圆形，square-方形 （默认 'square' ）
+	 * @property {String}			radius		 		圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
+	 * @property {Boolean}			lazyLoad			是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
+	 * @property {Boolean}			showMenuByLongpress	是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
+	 * @property {String}			loadingIcon 		加载中的图标，或者小图片 （默认 'photo' ）
+	 * @property {String}			errorIcon 			加载失败的图标，或者小图片 （默认 'error-circle' ）
+	 * @property {Boolean}			showLoading 		是否显示加载中的图标或者自定义的slot （默认 true ）
+	 * @property {Boolean}			showError 			是否显示加载错误的图标或者自定义的slot （默认 true ）
+	 * @property {Boolean}			fade 				是否需要淡入效果 （默认 true ）
+	 * @property {Boolean}			webp 				只支持网络资源，只对微信小程序有效 （默认 false ）
+	 * @property {Number}			duration 			搭配fade参数的过渡时间，单位ms （默认 500 ）
+	 * @property {String}			bgColor 			背景颜色，用于深色页面加载图片时，为了和背景色融合  (默认 '#f3f4f6' )
+	 * @property {Object}			customStyle  		定义需要用到的外部样式
+	 * @event {Function}	click	点击图片时触发
+	 * @event {Function}	error	图片加载失败时触发
+	 * @event {Function} load 图片加载成功时触发
+	 * @example <up-image width="100%" height="300px" :src="src"></up-image>
+	 */
+	import defProps from '../../libs/config/props'
+	export default {
+		name: 'up-image',
+		mixins: [mpMixin, mixin, propsImage],
+		data() {
+			return {
+				// 图片是否加载错误，如果是，则显示错误占位图
+				isError: false,
+				// 初始化组件时，默认为加载中状态
+				loading: true,
+				// 不透明度，为了实现淡入淡出的效果
+				opacity: 1,
+				// 过渡时间，因为props的值无法修改，故需要一个中间值
+				// durationTime: this.duration,
+				// 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
+				backgroundStyle: {},
+				// 用于fade模式的控制组件显示与否
+				show: false
+			};
+		},
+		watch: {
+			src: {
+				immediate: true,
+				handler(n: string) :void {
+					if (n == '') {
+						// 如果传入null或者''，或者false，或者undefined，标记为错误状态
+						this.isError = true
+					} else {
+						this.isError = false;
+						this.loading = true;
+					}
+				}
+			}
+		},
+		computed: {
+			wrapStyle(): any {
+				let style = {};
+				// 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
+				style['width'] = addUnit(this.width);
+				style['height'] = addUnit(this.height);
+				// 如果是显示圆形，设置一个很多的半径值即可
+				style['borderRadius'] = this.shape == 'circle' ? '10000px' : addUnit(this.radius)
+				// 如果设置圆角，必须要有hidden，否则可能圆角无效
+				if (this.radius != null) {
+					style['overflow'] = parseInt(this.radius as String) > 0 ? 'hidden' : 'visible'
+				}
+				// if (this.fade) {
+				// 	style.opacity = this.opacity
+				// }
+				return deepMerge(style, addStyle(this.customStyle));
+			}
+		},
+		mounted() {
+			this.show = true
+		},
+		emits: ['click', 'error', 'load'],
+		methods: {
+			addStyle(val: any): any {
+				return addStyle(val)
+			},
+			addUnit(val: any): any {
+				return addUnit(val)
+			},
+			// 点击图片
+			onClick(e: any) {
+				this.$emit('click')
+			},
+			// 图片加载失败
+			onErrorHandler(err: any) {
+				this.loading = false
+				this.isError = true
+				this.$emit('error', err)
+			},
+			// 图片加载完成，标记loading结束
+			onLoadHandler(event: any) {
+				this.loading = false
+				this.isError = false
+				this.$emit('load', event)
+				this.removeBgColor()
+				// 如果不需要动画效果，就不执行下方代码，同时移除加载时的背景颜色
+				// 否则无需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 lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+
+	$up-image-error-top:0px !default;
+	$up-image-error-left:0px !default;
+	$up-image-error-width:100% !default;
+	$up-image-error-hight:100% !default;
+	$up-image-error-background-color:$up-bg-color !default;
+	$up-image-error-color:$up-tips-color !default;
+	$up-image-error-font-size: 46rpx !default;
+
+	.up-image {
+		position: relative;
+		transition: opacity 0.5s ease-in-out;
+
+		&__image {
+			width: 100%;
+			height: 100%;
+		}
+
+		&__loading,
+		&__error {
+			position: absolute;
+			top: $up-image-error-top;
+			left: $up-image-error-left;
+			width: $up-image-error-width;
+			height: $up-image-error-hight;
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			background-color: $up-image-error-background-color;
+			color: $up-image-error-color;
+			font-size: $up-image-error-font-size;
+		}
+	}
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-image/up-image.vue b/src/uni_modules/uview-plus/components/up-image/up-image.vue
index 823d1fa32..56680dd54 100644
--- a/src/uni_modules/uview-plus/components/up-image/up-image.vue
+++ b/src/uni_modules/uview-plus/components/up-image/up-image.vue
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-	import { props } from './props';
+	import { propsImage } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
 	import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
@@ -96,7 +96,7 @@
 	 */
 	export default {
 		name: 'up-image',
-		mixins: [mpMixin, mixin, props],
+		mixins: [mpMixin, mixin, propsImage],
 		data() {
 			return {
 				// 图片是否加载错误，如果是，则显示错误占位图
diff --git a/src/uni_modules/uview-plus/components/up-line/line.uts b/src/uni_modules/uview-plus/components/up-line/line.uts
new file mode 100644
index 000000000..3ff087c80
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-line/line.uts
@@ -0,0 +1,20 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:04:49
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/line.js
+ */
+export default {
+    // line组件
+    line: {
+        color: '#d6d7d9',
+        length: '100%',
+        direction: 'row',
+        hairline: true,
+        margin: '0',
+        dashed: false
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-line/props.js b/src/uni_modules/uview-plus/components/up-line/props.js
index 6428d3fb7..e957d8a7a 100644
--- a/src/uni_modules/uview-plus/components/up-line/props.js
+++ b/src/uni_modules/uview-plus/components/up-line/props.js
@@ -1,6 +1,7 @@
 import { defineMixin } from '../../libs/vue'
 import defProps from '../../libs/config/props.js'
-export const props = defineMixin({
+
+export const propsLine = defineMixin({
     props: {
         color: {
             type: String,
diff --git a/src/uni_modules/uview-plus/components/up-line/props.uts b/src/uni_modules/uview-plus/components/up-line/props.uts
new file mode 100644
index 000000000..03eca5e12
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-line/props.uts
@@ -0,0 +1,36 @@
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from '../../libs/config/props.uts'
+
+export const propsLine = defineMixin({
+    props: {
+        color: {
+            type: String,
+            default: defProps.getString('line.color')
+        },
+        // 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等
+        length: {
+            type: [String, Number],
+            default: defProps.getString('line.length')
+        },
+        // 线条方向，col-竖向，row-横向
+        direction: {
+            type: String,
+            default: defProps.getString('line.direction')
+        },
+        // 是否显示细边框
+        hairline: {
+            type: Boolean,
+            default: defProps.getBoolean('line.hairline')
+        },
+        // 线条与上下左右元素的间距，字符串形式，如"30px"、"20px 30px"
+        margin: {
+            type: String,
+            default: defProps.getString('line.margin')
+        },
+        // 是否虚线，true-虚线，false-实线
+        dashed: {
+            type: Boolean,
+            default: defProps.getBoolean('line.dashed')
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-line/up-line.uvue b/src/uni_modules/uview-plus/components/up-line/up-line.uvue
new file mode 100644
index 000000000..478e89ee2
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-line/up-line.uvue
@@ -0,0 +1,61 @@
+<template>
+	<view
+	    class="up-line"
+	    :style="[lineStyle]"
+	>
+	</view>
+</template>
+
+<script>
+	import { propsLine } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
+	/**
+	 * line 线条
+	 * @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单
+	 * @tutorial https://ijry.github.io/uview-plus/components/line.html
+	 * @property {String}			color		线条的颜色 ( 默认 '#d6d7d9' )
+	 * @property {String }			length		长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 ( 默认 '100%' )
+	 * @property {String}			direction	线条的方向，row-横向，col-竖向 (默认 'row' )
+	 * @property {Boolean}			hairline	是否显示细线条 (默认 true )
+	 * @property {String }			margin		线条与上下左右元素的间距，字符串形式，如"30px"  (默认 0 )
+	 * @property {Boolean}			dashed		是否虚线，true-虚线，false-实线 (默认 false )
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @example <up-line color="red"></up-line>
+	 */
+	export default {
+		name: 'up-line',
+		mixins: [mpMixin, mixin, propsLine],
+		computed: {
+			lineStyle() : any {
+				const style = {}
+				style['margin'] = this.margin
+				// 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
+				if (this.direction === 'row') {
+					// 此处采用兼容分开写，兼容nvue的写法
+					style['borderBottomWidth'] = '1px'
+					style['borderBottomStyle'] = this.dashed ? 'dashed' : 'solid'
+					style['width'] = addUnit(this.length)
+					if (this.hairline) style['transform'] = 'scaleY(0.5)'
+				} else {
+					// 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
+					style['borderLeftWidth'] = '1px'
+					style['borderLeftStyle'] = this.dashed ? 'dashed' : 'solid'
+					style['height'] = addUnit(this.length)
+					if (this.hairline) style['transform'] = 'scaleX(0.5)'
+				}
+
+				style['borderColor'] = this.color
+				return deepMerge(style, addStyle(this.customStyle))
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-line {
+	}
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-line/up-line.vue b/src/uni_modules/uview-plus/components/up-line/up-line.vue
index d6d34768e..aa7a30a61 100644
--- a/src/uni_modules/uview-plus/components/up-line/up-line.vue
+++ b/src/uni_modules/uview-plus/components/up-line/up-line.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-	import { props } from './props';
+	import { propsLine } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
 	import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
@@ -27,7 +27,7 @@
 	 */
 	export default {
 		name: 'up-line',
-		mixins: [mpMixin, mixin, props],
+		mixins: [mpMixin, mixin, propsLine],
 		computed: {
 			lineStyle() {
 				const style = {}
diff --git a/src/uni_modules/uview-plus/components/up-loading-icon/loadingIcon.uts b/src/uni_modules/uview-plus/components/up-loading-icon/loadingIcon.uts
new file mode 100644
index 000000000..a474d8f89
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-loading-icon/loadingIcon.uts
@@ -0,0 +1,27 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:45:47
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/loadingIcon.js
+ */
+import config from '../../libs/config/config.uts'
+
+export default {
+    // loading-icon加载中图标组件
+    loadingIcon: {
+        show: true,
+        color: config.getString('color.u-tips-color'),
+        textColor: config.getString('color.u-tips-color'),
+        vertical: false,
+        mode: 'spinner',
+        size: '24',
+        textSize: '15',
+        text: '',
+        timingFunction: 'ease-in-out',
+        duration: 1200,
+        inactiveColor: ''
+    }
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/components/up-loading-icon/props.js b/src/uni_modules/uview-plus/components/up-loading-icon/props.js
index 893b351ad..4a303cd9d 100644
--- a/src/uni_modules/uview-plus/components/up-loading-icon/props.js
+++ b/src/uni_modules/uview-plus/components/up-loading-icon/props.js
@@ -1,6 +1,7 @@
 import { defineMixin } from '../../libs/vue'
 import defProps from '../../libs/config/props.js'
-export const props = defineMixin({
+
+export const propsLoadicon = defineMixin({
     props: {
         // 是否显示组件
         show: {
diff --git a/src/uni_modules/uview-plus/components/up-loading-icon/props.uts b/src/uni_modules/uview-plus/components/up-loading-icon/props.uts
new file mode 100644
index 000000000..bd75e8793
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-loading-icon/props.uts
@@ -0,0 +1,62 @@
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from '../../libs/config/props.uts'
+
+export const propsLoadicon = defineMixin({
+    props: {
+        // 是否显示组件
+        show: {
+            type: Boolean,
+            default: defProps.getBoolean('loadingIcon.show')
+        },
+        // 颜色
+        color: {
+            type: String,
+            default: defProps.getString('loadingIcon.color')
+        },
+        // 提示文字颜色
+        textColor: {
+            type: String,
+            default: defProps.getString('loadingIcon.textColor')
+        },
+        // 文字和图标是否垂直排列
+        vertical: {
+            type: Boolean,
+            default: defProps.getBoolean('loadingIcon.vertical')
+        },
+        // 模式选择，circle-圆形，spinner-花朵形，semicircle-半圆形
+        mode: {
+            type: String,
+            default: defProps.getString('loadingIcon.mode')
+        },
+        // 图标大小，单位默认px
+        size: {
+            type: [String],
+            default: defProps.getString('loadingIcon.size')
+        },
+        // 文字大小
+        textSize: {
+            type: [String],
+            default: defProps.getString('loadingIcon.textSize')
+        },
+        // 文字内容
+        text: {
+            type: [String],
+            default: defProps.getString('loadingIcon.text')
+        },
+        // 动画模式
+        timingFunction: {
+            type: String,
+            default: defProps.getString('loadingIcon.timingFunction')
+        },
+        // 动画执行周期时间
+        duration: {
+            type: [Number],
+            default: defProps.getNumber('loadingIcon.duration')
+        },
+        // mode=circle时的暗边颜色
+        inactiveColor: {
+            type: String,
+            default: defProps.getString('loadingIcon.inactiveColor')
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.uvue b/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.uvue
new file mode 100644
index 000000000..95f749973
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.uvue
@@ -0,0 +1,229 @@
+<template>
+	<view
+		class="up-loading-icon"
+		:style="[addStyle(customStyle)]"
+		v-if="show"
+	>
+		<view
+			v-if="!webviewHide"
+			class="up-loading-icon__spinner"
+			:class="[`up-loading-icon__spinner--${mode}`]"
+			ref="ani"
+			:style="{
+				color: color,
+				width: addUnit(size),
+				height: addUnit(size),
+				borderTopColor: color,
+				borderBottomColor: otherBorderColor,
+				borderLeftColor: otherBorderColor,
+				borderRightColor: otherBorderColor,
+				'animation-duration': `${duration}ms`,
+				'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
+			}"
+		>
+			<block v-if="mode === 'spinner'">
+				<view
+					v-for="(item, index) in array12"
+					:key="index"
+					class="up-loading-icon__dot"
+				>
+				</view>
+			</block>
+		</view>
+		<text
+			v-if="text"
+			class="up-loading-icon__text"
+			:style="{
+				fontSize: addUnit(textSize),
+				color: textColor,
+			}"
+		>{{text}}</text>
+	</view>
+</template>
+
+<script>
+	import { propsLoadicon } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle } from '../../libs/function/index';
+	import { colorGradient } from '../../libs/function/colorGradient';
+	/**
+	 * loading 加载动画
+	 * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
+	 * @tutorial https://ijry.github.io/uview-plus/components/loading.html
+	 * @property {Boolean}			show			是否显示组件  (默认 true)
+	 * @property {String}			color			动画活动区域的颜色，只对 mode = flower 模式有效（默认color['up-tips-color']）
+	 * @property {String}			textColor		提示文本的颜色（默认color['up-tips-color']）
+	 * @property {Boolean}			vertical		文字和图标是否垂直排列 (默认 false )
+	 * @property {String}			mode			模式选择，见官网说明（默认 'circle' ）
+	 * @property {String}			size			加载图标的大小，单位px （默认 24 ）
+	 * @property {String}			textSize		文字大小（默认 15 ）
+	 * @property {String}			text			文字内容 
+	 * @property {String}			timingFunction	动画模式 （默认 'ease-in-out' ）
+	 * @property {Number}			duration		动画执行周期时间（默认 1200）
+	 * @property {String}			inactiveColor	mode=circle时的暗边颜色 
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * @example <up-loading mode="circle"></up-loading>
+	 */
+	export default {
+		name: 'up-loading-icon',
+		mixins: [mpMixin, mixin, propsLoadicon],
+		data() {
+			return {
+				array12: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+				// 这里需要设置默认值为360，否则在安卓nvue上，会延迟一个duration周期后才执行
+				// 在iOS nvue上，则会一开始默认执行两个周期的动画
+				aniAngel: 360, // 动画旋转角度
+				webviewHide: false, // 监听webview的状态，如果隐藏了页面，则停止动画，以免性能消耗
+				loading: false, // 是否运行中，针对nvue使用
+			}
+		},
+		computed: {
+			// 当为circle类型时，给其另外三边设置一个更轻一些的颜色
+			// 之所以需要这么做的原因是，比如父组件传了color为红色，那么需要另外的三个边为浅红色
+			// 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝，导致效果没有那么细腻良好)
+			otherBorderColor(): any {
+				const lightColor = colorGradient(this.color, '#ffffff', 100)[80]
+				if (this.mode === 'circle') {
+					return this.inactiveColor != '' ? this.inactiveColor : lightColor
+				} else {
+					return 'transparent'
+				}
+				// return this.mode === 'circle' ? this.inactiveColor ? this.inactiveColor : lightColor : 'transparent'
+			}
+		},
+		watch: {
+			show(n) {
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			addStyle(val: any): any {
+				return addStyle(val)
+			},
+			addUnit(val: any): string {
+				return addUnit(val)
+			},
+			init() {
+				// setTimeout(() => {
+				// 	if (this.show) {
+				// 		this.addEventListenerToWebview()
+				// 	}
+				// }, 20)
+			},
+			// 监听webview的显示与隐藏
+			addEventListenerToWebview(): void {
+				// webview的堆栈
+				const pages = getCurrentPages()
+				// 当前页面
+				const page = pages[pages.length - 1]
+				// // 当前页面的webview实例
+				// const currentWebview = page.$getAppWebview()
+				// // 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
+				// currentWebview.addEventListener('hide', () => {
+				// 	this.webviewHide = true
+				// })
+				// currentWebview.addEventListener('show', () => {
+				// 	this.webviewHide = false
+				// })
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	$up-loading-icon-color: #c8c9cc !default;
+	$up-loading-icon-text-margin-left:4px !default;
+	$up-loading-icon-text-color:$up-content-color !default;
+	$up-loading-icon-text-font-size:14px !default;
+	$up-loading-icon-text-line-height:20px !default;
+	$up-loading-width:30px !default;
+	$up-loading-height:30px !default;
+	$up-loading-max-width:100% !default;
+	$up-loading-max-height:100% !default;
+	$up-loading-semicircle-border-width: 2px !default;
+	$up-loading-semicircle-border-color:transparent !default;
+	$up-loading-semicircle-border-top-right-radius: 100px !default;
+	$up-loading-semicircle-border-top-left-radius: 100px !default;
+	$up-loading-semicircle-border-bottom-left-radius: 100px !default;
+	$up-loading-semicircle-border-bottom-right-radiu: 100px !default;
+	$up-loading-semicircle-border-style: solid !default;
+	$up-loading-circle-border-top-right-radius: 100px !default;
+	$up-loading-circle-border-top-left-radius: 100px !default;
+	$up-loading-circle-border-bottom-left-radius: 100px !default;
+	$up-loading-circle-border-bottom-right-radiu: 100px !default;
+	$up-loading-circle-border-width:2px !default;
+	$up-loading-circle-border-top-color:#e5e5e5 !default;
+	$up-loading-circle-border-right-color:$up-loading-circle-border-top-color !default;
+	$up-loading-circle-border-bottom-color:$up-loading-circle-border-top-color !default;
+	$up-loading-circle-border-left-color:$up-loading-circle-border-top-color !default;
+	$up-loading-circle-border-style:solid !default;
+	$up-loading-icon-host-font-size:0px !default;
+	$up-loading-icon-host-line-height:1 !default;
+	$up-loading-icon-vertical-margin:6px 0 0 !default;
+	$up-loading-icon-dot-top:0 !default;
+	$up-loading-icon-dot-left:0 !default;
+	$up-loading-icon-dot-width:100% !default;
+	$up-loading-icon-dot-height:100% !default;
+	$up-loading-icon-dot-before-width:2px !default;
+	$up-loading-icon-dot-before-height:25% !default;
+	$up-loading-icon-dot-before-margin:0 auto !default;
+	$up-loading-icon-dot-before-background-color:currentColor !default;
+	$up-loading-icon-dot-before-border-radius:40% !default;
+
+	.up-loading-icon {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		color: $up-loading-icon-color;
+
+		&__text {
+			margin-left: $up-loading-icon-text-margin-left;
+			color: $up-loading-icon-text-color;
+			font-size: $up-loading-icon-text-font-size;
+			line-height: $up-loading-icon-text-line-height;
+		}
+
+		&__spinner {
+			width: $up-loading-width;
+			height: $up-loading-height;
+			position: relative;
+			box-sizing: border-box;
+			// max-width: $up-loading-max-width;
+			// max-height: $up-loading-max-height;
+			// animation: up-rotate 1s linear infinite;
+		}
+
+		&__spinner--semicircle {
+			border-width: $up-loading-semicircle-border-width;
+			border-color: $up-loading-semicircle-border-color;
+			border-top-right-radius: $up-loading-semicircle-border-top-right-radius;
+			border-top-left-radius: $up-loading-semicircle-border-top-left-radius;
+			border-bottom-left-radius: $up-loading-semicircle-border-bottom-left-radius;
+			border-bottom-right-radius: $up-loading-semicircle-border-bottom-right-radiu;
+			border-style: $up-loading-semicircle-border-style;
+		}
+
+		&__spinner--circle {
+			border-top-right-radius: $up-loading-circle-border-top-right-radius;
+			border-top-left-radius: $up-loading-circle-border-top-left-radius;
+			border-bottom-left-radius: $up-loading-circle-border-bottom-left-radius;
+			border-bottom-right-radius: $up-loading-circle-border-bottom-right-radiu;
+			border-width: $up-loading-circle-border-width;
+			border-top-color: $up-loading-circle-border-top-color;
+			border-right-color: $up-loading-circle-border-right-color;
+			border-bottom-color: $up-loading-circle-border-bottom-color;
+			border-left-color: $up-loading-circle-border-left-color;
+			border-style: $up-loading-circle-border-style;
+		}
+
+		&--vertical {
+			flex-direction: column
+		}
+	}
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.vue b/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.vue
index 429d8f237..e793cd5c3 100644
--- a/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.vue
+++ b/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script>
-	import { props } from './props';
+	import { propsLoadicon } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
 	import { addUnit, addStyle } from '../../libs/function/index';
@@ -86,7 +86,7 @@
 	 */
 	export default {
 		name: 'up-loading-icon',
-		mixins: [mpMixin, mixin, props],
+		mixins: [mpMixin, mixin, propsLoadicon],
 		data() {
 			return {
 				// Array.form可以通过一个伪数组对象创建指定长度的数组
diff --git a/src/uni_modules/uview-plus/components/up-transition/props.js b/src/uni_modules/uview-plus/components/up-transition/props.js
index e5327ade2..c0110f123 100644
--- a/src/uni_modules/uview-plus/components/up-transition/props.js
+++ b/src/uni_modules/uview-plus/components/up-transition/props.js
@@ -1,6 +1,7 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
-export const props = defineMixin({
+import defProps from '../../libs/config/props'
+
+export const propsTransition = defineMixin({
     props: {
         // 是否展示组件
         show: {
diff --git a/src/uni_modules/uview-plus/components/up-transition/props.uts b/src/uni_modules/uview-plus/components/up-transition/props.uts
new file mode 100644
index 000000000..b337c4630
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-transition/props.uts
@@ -0,0 +1,27 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props'
+
+export const propsTransition = defineMixin({
+    props: {
+        // 是否展示组件
+        show: {
+            type: Boolean,
+            default: defProps.getBoolean('transition.show')
+        },
+        // 使用的动画模式
+        mode: {
+            type: String,
+            default: defProps.getString('transition.mode')
+        },
+        // 动画的执行时间，单位ms
+        duration: {
+            type: [Number],
+            default: defProps.getNumber('transition.duration')
+        },
+        // 使用的动画过渡函数
+        timingFunction: {
+            type: String,
+            default: defProps.getString('transition.timingFunction')
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/components/up-transition/transition.uts b/src/uni_modules/uview-plus/components/up-transition/transition.uts
new file mode 100644
index 000000000..eff965644
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-transition/transition.uts
@@ -0,0 +1,18 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 16:59:00
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/transition.js
+ */
+export default {
+    // transition动画组件的props
+    transition: {
+        show: false,
+        mode: 'fade',
+        duration: 300,
+        timingFunction: 'ease-out'
+    } as UTSJSONObject
+}
diff --git a/src/uni_modules/uview-plus/components/up-transition/transitionMixin.js b/src/uni_modules/uview-plus/components/up-transition/transitionMixin.js
index bf8465260..ee85d66ae 100644
--- a/src/uni_modules/uview-plus/components/up-transition/transitionMixin.js
+++ b/src/uni_modules/uview-plus/components/up-transition/transitionMixin.js
@@ -23,7 +23,7 @@ const getStyle = (name) => animationMap[name]
 // #endif
 
 import { nextTick } from 'vue'
-import { sleep } from '../../libs/function/index';
+import { sleep } from '../../libs/function/index.js';
 export default {
     methods: {
         // 组件被点击发出事件
diff --git a/src/uni_modules/uview-plus/components/up-transition/up-transition.uvue b/src/uni_modules/uview-plus/components/up-transition/up-transition.uvue
new file mode 100644
index 000000000..49251f3ef
--- /dev/null
+++ b/src/uni_modules/uview-plus/components/up-transition/up-transition.uvue
@@ -0,0 +1,161 @@
+<template>
+	<view
+		v-if="inited"
+		class="up-transition"
+		ref="up-transition"
+		@tap="clickHandler"
+		:class="classes"
+		:style="[mergeStyle]"
+		@touchmove="noop"
+	>
+		<slot />
+	</view>
+</template>
+
+<script>
+import { nextTick } from 'vue'
+import { propsTransition } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle } from '../../libs/function/index';
+/**
+ * transition  动画组件
+ * @description
+ * @tutorial
+ * @property {String}			show			是否展示组件 （默认 false ）
+ * @property {String}			mode			使用的动画模式 （默认 'fade' ）
+ * @property {String | Number}	duration		动画的执行时间，单位ms （默认 '300' ）
+ * @property {String}			timingFunction	使用的动画过渡函数 （默认 'ease-out' ）
+ * @property {Object}			customStyle		自定义样式
+ * @event {Function} before-enter	进入前触发
+ * @event {Function} enter			进入中触发
+ * @event {Function} after-enter	进入后触发
+ * @event {Function} before-leave	离开前触发
+ * @event {Function} leave			离开中触发
+ * @event {Function} after-leave	离开后触发
+ * @example
+ */
+// 定义一个一定时间后自动成功的promise，让调用nextTick方法处，进入下一个then方法
+const waitTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50))
+
+// 定义类名，通过给元素动态切换类名，赋予元素一定的css动画样式
+const getClassNames = function (name: string): UTSJSONObject {
+	return {
+		enter: `up-${name}-enter up-${name}-enter-active`,
+		'enter-to': `up-${name}-enter-to up-${name}-enter-active`,
+		leave: `up-${name}-leave up-${name}-leave-active`,
+		'leave-to': `up-${name}-leave-to up-${name}-leave-active`
+	}
+}
+export default {
+	name: 'up-transition',
+	data() {
+		return {
+			inited: false, // 是否显示/隐藏组件
+			viewStyle: {}, // 组件内部的样式
+			status: '', // 记录组件动画的状态
+			transitionEnded: false, // 组件是否结束的标记
+			display: false, // 组件是否展示
+			classes: '', // 应用的类名
+		}
+	},
+	emits: ['click', 'beforeEnter', 'enter', 'afterEnter', 'beforeLeave', 'leave', 'afterLeave'],
+	computed: {
+	    mergeStyle(): UTSJSONObject {
+	        const { viewStyle, customStyle } = this
+			let duration = JSON.stringify(this.duration)
+	        return {
+	            transitionDuration: `${duration}ms`,
+	            // display: `${this.display ? '' : 'none'}`,
+				transitionTimingFunction: this.timingFunction as string,
+				// 避免自定义样式影响到动画属性，所以写在viewStyle前面
+	            ...addStyle(customStyle) as UTSJSONObject,
+	            ...viewStyle
+	        }
+	    }
+	},
+	// 将mixin挂在到组件中，实际上为一个vue格式对象。
+	mixins: [mpMixin, mixin, propsTransition],
+	watch: {
+		show: {
+			handler(newVal: Boolean): void {
+				if (newVal) {
+					this.vueEnter()
+				} else {
+					this.vueLeave()
+				}
+			},
+			// 表示同时监听初始化时的props的show的意思
+			immediate: true
+		}
+	},
+	methods: {
+	    // 组件被点击发出事件
+	    clickHandler() {
+	        this.$emit('click')
+	    },
+	    // vue版本的组件进场处理
+	    vueEnter() {
+	        // 动画进入时的类名
+	        const classNames = getClassNames(this.mode)
+	        // 定义状态和发出动画进入前事件
+	        this.status = 'enter'
+	        this.$emit('beforeEnter')
+	        this.inited = true
+	        this.display = true
+	        this.classes = classNames['enter'] as String
+			nextTick(() => {
+				// https://github.com/umicro/uView2.0/issues/545
+				// await sleep(20)
+				// 标识动画尚未结束
+				this.$emit('enter')
+				this.transitionEnded = false
+				// 组件动画进入后触发的事件
+				this.$emit('afterEnter')
+				// 赋予组件enter-to类名
+				this.classes = classNames['enter-to'] as String
+			})
+	    },
+	    // 动画离场处理
+	    vueLeave() {
+	        // 如果不是展示状态，无需执行逻辑
+	        if (!this.display) return
+	        const classNames = getClassNames(this.mode)
+	        // 标记离开状态和发出事件
+	        this.status = 'leave'
+	        this.$emit('beforeLeave')
+	        // 获得类名
+	        this.classes = classNames['leave'] as String
+	
+	        nextTick(() => {
+				// 动画正在离场的状态
+				this.transitionEnded = false
+				this.$emit('leave')
+				 // 组件执行动画，到了执行的执行时间后，执行一些额外处理
+				 setTimeout(this.onTransitionEnd, this.duration as Number)
+				 this.classes = classNames['leave-to'] as String
+			})
+	    },
+	    // 完成过渡后触发
+	    onTransitionEnd() {
+	        // 如果已经是结束的状态，无需再处理
+	        if (this.transitionEnded) return
+	        this.transitionEnded = true
+	        // 发出组件动画执行后的事件
+	        this.$emit(this.status === 'leave' ? 'afterLeave' : 'afterEnter')
+	        if (!this.show && this.display) {
+	            this.display = false
+	            this.inited = false
+	        }
+	    }
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/components.scss';
+// vue版本动画相关的样式抽离在外部文件
+@import './vue.ani-style.scss';
+
+.up-transition {}
+</style>
diff --git a/src/uni_modules/uview-plus/components/up-transition/up-transition.vue b/src/uni_modules/uview-plus/components/up-transition/up-transition.vue
index cbd2ccee0..69d1f5f13 100644
--- a/src/uni_modules/uview-plus/components/up-transition/up-transition.vue
+++ b/src/uni_modules/uview-plus/components/up-transition/up-transition.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { props } from './props';
+import { propsTransition } from './props';
 import { mpMixin } from '../../libs/mixin/mpMixin';
 import { mixin } from '../../libs/mixin/mixin';
 import { addStyle } from '../../libs/function/index';
@@ -65,7 +65,7 @@ export default {
 	    }
 	},
 	// 将mixin挂在到组件中，实际上为一个vue格式对象。
-	mixins: [mpMixin, mixin, transitionMixin, props],
+	mixins: [mpMixin, mixin, transitionMixin, propsTransition],
 	watch: {
 		show: {
 			handler(newVal) {
diff --git a/src/uni_modules/uview-plus/index.uts b/src/uni_modules/uview-plus/index.uts
new file mode 100644
index 000000000..65fe9c6fa
--- /dev/null
+++ b/src/uni_modules/uview-plus/index.uts
@@ -0,0 +1,27 @@
+// 引入全局mixin
+import { mixin } from './libs/mixin/mixin'
+// 小程序特有的mixin
+import { mpMixin } from './libs/mixin/mpMixin'
+
+export function loadFont() {
+	uni.loadFontFace({
+	  global: true,
+	  family: 'iconfont',
+	  source: "url('/static/iconfont/iconfont.ttf')", // 需使用url方法包裹。本地字体请放在/static目录下，否则打包时不会把字体文件打进去。也支持网络字体
+	  success() {
+		console.log('global loadFontFace uni.ttf success')
+	  },
+	  fail(error) {
+		console.warn('global loadFontFace uni.ttf fail', error.errMsg)
+	  }
+	})
+}
+
+const install = (Vue: any) :void => {
+    // Vue.config.globalProperties.$u = $u
+    Vue.mixin(mixin)
+}
+
+export default {
+    install
+}
diff --git a/src/uni_modules/uview-plus/libs/config/color.uts b/src/uni_modules/uview-plus/libs/config/color.uts
new file mode 100644
index 000000000..1a714e1fe
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/config/color.uts
@@ -0,0 +1,17 @@
+// 为了让用户能够自定义主题，会逐步弃用此文件，各颜色通过css提供
+// 为了给某些特殊场景使用和向后兼容，无需删除此文件(2020-06-20)
+const color = {
+    primary: '#3c9cff',
+    info: '#909399',
+    default: '#909399',
+    warning: '#f9ae3d',
+    error: '#f56c6c',
+    success: '#5ac725',
+    mainColor: '#303133',
+    contentColor: '#606266',
+    tipsColor: '#909399',
+    lightColor: '#c0c4cc',
+    borderColor: '#e4e7ed'
+} as UTSJSONObject
+
+export default color
diff --git a/src/uni_modules/uview-plus/libs/config/config.uts b/src/uni_modules/uview-plus/libs/config/config.uts
new file mode 100644
index 000000000..9d7e09717
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/config/config.uts
@@ -0,0 +1,33 @@
+let version = '4'
+
+// 开发环境才提示，生产环境不会提示
+if (process.env.NODE_ENV === 'development') {
+	console.log(`\n %c uview-plus V${version} %c https://ijry.github.io/uview-plus/ \n\n`, 'color: #ffffff; background: #3c9cff; padding:5px 0;', 'color: #3c9cff;background: #ffffff; padding:5px 0;');
+}
+
+export default {
+    v: '4',
+    version: '4',
+    // 主题名称
+    type: [
+        'primary',
+        'success',
+        'info',
+        'error',
+        'warning'
+    ],
+    // 颜色部分，本来可以通过scss的:export导出供js使用，但是奈何nvue不支持
+    color: {
+        'up-primary': '#2979ff',
+        'up-warning': '#ff9900',
+        'up-success': '#19be6b',
+        'up-error': '#fa3534',
+        'up-info': '#909399',
+        'up-main-color': '#303133',
+        'up-content-color': '#606266',
+        'up-tips-color': '#909399',
+        'up-light-color': '#c0c4cc'
+    },
+	// 默认单位，可以通过配置为rpx，那么在用于传入组件大小参数为数值时，就默认为rpx
+	unit: 'px'
+} as UTSJSONObject
diff --git a/src/uni_modules/uview-plus/libs/config/props.uts b/src/uni_modules/uview-plus/libs/config/props.uts
new file mode 100644
index 000000000..96df5eeda
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/config/props.uts
@@ -0,0 +1,108 @@
+/**
+ * 此文件的作用为统一配置所有组件的props参数
+ * 借此用户可以全局覆盖组件的props默认值
+ * 无需在每个引入组件的页面中都配置一次
+ */
+// import config from './config'
+
+// import ActionSheet from './props/actionSheet'
+// import Album from './props/album'
+// import Alert from './props/alert'
+// import Avatar from './props/avatar'
+// import AvatarGroup from './props/avatarGroup'
+// import Backtop from './props/backtop'
+// import Badge from './props/badge'
+import Button from '../../components/up-button/button'
+// import Calendar from './props/calendar'
+// import CarKeyboard from './props/carKeyboard'
+import Cell from '../../components/up-cell/cell'
+import CellGroup from '../../components/up-cell-group/cellGroup'
+// import Checkbox from './props/checkbox'
+// import CheckboxGroup from './props/checkboxGroup'
+// import CircleProgress from './props/circleProgress'
+// import Code from './props/code'
+// import CodeInput from './props/codeInput'
+// import Col from './props/col'
+// import Collapse from './props/collapse'
+// import CollapseItem from './props/collapseItem'
+// import ColumnNotice from './props/columnNotice'
+// import CountDown from './props/countDown'
+// import CountTo from './props/countTo'
+// import DatetimePicker from './props/datetimePicker'
+// import Divider from './props/divider'
+// import Empty from './props/empty'
+// import Form from './props/form'
+// import GormItem from './props/formItem'
+import Gap from '../../components/up-gap/gap'
+// import Grid from './props/grid'
+// import GridItem from './props/gridItem'
+import Icon from '../../components/up-icon/icon'
+import Image from '../../components/up-image/image'
+// import IndexAnchor from './props/indexAnchor'
+// import IndexList from './props/indexList'
+// import Input from './props/input'
+// import Keyboard from './props/keyboard'
+import Line from '../../components/up-line/line'
+// import LineProgress from './props/lineProgress'
+// import Link from './props/link'
+// import List from './props/list'
+// import ListItem from './props/listItem'
+// import LoadingIcon from './props/loadingIcon'
+// import LoadingPage from './props/loadingPage'
+// import Loadmore from './props/loadmore'
+// import Modal from './props/modal'
+// import Navbar from './props/navbar'
+// import NoNetwork from './props/noNetwork'
+// import NoticeBar from './props/noticeBar'
+// import Notify from './props/notify'
+// import NumberBox from './props/numberBox'
+// import NumberKeyboard from './props/numberKeyboard'
+// import Overlay from './props/overlay'
+// import Parse from './props/parse'
+// import Picker from './props/picker'
+// import Popup from './props/popup'
+// import Radio from './props/radio'
+// import RadioGroup from './props/radioGroup'
+// import Rate from './props/rate'
+// import ReadMore from './props/readMore'
+// import Row from './props/row'
+// import RowNotice from './props/rowNotice'
+// import ScrollList from './props/scrollList'
+// import Search from './props/search'
+// import Section from './props/section'
+// import Skeleton from './props/skeleton'
+// import Slider from './props/slider'
+// import StatusBar from './props/statusBar'
+// import Steps from './props/steps'
+// import StepsItem from './props/stepsItem'
+// import Sticky from './props/sticky'
+// import Subsection from './props/subsection'
+// import SwipeAction from './props/swipeAction'
+// import SwipeActionItem from './props/swipeActionItem'
+// import Swiper from './props/swiper'
+// import SwipterIndicator from './props/swipterIndicator'
+// import Switch from './props/switch'
+// import Tabbar from './props/tabbar'
+// import TabbarItem from './props/tabbarItem'
+// import Tabs from './props/tabs'
+// import Tag from './props/tag'
+// import Text from './props/text'
+// import Textarea from './props/textarea'
+// import Toast from './props/toast'
+// import Toolbar from './props/toolbar'
+// import Tooltip from './props/tooltip'
+import Transition from '../../components/up-transition/transition'
+// import Upload from './props/upload'
+
+let obj: UTSJSONObject = Object.assign({},
+	Button,
+	Cell,
+	CellGroup,
+	Line,
+	Icon,
+	Image,
+	Transition,
+	Gap
+);
+console.log(obj);
+export default obj;
diff --git a/src/uni_modules/uview-plus/libs/function/colorGradient.uts b/src/uni_modules/uview-plus/libs/function/colorGradient.uts
new file mode 100644
index 000000000..f28e89614
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/function/colorGradient.uts
@@ -0,0 +1,144 @@
+/**
+ * 求两个颜色之间的渐变值
+ * @param {string} startColor 开始的颜色
+ * @param {string} endColor 结束的颜色
+ * @param {number} step 颜色等分的份额
+ * */
+export function colorGradient(startColor = 'rgb(0, 0, 0)',
+	endColor = 'rgb(255, 255, 255)', step = 10): Array<string> {
+    const startRGB = hexToRgb(startColor, false) as Array<Int> // 转换为rgb数组模式
+	console.log(startRGB)
+  //   const startR = startRGB[0]
+  //   const startG = startRGB[1]
+  //   const startB = startRGB[2]
+
+  //   const endRGB = hexToRgb(endColor, false)
+  //   const endR = endRGB[0]
+  //   const endG = endRGB[1]
+  //   const endB = endRGB[2]
+
+  //   const sR = (endR - startR) / step // 总差值
+  //   const sG = (endG - startG) / step
+  //   const sB = (endB - startB) / step
+  const colorArr: Array<string> = []
+  //   for (let i = 0; i < step; i++) {
+  //       // 计算每一步的hex值
+		// let sr: string = JSON.stringify(Math.round((sR * i + startR)))
+		// let sg: string = JSON.stringify(Math.round((sG * i + startG)))
+		// let sb: string = JSON.stringify(Math.round((sB * i + startB)))
+  //       let hex = rgbToHex(`rgb(${sr},${sg},${sb})`)
+  //       // 确保第一个颜色值为startColor的值
+  //       if (i === 0) hex = rgbToHex(startColor)
+  //       // 确保最后一个颜色值为endColor的值
+  //       if (i === step - 1) hex = rgbToHex(endColor)
+  //       colorArr.push(hex)
+  //   }
+    return colorArr
+}
+
+// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
+export function hexToRgb(sColor: string, str = true): any {
+    const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+    sColor = sColor.toLowerCase()
+    if (sColor != '' && sColor != null && reg.test(sColor)) {
+        if (sColor.length === 4) {
+            let sColorNew = '#'
+            for (let i = 1; i < 4; i += 1) {
+                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
+            }
+            sColor = sColorNew
+        }
+        // 处理六位的颜色值
+        const sColorChange: Array<Number> = []
+        for (let i = 1; i < 7; i += 2) {
+            sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`))
+        }
+        if (str == false) {
+            return sColorChange
+        }
+		let sc0 = JSON.stringify(sColorChange[0])
+		let sc1 = JSON.stringify(sColorChange[1])
+		let sc2 = JSON.stringify(sColorChange[2])
+        return `rgb(${sc0},${sc1},${sc2})`
+    }
+	// if (/^(rgb|RGB)/.test(sColor)) {
+ //        const arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
+ //        return arr.map((val) => {
+	// 		return (val)
+	// 	})
+ //    }
+    return sColor
+}
+
+// // 将rgb表示方式转换为hex表示方式
+export function rgbToHex(rgb): string {
+    const _this = rgb
+    const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+    if (/^(rgb|RGB)/.test(_this)) {
+        const aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
+        let strHex = '#'
+        for (let i = 0; i < aColor.length; i++) {
+            let hex = Number(aColor[i]).toString(16)
+            hex = String(hex).length == 1 ? `${0}${hex}` : hex // 保证每个rgb的值为2位
+            if (hex === '0') {
+                hex += hex
+            }
+            strHex += hex
+        }
+        if (strHex.length !== 7) {
+            strHex = _this
+        }
+        return strHex
+    } if (reg.test(_this)) {
+        const aNum = _this.replace(/#/, '').split('')
+        if (aNum.length === 6) {
+            return _this
+        } if (aNum.length === 3) {
+            let numHex = '#'
+            for (let i = 0; i < aNum.length; i += 1) {
+                numHex += (aNum[i] + aNum[i])
+            }
+            return numHex
+        }
+    } else {
+        return _this
+    }
+}
+
+// /**
+// * JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串
+// * sHex为传入的十六进制的色值
+// * alpha为rgba的透明度
+// */
+// export function colorToRgba(color, alpha): string {
+//     color = rgbToHex(color)
+//     // 十六进制颜色值的正则表达式
+//     const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+//     /* 16进制颜色转为RGB格式 */
+//     let sColor = String(color).toLowerCase()
+//     if (sColor && reg.test(sColor)) {
+//         if (sColor.length === 4) {
+//             let sColorNew = '#'
+//             for (let i = 1; i < 4; i += 1) {
+//                 sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
+//             }
+//             sColor = sColorNew
+//         }
+//         // 处理六位的颜色值
+//         const sColorChange = []
+//         for (let i = 1; i < 7; i += 2) {
+//             sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`))
+//         }
+//         // return sColorChange.join(',')
+//         return `rgba(${sColorChange.join(',')},${alpha})`
+//     }
+
+//     return sColor
+// }
+
+export default {
+    colorGradient,
+    hexToRgb,
+    rgbToHex,
+    // colorToRgba
+}
diff --git a/src/uni_modules/uview-plus/libs/function/debounce.uts b/src/uni_modules/uview-plus/libs/function/debounce.uts
new file mode 100644
index 000000000..ecee7957c
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/function/debounce.uts
@@ -0,0 +1,29 @@
+let timeout = null
+
+/**
+ * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
+ *
+ * @param {Function} func 要执行的回调函数
+ * @param {Number} wait 延时的时间
+ * @param {Boolean} immediate 是否立即执行
+ * @return null
+ */
+export function debounce(func, wait = 500, immediate = false) {
+    // 清除定时器
+    if (timeout !== null) clearTimeout(timeout)
+    // 立即执行，此类情况一般用不到
+    if (immediate) {
+        const callNow = !timeout
+        timeout = setTimeout(() => {
+            timeout = null
+        }, wait)
+        if (callNow) typeof func === 'function' && func()
+    } else {
+        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
+        timeout = setTimeout(() => {
+            typeof func === 'function' && func()
+        }, wait)
+    }
+}
+
+export default debounce
diff --git a/src/uni_modules/uview-plus/libs/function/digit.uts b/src/uni_modules/uview-plus/libs/function/digit.uts
new file mode 100644
index 000000000..cbe0b2446
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/function/digit.uts
@@ -0,0 +1,167 @@
+let _boundaryCheckingState = true; // 是否进行越界检查的全局开关
+
+/**
+ * 把错误的数据转正
+ * @private
+ * @example strip(0.09999999999999998)=0.1
+ */
+function strip(num, precision = 15): any {
+  return +parseFloat(Number(num).toPrecision(precision));
+}
+
+/**
+ * Return digits length of a number
+ * @private
+ * @param {*number} num Input number
+ */
+function digitLength(num): any {
+  // Get digit length of e
+  const eSplit = num.toString().split(/[eE]/);
+  const len = (eSplit[0].split('.')[1] || '').length - +(eSplit[1] || 0);
+  return len > 0 ? len : 0;
+}
+
+/**
+ * 把小数转成整数,如果是小数则放大成整数
+ * @private
+ * @param {*number} num 输入数
+ */
+function float2Fixed(num): any {
+  if (num.toString().indexOf('e') === -1) {
+    return Number(num.toString().replace('.', ''));
+  }
+  const dLen = digitLength(num);
+  return dLen > 0 ? strip(Number(num) * Math.pow(10, dLen)) : Number(num);
+}
+
+/**
+ * 检测数字是否越界，如果越界给出提示
+ * @private
+ * @param {*number} num 输入数
+ */
+function checkBoundary(num): any {
+  if (_boundaryCheckingState) {
+    if (num > Number.MAX_SAFE_INTEGER || num < Number.MIN_SAFE_INTEGER) {
+      console.warn(`${num} 超出了精度限制，结果可能不正确`);
+    }
+  }
+}
+
+/**
+ * 把递归操作扁平迭代化
+ * @param {number[]} arr 要操作的数字数组
+ * @param {function} operation 迭代操作
+ * @private
+ */
+function iteratorOperation(arr, operation): any {
+  const [num1, num2, ...others] = arr;
+  let res = operation(num1, num2);
+
+  others.forEach((num) => {
+    res = operation(res, num);
+  });
+
+  return res;
+}
+
+/**
+ * 高精度乘法
+ * @export
+ */
+export function times(...nums): any {
+  if (nums.length > 2) {
+    return iteratorOperation(nums, times);
+  }
+
+  const [num1, num2] = nums;
+  const num1Changed = float2Fixed(num1);
+  const num2Changed = float2Fixed(num2);
+  const baseNum = digitLength(num1) + digitLength(num2);
+  const leftValue = num1Changed * num2Changed;
+
+  checkBoundary(leftValue);
+
+  return leftValue / Math.pow(10, baseNum);
+}
+
+/**
+ * 高精度加法
+ * @export
+ */
+export function plus(...nums): any {
+  if (nums.length > 2) {
+    return iteratorOperation(nums, plus);
+  }
+
+  const [num1, num2] = nums;
+  // 取最大的小数位
+  const baseNum = Math.pow(10, Math.max(digitLength(num1), digitLength(num2)));
+  // 把小数都转为整数然后再计算
+  return (times(num1, baseNum) + times(num2, baseNum)) / baseNum;
+}
+
+/**
+ * 高精度减法
+ * @export
+ */
+export function minus(...nums): any {
+  if (nums.length > 2) {
+    return iteratorOperation(nums, minus);
+  }
+
+  const [num1, num2] = nums;
+  const baseNum = Math.pow(10, Math.max(digitLength(num1), digitLength(num2)));
+  return (times(num1, baseNum) - times(num2, baseNum)) / baseNum;
+}
+
+/**
+ * 高精度除法
+ * @export
+ */
+export function divide(...nums): any {
+  if (nums.length > 2) {
+    return iteratorOperation(nums, divide);
+  }
+
+  const [num1, num2] = nums;
+  const num1Changed = float2Fixed(num1);
+  const num2Changed = float2Fixed(num2);
+  checkBoundary(num1Changed);
+  checkBoundary(num2Changed);
+  // 重要，这里必须用strip进行修正
+  return times(num1Changed / num2Changed, strip(Math.pow(10, digitLength(num2) - digitLength(num1))));
+}
+
+/**
+ * 四舍五入
+ * @export
+ */
+export function round(num, ratio): any {
+  const base = Math.pow(10, ratio);
+  let result = divide(Math.round(Math.abs(times(num, base))), base);
+  if (num < 0 && result !== 0) {
+    result = times(result, -1);
+  }
+  // 位数不足则补0
+  return result;
+}
+
+/**
+ * 是否进行边界检查，默认开启
+ * @param flag 标记开关，true 为开启，false 为关闭，默认为 true
+ * @export
+ */
+export function enableBoundaryChecking(flag = true): any {
+  _boundaryCheckingState = flag;
+}
+
+
+export default {
+  times,
+  plus,
+  minus,
+  divide,
+  round,
+  enableBoundaryChecking,
+};
+
diff --git a/src/uni_modules/uview-plus/libs/function/index.uts b/src/uni_modules/uview-plus/libs/function/index.uts
new file mode 100644
index 000000000..6f3268cef
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/function/index.uts
@@ -0,0 +1,740 @@
+import {
+	number as testNumber,
+	array as testArray,
+	empty as testEmpty
+} from './test.uts'
+import { round } from './digit.uts'
+import config from '../config/config'
+
+// /**
+//  * @description 如果value小于min，取min；如果value大于max，取max
+//  * @param {number} min 
+//  * @param {number} max 
+//  * @param {number} value
+//  */
+// export function range(min = 0, max = 0, value = 0):number {
+//     return Math.max(min, Math.min(max, Number(value)))
+// }
+
+// /**
+//  * @description 用于获取用户传递值的px值  如果用户传递了"xxpx"或者"xxrpx"，取出其数值部分，如果是"xxxrpx"还需要用过uni.upx2px进行转换
+//  * @param {number|string} value 用户传递值的px值
+//  * @param {boolean} unit 
+//  * @returns {number|string}
+//  */
+// export function getPx(value, unit = false): any {
+//     if (testNumber(value)) {
+//         return unit ? `${value}px` : Number(value)
+//     }
+//     // 如果带有rpx，先取出其数值部分，再转为px值
+//     if (/(rpx|upx)$/.test(value)) {
+//         return unit ? `${uni.rpx2px(parseInt(value))}px` : Number(uni.rpx2px(parseInt(value)))
+//     }
+//     return unit ? `${parseInt(value)}px` : parseInt(value)
+// }
+
+// /**
+//  * @description 进行延时，以达到可以简写代码的目的 比如: await sleep(20)将会阻塞20ms
+//  * @param {number} value 堵塞时间 单位ms 毫秒
+//  * @returns {Promise} 返回promise
+//  */
+// export function sleep(value = 30): any {
+//     return new Promise((resolve) => {
+//         setTimeout(() => {
+//             resolve({})
+//         }, value)
+//     })
+// }
+// /**
+//  * @description 运行期判断平台
+//  * @returns {string} 返回所在平台(小写) 
+//  * @link 运行期判断平台 https://uniapp.dcloud.io/frame?id=判断平台
+//  */
+// export function os(): string {
+//     return uni.getSystemInfoSync().platform.toLowerCase()
+// }
+// /**
+//  * @description 获取系统信息同步接口
+//  * @link 获取系统信息同步接口 https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync 
+//  */
+// export function sys(): any {
+//     return uni.getSystemInfoSync()
+// }
+
+// /**
+//  * @description 取一个区间数
+//  * @param {Number} min 最小值
+//  * @param {Number} max 最大值
+//  */
+// export function random(min, max): number {
+//     if (min >= 0 && max > 0 && max >= min) {
+//         const gab = max - min + 1
+//         return Math.floor(Math.random() * gab + min)
+//     }
+//     return 0
+// }
+
+// /**
+//  * @param {Number} len uuid的长度
+//  * @param {Boolean} firstU 将返回的首字母置为"u"
+//  * @param {Nubmer} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制
+//  */
+// export function guid(len = 32, firstU = true, radix = 0): string {
+//     const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
+//     let uuid: Array<string> = []
+//     radix = radix || chars.length
+
+//     if (len) {
+//         // 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
+//         for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
+//     } else {
+//         let r
+//         // rfc4122标准要求返回的uuid中,某些位为固定的字符
+//         uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
+//         uuid[14] = '4'
+
+//         for (let i = 0; i < 36; i++) {
+//             if (!uuid[i]) {
+//                 r = 0 | Math.random() * 16
+//                 uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]
+//             }
+//         }
+//     }
+//     // 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
+//     if (firstU) {
+//         uuid.shift()
+//         return `u${uuid.join('')}`
+//     }
+//     return uuid.join('')
+// }
+
+// /**
+// * @description 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
+//    this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
+//    这里默认值等于undefined有它的含义，因为最顶层元素(组件)的$parent就是undefined，意味着不传name
+//    值(默认为undefined)，就是查找最顶层的$parent
+// *  @param {string|undefined} name 父组件的参数名
+// */
+// export function $parent(name = ''): any {
+//     // let parent = this.$parent
+//     // // 通过while历遍，这里主要是为了H5需要多层解析的问题
+//     // while (parent) {
+//     //     // 父组件
+//     //     if (parent.$options && parent.$options.name !== name) {
+//     //         // 如果组件的name不相等，继续上一级寻找
+//     //         parent = parent.$parent
+//     //     } else {
+//     //         return parent
+//     //     }
+//     // }
+//     return false
+// }
+
+/**
+ * @description 样式转换
+ * 对象转字符串，或者字符串转对象
+ * @param {object | string} customStyle 需要转换的目标
+ * @param {String} target 转换的目的，object-转为对象，string-转为字符串
+ * @returns any
+ */
+export function addStyle(customStyle: any, target = 'object'): any {
+    // 字符串转字符串，对象转对象情形，直接返回
+    if (testEmpty(customStyle) || typeof(customStyle) === 'object' && target === 'object' || target === 'string' &&
+        typeof(customStyle) === 'string') {
+        return customStyle
+    }
+    // 字符串转对象
+    if (target === 'object') {
+		let customStyleStr = JSON.stringify(customStyle)
+        // 去除字符串样式中的两端空格(中间的空格不能去掉，比如padding: 20px 0如果去掉了就错了)，空格是无用的
+        customStyleStr = customStyleStr.trim()
+        // 根据";"将字符串转为数组形式
+        const styleArray = customStyleStr.split(';')
+        const style = {}
+        // 历遍数组，拼接成对象
+        for (let i = 0; i < styleArray.length; i++) {
+            // 'font-size:20px;color:red;'，如此最后字符串有";"的话，会导致styleArray最后一个元素为空字符串，这里需要过滤
+            if (styleArray[i] != '') {
+                const item = styleArray[i].split(':')
+                style[(item[0]).trim()] = item[1].trim()
+            }
+        }
+        return style
+    }
+    // 这里为对象转字符串形式
+    let string = ''
+	let customStyleObj = JSON.parse(JSON.stringify(customStyle)) as Array
+	if (customStyleObj != null && typeof customStyleObj === 'object') {
+		// customStyleObj.forEach((val: string, i: any) => {
+		// 	// 驼峰转为中划线的形式，否则css内联样式，无法识别驼峰样式属性名
+		// 	const key = i.replace(/([A-Z])/g, '-$1').toLowerCase()
+		// 	string += `${key}:${val};`
+		// })
+	}
+    // 去除两端空格
+    return string.trim()
+}
+
+/**
+ * @description 添加单位，如果有rpx，upx，%，px等单位结尾或者值为auto，直接返回，否则加上px单位结尾
+ * @param {string|number} value 需要添加单位的值
+ * @param {string} unit 添加的单位名 比如px
+ */
+export function addUnit(pvalue: any|null, punit = 'px'): string {
+	let value = pvalue
+	if (value == '' || value == null) {
+		value = 'auto'
+	}
+	let unit = punit
+    if (unit == null || unit == '') {
+     	unit = config['unit'] as string
+    }
+    let valueStr = value.toString()
+    // 用uview-plus内置验证规则中的number判断是否为数值
+    return testNumber(valueStr) ? `${valueStr}${unit}` : valueStr
+}
+
+// /**
+//  * @description 深度克隆
+//  * @param {object} obj 需要深度克隆的对象
+//  * @returns {*} 克隆后的对象或者原值（不是对象）
+//  */
+// export function deepClone(obj: object): any {
+//     // 对常见的“非”值，直接返回原来值
+//     // if ([null, undefined, NaN, false].includes(obj)) return obj
+//     if (typeof obj !== 'object' && typeof obj !== 'function') {
+//         // 原始类型直接返回
+//         return obj
+//     }
+//     const o = testArray(obj) ? [] : {}
+//     // for (const i in obj) {
+//     //     if (obj.hasOwnProperty(i)) {
+//     //         o[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]
+//     //     }
+//     // }
+//     return o
+// }
+
+/**
+ * @description JS对象深度合并
+ * @param {UTSJSONObject} target 需要拷贝的对象
+ * @param {UTSJSONObject} source 拷贝的来源对象
+ * @returns {UTSJSONObject|boolean} 深度合并后的对象或者false（入参有不是对象）
+ */
+export function deepMerge(
+	targetOrigin: any = {},
+	source: any = {}): any {
+	let targetJson = JSON.parse(JSON.stringify(targetOrigin)) as UTSJSONObject
+	let sourceJson = JSON.parse(JSON.stringify(source)) as UTSJSONObject
+    let target:UTSJSONObject = {}
+	// #ifdef APP
+	target = UTSJSONObject.assign(targetJson, sourceJson)
+	// #endif
+	// #ifdef WEB
+	target = Object.assign(targetJson, sourceJson)
+	// #endif
+ //    if (typeof target !== 'object' || typeof source !== 'object') return false
+ //    for (const prop in source) {
+	// source.forEach((val, prop) => {
+ //        if (!source[prop]) continue
+ //        if (target[prop]) {
+ //            if (source[prop] == null) {
+ //                target[prop] = source[prop]
+ //            }else if (typeof target[prop] !== 'object') {
+ //                target[prop] = source[prop]
+ //            } else if (typeof source[prop] !== 'object') {
+ //                target[prop] = source[prop]
+ //            } else if (target[prop].concat && source[prop].concat) {
+ //            //     target[prop] = target[prop].concat(source[prop])
+ //            } else {
+ //            //     target[prop] = deepMerge(target[prop], source[prop])
+ //            }
+ //        } else {
+ //            target[prop] = source[prop]
+ //        }
+ //    })
+    return target
+}
+
+/**
+ * @description error提示
+ * @param {*} err 错误内容
+ */
+export function error(err) {
+    // 开发环境才提示，生产环境不会提示
+    if (process.env.NODE_ENV === 'development') {
+        console.error(`uview-plus提示：${err}`)
+    }
+}
+
+// /**
+//  * @description 打乱数组
+//  * @param {array} array 需要打乱的数组
+//  * @returns {array} 打乱后的数组
+//  */
+// export function randomArray(array: any = []): any {
+//     // 原理是sort排序,Math.random()产生0<= x < 1之间的数,会导致x-0.05大于或者小于0
+//     return array.sort(() => Math.random() - 0.5)
+// }
+
+// // padStart 的 polyfill，因为某些机型或情况，还无法支持es7的padStart，比如电脑版的微信小程序
+// // 所以这里做一个兼容polyfill的兼容处理
+// if (!String.prototype.padStart) {
+//     // 为了方便表示这里 fillString 用了ES6 的默认参数，不影响理解
+//     String.prototype.padStart = function(maxLength, fillString = ' '): any {
+//         if (Object.prototype.toString.call(fillString) !== '[object String]') {
+//             throw new TypeError(
+//                 'fillString must be String'
+//             )
+//         }
+//         const str = this
+//         // 返回 String(str) 这里是为了使返回的值是字符串字面量，在控制台中更符合直觉
+//         if (str.length >= maxLength) return String(str)
+
+//         const fillLength = maxLength - str.length
+//         let times = Math.ceil(fillLength / fillString.length)
+//         while (times >>= 1) {
+//             fillString += fillString
+//             if (times === 1) {
+//                 fillString += fillString
+//             }
+//         }
+//         return fillString.slice(0, fillLength) + str
+//     }
+// }
+
+// /**
+//  * @description 格式化时间
+//  * @param {String|Number} dateTime 需要格式化的时间戳
+//  * @param {String} fmt 格式化规则 yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合 默认yyyy-mm-dd
+//  * @returns {string} 返回格式化后的字符串
+//  */
+//  export function timeFormat(dateTime: any = 0, formatStr: any = 'yyyy-mm-dd'): any {
+//   let date: any
+//     // 若传入时间为假值，则取当前时间
+//   if (dateTime === 0) {
+//     date = new Date()
+//   }
+//   // 若为unix秒时间戳，则转为毫秒时间戳（逻辑有点奇怪，但不敢改，以保证历史兼容）
+//   else if (/^\d{10}$/.test(dateTime.toString().trim())) {
+//     date = new Date(dateTime * 1000)
+//   }
+//   // 若用户传入字符串格式时间戳，new Date无法解析，需做兼容
+//   else if (typeof dateTime === 'string' && /^\d+$/.test(dateTime.trim())) {
+//     date = new Date(Number(dateTime))
+//   }
+//   // 其他都认为符合 RFC 2822 规范
+//   else {
+//     // 处理平台性差异，在Safari/Webkit中，new Date仅支持/作为分割符的字符串时间
+//     date = new Date(
+//       typeof dateTime === 'string'
+//         ? dateTime.replace(/-/g, '/')
+//         : dateTime
+//     )
+//   }
+
+//     const timeSource = {
+//         'y': date.getFullYear().toString(), // 年
+//         'm': (date.getMonth() + 1).toString().padStart(2, '0'), // 月
+//         'd': date.getDate().toString().padStart(2, '0'), // 日
+//         'h': date.getHours().toString().padStart(2, '0'), // 时
+//         'M': date.getMinutes().toString().padStart(2, '0'), // 分
+//         's': date.getSeconds().toString().padStart(2, '0') // 秒
+//         // 有其他格式化字符需求可以继续添加，必须转化成字符串
+//     }
+
+//   for (const key in timeSource) {
+//     const ret = new RegExp(`${key}+`).exec(formatStr) || ['']
+//     if (ret[0]) {
+//       // 年可能只需展示两位
+//       const beginIndex = key === 'y' && ret.length === 2 ? 2 : 0
+//       if (timeSource && timeSource[key] && key) {
+//         formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex))
+//       }
+//     }
+//   }
+
+//   return formatStr
+// }
+
+// /**
+//  * @description 时间戳转为多久之前
+//  * @param {String|Number} timestamp 时间戳
+//  * @param {String|Boolean} format 
+//  * 格式化规则如果为时间格式字符串，超出一定时间范围，返回固定的时间格式；
+//  * 如果为布尔值false，无论什么时间，都返回多久以前的格式
+//  * @returns {string} 转化后的内容
+//  */
+// export function timeFrom(timestamp: number = 0, format: any = 'yyyy-mm-dd'): any {
+//     if (timestamp == 0) timestamp = Number(new Date())
+//     // timestamp = parseInt(timestamp)
+//     // 判断用户输入的时间戳是秒还是毫秒,一般前端js获取的时间戳是毫秒(13位),后端传过来的为秒(10位)
+//     if (timestamp.toString().length == 10) timestamp *= 1000
+//     let timer = (new Date()).getTime() - timestamp
+//     timer = (timer / 1000).toInt()
+//     // 如果小于5分钟,则返回"刚刚",其他以此类推
+//     let tips = ''
+//     switch (true) {
+//         case timer < 300:
+//             tips = '刚刚'
+//             break
+//         case timer >= 300 && timer < 3600:
+//             tips = `${(timer / 60).toInt()}分钟前`
+//             break
+//         case timer >= 3600 && timer < 86400:
+//             tips = `${(timer / 3600).toInt()}小时前`
+//             break
+//         case timer >= 86400 && timer < 2592000:
+//             tips = `${(timer / 86400).toInt()}天前`
+//             break
+//         default:
+//             // 如果format为false，则无论什么时间戳，都显示xx之前
+//             if (format === false) {
+//                 if (timer >= 2592000 && timer < 365 * 86400) {
+//                     tips = `${(timer / (86400 * 30)).toInt()}个月前`
+//                 } else {
+//                     tips = `${(timer / (86400 * 365)).toInt()}年前`
+//                 }
+//             } else {
+//                 tips = timeFormat(timestamp, format)
+//             }
+//     }
+//     return tips
+// }
+
+// /**
+//  * @description 去除空格
+//  * @param String str 需要去除空格的字符串
+//  * @param String pos both(左右)|left|right|all 默认both
+//  */
+// export function trim(str, pos = 'both'): string {
+//     str = String(str)
+//     if (pos == 'both') {
+//         return str.replace(/^\s+|\s+$/g, '')
+//     }
+//     if (pos == 'left') {
+//         return str.replace(/^\s*/, '')
+//     }
+//     if (pos == 'right') {
+//         return str.replace(/(\s*$)/g, '')
+//     }
+//     if (pos == 'all') {
+//         return str.replace(/\s+/g, '')
+//     }
+//     return str
+// }
+
+// /**
+//  * @description 对象转url参数
+//  * @param {object} data,对象
+//  * @param {Boolean} isPrefix,是否自动加上"?"
+//  * @param {string} arrayFormat 规则 indices|brackets|repeat|comma
+//  */
+// export function queryParams(data: object = {}, isPrefix: boolean = true, arrayFormat: string = 'brackets'): any {
+//     const prefix = isPrefix ? '?' : ''
+//     const _result: any = []
+//     if (['indices', 'brackets', 'repeat', 'comma'].indexOf(arrayFormat) == -1) arrayFormat = 'brackets'
+//     for (const key in data) {
+//         const value = data[key]
+//         // 去掉为空的参数
+//         if (['', undefined, null].indexOf(value) >= 0) {
+//             continue
+//         }
+//         // 如果值为数组，另行处理
+//         if (value.constructor === Array) {
+//             // e.g. {ids: [1, 2, 3]}
+//             switch (arrayFormat) {
+//                 case 'indices':
+//                     // 结果: ids[0]=1&ids[1]=2&ids[2]=3
+//                     for (let i = 0; i < value.length; i++) {
+//                         _result.push(`${key}[${i}]=${value[i]}`)
+//                     }
+//                     break
+//                 case 'brackets':
+//                     // 结果: ids[]=1&ids[]=2&ids[]=3
+//                     value.forEach((_value) => {
+//                         _result.push(`${key}[]=${_value}`)
+//                     })
+//                     break
+//                 case 'repeat':
+//                     // 结果: ids=1&ids=2&ids=3
+//                     value.forEach((_value) => {
+//                         _result.push(`${key}=${_value}`)
+//                     })
+//                     break
+//                 case 'comma':
+//                     // 结果: ids=1,2,3
+//                     let commaStr = ''
+//                     value.forEach((_value) => {
+//                         commaStr += (commaStr ? ',' : '') + _value
+//                     })
+//                     _result.push(`${key}=${commaStr}`)
+//                     break
+//                 default:
+//                     value.forEach((_value) => {
+//                         _result.push(`${key}[]=${_value}`)
+//                     })
+//             }
+//         } else {
+//             _result.push(`${key}=${value}`)
+//         }
+//     }
+//     return _result.length ? prefix + _result.join('&') : ''
+// }
+
+// /**
+//  * 显示消息提示框
+//  * @param {String} title 提示的内容，长度与 icon 取值有关。
+//  * @param {Number} duration 提示的延迟时间，单位毫秒，默认：2000
+//  */
+// export function toast(title, duration = 2000) {
+//     uni.showToast({
+//         title: String(title),
+//         icon: 'none',
+//         duration
+//     })
+// }
+
+// /**
+//  * @description 根据主题type值,获取对应的图标
+//  * @param {String} type 主题名称,primary|info|error|warning|success
+//  * @param {boolean} fill 是否使用fill填充实体的图标
+//  */
+// export function type2icon(type = 'success', fill = false): any {
+//     // 如果非预置值,默认为success
+//     if (['primary', 'info', 'error', 'warning', 'success'].indexOf(type) == -1) type = 'success'
+//     let iconName = ''
+//     // 目前(2019-12-12),info和primary使用同一个图标
+//     switch (type) {
+//         case 'primary':
+//             iconName = 'info-circle'
+//             break
+//         case 'info':
+//             iconName = 'info-circle'
+//             break
+//         case 'error':
+//             iconName = 'close-circle'
+//             break
+//         case 'warning':
+//             iconName = 'error-circle'
+//             break
+//         case 'success':
+//             iconName = 'checkmark-circle'
+//             break
+//         default:
+//             iconName = 'checkmark-circle'
+//     }
+//     // 是否是实体类型,加上-fill,在icon组件库中,实体的类名是后面加-fill的
+//     if (fill) iconName += '-fill'
+//     return iconName
+// }
+
+// /**
+//  * @description 数字格式化
+//  * @param {number|string} number 要格式化的数字
+//  * @param {number} decimals 保留几位小数
+//  * @param {string} decimalPoint 小数点符号
+//  * @param {string} thousandsSeparator 千分位符号
+//  * @returns {string} 格式化后的数字
+//  */
+// export function priceFormat(number, decimals = 0, decimalPoint = '.', thousandsSeparator = ','): any {
+//     number = (`${number}`).replace(/[^0-9+-Ee.]/g, '')
+//     const n = !isFinite(+number) ? 0 : +number
+//     const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
+//     const sep = (typeof thousandsSeparator === 'undefined') ? ',' : thousandsSeparator
+//     const dec = (typeof decimalPoint === 'undefined') ? '.' : decimalPoint
+//     let s: any = []
+
+//     s = (prec ? round(n, prec) + '' : `${Math.round(n)}`).split('.')
+//     const re = /(-?\d+)(\d{3})/
+//     while (re.test(s[0])) {
+//         s[0] = s[0].replace(re, `$1${sep}$2`)
+//     }
+    
+//     if ((s[1] || '').length < prec) {
+//         s[1] = s[1] || ''
+//         s[1] += new Array(prec - s[1].length + 1).join('0')
+//     }
+//     return s.join(dec)
+// }
+
+// /**
+//  * @description 获取duration值
+//  * 如果带有ms或者s直接返回，如果大于一定值，认为是ms单位，小于一定值，认为是s单位
+//  * 比如以30位阈值，那么300大于30，可以理解为用户想要的是300ms，而不是想花300s去执行一个动画
+//  * @param {String|number} value 比如: "1s"|"100ms"|1|100
+//  * @param {boolean} unit  提示: 如果是false 默认返回number
+//  * @return {string|number} 
+//  */
+// export function getDuration(value, unit = true): any {
+//     const valueNum = parseInt(value)
+//     if (unit) {
+//         if (/s$/.test(value)) return value
+//         return value > 30 ? `${value}ms` : `${value}s`
+//     }
+//     if (/ms$/.test(value)) return valueNum
+//     if (/s$/.test(value)) return valueNum > 30 ? valueNum : valueNum * 1000
+//     return valueNum
+// }
+
+// /**
+//  * @description 日期的月或日补零操作
+//  * @param {String} value 需要补零的值
+//  */
+// export function padZero(value): any {
+//     return `00${value}`.slice(-2)
+// }
+
+// /**
+//  * @description 在u-form的子组件内容发生变化，或者失去焦点时，尝试通知u-form执行校验方法
+//  * @param {*} instance
+//  * @param {*} event
+//  */
+// export function formValidate(instance, event): any {
+//     // todox
+//     // const formItem = uni.$u.$parent.call(instance, 'u-form-item')
+//     // const form = uni.$u.$parent.call(instance, 'u-form')
+//     // // 如果发生变化的input或者textarea等，其父组件中有u-form-item或者u-form等，就执行form的validate方法
+//     // // 同时将form-item的pros传递给form，让其进行精确对象验证
+//     // if (formItem && form) {
+//     // 	form.validateField(formItem.prop, () => {}, event)
+//     // }
+// }
+
+// /**
+//  * @description 获取某个对象下的属性，用于通过类似'a.b.c'的形式去获取一个对象的的属性的形式
+//  * @param {object} obj 对象
+//  * @param {string} key 需要获取的属性字段
+//  * @returns {*}
+//  */
+// export function getProperty(obj, key): any {
+//     if (typeof obj !== 'object' || null == obj) {
+//         return ''
+//     }
+//     if (typeof key !== 'string' || key === '') {
+//         return ''
+//     }
+//     if (key.indexOf('.') !== -1) {
+//         const keys = key.split('.')
+//         let firstObj = obj[keys[0]] || {}
+
+//         for (let i = 1; i < keys.length; i++) {
+//             if (firstObj) {
+//                 firstObj = firstObj[keys[i]]
+//             }
+//         }
+//         return firstObj
+//     }
+//     return obj[key]
+// }
+
+// /**
+//  * @description 设置对象的属性值，如果'a.b.c'的形式进行设置
+//  * @param {object} obj 对象
+//  * @param {string} key 需要设置的属性
+//  * @param {string} value 设置的值
+//  */
+// export function setProperty(obj: object, key: string, value: string): void {
+//     if (typeof obj !== 'object') {
+//         return
+//     }
+//     // 递归赋值
+//     const inFn = function(_obj: object, keys: Array<string>, v: string) {
+//         // 最后一个属性key
+//         if (keys.length === 1) {
+//             _obj[keys[0]] = v
+//             return
+//         }
+//         // 0~length-1个key
+//         while (keys.length > 1) {
+//             const k = keys[0]
+//             if (!_obj[k] || (typeof _obj[k] !== 'object')) {
+//                 _obj[k] = {}
+//             }
+//             const key = keys.shift()
+//             // 自调用判断是否存在属性，不存在则自动创建对象
+//             inFn(_obj[k], keys, v)
+//         }
+//     }
+
+//     if (typeof key !== 'string' || key === '') {
+
+//     } else if (key.indexOf('.') !== -1) { // 支持多层级赋值操作
+//         const keys = key.split('.')
+//     //     inFn(obj, keys, value)
+//     } else {
+//         obj[key] = value
+//     }
+// }
+
+// /**
+//  * @description 获取当前页面路径
+//  */
+// export function page(): any {
+//     const pages = getCurrentPages()
+//     // 某些特殊情况下(比如页面进行redirectTo时的一些时机)，pages可能为空数组
+//     return `/${pages[pages.length - 1].route || ''}`
+// }
+
+// /**
+//  * @description 获取当前路由栈实例数组
+//  */
+// export function pages(): any {
+//     const pages = getCurrentPages()
+//     return pages
+// }
+
+// /**
+//  * @description 修改uView内置属性值
+//  * @param {object} props 修改内置props属性
+//  * @param {object} config 修改内置config属性
+//  * @param {object} color 修改内置color属性
+//  * @param {object} zIndex 修改内置zIndex属性
+//  */
+// export function setConfig({
+//     props = {},
+//     config = {},
+//     color = {},
+//     zIndex = {}
+// }): object {
+// 	return {}
+//     // const {
+//     // 	deepMerge,
+//     // } = uni.$u
+//     // uni.$u.config = deepMerge(uni.$u.config, config)
+//     // uni.$u.props = deepMerge(uni.$u.props, props)
+//     // uni.$u.color = deepMerge(uni.$u.color, color)
+//     // uni.$u.zIndex = deepMerge(uni.$u.zIndex, zIndex)
+// }
+
+export default {
+//     // range,
+//     // getPx,
+//     // sleep,
+//     // os,
+//     // sys,
+//     // random,
+//     // guid,
+//     // $parent,
+    addStyle,
+    addUnit,
+//     // deepClone,
+    deepMerge,
+//     // error,
+//     // randomArray,
+//     timeFormat,
+//     // timeFrom,
+//     // trim,
+//     // queryParams,
+//     // toast,
+//     // type2icon,
+//     // priceFormat,
+//     // getDuration,
+//     // padZero,
+//     // formValidate,
+//     // getProperty,
+//     // setProperty,
+//     // page,
+//     // pages,
+//     // setConfig
+}
diff --git a/src/uni_modules/uview-plus/libs/function/platform.uts b/src/uni_modules/uview-plus/libs/function/platform.uts
new file mode 100644
index 000000000..904fcccb5
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/function/platform.uts
@@ -0,0 +1,75 @@
+/**
+ * 注意：
+ * 此部分内容，在vue-cli模式下，需要在vue.config.js加入如下内容才有效：
+ * module.exports = {
+ *     transpileDependencies: ['uview-v2']
+ * }
+ */
+
+let platform = 'none'
+
+// #ifdef VUE3
+platform = 'vue3'
+// #endif
+
+// #ifdef VUE2
+platform = 'vue2'
+// #endif
+
+// #ifdef APP-PLUS
+platform = 'plus'
+// #endif
+
+// #ifdef APP-NVUE
+platform = 'nvue'
+// #endif
+
+// #ifdef H5
+platform = 'h5'
+// #endif
+
+// #ifdef MP
+platform = 'mp'
+// #endif
+
+// #ifdef MP-WEIXIN
+platform = 'weixin'
+// #endif
+
+// #ifdef MP-ALIPAY
+platform = 'alipay'
+// #endif
+
+// #ifdef MP-BAIDU
+platform = 'baidu'
+// #endif
+
+// #ifdef MP-TOUTIAO
+platform = 'toutiao'
+// #endif
+
+// #ifdef MP-QQ
+platform = 'qq'
+// #endif
+
+// #ifdef MP-KUAISHOU
+platform = 'kuaishou'
+// #endif
+
+// #ifdef MP-360
+platform = '360'
+// #endif
+
+// #ifdef QUICKAPP-WEBVIEW
+platform = 'quickapp-webview'
+// #endif
+
+// #ifdef QUICKAPP-WEBVIEW-HUAWEI
+platform = 'quickapp-webview-huawei'
+// #endif
+
+// #ifdef QUICKAPP-WEBVIEW-UNION
+platform = 'quckapp-webview-union'
+// #endif
+
+export default platform
diff --git a/src/uni_modules/uview-plus/libs/function/test.uts b/src/uni_modules/uview-plus/libs/function/test.uts
new file mode 100644
index 000000000..ef4152a68
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/function/test.uts
@@ -0,0 +1,298 @@
+/**
+ * 验证电子邮箱格式
+ */
+export function email(value: string): boolean {
+    return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)
+}
+
+/**
+ * 验证手机格式
+ */
+export function mobile(value: string): boolean {
+    return /^1[23456789]\d{9}$/.test(value)
+}
+
+/**
+ * 验证URL格式
+ */
+export function url(value: string): boolean {
+    return /^((https|http|ftp|rtsp|mms):\/\/)(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?(([0-9]{1,3}.){3}[0-9]{1,3}|([0-9a-zA-Z_!~*'()-]+.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z].[a-zA-Z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+\/?)$/
+        .test(value)
+}
+
+/**
+ * 验证日期格式
+ */
+export function date(value: string): boolean {
+    if (value == '') return false
+    // 判断是否数值或者字符串数值(意味着为时间戳)，转为数值，否则new Date无法识别字符串时间戳
+    // if (number(value)) value = +value
+    return !/Invalid|NaN/.test(new Date(value).toString())
+}
+
+/**
+ * 验证ISO类型的日期格式
+ */
+export function dateISO(value: string): boolean {
+    return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
+}
+
+/**
+ * 验证十进制数字
+ */
+export function number(value: string): boolean {
+    return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value)
+}
+
+/**
+ * 验证字符串
+ */
+export function string(value: string): boolean {
+    return typeof value === 'string'
+}
+
+/**
+ * 验证整数
+ */
+export function digits(value: string): boolean {
+    return /^\d+$/.test(value)
+}
+
+/**
+ * 验证身份证号码
+ */
+export function idCard(value: string): boolean {
+    return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
+        value
+    )
+}
+
+/**
+ * 是否车牌号
+ */
+export function carNo(value: string): boolean {
+    // 新能源车牌
+    const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/
+    // 旧车牌
+    const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/
+    if (value.length === 7) {
+        return creg.test(value)
+    } if (value.length === 8) {
+        return xreg.test(value)
+    }
+    return false
+}
+
+/**
+ * 金额,只允许2位小数
+ */
+export function amount(value: string): boolean {
+    // 金额，只允许保留两位小数
+    return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value)
+}
+
+/**
+ * 中文
+ */
+export function chinese(value: string): boolean {
+    const reg = /^[\u4e00-\u9fa5]+$/gi
+    return reg.test(value)
+}
+
+/**
+ * 只能输入字母
+ */
+export function letter(value: string): boolean {
+    return /^[a-zA-Z]*$/.test(value)
+}
+
+/**
+ * 只能是字母或者数字
+ */
+export function enOrNum(value: string): boolean {
+    // 英文或者数字
+    const reg = /^[0-9a-zA-Z]*$/g
+    return reg.test(value)
+}
+
+/**
+ * 验证是否包含某个值
+ */
+export function contains(value: string, param: string): boolean {
+    return value.indexOf(param) >= 0
+}
+
+/**
+ * 验证一个值范围[min, max]
+ */
+export function range(value: number, param: Array<number>): boolean {
+	return true
+    // return value >= param[0] && value <= param[1]
+}
+
+/**
+ * 验证一个长度范围[min, max]
+ */
+export function rangeLength(value: string, param: Array<number>): boolean {
+	return true
+    // return value.length >= param[0] && value.length <= param[1]
+}
+
+/**
+ * 是否固定电话
+ */
+export function landline(value: string): boolean {
+    const reg = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/
+    return reg.test(value)
+}
+
+/**
+ * 判断是否为空
+ */
+export function empty(value: any): boolean {
+    switch (typeof value) {
+        case 'undefined':
+            return true;
+        case 'string':
+            // 去除字符串两端的空白字符，并检查长度是否为0。
+            return value == '';
+        case 'boolean':
+            return value == false;
+        case 'number':
+            return value === 0;
+        case 'object':
+            // 对于数组，检查其长度是否为0
+            // if (Array.isArray(value) && value.length === 0) {
+            //     return true;
+            // }
+            // 对于null或其他对象类型，返回false  
+            return false;
+    }
+    return false;
+}
+
+/**
+ * 是否json字符串
+ */
+export function jsonString(value: string): boolean {
+    if (typeof value === 'string') {
+        try {
+            // const obj: any = JSON.parse(value)
+            // if (typeof obj === 'object' && obj) {
+            //     return true
+            // }
+            return false
+        } catch (e) {
+            return false
+        }
+    }
+    return false
+}
+
+/**
+ * 是否数组
+ */
+export function array(value: any): boolean {
+	if ("object" == typeof value) {
+		return value instanceof Array
+	} else {
+		return false
+	}
+}
+
+/**
+ * 是否对象
+ */
+export function object(value: any): boolean {
+    if ("object" == typeof value) {
+    	return value instanceof Object
+    } else {
+    	return false
+    }
+}
+
+/**
+ * 是否短信验证码
+ */
+export function code(value: string, len = 6): boolean {
+    return new RegExp(`^\\d{${len}}$`).test(value)
+}
+
+/**
+ * 是否函数方法
+ * @param {Object} value
+ */
+export function func(value: string): boolean {
+	return true
+//     return typeof value === 'export function'
+}
+
+/**
+ * 是否promise对象
+ * @param {Object} value
+ */
+export function promise(value: any): boolean {
+	return true
+	// return value instanceof Promise<T>
+	// return object(value) && func(value.then) && func(value.catch)
+}
+
+/** 是否图片格式
+ * @param {Object} value
+ */
+export function image(value: string): boolean {
+    const newValue = value.split('?')[0]
+    const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i
+    return IMAGE_REGEXP.test(newValue)
+}
+
+/**
+ * 是否视频格式
+ * @param {Object} value
+ */
+export function video(value: string): boolean {
+    const VIDEO_REGEXP = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv|m3u8)/i
+    return VIDEO_REGEXP.test(value)
+}
+
+/**
+ * 是否为正则对象
+ * @param {Object}
+ * @return {Boolean}
+ */
+export function regExp(o: object): boolean {
+	return true
+    // return o && Object.prototype.toString.call(o) === '[object RegExp]'
+}
+
+// export default {
+//     email,
+//     mobile,
+//     url,
+//     date,
+//     dateISO,
+//     number,
+//     digits,
+//     idCard,
+//     carNo,
+//     amount,
+//     chinese,
+//     letter,
+//     enOrNum,
+//     contains,
+//     range,
+//     rangeLength,
+//     empty,
+//     isEmpty: empty,
+//     jsonString,
+//     landline,
+//     object,
+//     array,
+//     code,
+//     func,
+//     promise,
+//     video,
+//     image,
+//     regExp,
+//     string
+// }
diff --git a/src/uni_modules/uview-plus/libs/function/throttle.uts b/src/uni_modules/uview-plus/libs/function/throttle.uts
new file mode 100644
index 000000000..2cba395da
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/function/throttle.uts
@@ -0,0 +1,32 @@
+let timer;
+let flag;
+/**
+ * 节流原理：在一定时间内，只能触发一次
+ *
+ * @param {Function} func 要执行的回调函数
+ * @param {Number} wait 延时的时间
+ * @param {Boolean} immediate 是否立即执行
+ * @return null
+ */
+export function throttle(func: object, wait = 500, immediate = true): any {
+	// func()
+	return "";
+    if (immediate) {
+        if (!flag) {
+            flag = true
+            // 如果是立即执行，则在wait毫秒内开始时执行
+            typeof func === 'function' && func()
+            timer = setTimeout(() => {
+                flag = false
+            }, wait)
+        }
+    } else if (!flag) {
+        flag = true
+        // 如果是非立即执行，则在wait毫秒内的结束处执行
+        timer = setTimeout(() => {
+            flag = false
+            typeof func === 'function' && func()
+        }, wait)
+    }
+}
+export default throttle
diff --git a/src/uni_modules/uview-plus/libs/mixin/button.uts b/src/uni_modules/uview-plus/libs/mixin/button.uts
new file mode 100644
index 000000000..1aab939c3
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/mixin/button.uts
@@ -0,0 +1,15 @@
+import { defineMixin } from '../vue.uts'
+
+export const buttonMixin = defineMixin({
+    props: {
+        lang: String,
+        sessionFrom: String,
+        sendMessageTitle: String,
+        sendMessagePath: String,
+        sendMessageImg: String,
+        showMessageCard: Boolean,
+        appParameter: String,
+        formType: String,
+        openType: String
+    }
+})
diff --git a/src/uni_modules/uview-plus/libs/mixin/mixin.uts b/src/uni_modules/uview-plus/libs/mixin/mixin.uts
new file mode 100644
index 000000000..80b07b928
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/mixin/mixin.uts
@@ -0,0 +1,181 @@
+import { defineMixin } from '../vue.uts'
+import {
+	array as testArray
+} from '../function/test.uts'
+
+export const mixin = defineMixin({
+    // 定义每个组件都可能需要用到的外部样式以及类名
+    props: {
+        // 每个组件都有的父组件传递的样式，可以为字符串或者对象形式
+        customStyle: {
+            type: [Object, String],
+            default: {}
+        },
+        customClass: {
+            type: String,
+            default: ''
+        },
+        // 跳转的页面路径
+        url: {
+            type: String,
+            default: ''
+        },
+        // 页面跳转的类型
+        linkType: {
+            type: String,
+            default: 'navigateTo'
+        }
+    },
+    // data() {
+    //     return {}
+    // },
+    onLoad() {
+        // getRect挂载到$u上，因为这方法需要使用in(this)，所以无法把它独立成一个单独的文件导出
+    //     this.$u.getRect = this.$uGetRect
+    },
+    created() {
+        // 组件当中，只有created声明周期，为了能在组件使用，故也在created中将方法挂载到$u
+    //     this.$u.getRect = this.$uGetRect
+    },
+    computed: {
+        
+    },
+    methods: {
+		/**
+		   * 生成bem规则类名
+		   * 由于微信小程序，H5，nvue之间绑定class的差异，无法通过:class="[bem()]"的形式进行同用
+		   * 故采用如下折中做法，最后返回的是数组（一般平台）或字符串（支付宝和字节跳动平台），类似['a', 'b', 'c']或'a b c'的形式
+		   * @param {String} name 组件名称
+		   * @param {Array} fixed 一直会存在的类名
+		   * @param {Array} change 会根据变量值为true或者false而出现或者隐藏的类名
+		   * @returns {Array|string}
+		   */
+		bem: function (name: String, fixed: Array<String>, change: Array<Array<any>>): String  {
+			  // 类名前缀
+			  const prefix = `up-${name}--`
+			  const classes = {}
+			  let that = this
+			  if (fixed.length > 0) {
+				  fixed.map((item) => {
+						// 这里的类名，会一直存在
+						classes[prefix + item] = true
+				  })
+			  }
+			  if (change.length > 0) {
+				  change.map((item) => {
+					  // 这里的类名，会根据item[1]的值为true或者false，而进行添加或者移除某一个类
+					  if (item[1] as boolean) {
+					  	(classes[prefix + (item[0] as string)] = item[1] as boolean)
+					  }
+					  // : (delete classes[prefix + item[0]])
+				  })
+			  }
+			  // #ifdef APP
+			  return UTSJSONObject.keys(classes).join(' ')
+			  // #endif
+			  // #ifdef WEB
+			  return Object.keys(classes).join(' ')
+			  // #endif
+			  // 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
+		},
+        // 跳转某一个页面
+        openPage: function(urlKey: string): void {
+            // const url: string = this[urlKey]
+            // if (url != '') {
+            //     // h5官方回应：发行h5会自动摇树优化，所有使用uni的地方，都会被直接转换成具体的API调用 https://ask.dcloud.net.cn/question/161523?notification_id-1201922__rf-false__item_id-226372
+            //     // 使用封装的 route 进行跳转（直接调用方法），不使用 uni 对象
+            //     // this.$u.route({ type: this.linkType, url })
+            //     // 执行类似uni.navigateTo的方法
+            //     // uni[this.linkType]({
+            //     //     url
+            //     // })
+            // }
+        },
+        // 查询节点信息
+        // 目前此方法在支付宝小程序中无法获取组件跟接点的尺寸，为支付宝的bug(2020-07-21)
+        // 解决办法为在组件根部再套一个没有任何作用的view元素
+        $uGetRect(selector: string, all: any) {
+            // #ifndef APP-NVUE
+            /**uni.createSelectorQuery()
+                .in(this)[all ? 'selectAll' : 'select'](selector)
+                .boundingClientRect((rect) => {
+                    if (all && Array.isArray(rect) && rect.length) {
+                        resolve(rect)
+                    }
+                    if (!all && rect) {
+                        resolve(rect)
+                    }
+                })
+                .exec()*/
+            // #endif
+            
+            // #ifdef APP-NVUE
+            /*
+            sleep(30).then(() => {
+                let selectorNvue = selector.substring(1) // 去掉开头的#或者.
+                let selectorRef = this.$refs[selectorNvue]
+                if (!selectorRef) {
+                    // console.log('不存在元素，请检查是否设置了ref属性' + selectorNvue + '。')
+                    resolve({
+                        with: 0,
+                        height: 0,
+                        left: 0,
+                        right: 0,
+                        top: 0,
+                        bottom: 0
+                    }) 
+                }
+                dom.getComponentRect(selectorRef, res => {
+                    // console.log(res)
+                    resolve(res.size)
+                })
+            })*/
+            // #endif
+        },
+        getParentData: function(parentName: string): any {
+            // 避免在created中去定义parent变量
+            // if (!this.parent) this.parent = {}
+            // 这里的本质原理是，通过获取父组件实例(也即类似up-radio的父组件up-radio-group的this)
+            // 将父组件this中对应的参数，赋值给本组件(up-radio的this)的parentData对象中对应的属性
+            // 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
+            // 此处并不会自动更新子组件的数据，而是依赖父组件up-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
+            // this.parent = uni.$u.$parent.call(this, parentName)
+            // if (this.parent.children) {
+            //     // 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
+            //     this.parent.children.indexOf(this) === -1 && this.parent.children.push(this)
+            // }
+            // if (this.parent && this.parentData) {
+            //     // 历遍parentData中的属性，将parent中的同名属性赋值给parentData
+            //     Object.keys(this.parentData).map((key) => {
+            //         this.parentData[key] = this.parent[key]
+            //     })
+            // }
+			return {}
+        },
+        // 阻止事件冒泡
+        preventEvent(e: object) {
+        //     e && typeof (e.stopPropagation) === 'function' && e.stopPropagation()
+        },
+        // 空操作
+        noop(e: object) {
+        //     this.preventEvent(e)
+        }
+    },
+    onReachBottom() {
+    //     uni.$emit('uOnReachBottom')
+    },
+    beforeDestroy() {
+        // 判断当前页面是否存在parent和chldren，一般在checkbox和checkbox-group父子联动的场景会有此情况
+        // 组件销毁时，移除子组件在父组件children数组中的实例，释放资源，避免数据混乱
+        // if (this.parent && test.array(this.parent.children)) {
+        //     // 组件销毁时，移除父组件中的children数组中对应的实例
+        //     const childrenList = this.parent.children
+        //     childrenList.map((child, index) => {
+        //         // 如果相等，则移除
+        //         if (child === this) {
+        //             childrenList.splice(index, 1)
+        //         }
+        //     })
+        // }
+    }
+})
diff --git a/src/uni_modules/uview-plus/libs/mixin/mpMixin.uts b/src/uni_modules/uview-plus/libs/mixin/mpMixin.uts
new file mode 100644
index 000000000..02727d830
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/mixin/mpMixin.uts
@@ -0,0 +1,10 @@
+import { defineMixin } from '../vue.uts'
+
+export const mpMixin = defineMixin({
+    // #ifdef MP-WEIXIN
+    // 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用flex属性
+    options: {
+        virtualHost: true
+    }
+    // #endif
+})
diff --git a/src/uni_modules/uview-plus/libs/mixin/mpShare.uts b/src/uni_modules/uview-plus/libs/mixin/mpShare.uts
new file mode 100644
index 000000000..caf53c3dd
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/mixin/mpShare.uts
@@ -0,0 +1,26 @@
+import { defineMixin } from '../vue'
+import { queryParams } from '../function/index'
+export const mpShare = defineMixin({
+    data() {
+        return {
+            mpShare: {
+                title: '', // 默认为小程序名称
+                path: '', // 默认为当前页面路径
+                imageUrl: '' // 默认为当前页面的截图 
+            }
+        }
+    },
+    async onLoad(options) {
+        var pages = getCurrentPages();
+        var page = pages[pages.length - 1];
+        this.mpShare.path = page.route + queryParams(options);
+    },
+    onShareAppMessage(res) {
+        if (res.from === 'button') {// 来自页面内分享按钮
+            console.log(res.target)
+        }
+        return this.mpShare;
+    }
+})
+
+export default mpShare
diff --git a/src/uni_modules/uview-plus/libs/mixin/openType.uts b/src/uni_modules/uview-plus/libs/mixin/openType.uts
new file mode 100644
index 000000000..61106f4f6
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/mixin/openType.uts
@@ -0,0 +1,27 @@
+import { defineMixin } from '../vue.uts'
+
+export const openType = defineMixin({
+    props: {
+        openType: String
+    },
+    methods: {
+        onGetUserInfo(event) {
+            this.$emit('getuserinfo', event.detail)
+        },
+        onContact(event) {
+            this.$emit('contact', event.detail)
+        },
+        onGetPhoneNumber(event) {
+            this.$emit('getphonenumber', event.detail)
+        },
+        onError(event) {
+            this.$emit('error', event.detail)
+        },
+        onLaunchApp(event) {
+            this.$emit('launchapp', event.detail)
+        },
+        onOpenSetting(event) {
+            this.$emit('opensetting', event.detail)
+        }
+    }
+})
diff --git a/src/uni_modules/uview-plus/libs/vue.uts b/src/uni_modules/uview-plus/libs/vue.uts
new file mode 100644
index 000000000..73886fb8f
--- /dev/null
+++ b/src/uni_modules/uview-plus/libs/vue.uts
@@ -0,0 +1,8 @@
+// #ifdef APP
+export * from 'vue'
+// #endif
+// #ifdef WEB
+export const defineMixin = (options: any) => {
+	return options
+}
+// #endif
\ No newline at end of file
diff --git a/src/uni_modules/wa-clipboard/changelog.md b/src/uni_modules/wa-clipboard/changelog.md
new file mode 100644
index 000000000..4a79fec85
--- /dev/null
+++ b/src/uni_modules/wa-clipboard/changelog.md
@@ -0,0 +1,4 @@
+## 1.0.1（2024-04-06）
+支持iOS
+## 1.0.0（2023-09-17）
+init
diff --git a/src/uni_modules/wa-clipboard/package.json b/src/uni_modules/wa-clipboard/package.json
new file mode 100644
index 000000000..ed8470e17
--- /dev/null
+++ b/src/uni_modules/wa-clipboard/package.json
@@ -0,0 +1,85 @@
+{
+  "id": "wa-clipboard",
+  "displayName": "wa-clipboard",
+  "version": "1.0.1",
+  "description": "uts的剪贴板API",
+  "keywords": [
+    "wa-clipboard",
+    "剪贴板",
+    "剪切板",
+    "复制粘贴"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.99"
+  },
+  "dcloudext": {
+    "type": "uts",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "n",
+          "vue3": "y"
+        },
+        "App": {
+          "app-android": "y",
+          "app-ios": "y"
+        },
+        "H5-mobile": {
+          "Safari": "n",
+          "Android Browser": "n",
+          "微信浏览器(Android)": "n",
+          "QQ浏览器(Android)": "n"
+        },
+        "H5-pc": {
+          "Chrome": "n",
+          "IE": "n",
+          "Edge": "n",
+          "Firefox": "n",
+          "Safari": "n"
+        },
+        "小程序": {
+          "微信": "n",
+          "阿里": "n",
+          "百度": "n",
+          "字节跳动": "n",
+          "QQ": "n",
+          "钉钉": "n",
+          "快手": "n",
+          "飞书": "n",
+          "京东": "n"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wa-clipboard/readme.md b/src/uni_modules/wa-clipboard/readme.md
new file mode 100644
index 000000000..ec1775cb9
--- /dev/null
+++ b/src/uni_modules/wa-clipboard/readme.md
@@ -0,0 +1,40 @@
+# uts剪切板
+
+目前支持uni-app x的App-Android和App-iOS。用于补充uni-app x目前没有剪贴板api的遗憾。也可以看源码作为uts插件开发的学习例子。
+
+Android使用是老版Android api，比较简单，编译时有个warning，不影响使用。
+
+未处理权限。
+
+导入插件到工程后，使用的示例代码如下。
+
+核心是导入的{setClipboardData,getClipboardData}，这2个方法。
+
+这个示例，界面上有一个输入框，2个按钮。set时把输入框里的文字set到剪切板。get时从剪切板获取文字打印到控制台。
+
+```ts
+<template>
+	<view style="padding: 10px;">
+		<input ref="inputclip" style="border: 1px;height: 36px;" />
+		<button @click="setCLIP">set</button>
+		<button @click="getCLIP">get</button>
+	</view>
+</template>
+
+<script>
+	import {setClipboardData,getClipboardData} from "@/uni_modules/wa-clipboard";
+	
+	export default {
+		methods: {
+			setCLIP() {
+				let t = (this.$refs["inputclip"] as UniInputElement).value
+				setClipboardData(t) // 写入剪贴板
+			},
+			getCLIP() {
+				console.log(getClipboardData()); // 获取剪贴板
+			}
+		}
+	}
+</script>
+
+```
\ No newline at end of file
diff --git a/src/uni_modules/wa-clipboard/utssdk/app-android/index.uts b/src/uni_modules/wa-clipboard/utssdk/app-android/index.uts
new file mode 100644
index 000000000..7206ff65f
--- /dev/null
+++ b/src/uni_modules/wa-clipboard/utssdk/app-android/index.uts
@@ -0,0 +1,33 @@
+import ClipData from "android.content.ClipData";
+// import ClipDescription from "android.content.ClipDescription";
+import ClipboardManager from "android.content.ClipboardManager";
+import Context from "android.content.Context";
+import { UTSAndroid } from "io.dcloud.uts";
+
+// export const setClipboardData : void = function () {
+// export function setClipboardData() : void {
+export function setClipboardData(data:string) : void {
+	const context = UTSAndroid.getAppContext();
+	if (context != null) {
+		const cm = context.getSystemService(
+			Context.CLIPBOARD_SERVICE
+		) as ClipboardManager;
+		cm.setText(data);
+		// return
+		// let cd = ClipData.newPlainText("label") as ClipData
+		// cm.setPrimaryClip(cd);  
+	}
+}
+
+export function getClipboardData() : string {
+	const context = UTSAndroid.getAppContext();
+	if (context != null) {
+		const cm = context.getSystemService(
+			Context.CLIPBOARD_SERVICE
+		) as ClipboardManager;
+		return cm.getText().toString()
+	}
+	else{
+		return ""
+	}
+}
diff --git a/src/uni_modules/wa-clipboard/utssdk/app-ios/index.uts b/src/uni_modules/wa-clipboard/utssdk/app-ios/index.uts
new file mode 100644
index 000000000..9162ed6f8
--- /dev/null
+++ b/src/uni_modules/wa-clipboard/utssdk/app-ios/index.uts
@@ -0,0 +1,10 @@
+import { UIPasteboard } from "UIKit"
+export function getClipboardData() : string {
+	let pasteboard = UIPasteboard.general
+	return (pasteboard.string == null) ? "" : pasteboard.string!
+}
+
+export function setClipboardData(data:string) : void {
+	let pasteboard = UIPasteboard.general
+	pasteboard.string = data
+}
\ No newline at end of file