DemoItem.vue 654 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <view class="item" :style="[getStyle()]">
  3. {{item.text}}
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. name: "demo-item",
  9. props: {
  10. item: {
  11. type: [Object, String],
  12. default: () => {}
  13. },
  14. height: {
  15. type: String,
  16. default: '300rpx'
  17. },
  18. customStyle: {
  19. type: Object,
  20. default: () => {}
  21. }
  22. },
  23. methods: {
  24. getStyle() {
  25. return {
  26. background: this.item.background,
  27. height: this.height,
  28. ...this.customStyle
  29. }
  30. }
  31. }
  32. };
  33. </script>
  34. <style lang="scss" scoped>
  35. .item {
  36. display: flex;
  37. align-items: center;
  38. justify-content: center;
  39. width: 100%;
  40. color: #ffffff;
  41. }
  42. </style>