uview-pro 0.0.1

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

@@ -0,0 +1,288 @@
+<template>
+    <view
+        class="u-wrap"
+        :style="{
+            opacity: Number(opacity),
+            borderRadius: props.borderRadius + 'rpx',
+            // 因为time值需要改变,所以不直接用duration值(不能改变父组件prop传过来的值)
+            transition: `opacity ${Number(time) / 1000}s ${props.effect}`
+        }"
+        :class="'u-lazy-item-' + elIndex"
+    >
+        <view :class="'u-lazy-item-' + elIndex">
+            <image
+                :style="{ borderRadius: props.borderRadius + 'rpx', height: imgHeight }"
+                v-if="!isError"
+                class="u-lazy-item"
+                :src="isShow ? props.image : props.loadingImg"
+                :mode="props.imgMode"
+                @load="imgLoaded"
+                @error="loadError"
+                @tap="clickImg"
+            ></image>
+            <image
+                :style="{ borderRadius: props.borderRadius + 'rpx', height: imgHeight }"
+                class="u-lazy-item error"
+                v-else
+                :src="props.errorImg"
+                :mode="props.imgMode"
+                @load="errorImgLoaded"
+                @tap="clickImg"
+            ></image>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+
+defineOptions({ name: 'u-lazy-load' });
+
+/**
+ * lazyLoad 懒加载
+ * @description 懒加载使用的场景为：页面有很多图片时，APP会同时加载所有的图片，导致页面卡顿，各个位置的图片出现前后不一致等.
+ * @tutorial https://www.uviewui.com/components/lazyLoad.html
+ * @property {String | Number} index 用户自定义值，在事件触发时回调，用以区分是哪个图片
+ * @property {String} image 图片路径
+ * @property {String} loading-img 预加载时的占位图
+ * @property {String} error-img 图片加载出错时的占位图
+ * @property {String | Number} 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} img-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>
+ */
+
+const emit = defineEmits(['click', 'load', 'error']);
+
+const props = defineProps({
+    /** 用户自定义值，在事件触发时回调，用以区分是哪个图片 */
+    index: [Number, String],
+    /** 要显示的图片 */
+    image: {
+        type: String,
+        default: ''
+    },
+    /** 图片裁剪模式 */
+    imgMode: {
+        type: String,
+        default: 'widthFix'
+    },
+    /** 占位图片路径 */
+    loadingImg: {
+        type: String,
+        default:
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1zbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1zbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PD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'
+    },
+    // 加载失败的错误占位图
+    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'
+    }
+});
+const instance = getCurrentInstance();
+// 懒加载相关响应式变量
+const isShow = ref(false);
+const opacity = ref(1);
+const time = ref(Number(props.duration));
+const loadStatus = ref(''); // 默认是懒加载中的状态
+const isError = ref(false); // 图片加载失败
+const elIndex = ref('');
+
+// IntersectionObserver 实例
+let contentObserver: any = null;
+
+/**
+ * 将 threshold 从 rpx 转为 px
+ */
+const getThreshold = computed(() => {
+    // 先取绝对值，因为 threshold 可能是负数，最后根据 props.threshold 是正数或者负数，重新还原
+    const thresholdPx = uni.upx2px(Math.abs(Number(props.threshold)));
+    return Number(props.threshold) < 0 ? -thresholdPx : thresholdPx;
+});
+
+/**
+ * 计算图片的高度，可能为 auto，带 %，或者直接数值
+ */
+const imgHeight = computed(() => {
+    return $u.addUnit(props.height);
+});
+
+// 监听 isShow 变化，处理淡入淡出动画
+watch(isShow, nVal => {
+    // 如果是不开启过渡效果，直接返回
+    if (!props.isEffect) return;
+    time.value = 0;
+    // 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
+    opacity.value = 0;
+    // 延时30ms，否则在浏览器H5，过渡效果无效
+    setTimeout(() => {
+        time.value = Number(props.duration);
+        opacity.value = 1;
+    }, 30);
+});
+
+// 监听图片路径变化，重置状态，图片路径发生变化时，需要重新标记一些变量，否则会一直卡在某一个状态，比如isError
+watch(
+    () => props.image,
+    n => {
+        if (!n) {
+            // 如果传入null或者''，或者undefined，标记为错误状态
+            isError.value = true;
+        } else {
+            init();
+            isError.value = false;
+        }
+    }
+);
+
+/**
+ * 用于重新初始化
+ */
+function init() {
+    isError.value = false;
+    loadStatus.value = '';
+}
+
+/**
+ * 点击图片触发的事件
+ * loadlazy-还是懒加载中状态，loading-图片正在加载，loaded-图片加加载完成
+ */
+function clickImg() {
+    let whichImg = '';
+    // 如果isShow为false，意味着图片还没开始加载，点击的只能是最开始的占位图
+    if (!isShow.value) whichImg = 'lazyImg';
+    // 如果isError为true，意味着图片加载失败，这是只剩下错误的占位图，所以点击的只能是错误占位图
+    // 当然，也可以给错误的占位图元素绑定点击事件，看你喜欢~
+    else if (isError.value) whichImg = 'errorImg';
+    // 总共三张图片，除了两个占位图，剩下的只能是正常的那张图片了
+    else whichImg = 'realImg';
+    // 只通知当前图片的index
+    emit('click', props.index);
+}
+
+/**
+ * 图片加载完成事件
+ * 可能是加载占位图时触发，也可能是加载真正的图片完成时触发，通过 isShow 区分
+ */
+function imgLoaded() {
+    // 占位图加载完成
+    if (loadStatus.value === '') {
+        loadStatus.value = 'lazyed';
+    } else if (loadStatus.value === 'lazyed') {
+        // 真正的图片加载完成
+        loadStatus.value = 'loaded';
+        emit('load', props.index);
+    }
+}
+
+/**
+ * 错误的图片加载完成
+ */
+function errorImgLoaded() {
+    emit('error', props.index);
+}
+
+/**
+ * 图片加载失败
+ */
+function loadError() {
+    isError.value = true;
+}
+
+/**
+ * 断开 IntersectionObserver
+ */
+function disconnectObserver(observerName: string) {
+    if (observerName === 'contentObserver' && contentObserver) {
+        contentObserver.disconnect();
+        contentObserver = null;
+    }
+}
+
+onMounted(() => {
+    // 生成唯一 id
+    elIndex.value = $u.guid();
+    nextTick(() => {
+        uni.$once('uOnReachBottom', () => {
+            if (!isShow.value) isShow.value = true;
+        });
+        // mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果
+        setTimeout(() => {
+            // 这里是组件内获取布局状态，不能用uni.createIntersectionObserver，而必须用this.createIntersectionObserver
+            disconnectObserver('contentObserver');
+            contentObserver = uni.createIntersectionObserver(instance?.proxy);
+            // 要理解这里怎么计算的，请看这个：
+            // https://blog.csdn.net/qq_25324335/article/details/83687695
+            contentObserver.relativeToViewport({ bottom: getThreshold.value }).observe('.u-lazy-item-' + elIndex.value, (res: any) => {
+                if (res.intersectionRatio > 0) {
+                    // 懒加载状态改变
+                    isShow.value = true;
+                    // 如果图片已经加载，去掉监听，减少性能的消耗
+                    disconnectObserver('contentObserver');
+                }
+            });
+        }, 30);
+    });
+});
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-wrap {
+    background-color: #eee;
+    overflow: hidden;
+}
+
+.u-lazy-item {
+    width: 100%;
+    // 骗系统开启硬件加速
+    transform: transition3d(0, 0, 0);
+    // 防止图片加载“闪一下”
+    will-change: transform;
+    /* #ifndef APP-NVUE */
+    display: block;
+    /* #endif */
+}
+</style>

package/components/u-line/u-line.vue

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

package/components/u-line-progress/u-line-progress.vue

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

package/components/u-link/u-link.vue

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