看板

2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
@@ -0,0 +1,38 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * u-empty 组件 Props 类型定义
+ */
+export const EmptyProps = {
+    ...baseProps,
+    /** 图标路径 */
+    src: { type: String, default: '' },
+    /** 提示文字 */
+    text: { type: String, default: '' },
+    /** 文字颜色 */
+    color: { type: String, default: 'var(--u-light-color)' },
+    /** 图标的颜色 */
+    iconColor: { type: String, default: 'var(--u-light-color)' },
+    /** 图标的大小 */
+    iconSize: { type: [String, Number] as PropType<string | number>, default: 120 },
+    /** 文字大小，单位rpx */
+    fontSize: { type: [String, Number] as PropType<string | number>, default: 26 },
+    /** 选择预置的图标类型 */
+    mode: { type: String, default: 'data' },
+    /** 图标宽度，单位rpx */
+    imgWidth: { type: [String, Number] as PropType<string | number>, default: 120 },
+    /** 图标高度，单位rpx */
+    imgHeight: { type: [String, Number] as PropType<string | number>, default: 'auto' },
+    /** 是否显示组件 */
+    show: { type: Boolean, default: true },
+    /** 组件距离上一个元素之间的距离 */
+    marginTop: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 图标自定义样式 */
+    iconStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+};
+
+/**
+ * u-empty 组件 Props 类型
+ */
+export type EmptyProps = ExtractPropTypes<typeof EmptyProps>;
@@ -0,0 +1,108 @@
+<template>
+    <view
+        v-if="show"
+        class="u-empty"
+        :class="customClass"
+        :style="$u.toStyle({ marginTop: marginTop + 'rpx' }, customStyle)"
+    >
+        <u-icon
+            :name="src ? src : 'empty-' + mode"
+            :custom-style="iconStyle"
+            :label="text ? text : (icons as any)[mode]"
+            label-pos="bottom"
+            :label-color="color"
+            :label-size="fontSize"
+            :size="iconSize"
+            :color="iconColor"
+            margin-top="14"
+        ></u-icon>
+        <view class="u-slot-wrap">
+            <slot name="bottom"></slot>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-empty',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { EmptyProps } from './types';
+import { $u, useLocale } from '../../';
+import { computed } from 'vue';
+
+const { t } = useLocale();
+
+/**
+ * empty 内容为空
+ * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
+ * @tutorial https://uviewpro.cn/zh/components/empty.html
+ * @property {String} color 文字颜色（默认var(--u-light-color)）
+ * @property {String} text 文字提示（默认“无内容”）
+ * @property {String} src 自定义图标路径，如定义，mode参数会失效
+ * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
+ * @property {String} mode 内置的图标，见官网说明（默认data）
+ * @property {String Number} img-width 图标的宽度，单位rpx（默认240）
+ * @property {String} img-height 图标的高度，单位rpx（默认auto）
+ * @property {String Number} margin-top 组件距离上一个元素之间的距离（默认0）
+ * @property {Boolean} show 是否显示组件（默认true）
+ * @event {Function} click 点击组件时触发
+ * @event {Function} close 点击关闭按钮时触发
+ * @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
+ */
+const props = defineProps(EmptyProps);
+
+/**
+ * 预置图标对应的提示文字
+ */
+const icons = computed(() => {
+    return {
+        car: t('uEmpty.car'),
+        page: t('uEmpty.page'),
+        search: t('uEmpty.search'),
+        address: t('uEmpty.address'),
+        wifi: t('uEmpty.wifi'),
+        order: t('uEmpty.order'),
+        coupon: t('uEmpty.coupon'),
+        favor: t('uEmpty.favor'),
+        permission: t('uEmpty.permission'),
+        history: t('uEmpty.history'),
+        news: t('uEmpty.news'),
+        message: t('uEmpty.message'),
+        list: t('uEmpty.list'),
+        data: t('uEmpty.data')
+    };
+});
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-empty {
+    @include vue-flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.u-image {
+    margin-bottom: 20rpx;
+}
+
+.u-slot-wrap {
+    @include vue-flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20rpx;
+}
+</style>