myCollapseCard.vue 634 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <template>
  2. <view class="my-collapse-card">
  3. <view class="my-collapse-item">{{title}} --- {{open}}</view>
  4. <view class="my-card-content" :class="{'card-open': open}">
  5. <slot></slot>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. name: "myCollapseCard",
  12. props: {
  13. title: {
  14. type: String
  15. },
  16. open: {
  17. type:Boolean
  18. }
  19. },
  20. }
  21. </script>
  22. <style lang="scss">
  23. .my-collapse-item {
  24. height: 60rpx;
  25. line-height: 60rpx;
  26. background-color: #cc2;
  27. }
  28. .my-card-content {
  29. height: 0rpx;
  30. overflow: hidden;
  31. margin: 0 5px;
  32. }
  33. .card-open {
  34. display: block;
  35. height: auto;
  36. background: #ccc;
  37. }
  38. </style>