You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

116 lines
2.9 KiB

3 years ago
  1. <!--空布局:
  2. 遵循easycom规范, 可作为独立的组件, 不使用mescroll的页面也能使用:
  3. <mescroll-empty v-if="isShowEmpty" :option="optEmpty" @emptyclick="emptyClick"></mescroll-empty>
  4. -->
  5. <template>
  6. <view class="mescroll-empty" :class="{ 'empty-fixed': option.fixed }" :style="{ 'z-index': option.zIndex, top: option.top }">
  7. <view> <image v-if="icon" class="empty-icon" :src="icon" mode="widthFix" /> </view>
  8. <view v-if="tip" class="empty-tip">{{ tip }}</view>
  9. <view v-if="btnText" class="empty-btn" @click="emptyClick">{{ btnText }}</view>
  10. </view>
  11. </template>
  12. <script>
  13. // 引入全局配置
  14. import GlobalOption from '../mescroll-uni/mescroll-uni-option.js';
  15. // 引入国际化工具类
  16. import mescrollI18n from '../mescroll-uni/mescroll-i18n.js';
  17. export default {
  18. props: {
  19. // empty的配置项: 默认为GlobalOption.up.empty
  20. option: {
  21. type: Object,
  22. default() {
  23. return {};
  24. }
  25. }
  26. },
  27. // 使用computed获取配置,用于支持option的动态配置
  28. computed: {
  29. // 图标
  30. icon() {
  31. if (this.option.icon != null) { // 此处不使用短路求值, 用于支持传空串不显示图标
  32. return this.option.icon
  33. } else{
  34. let i18nType = mescrollI18n.getType() // 国际化配置
  35. if (this.option.i18n) {
  36. return this.option.i18n[i18nType].icon
  37. } else{
  38. return GlobalOption.i18n[i18nType].up.empty.icon || GlobalOption.up.empty.icon
  39. }
  40. }
  41. },
  42. // 文本提示
  43. tip() {
  44. if (this.option.tip != null) { // 支持传空串不显示文本提示
  45. return this.option.tip
  46. } else{
  47. let i18nType = mescrollI18n.getType() // 国际化配置
  48. if (this.option.i18n) {
  49. return this.option.i18n[i18nType].tip
  50. } else{
  51. return GlobalOption.i18n[i18nType].up.empty.tip || GlobalOption.up.empty.tip
  52. }
  53. }
  54. },
  55. // 按钮文本
  56. btnText() {
  57. if (this.option.i18n) {
  58. let i18nType = mescrollI18n.getType() // 国际化配置
  59. return this.option.i18n[i18nType].btnText
  60. } else{
  61. return this.option.btnText
  62. }
  63. }
  64. },
  65. methods: {
  66. // 点击按钮
  67. emptyClick() {
  68. this.$emit('emptyclick');
  69. }
  70. }
  71. };
  72. </script>
  73. <style>
  74. /* 无任何数据的空布局 */
  75. .mescroll-empty {
  76. box-sizing: border-box;
  77. width: 100%;
  78. padding: 100rpx 50rpx;
  79. text-align: center;
  80. }
  81. .mescroll-empty.empty-fixed {
  82. z-index: 99;
  83. position: absolute; /*transform会使fixed失效,最终会降级为absolute */
  84. top: 100rpx;
  85. left: 0;
  86. }
  87. .mescroll-empty .empty-icon {
  88. width: 280rpx;
  89. height: 280rpx;
  90. }
  91. .mescroll-empty .empty-tip {
  92. margin-top: 20rpx;
  93. font-size: 24rpx;
  94. color: gray;
  95. }
  96. .mescroll-empty .empty-btn {
  97. display: inline-block;
  98. margin-top: 40rpx;
  99. min-width: 200rpx;
  100. padding: 18rpx;
  101. font-size: 28rpx;
  102. border: 1rpx solid #e04b28;
  103. border-radius: 60rpx;
  104. color: #e04b28;
  105. }
  106. .mescroll-empty .empty-btn:active {
  107. opacity: 0.75;
  108. }
  109. </style>