fs-empty.vue 951 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <view class="fs-empty-box" :style="{ padding: padding }">
  3. <image :src="src" mode="widthFix" :style="{ width: imageWidth }"></image>
  4. <view class="content">{{ text }}</view>
  5. </view>
  6. </template>
  7. <script>
  8. /**
  9. * 无数据组件
  10. * @description 无数据组件
  11. * @property {String} src 图片地址
  12. * @property {String} text 文字
  13. * @property {String} padding 内边距
  14. * @property {String} imageWidth 图片宽度
  15. */
  16. export default {
  17. name: 'fs-empty'
  18. }
  19. </script>
  20. <script setup>
  21. import empty from './empty.png'
  22. const props = defineProps({
  23. src: {
  24. type: String,
  25. default: empty
  26. },
  27. text: {
  28. type: String,
  29. default: '暂无数据'
  30. },
  31. padding: {
  32. type: String,
  33. default: '200rpx 30rpx'
  34. },
  35. imageWidth: {
  36. type: String,
  37. default: '400rpx'
  38. }
  39. })
  40. </script>
  41. <style lang="scss" scoped>
  42. .fs-empty-box {
  43. text-align: center;
  44. .content {
  45. margin-top: 20rpx;
  46. }
  47. }
  48. </style>