index.vue 4.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <uni-shadow-root class="weapp-lib-collapse-item-index"><view :class="'van-collapse-item custom-class '+(index !== 0 ? 'van-hairline--top' : '')">
  3. <van-cell :size="size" :title="title" title-class="title-class" :icon="icon" :value="value" :label="label" :is-link="isLink" :clickable="clickable" :border="border && expanded" :class="utils.bem('collapse-item__title', { disabled, expanded })" right-icon-class="van-cell__right-icon" custom-class="van-cell" hover-class="van-cell--hover" @click="onClick">
  4. <slot name="title" slot="title"></slot>
  5. <slot name="icon" slot="icon"></slot>
  6. <slot name="value"></slot>
  7. <slot name="right-icon" slot="right-icon"></slot>
  8. </van-cell>
  9. <view :class="utils.bem('collapse-item__wrapper')" style="height: 0;" :animation="animation">
  10. <view class="van-collapse-item__content content-class">
  11. <slot></slot>
  12. </view>
  13. </view>
  14. </view></uni-shadow-root>
  15. </template>
  16. <wxs src="../wxs/utils.wxs" module="utils"></wxs>
  17. <script>
  18. import VanCell from '../cell/index.vue'
  19. global['__wxVueOptions'] = {components:{'van-cell': VanCell}}
  20. global['__wxRoute'] = 'weapp/lib/collapse-item/index'
  21. "use strict";
  22. Object.defineProperty(exports, "__esModule", { value: true });
  23. var component_1 = require("../common/component");
  24. var relation_1 = require("../common/relation");
  25. var animate_1 = require("./animate");
  26. (0, component_1.VantComponent)({
  27. classes: ['title-class', 'content-class'],
  28. relation: (0, relation_1.useParent)('collapse'),
  29. props: {
  30. size: String,
  31. name: null,
  32. title: null,
  33. value: null,
  34. icon: String,
  35. label: String,
  36. disabled: Boolean,
  37. clickable: Boolean,
  38. border: {
  39. type: Boolean,
  40. value: true,
  41. },
  42. isLink: {
  43. type: Boolean,
  44. value: true,
  45. },
  46. },
  47. data: {
  48. expanded: false,
  49. },
  50. mounted: function () {
  51. this.updateExpanded();
  52. this.mounted = true;
  53. },
  54. methods: {
  55. updateExpanded: function () {
  56. if (!this.parent) {
  57. return;
  58. }
  59. var _a = this.parent.data, value = _a.value, accordion = _a.accordion;
  60. var _b = this.parent.children, children = _b === void 0 ? [] : _b;
  61. var name = this.data.name;
  62. var index = children.indexOf(this);
  63. var currentName = name == null ? index : name;
  64. var expanded = accordion
  65. ? value === currentName
  66. : (value || []).some(function (name) { return name === currentName; });
  67. if (expanded !== this.data.expanded) {
  68. (0, animate_1.setContentAnimate)(this, expanded, this.mounted);
  69. }
  70. this.setData({ index: index, expanded: expanded });
  71. },
  72. onClick: function () {
  73. if (this.data.disabled) {
  74. return;
  75. }
  76. var _a = this.data, name = _a.name, expanded = _a.expanded;
  77. var index = this.parent.children.indexOf(this);
  78. var currentName = name == null ? index : name;
  79. this.parent.switch(currentName, !expanded);
  80. },
  81. },
  82. });
  83. export default global['__wxComponents']['weapp/lib/collapse-item/index']
  84. </script>
  85. <style platform="mp-weixin">
  86. @import '../common/index.css';.van-collapse-item__title .van-cell__right-icon{transform:rotate(90deg);transition:transform var(--collapse-item-transition-duration,.3s)}.van-collapse-item__title--expanded .van-cell__right-icon{transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:var(--collapse-item-title-disabled-color,#c8c9cc)!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__content{background-color:var(--collapse-item-content-background-color,#fff);color:var(--collapse-item-content-text-color,#969799);font-size:var(--collapse-item-content-font-size,13px);line-height:var(--collapse-item-content-line-height,1.5);padding:var(--collapse-item-content-padding,15px)}
  87. </style>