nodata.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <view class="no-data-view" :style="{'margin-top':conf.top+'vh',}">
  3. <image v-if="conf.imgUrl" :style="{width:conf.imgWidth,height:config.imgHeight}" :src="conf.imgUrl?conf.imgUrl:'/static/common/nodata.png'"></image>
  4. <image v-if="!conf.imgUrl" class="no-data" src="/static/common/nodata.png"></image>
  5. <view :style="{color:conf.color,'font-size':conf.fSize,'padding-top':conf.txtTop+'rpx'}">{{conf.content}}</view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. name: 'nodata',
  11. props:{
  12. config:{
  13. type:Object,
  14. default:function(){
  15. return{
  16. }
  17. }
  18. },
  19. },
  20. data() {
  21. return {
  22. conf:{
  23. type:'1',
  24. top:22,
  25. imgWidth:0,
  26. imgHeight:0,
  27. imgUrl:'',
  28. content:'暂无数据~',
  29. fSize:30,
  30. color:'#B3B3B3',
  31. txtTop:20,
  32. url: this.$mConfig.staticUrl,
  33. }
  34. }
  35. },
  36. created() {
  37. this.init();
  38. },
  39. methods: {
  40. init(){
  41. this.conf = Object.assign(this.conf, this.config);
  42. }
  43. }
  44. }
  45. </script>
  46. <style scoped>
  47. .no-data-view{
  48. text-align: center;
  49. }
  50. .no-data{
  51. width: 475rpx;
  52. height: 335rpx;
  53. }
  54. </style>