uview-pro 0.2.4 → 0.3.1

package/components/u-keyboard/types.ts

@@ -1,40 +1,40 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-keyboard 组件 Props 类型定义
- * @description 自定义键盘面板属性
- */
-export const KeyboardProps = {
-    /** 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘 */
-    mode: { type: String, default: 'number' },
-    /** 是否显示键盘的"."符号 */
-    dotEnabled: { type: Boolean, default: true },
-    /** 是否显示顶部工具条 */
-    tooltip: { type: Boolean, default: true },
-    /** 是否显示工具条中间的提示 */
-    showTips: { type: Boolean, default: true },
-    /** 工具条中间的提示文字 */
-    tips: { type: String, default: '' },
-    /** 是否显示工具条左边的"取消"按钮 */
-    cancelBtn: { type: Boolean, default: true },
-    /** 是否显示工具条右边的"完成"按钮 */
-    confirmBtn: { type: Boolean, default: true },
-    /** 是否打乱键盘按键的顺序 */
-    random: { type: Boolean, default: false },
-    /** 是否开启底部安全区适配 */
-    safeAreaInsetBottom: { type: Boolean, default: false },
-    /** 是否允许通过点击遮罩关闭键盘 */
-    maskCloseAble: { type: Boolean, default: true },
-    /** 通过双向绑定控制键盘的弹出与收起 */
-    modelValue: { type: Boolean, default: false },
-    /** 是否显示遮罩 */
-    mask: { type: Boolean, default: true },
-    /** z-index值 */
-    zIndex: { type: [Number, String] as PropType<string | number>, default: '' },
-    /** 取消按钮的文字 */
-    cancelText: { type: String, default: '取消' },
-    /** 确认按钮的文字 */
-    confirmText: { type: String, default: '确认' }
-};
-
-export type KeyboardProps = ExtractPropTypes<typeof KeyboardProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-keyboard 组件 Props 类型定义
+ * @description 自定义键盘面板属性
+ */
+export const KeyboardProps = {
+    /** 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘 */
+    mode: { type: String, default: 'number' },
+    /** 是否显示键盘的"."符号 */
+    dotEnabled: { type: Boolean, default: true },
+    /** 是否显示顶部工具条 */
+    tooltip: { type: Boolean, default: true },
+    /** 是否显示工具条中间的提示 */
+    showTips: { type: Boolean, default: true },
+    /** 工具条中间的提示文字 */
+    tips: { type: String, default: '' },
+    /** 是否显示工具条左边的"取消"按钮 */
+    cancelBtn: { type: Boolean, default: true },
+    /** 是否显示工具条右边的"完成"按钮 */
+    confirmBtn: { type: Boolean, default: true },
+    /** 是否打乱键盘按键的顺序 */
+    random: { type: Boolean, default: false },
+    /** 是否开启底部安全区适配 */
+    safeAreaInsetBottom: { type: Boolean, default: false },
+    /** 是否允许通过点击遮罩关闭键盘 */
+    maskCloseAble: { type: Boolean, default: true },
+    /** 通过双向绑定控制键盘的弹出与收起 */
+    modelValue: { type: Boolean, default: false },
+    /** 是否显示遮罩 */
+    mask: { type: Boolean, default: true },
+    /** z-index值 */
+    zIndex: { type: [Number, String] as PropType<string | number>, default: '' },
+    /** 取消按钮的文字 */
+    cancelText: { type: String, default: '取消' },
+    /** 确认按钮的文字 */
+    confirmText: { type: String, default: '确认' }
+};
+
+export type KeyboardProps = ExtractPropTypes<typeof KeyboardProps>;

package/components/u-keyboard/u-keyboard.vue

