CustomCollapse.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <view class="custom-collapse">
  3. <uni-collapse v-model="collapseModel">
  4. <uni-collapse-item name="item" :title="collapseTitle" thumb="/static/images/components/collapse/title-thumb.png">
  5. <template v-if="!collapseTitle" v-slot:title>
  6. <slot name="collapseTitle"></slot>
  7. </template>
  8. <view class="content">
  9. <slot name="collapseContent"></slot>
  10. </view>
  11. </uni-collapse-item>
  12. </uni-collapse>
  13. </view>
  14. </template>
  15. <script>
  16. import { defineComponent, ref } from 'vue';
  17. const props = {
  18. title: {
  19. type: String,
  20. default: ''
  21. }
  22. }
  23. export default defineComponent({
  24. props,
  25. setup(props){
  26. const collapseModel = ['item']
  27. const collapseTitle = ref(props.title)
  28. return {
  29. collapseModel,
  30. collapseTitle
  31. }
  32. }
  33. })
  34. </script>
  35. <style lang="scss" scoped>
  36. .custom-collapse {
  37. ::v-deep .uni-collapse-item__title-img {
  38. width: 12rpx;
  39. }
  40. ::v-deep .uni-collapse-item__title-text{
  41. font-family: 思源黑体;
  42. font-size: 32rpx;
  43. color: #000000;
  44. }
  45. }
  46. </style>