From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 15 七月 2025 11:46:57 +0800 Subject: [PATCH] 项目初始化 --- uni_modules/uview-ui/components/u-empty/u-empty.vue | 128 ++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 128 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-empty/u-empty.vue b/uni_modules/uview-ui/components/u-empty/u-empty.vue new file mode 100644 index 0000000..03d6a27 --- /dev/null +++ b/uni_modules/uview-ui/components/u-empty/u-empty.vue @@ -0,0 +1,128 @@ +<template> + <view + class="u-empty" + :style="[emptyStyle]" + v-if="show" + > + <u-icon + v-if="!isSrc" + :name="mode === 'message' ? 'chat' : `empty-${mode}`" + :size="iconSize" + :color="iconColor" + margin-top="14" + ></u-icon> + <image + v-else + :style="{ + width: $u.addUnit(width), + height: $u.addUnit(height), + }" + :src="icon" + mode="widthFix" + ></image> + <text + class="u-empty__text" + :style="[textStyle]" + >{{text ? text : icons[mode]}}</text> + <view class="u-empty__wrap" v-if="$slots.default || $slots.$default"> + <slot /> + </view> + </view> +</template> + +<script> + import props from './props.js'; + + /** + * empty 鍐呭涓虹┖ + * @description 璇ョ粍浠剁敤浜庨渶瑕佸姞杞藉唴瀹癸紝浣嗘槸鍔犺浇鐨勭涓�椤垫暟鎹氨涓虹┖锛屾彁绀轰竴涓�"娌℃湁鍐呭"鐨勫満鏅紝 鎴戜滑绮惧績鎸戦�変簡鍗佸嚑涓満鏅殑鍥炬爣锛屾柟渚挎偍浣跨敤銆� + * @tutorial https://www.uviewui.com/components/empty.html + * @property {String} icon 鍐呯疆鍥炬爣鍚嶇О锛屾垨鍥剧墖璺緞锛屽缓璁粷瀵硅矾寰� + * @property {String} text 鎻愮ず鏂囧瓧 + * @property {String} textColor 鏂囧瓧棰滆壊 (榛樿 '#c0c4cc' ) + * @property {String | Number} textSize 鏂囧瓧澶у皬 锛堥粯璁� 14 锛� + * @property {String} iconColor 鍥炬爣鐨勯鑹� 锛堥粯璁� '#c0c4cc' 锛� + * @property {String | Number} iconSize 鍥炬爣鐨勫ぇ灏� 锛堥粯璁� 90 锛� + * @property {String} mode 閫夋嫨棰勭疆鐨勫浘鏍囩被鍨� 锛堥粯璁� 'data' 锛� + * @property {String | Number} width 鍥炬爣瀹藉害锛屽崟浣峱x 锛堥粯璁� 160 锛� + * @property {String | Number} height 鍥炬爣楂樺害锛屽崟浣峱x 锛堥粯璁� 160 锛� + * @property {Boolean} show 鏄惁鏄剧ず缁勪欢 锛堥粯璁� true 锛� + * @property {String | Number} marginTop 缁勪欢璺濈涓婁竴涓厓绱犱箣闂寸殑璺濈锛岄粯璁x鍗曚綅 锛堥粯璁� 0 锛� + * @property {Object} customStyle 瀹氫箟闇�瑕佺敤鍒扮殑澶栭儴鏍峰紡 + * + * @event {Function} click 鐐瑰嚮缁勪欢鏃惰Е鍙� + * @event {Function} close 鐐瑰嚮鍏抽棴鎸夐挳鏃惰Е鍙� + * @example <u-empty text="鎵�璋撲紛浜猴紝鍦ㄦ按涓�鏂�" mode="list"></u-empty> + */ + export default { + name: "u-empty", + mixins: [uni.$u.mpMixin, uni.$u.mixin, props], + data() { + return { + icons: { + car: '璐墿杞︿负绌�', + page: '椤甸潰涓嶅瓨鍦�', + search: '娌℃湁鎼滅储缁撴灉', + address: '娌℃湁鏀惰揣鍦板潃', + wifi: '娌℃湁WiFi', + order: '璁㈠崟涓虹┖', + coupon: '娌℃湁浼樻儬鍒�', + favor: '鏆傛棤鏀惰棌', + permission: '鏃犳潈闄�', + history: '鏃犲巻鍙茶褰�', + news: '鏃犳柊闂诲垪琛�', + message: '娑堟伅鍒楄〃涓虹┖', + list: '鍒楄〃涓虹┖', + data: '鏁版嵁涓虹┖', + comment: '鏆傛棤璇勮', + } + } + }, + computed: { + // 缁勪欢鏍峰紡 + emptyStyle() { + const style = {} + style.marginTop = uni.$u.addUnit(this.marginTop) + // 鍚堝苟customStyle鏍峰紡锛屾鍙傛暟閫氳繃mixin涓殑props浼犻�� + return uni.$u.deepMerge(uni.$u.addStyle(this.customStyle), style) + }, + // 鏂囨湰鏍峰紡 + textStyle() { + const style = {} + style.color = this.textColor + style.fontSize = uni.$u.addUnit(this.textSize) + return style + }, + // 鍒ゆ柇icon鏄惁鍥剧墖璺緞 + isSrc() { + return this.icon.indexOf('/') >= 0 + } + } + } +</script> + +<style lang="scss" scoped> + @import '../../libs/css/components.scss'; + $u-empty-text-margin-top:20rpx !default; + $u-empty-slot-margin-top:20rpx !default; + + .u-empty { + @include flex; + flex-direction: column; + justify-content: center; + align-items: center; + + &__text { + @include flex; + justify-content: center; + align-items: center; + margin-top: $u-empty-text-margin-top; + } + } + .u-slot-wrap { + @include flex; + justify-content: center; + align-items: center; + margin-top:$u-empty-slot-margin-top; + } +</style> -- Gitblit v1.9.3