73 lines
1.3 KiB
Vue
73 lines
1.3 KiB
Vue
<template>
|
||
<view class="box">
|
||
<image :src="image?image:images[mode]"></image>
|
||
<slot v-if="!text">
|
||
<view class="hiht">暂无商品，去<text @click="$emit('click')">添加商品</text></view>
|
||
</slot>
|
||
<view class="hiht" v-if="text" @click="$emit('click')">{{text}}</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* steps 内容为空
|
||
* @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景
|
||
* @property {String} mode 设置模式（默认list）
|
||
*/
|
||
export default {
|
||
name: 'd-empty',
|
||
props: {
|
||
mode: {
|
||
type: String,
|
||
default: 'list'
|
||
},
|
||
text: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
image: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
images: {
|
||
type: [Object,Array],
|
||
default: () => {
|
||
return {
|
||
'list': '../../static/image/list.png',
|
||
'search': '../../static/image/search.png'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
padding: 32rpx 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
|
||
image {
|
||
width: 200rpx;
|
||
height: 173rpx;
|
||
}
|
||
|
||
.hiht {
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #6C7380;
|
||
margin-top: 32rpx;
|
||
text-align: center;
|
||
text {
|
||
color: #6ACDBB;
|
||
}
|
||
}
|
||
</style>
|