y-Empty.vue 953 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <template>
  2. <view class="empty-wrap" :style="{height: height + 'px'}">
  3. <view class="img-box"><image src="@/static/img/img_empty.png" mode="widthFix" class="img"></image></view>
  4. <p class="empty-text">{{emptyText}}</p>
  5. <slot></slot>
  6. </view>
  7. </template>
  8. <script>
  9. export default{
  10. props:{
  11. emptyText: {
  12. type: String,
  13. default: '暂无数据哦!'
  14. },
  15. height: {
  16. type: [Number,String],
  17. default: 300
  18. }
  19. },
  20. data(){
  21. return{
  22. }
  23. }
  24. }
  25. </script>
  26. <style lang="less" scoped>
  27. .empty-wrap {
  28. display: flex;
  29. align-items: center;
  30. justify-content: center;
  31. flex-direction: column;
  32. width: 100%;
  33. .img-box {
  34. width: 200rpx;
  35. height: 192rpx;
  36. overflow: hidden;
  37. display: flex;
  38. justify-content: center;
  39. .img {
  40. width: 200rpx;
  41. height: 164rpx;
  42. }
  43. }
  44. .empty-text {
  45. text-align: center;
  46. font-size: 24rpx;
  47. color: #999999;
  48. padding: 30rpx;
  49. }
  50. }
  51. </style>