uview-plus 3.1.51 → 3.2.3

package/components/u-lazy-load/u-lazy-load.vue

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

package/components/u-picker/u-picker.vue

@@ -38,7 +38,8 @@
 						:style="{
 							height: $u.addUnit(itemHeight),
 							lineHeight: $u.addUnit(itemHeight),
-							fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
+							fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal',
+							display: 'block'
 						}"
 					>{{ getItemText(item1) }}</view>
 				</picker-view-column>
@@ -194,6 +195,8 @@ export default {
 		setColumnValues(columnIndex, values) {
 			// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
 			this.innerColumns.splice(columnIndex, 1, values)
+            // 替换完成之后将修改列之后的已选值置空
+			this.setLastIndex(this.innerIndex.slice(0, columnIndex))
 			// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
 			let tmpIndex = uni.$u.deepClone(this.innerIndex)
 			for (let i = 0; i < this.innerColumns.length; i++) {

package/components/u-popup/u-popup.vue

@@ -57,7 +57,7 @@
 	 * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
 	 * @property {String}			mode				弹出方向（默认 'bottom' ）
 	 * @property {String | Number}	duration			动画时长，单位ms （默认 300 ）
-	 * @property {String | Number}	overlayDuration			遮罩层动画时长，单位ms （默认 350 ）
+	 * @property {String | Number}	overlayDuration		遮罩层动画时长，单位ms （默认 350 ）
 	 * @property {Boolean}			closeable			是否显示关闭图标（默认 false ）
 	 * @property {Object | String}	overlayStyle		自定义遮罩的样式
 	 * @property {String | Number}	overlayOpacity		遮罩透明度，0-1之间（默认 0.5）

package/components/u-read-more/u-read-more.vue

@@ -1,160 +1,164 @@
-<template>
-	<view class="u-read-more">
-		<view
-		    class="u-read-more__content"
-		    :style="{
-				height: isLongContent && status === 'close' ? $u.addUnit(showHeight) : $u.addUnit(contentHeight),
-				textIndent: textIndent
-			}"
-		>
-			<view
-			    class="u-read-more__content__inner"
-			    ref="u-read-more__content__inner"
-			    :class="[elId]"
-			>
-				<slot></slot>
-			</view>
-		</view>
-		<view
-		    class="u-read-more__toggle"
-		    :style="[innerShadowStyle]"
-		    v-if="isLongContent"
-		>
-			<slot name="toggle">
-				<view
-				    class="u-read-more__toggle__text"
-				    @tap="toggleReadMore"
-				>
-					<u--text
-					    :text="status === 'close' ? closeText : openText"
-					    :color="color"
-					    :size="fontSize"
-					    :lineHeight="fontSize"
-					    margin="0 5px 0 0"
-					></u--text>
-					<view class="u-read-more__toggle__icon">
-						<u-icon
-						    :color="color"
-						    :size="fontSize + 2"
-						    :name="status === 'close' ? 'arrow-down' : 'arrow-up'"
-						></u-icon>
-					</view>
-				</view>
-			</slot>
-		</view>
-	</view>
-</template>
-
-<script>
-	// #ifdef APP-NVUE
-	const dom = uni.requireNativePlugin('dom')
-	// #endif
-	import props from './props.js';
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
-	/**
-	 * readMore 阅读更多
-	 * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
-	 * @tutorial https://ijry.github.io/uview-plus/components/readMore.html
-	 * @property {String | Number}	showHeight	内容超出此高度才会显示展开全文按钮，单位px（默认 400 ）
-	 * @property {Boolean}			toggle		展开后是否显示收起按钮（默认 false ）
-	 * @property {String}			closeText	关闭时的提示文字（默认 '展开阅读全文' ）
-	 * @property {String}			openText	展开时的提示文字（默认 '收起' ）
-	 * @property {String}			color		提示文字的颜色（默认 '#2979ff' ）
-	 * @property {String | Number}	fontSize	提示文字的大小，单位px （默认 14 ）
-	 * @property {Object}			shadowStyle	显示阴影的样式
-	 * @property {String}			textIndent	段落首行缩进的字符个数 （默认 '2em' ）
-	 * @property {String | Number}	name		用于在 open 和 close 事件中当作回调参数返回
-	 * @event {Function} open 内容被展开时触发
-	 * @event {Function} close 内容被收起时触发
-	 * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
-	 */
-	export default {
-		name: 'u-read-more',
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				isLongContent: false, // 是否需要隐藏一部分内容
-				status: 'close', // 当前隐藏与显示的状态，close-收起状态，open-展开状态
-				elId: uni.$u.guid(), // 生成唯一class
-				contentHeight: 100, // 内容高度
-			}
-		},
-		computed: {
-			// 展开后无需阴影，收起时才需要阴影样式
-			innerShadowStyle() {
-				if (this.status === 'open') return {}
-				else return this.shadowStyle
-			}
-		},
-		mounted() {
-			this.init()
-		},
-		emits: ["open", "close"],
-		methods: {
-			async init() {
-				this.getContentHeight().then(height => {
-					this.contentHeight = height
-					// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
-					if (height > uni.$u.getPx(this.showHeight)) {
-						this.isLongContent = true
-						this.status = 'close'
-					}
-				})
-			},
-			// 获取内容的高度
-			async getContentHeight() {
-				// 延时一定时间再获取节点
-				await uni.$u.sleep(30)
-				return new Promise(resolve => {
-					// #ifndef APP-NVUE
-					this.$uGetRect('.' + this.elId).then(res => {
-						resolve(res.height)
-					})
-					// #endif
-
-					// #ifdef APP-NVUE
-					const ref = this.$refs['u-read-more__content__inner']
-					dom.getComponentRect(ref, (res) => {
-						resolve(res.size.height)
-					})
-					// #endif
-				})
-			},
-			// 展开或者收起
-			toggleReadMore() {
-				this.status = this.status === 'close' ? 'open' : 'close'
-				// 如果toggle为false，隐藏"收起"部分的内容
-				if (this.toggle == false) this.isLongContent = false
-				// 发出打开或者收齐的事件
-				this.$emit(this.status, this.name)
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-@import "../../libs/css/components.scss";
-
-.u-read-more {
-
-	&__content {
-		overflow: hidden;
-		color: $u-content-color;
-		font-size: 15px;
-		text-align: left;
-	}
-
-	&__toggle {
-		@include flex;
-		justify-content: center;
-
-		&__text {
-			@include flex;
-			align-items: center;
-			justify-content: center;
-			margin-top: 5px;
-		}
-	}
-}
-</style>
+<template>
+	<view class="u-read-more">
+		<view
+		    class="u-read-more__content"
+		    :style="{
+				height: isLongContent && status === 'close' ? $u.addUnit(showHeight) : $u.addUnit(contentHeight),
+				textIndent: textIndent
+			}"
+		>
+			<view
+			    class="u-read-more__content__inner"
+			    ref="u-read-more__content__inner"
+			    :class="[elId]"
+			>
+				<slot></slot>
+			</view>
+		</view>
+		<view
+		    class="u-read-more__toggle"
+		    :style="[innerShadowStyle]"
+		    v-if="isLongContent"
+		>
+			<slot name="toggle">
+				<view
+				    class="u-read-more__toggle__text"
+				    @tap="toggleReadMore"
+				>
+					<up-text
+					    :text="status === 'close' ? closeText : openText"
+					    :color="color"
+					    :size="fontSize"
+					    :lineHeight="fontSize"
+					    margin="0 5px 0 0"
+					></up-text>
+					<view class="u-read-more__toggle__icon">
+						<u-icon
+						    :color="color"
+						    :size="fontSize + 2"
+						    :name="status === 'close' ? 'arrow-down' : 'arrow-up'"
+						></u-icon>
+					</view>
+				</view>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	import props from './props.js';
+	import mpMixin from '../../libs/mixin/mpMixin.js';
+	import mixin from '../../libs/mixin/mixin.js';
+	/**
+	 * readMore 阅读更多
+	 * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
+	 * @tutorial https://ijry.github.io/uview-plus/components/readMore.html
+	 * @property {String | Number}	showHeight	内容超出此高度才会显示展开全文按钮，单位px（默认 400 ）
+	 * @property {Boolean}			toggle		展开后是否显示收起按钮（默认 false ）
+	 * @property {String}			closeText	关闭时的提示文字（默认 '展开阅读全文' ）
+	 * @property {String}			openText	展开时的提示文字（默认 '收起' ）
+	 * @property {String}			color		提示文字的颜色（默认 '#2979ff' ）
+	 * @property {String | Number}	fontSize	提示文字的大小，单位px （默认 14 ）
+	 * @property {Object}			shadowStyle	显示阴影的样式
+	 * @property {String}			textIndent	段落首行缩进的字符个数 （默认 '2em' ）
+	 * @property {String | Number}	name		用于在 open 和 close 事件中当作回调参数返回
+	 * @event {Function} open 内容被展开时触发
+	 * @event {Function} close 内容被收起时触发
+	 * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
+	 */
+	export default {
+		name: 'u-read-more',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				isLongContent: false, // 是否需要隐藏一部分内容
+				status: 'close', // 当前隐藏与显示的状态，close-收起状态，open-展开状态
+				elId: uni.$u.guid(), // 生成唯一class
+				contentHeight: 100, // 内容高度
+			}
+		},
+		computed: {
+			// 展开后无需阴影，收起时才需要阴影样式
+			innerShadowStyle() {
+				if (this.status === 'open') return {}
+				else return this.shadowStyle
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		emits: ["open", "close"],
+		methods: {
+			async init() {
+				this.getContentHeight().then(height => {
+					this.contentHeight = height
+					// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
+					if (height > uni.$u.getPx(this.showHeight)) {
+						this.isLongContent = true
+						this.status = 'close'
+					} else {
+						// https://github.com/ijry/uview-plus/issues/270
+						this.isLongContent = false
+						this.status = 'close'
+					}
+				})
+			},
+			// 获取内容的高度
+			async getContentHeight() {
+				// 延时一定时间再获取节点
+				await uni.$u.sleep(30)
+				return new Promise(resolve => {
+					// #ifndef APP-NVUE
+					this.$uGetRect('.' + this.elId).then(res => {
+						resolve(res.height)
+					})
+					// #endif
+
+					// #ifdef APP-NVUE
+					const ref = this.$refs['u-read-more__content__inner']
+					dom.getComponentRect(ref, (res) => {
+						resolve(res.size.height)
+					})
+					// #endif
+				})
+			},
+			// 展开或者收起
+			toggleReadMore() {
+				this.status = this.status === 'close' ? 'open' : 'close'
+				// 如果toggle为false，隐藏"收起"部分的内容
+				if (this.toggle == false) this.isLongContent = false
+				// 发出打开或者收齐的事件
+				this.$emit(this.status, this.name)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+.u-read-more {
+
+	&__content {
+		overflow: hidden;
+		color: $u-content-color;
+		font-size: 15px;
+		text-align: left;
+	}
+
+	&__toggle {
+		@include flex;
+		justify-content: center;
+
+		&__text {
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			margin-top: 5px;
+		}
+	}
+}
+</style>

package/components/u-slider/u-slider.vue

@@ -1,7 +1,7 @@
 <template>
 	<view
 		class="u-slider"
-		:style="[$u.addStyle(customStyle)]"
+		:style="[addStyle(customStyle)]"
 	>
 		<slider
 			:min="min"
@@ -10,7 +10,7 @@
 			:value="modelValue"
 			:activeColor="activeColor"
 			:backgroundColor="inactiveColor"
-			:blockSize="$u.getPx(blockSize)"
+			:blockSize="getPx(blockSize)"
 			:blockColor="blockColor"
 			:showValue="showValue"
 			:disabled="disabled"
@@ -20,15 +20,15 @@
 	</view>
 </template>
 
-<script>
+<script>
 	import props from './props.js';
 	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
+	import mixin from '../../libs/mixin/mixin.js';
 	export default {
-		name: 'u--slider',
+		name: 'up-slider',
 		mixins: [mpMixin, mixin, props],
 		emits: ["changing", "change", "update:modelValue"],
-		methods: {
+		methods: {
 			// 拖动过程中触发
 			changingHandler(e) {
 				const {