@@ -1,169 +1,178 @@
-<template>
-    <u-popup
-        :mask="mask"
-        :maskCloseAble="maskCloseAble"
-        mode="bottom"
-        :popup="false"
-        v-model="popupValue"
-        length="auto"
-        :safeAreaInsetBottom="safeAreaInsetBottom"
-        @close="popupClose"
-        :zIndex="uZIndex"
-    >
-        <slot />
-        <view class="u-tooltip" v-if="tooltip">
-            <view class="u-tooltip-item u-tooltip-cancel" hover-class="u-tooltip-cancel-hover" @tap="onCancel">
-                {{ cancelBtn ? cancelText : '' }}
-            </view>
-            <view v-if="showTips" class="u-tooltip-item u-tooltip-tips">
-                {{ tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘' }}
-            </view>
-            <view
-                v-if="confirmBtn"
-                @tap="onConfirm"
-                class="u-tooltip-item u-tooltips-submit"
-                hover-class="u-tooltips-submit-hover"
-            >
-                {{ confirmBtn ? confirmText : '' }}
-            </view>
-        </view>
-        <block v-if="mode == 'number' || mode == 'card'">
-            <u-number-keyboard
-                :random="random"
-                @backspace="backspace"
-                @change="change"
-                :mode="mode"
-                :dotEnabled="dotEnabled"
-            ></u-number-keyboard>
-        </block>
-        <block v-else>
-            <u-car-keyboard :random="random" @backspace="backspace" @change="change"></u-car-keyboard>
-        </block>
-    </u-popup>
-</template>
-
-<script setup lang="ts">
-import { KeyboardProps } from './types';
-import { computed } from 'vue';
-
-defineOptions({
-    name: 'u-keyboard'
-});
-
-/**
- * keyboard 键盘
- * @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
- * @tutorial https://uviewpro.cn/zh/components/keyboard.html
- * @property {String} mode 键盘类型，见官网基本使用的说明（默认number）
- * @property {Boolean} dot-enabled 是否显示"."按键，只在mode=number时有效（默认true）
- * @property {Boolean} tooltip 是否显示键盘顶部工具条（默认true）
- * @property {String} tips 工具条中间的提示文字，见上方基本使用的说明，如不需要，请传""空字符
- * @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮（默认true）
- * @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮（默认true）
- * @property {Boolean} mask 是否显示遮罩（默认true）
- * @property {String} confirm-text 确认按钮的文字
- * @property {String} cancel-text 取消按钮的文字
- * @property {Number String} z-index 弹出键盘的z-index值（默认1075）
- * @property {Boolean} random 是否打乱键盘按键的顺序（默认false）
- * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
- * @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘（默认true）
- * @event {Function} change 按键被点击(不包含退格键被点击)
- * @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
- * @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
- * @event {Function} backspace 键盘退格键被点击
- * @example <u-keyboard mode="number" v-model="show"></u-keyboard>
- */
-
-const props = defineProps(KeyboardProps);
-const emit = defineEmits(['change', 'update:modelValue', 'confirm', 'cancel', 'backspace']);
-
-const uZIndex = computed(() => (props.zIndex ? props.zIndex : 1075));
-
-const popupValue = computed({
-    get: () => props.modelValue,
-    set: (val: boolean) => emit('update:modelValue', val)
-});
-
-/**
- * 按键被点击(不包含退格键被点击)
- */
-function change(e: any) {
-    emit('change', e);
-}
-
-/**
- * 键盘关闭
- */
-function popupClose() {
-    emit('update:modelValue', false);
-}
-
-/**
- * 输入完成
- */
-function onConfirm() {
-    popupClose();
-    emit('confirm');
-}
-
-/**
- * 取消输入
- */
-function onCancel() {
-    popupClose();
-    emit('cancel');
-}
-
-/**
- * 退格键
- */
-function backspace() {
-    emit('backspace');
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-keyboard {
-    position: relative;
-    z-index: 1003;
-}
-
-.u-tooltip {
-    @include vue-flex;
-    justify-content: space-between;
-}
-
-.u-tooltip-item {
-    color: #333333;
-    flex: 0 0 33.333333%;
-    text-align: center;
-    padding: 20rpx 10rpx;
-    font-size: 28rpx;
-}
-
-.u-tooltips-submit {
-    text-align: right;
-    flex-grow: 1;
-    flex-wrap: 0;
-    padding-right: 40rpx;
-    color: $u-type-primary;
-}
-
-.u-tooltip-cancel {
-    text-align: left;
-    flex-grow: 1;
-    flex-wrap: 0;
-    padding-left: 40rpx;
-    color: #888888;
-}
-
-.u-tooltips-submit-hover {
-    color: $u-type-success;
-}
-
-.u-tooltip-cancel-hover {
-    color: #333333;
-}
-</style>
+<template>
+    <u-popup
+        :mask="mask"
+        :maskCloseAble="maskCloseAble"
+        mode="bottom"
+        :popup="false"
+        v-model="popupValue"
+        length="auto"
+        :safeAreaInsetBottom="safeAreaInsetBottom"
+        @close="popupClose"
+        :zIndex="uZIndex"
+    >
+        <slot />
+        <view class="u-tooltip" v-if="tooltip">
+            <view class="u-tooltip-item u-tooltip-cancel" hover-class="u-tooltip-cancel-hover" @tap="onCancel">
+                {{ cancelBtn ? cancelText : '' }}
+            </view>
+            <view v-if="showTips" class="u-tooltip-item u-tooltip-tips">
+                {{ tips ? tips : mode == 'number' ? '数字键盘' : mode == 'card' ? '身份证键盘' : '车牌号键盘' }}
+            </view>
+            <view
+                v-if="confirmBtn"
+                @tap="onConfirm"
+                class="u-tooltip-item u-tooltips-submit"
+                hover-class="u-tooltips-submit-hover"
+            >
+                {{ confirmBtn ? confirmText : '' }}
+            </view>
+        </view>
+        <block v-if="mode == 'number' || mode == 'card'">
+            <u-number-keyboard
+                :random="random"
+                @backspace="backspace"
+                @change="change"
+                :mode="mode"
+                :dotEnabled="dotEnabled"
+            ></u-number-keyboard>
+        </block>
+        <block v-else>
+            <u-car-keyboard :random="random" @backspace="backspace" @change="change"></u-car-keyboard>
+        </block>
+    </u-popup>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-keyboard',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { KeyboardProps } from './types';
+import { computed } from 'vue';
+
+/**
+ * keyboard 键盘
+ * @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
+ * @tutorial https://uviewpro.cn/zh/components/keyboard.html
+ * @property {String} mode 键盘类型，见官网基本使用的说明（默认number）
+ * @property {Boolean} dot-enabled 是否显示"."按键，只在mode=number时有效（默认true）
+ * @property {Boolean} tooltip 是否显示键盘顶部工具条（默认true）
+ * @property {String} tips 工具条中间的提示文字，见上方基本使用的说明，如不需要，请传""空字符
+ * @property {Boolean} cancel-btn 是否显示工具条左边的"取消"按钮（默认true）
+ * @property {Boolean} confirm-btn 是否显示工具条右边的"完成"按钮（默认true）
+ * @property {Boolean} mask 是否显示遮罩（默认true）
+ * @property {String} confirm-text 确认按钮的文字
+ * @property {String} cancel-text 取消按钮的文字
+ * @property {Number String} z-index 弹出键盘的z-index值（默认1075）
+ * @property {Boolean} random 是否打乱键盘按键的顺序（默认false）
+ * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
+ * @property {Boolean} mask-close-able 是否允许点击遮罩收起键盘（默认true）
+ * @event {Function} change 按键被点击(不包含退格键被点击)
+ * @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
+ * @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
+ * @event {Function} backspace 键盘退格键被点击
+ * @example <u-keyboard mode="number" v-model="show"></u-keyboard>
+ */
+
+const props = defineProps(KeyboardProps);
+const emit = defineEmits(['change', 'update:modelValue', 'confirm', 'cancel', 'backspace']);
+
+const uZIndex = computed(() => (props.zIndex ? props.zIndex : 1075));
+
+const popupValue = computed({
+    get: () => props.modelValue,
+    set: (val: boolean) => emit('update:modelValue', val)
+});
+
+/**
+ * 按键被点击(不包含退格键被点击)
+ */
+function change(e: any) {
+    emit('change', e);
+}
+
+/**
+ * 键盘关闭
+ */
+function popupClose() {
+    emit('update:modelValue', false);
+}
+
+/**
+ * 输入完成
+ */
+function onConfirm() {
+    popupClose();
+    emit('confirm');
+}
+
+/**
+ * 取消输入
+ */
+function onCancel() {
+    popupClose();
+    emit('cancel');
+}
+
+/**
+ * 退格键
+ */
+function backspace() {
+    emit('backspace');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-keyboard {
+    position: relative;
+    z-index: 1003;
+}
+
+.u-tooltip {
+    @include vue-flex;
+    justify-content: space-between;
+}
+
+.u-tooltip-item {
+    color: #333333;
+    flex: 0 0 33.333333%;
+    text-align: center;
+    padding: 20rpx 10rpx;
+    font-size: 28rpx;
+}
+
+.u-tooltips-submit {
+    text-align: right;
+    flex-grow: 1;
+    flex-wrap: 0;
+    padding-right: 40rpx;
+    color: $u-type-primary;
+}
+
+.u-tooltip-cancel {
+    text-align: left;
+    flex-grow: 1;
+    flex-wrap: 0;
+    padding-left: 40rpx;
+    color: #888888;
+}
+
+.u-tooltips-submit-hover {
+    color: $u-type-success;
+}
+
+.u-tooltip-cancel-hover {
+    color: #333333;
+}
+</style>

package/components/u-lazy-load/types.ts

@@ -1,37 +1,37 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { Effect, ImgMode } from '../../types/global';
-
-/**
- * u-lazy-load 组件 Props 类型定义
- * @description 懒加载图片组件属性
- */
-export const LazyLoadProps = {
-    /** 用户自定义值，在事件触发时回调，用以区分是哪个图片 */
-    index: [Number, String],
-    /** 要显示的图片 */
-    image: { type: String, default: '' },
-    /** 图片裁剪模式 */
-    imgMode: { type: String as PropType<ImgMode>, default: 'widthFix' },
-    /** 占位图片路径 */
-    loadingImg: {
-        type: String,
-        default:
-            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1zbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1zbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PD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'
-    },
-    /** 加载失败的错误占位图 */
-    errorImg: { type: String },
-    /** 图片进入可见区域前多少像素时，单位rpx，开始加载图片 */
-    threshold: { type: [String, Number] as PropType<string | number>, default: 100 },
-    /** 淡入淡出动画的过渡时间 */
-    duration: { type: [String, Number] as PropType<string | number>, default: 500 },
-    /** 渡效果的速度曲线 */
-    effect: { type: String as PropType<Effect>, default: 'ease-in-out' },
-    /** 是否使用过渡效果 */
-    isEffect: { type: Boolean, default: true },
-    /** 圆角值 */
-    borderRadius: { type: [String, Number] as PropType<string | number>, default: 0 },
-    /** 图片高度，单位rpx */
-    height: { type: [String, Number] as PropType<string | number>, default: 450 }
-};
-
-export type LazyLoadProps = ExtractPropTypes<typeof LazyLoadProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { Effect, ImgMode } from '../../types/global';
+
+/**
+ * u-lazy-load 组件 Props 类型定义
+ * @description 懒加载图片组件属性
+ */
+export const LazyLoadProps = {
+    /** 用户自定义值，在事件触发时回调，用以区分是哪个图片 */
+    index: [Number, String],
+    /** 要显示的图片 */
+    image: { type: String, default: '' },
+    /** 图片裁剪模式 */
+    imgMode: { type: String as PropType<ImgMode>, default: 'widthFix' },
+    /** 占位图片路径 */
+    loadingImg: {
+        type: String,
+        default:
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1zbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1zbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PDw62trZubm9zc3Li4uKGhoebm5tLS0uHh4c3Nzaenp729vcjIyLKysuvr6141L40AAAcXSURBVHja7NzZlqpGAEBR5lG0//9rIw7IJKJi4or7PGTdtN10wr5SVAEGf/qqArsAiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAg+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 },
+    /** 图片进入可见区域前多少像素时，单位rpx，开始加载图片 */
+    threshold: { type: [String, Number] as PropType<string | number>, default: 100 },
+    /** 淡入淡出动画的过渡时间 */
+    duration: { type: [String, Number] as PropType<string | number>, default: 500 },
+    /** 渡效果的速度曲线 */
+    effect: { type: String as PropType<Effect>, default: 'ease-in-out' },
+    /** 是否使用过渡效果 */
+    isEffect: { type: Boolean, default: true },
+    /** 圆角值 */
+    borderRadius: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 图片高度，单位rpx */
+    height: { type: [String, Number] as PropType<string | number>, default: 450 }
+};
+
+export type LazyLoadProps = ExtractPropTypes<typeof LazyLoadProps>;