123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- <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>
-
- 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
- },
-
- fontSize: {
- type: [String, Number],
- default: 26
- },
-
- mode: {
- type: String,
- default: 'data'
- },
-
- imgWidth: {
- type: [String, Number],
- default: 120
- },
-
- 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: '数据为空'
- },
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
- }
- }
- </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>
|