From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-empty/u-empty.vue | 193 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 193 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-empty/u-empty.vue b/uview-ui/components/u-empty/u-empty.vue
new file mode 100644
index 0000000..2c77b24
--- /dev/null
+++ b/uview-ui/components/u-empty/u-empty.vue
@@ -0,0 +1,193 @@
+<template>
+ <view class="u-empty" v-if="show" :style="{
+ marginTop: marginTop + 'rpx'
+ }">
+ <u-icon
+ :name="src ? src : 'empty-' + mode"
+ :custom-style="iconStyle"
+ :label="text ? text : icons[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>
+ /**
+ * empty 鍐呭涓虹┖
+ * @description 璇ョ粍浠剁敤浜庨渶瑕佸姞杞藉唴瀹癸紝浣嗘槸鍔犺浇鐨勭涓�椤垫暟鎹氨涓虹┖锛屾彁绀轰竴涓�"娌℃湁鍐呭"鐨勫満鏅紝 鎴戜滑绮惧績鎸戦�変簡鍗佸嚑涓満鏅殑鍥炬爣锛屾柟渚挎偍浣跨敤銆�
+ * @tutorial https://www.uviewui.com/components/empty.html
+ * @property {String} color 鏂囧瓧棰滆壊锛堥粯璁�#c0c4cc锛�
+ * @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锛堥粯璁uto锛�
+ * @property {String Number} margin-top 缁勪欢璺濈涓婁竴涓厓绱犱箣闂寸殑璺濈锛堥粯璁�0锛�
+ * @property {Boolean} show 鏄惁鏄剧ず缁勪欢锛堥粯璁rue锛�
+ * @event {Function} click 鐐瑰嚮缁勪欢鏃惰Е鍙�
+ * @event {Function} close 鐐瑰嚮鍏抽棴鎸夐挳鏃惰Е鍙�
+ * @example <u-empty text="鎵�璋撲紛浜猴紝鍦ㄦ按涓�鏂�" mode="list"></u-empty>
+ */
+ export default {
+ name: "u-empty",
+ props: {
+ // 鍥炬爣璺緞
+ src: {
+ type: String,
+ default: ''
+ },
+ // 鎻愮ず鏂囧瓧
+ text: {
+ type: String,
+ default: ''
+ },
+ // 鏂囧瓧棰滆壊
+ color: {
+ type: String,
+ default: '#c0c4cc'
+ },
+ // 鍥炬爣鐨勯鑹�
+ iconColor: {
+ type: String,
+ default: '#c0c4cc'
+ },
+ // 鍥炬爣鐨勫ぇ灏�
+ iconSize: {
+ type: [String, Number],
+ default: 120
+ },
+ // 鏂囧瓧澶у皬锛屽崟浣峳px
+ fontSize: {
+ type: [String, Number],
+ default: 26
+ },
+ // 閫夋嫨棰勭疆鐨勫浘鏍囩被鍨�
+ mode: {
+ type: String,
+ default: 'data'
+ },
+ // 鍥炬爣瀹藉害锛屽崟浣峳px
+ imgWidth: {
+ type: [String, Number],
+ default: 120
+ },
+ // 鍥炬爣楂樺害锛屽崟浣峳px
+ imgHeight: {
+ type: [String, Number],
+ default: 'auto'
+ },
+ // 鏄惁鏄剧ず缁勪欢
+ show: {
+ type: Boolean,
+ default: true
+ },
+ // 缁勪欢璺濈涓婁竴涓厓绱犱箣闂寸殑璺濈
+ marginTop: {
+ type: [String, Number],
+ default: 0
+ },
+ iconStyle: {
+ type: Object,
+ default() {
+ return {}
+ }
+ }
+ },
+ data() {
+ return {
+ icons: {
+ car: '璐墿杞︿负绌�',
+ page: '椤甸潰涓嶅瓨鍦�',
+ search: '娌℃湁鎼滅储缁撴灉',
+ address: '娌℃湁鏀惰揣鍦板潃',
+ wifi: '娌℃湁WiFi',
+ order: '璁㈠崟涓虹┖',
+ coupon: '娌℃湁浼樻儬鍒�',
+ favor: '鏆傛棤鏀惰棌',
+ permission: '鏃犳潈闄�',
+ history: '鏃犲巻鍙茶褰�',
+ news: '鏃犳柊闂诲垪琛�',
+ message: '娑堟伅鍒楄〃涓虹┖',
+ list: '鍒楄〃涓虹┖',
+ data: '鏁版嵁涓虹┖'
+ },
+ // icons: [{
+ // icon: 'car',
+ // text: '璐墿杞︿负绌�'
+ // },{
+ // icon: 'page',
+ // text: '椤甸潰涓嶅瓨鍦�'
+ // },{
+ // icon: 'search',
+ // text: '娌℃湁鎼滅储缁撴灉'
+ // },{
+ // icon: 'address',
+ // text: '娌℃湁鏀惰揣鍦板潃'
+ // },{
+ // icon: 'wifi',
+ // text: '娌℃湁WiFi'
+ // },{
+ // icon: 'order',
+ // text: '璁㈠崟涓虹┖'
+ // },{
+ // icon: 'coupon',
+ // text: '娌℃湁浼樻儬鍒�'
+ // },{
+ // icon: 'favor',
+ // text: '鏆傛棤鏀惰棌'
+ // },{
+ // icon: 'permission',
+ // text: '鏃犳潈闄�'
+ // },{
+ // icon: 'history',
+ // text: '鏃犲巻鍙茶褰�'
+ // },{
+ // icon: 'news',
+ // text: '鏃犳柊闂诲垪琛�'
+ // },{
+ // icon: 'message',
+ // text: '娑堟伅鍒楄〃涓虹┖'
+ // },{
+ // icon: 'list',
+ // text: '鍒楄〃涓虹┖'
+ // },{
+ // icon: 'data',
+ // text: '鏁版嵁涓虹┖'
+ // }],
+
+ }
+ }
+ }
+</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>
--
Gitblit v1.9.3