您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

u-empty.vue 4.4 KiB

3 年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <view class="u-empty" v-if="show" :style="{
  3. marginTop: marginTop + 'rpx'
  4. }">
  5. <u-icon
  6. :name="src ? src : 'empty-' + mode"
  7. :custom-style="iconStyle"
  8. :label="text ? text : icons[mode]"
  9. label-pos="bottom"
  10. :label-color="color"
  11. :label-size="fontSize"
  12. :size="iconSize"
  13. :color="iconColor"
  14. margin-top="14"
  15. ></u-icon>
  16. <view class="u-slot-wrap">
  17. <slot name="bottom"></slot>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. /**
  23. * empty 内容为空
  24. * @description 该组件用于需要加载内容,但是加载的第一页数据就为空,提示一个"没有内容"的场景, 我们精心挑选了十几个场景的图标,方便您使用。
  25. * @tutorial https://www.uviewui.com/components/empty.html
  26. * @property {String} color 文字颜色(默认#c0c4cc)
  27. * @property {String} text 文字提示(默认“无内容”)
  28. * @property {String} src 自定义图标路径,如定义,mode参数会失效
  29. * @property {String Number} font-size 提示文字的大小,单位rpx(默认28)
  30. * @property {String} mode 内置的图标,见官网说明(默认data)
  31. * @property {String Number} img-width 图标的宽度,单位rpx(默认240)
  32. * @property {String} img-height 图标的高度,单位rpx(默认auto)
  33. * @property {String Number} margin-top 组件距离上一个元素之间的距离(默认0)
  34. * @property {Boolean} show 是否显示组件(默认true)
  35. * @event {Function} click 点击组件时触发
  36. * @event {Function} close 点击关闭按钮时触发
  37. * @example <u-empty text="所谓伊人,在水一方" mode="list"></u-empty>
  38. */
  39. export default {
  40. name: "u-empty",
  41. props: {
  42. // 图标路径
  43. src: {
  44. type: String,
  45. default: ''
  46. },
  47. // 提示文字
  48. text: {
  49. type: String,
  50. default: ''
  51. },
  52. // 文字颜色
  53. color: {
  54. type: String,
  55. default: '#c0c4cc'
  56. },
  57. // 图标的颜色
  58. iconColor: {
  59. type: String,
  60. default: '#c0c4cc'
  61. },
  62. // 图标的大小
  63. iconSize: {
  64. type: [String, Number],
  65. default: 120
  66. },
  67. // 文字大小,单位rpx
  68. fontSize: {
  69. type: [String, Number],
  70. default: 26
  71. },
  72. // 选择预置的图标类型
  73. mode: {
  74. type: String,
  75. default: 'data'
  76. },
  77. // 图标宽度,单位rpx
  78. imgWidth: {
  79. type: [String, Number],
  80. default: 120
  81. },
  82. // 图标高度,单位rpx
  83. imgHeight: {
  84. type: [String, Number],
  85. default: 'auto'
  86. },
  87. // 是否显示组件
  88. show: {
  89. type: Boolean,
  90. default: true
  91. },
  92. // 组件距离上一个元素之间的距离
  93. marginTop: {
  94. type: [String, Number],
  95. default: 0
  96. },
  97. iconStyle: {
  98. type: Object,
  99. default() {
  100. return {}
  101. }
  102. }
  103. },
  104. data() {
  105. return {
  106. icons: {
  107. car: '购物车为空',
  108. page: '页面不存在',
  109. search: '没有搜索结果',
  110. address: '没有收货地址',
  111. wifi: '没有WiFi',
  112. order: '订单为空',
  113. coupon: '没有优惠券',
  114. favor: '暂无收藏',
  115. permission: '无权限',
  116. history: '无历史记录',
  117. news: '无新闻列表',
  118. message: '消息列表为空',
  119. list: '列表为空',
  120. data: '数据为空'
  121. },
  122. // icons: [{
  123. // icon: 'car',
  124. // text: '购物车为空'
  125. // },{
  126. // icon: 'page',
  127. // text: '页面不存在'
  128. // },{
  129. // icon: 'search',
  130. // text: '没有搜索结果'
  131. // },{
  132. // icon: 'address',
  133. // text: '没有收货地址'
  134. // },{
  135. // icon: 'wifi',
  136. // text: '没有WiFi'
  137. // },{
  138. // icon: 'order',
  139. // text: '订单为空'
  140. // },{
  141. // icon: 'coupon',
  142. // text: '没有优惠券'
  143. // },{
  144. // icon: 'favor',
  145. // text: '暂无收藏'
  146. // },{
  147. // icon: 'permission',
  148. // text: '无权限'
  149. // },{
  150. // icon: 'history',
  151. // text: '无历史记录'
  152. // },{
  153. // icon: 'news',
  154. // text: '无新闻列表'
  155. // },{
  156. // icon: 'message',
  157. // text: '消息列表为空'
  158. // },{
  159. // icon: 'list',
  160. // text: '列表为空'
  161. // },{
  162. // icon: 'data',
  163. // text: '数据为空'
  164. // }],
  165. }
  166. }
  167. }
  168. </script>
  169. <style scoped lang="scss">
  170. @import "../../libs/css/style.components.scss";
  171. .u-empty {
  172. display: flex;
  173. flex-direction: column;
  174. justify-content: center;
  175. align-items: center;
  176. height: 100%;
  177. }
  178. .u-image {
  179. margin-bottom: 20rpx;
  180. }
  181. .u-slot-wrap {
  182. display: flex;
  183. justify-content: center;
  184. align-items: center;
  185. margin-top: 20rpx;
  186. }
  187. </style>