graceNvueEmpty.vue 1.2 KB

1234567891011121314151617181920212223242526
  1. <template>
  2. <view class="grace-empty">
  3. <text class="grace-empty-icon grace-icons" v-if="iconType == 1" :style="{fontSize:iconSize+'rpx', lineHeight:(iconSize+10)+'rpx', color:iconColor}">&#xe704;</text>
  4. <text class="grace-empty-icon grace-icons" v-if="iconType == 2" :style="{fontSize:iconSize+'rpx', lineHeight:(iconSize+10)+'rpx', color:iconColor}">&#xe736;</text>
  5. <text class="grace-empty-icon grace-icons" v-if="iconType == 3" :style="{fontSize:iconSize+'rpx', lineHeight:(iconSize+10)+'rpx', color:iconColor}">&#xe644;</text>
  6. <text class="grace-empty-text" v-if="text != ''" :style="{fontSize:textSize+'rpx', lineHeight:(textSize+10)+'rpx', color:textColor}">{{text}}</text>
  7. <slot></slot>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. props: {
  13. iconType : { type: Number, default : 1},
  14. iconSize : { type: Number, default : 80},
  15. iconColor : { type: String, default : "#999999"},
  16. textSize : { type: Number, default : 26},
  17. textColor : { type: String, default : "#999999"},
  18. text : { type: String, default :''}
  19. }
  20. }
  21. </script>
  22. <style scoped>
  23. .grace-empty{}
  24. .grace-empty-icon{text-align:center;}
  25. .grace-empty-text{padding:20rpx 0; text-align:center;}
  26. </style>