You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

преди 3 години
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <template>
  2. <view class="u-collapse-item" :style="[itemStyle]">
  3. <view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="[headStyle]">
  4. <block v-if="!$slots['title-all']">
  5. <view v-if="!$slots['title']" class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' },
  6. isShow && activeStyle && !arrow ? activeStyle : '']">
  7. {{ title }}
  8. </view>
  9. <slot v-else name="title" />
  10. <view class="u-icon-wrap">
  11. <u-icon v-if="arrow" :color="arrowColor" :class="{ 'u-arrow-down-icon-active': isShow }"
  12. class="u-arrow-down-icon" name="arrow-down"></u-icon>
  13. </view>
  14. </block>
  15. <slot v-else name="title-all" />
  16. </view>
  17. <view class="u-collapse-body" :style="[{
  18. height: isShow ? height + 'px' : '0'
  19. }]">
  20. <view class="u-collapse-content" :id="elId" :style="[bodyStyle]">
  21. <slot></slot>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. /**
  28. * collapseItem 手风琴Item
  29. * @description 通过折叠面板收纳内容区域(搭配u-collapse使用)
  30. * @tutorial https://www.uviewui.com/components/collapse.html
  31. * @property {String} title 面板标题
  32. * @property {String Number} index 主要用于事件的回调,标识那个Item被点击
  33. * @property {Boolean} disabled 面板是否可以打开或收起(默认false)
  34. * @property {Boolean} open 设置某个面板的初始状态是否打开(默认false)
  35. * @property {String Number} name 唯一标识符,如不设置,默认用当前collapse-item的索引值
  36. * @property {String} align 标题的对齐方式(默认left)
  37. * @property {Object} active-style 不显示箭头时,可以添加当前选择的collapse-item活动样式,对象形式
  38. * @event {Function} change 某个item被打开或者收起时触发
  39. * @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
  40. */
  41. export default {
  42. name: "u-collapse-item",
  43. props: {
  44. // 标题
  45. title: {
  46. type: String,
  47. default: ''
  48. },
  49. // 标题的对齐方式
  50. align: {
  51. type: String,
  52. default: 'left'
  53. },
  54. // 是否可以点击收起
  55. disabled: {
  56. type: Boolean,
  57. default: false
  58. },
  59. // collapse显示与否
  60. open: {
  61. type: Boolean,
  62. default: false
  63. },
  64. // 唯一标识符
  65. name: {
  66. type: [Number, String],
  67. default: ''
  68. },
  69. //活动样式
  70. activeStyle: {
  71. type: Object,
  72. default () {
  73. return {}
  74. }
  75. },
  76. // 标识当前为第几个
  77. index: {
  78. type: [String, Number],
  79. default: ''
  80. }
  81. },
  82. inject: ['uCollapse'],
  83. data() {
  84. return {
  85. isShow: false,
  86. elId: this.$u.guid(),
  87. height: 0, // body内容的高度
  88. headStyle: {}, // 头部样式,对象形式
  89. bodyStyle: {}, // 主体部分样式
  90. //itemStyle: {}, // 每个item的整体样式
  91. arrowColor: '', // 箭头的颜色
  92. hoverClass: '', // 头部按下时的效果样式类
  93. };
  94. },
  95. mounted() {
  96. this.init();
  97. },
  98. watch: {
  99. open(val) {
  100. this.isShow = val;
  101. }
  102. },
  103. computed: {
  104. arrow() {
  105. return this.uCollapse.arrow;
  106. },
  107. itemStyle() {
  108. return this.uCollapse.itemStyle;
  109. }
  110. },
  111. created() {
  112. // 获取u-collapse的信息,放在u-collapse是为了方便,不用每个u-collapse-item写一遍
  113. this.isShow = this.open;
  114. this.nameSync = this.name ? this.name : this.uCollapse.childrens.length;
  115. this.uCollapse.childrens.push(this);
  116. //this.itemStyle = this.uCollapse.itemStyle;
  117. this.headStyle = this.uCollapse.headStyle;
  118. this.bodyStyle = this.uCollapse.bodyStyle;
  119. this.arrowColor = this.uCollapse.arrowColor;
  120. this.hoverClass = this.uCollapse.hoverClass;
  121. },
  122. methods: {
  123. // 异步获取内容,或者动态修改了内容时,需要重新初始化
  124. init() {
  125. this.$nextTick(() => {
  126. this.queryRect();
  127. });
  128. },
  129. // 点击collapsehead头部
  130. headClick() {
  131. if (this.disabled) return;
  132. if (this.uCollapse.accordion == true) {
  133. this.uCollapse.childrens.map(val => {
  134. // 自身不设置为false,因为后面有this.isShow = !this.isShow;处理了
  135. if (this != val) {
  136. val.isShow = false;
  137. }
  138. });
  139. }
  140. this.isShow = !this.isShow;
  141. // 触发本组件的事件
  142. this.$emit('change', {
  143. index: this.index,
  144. show: this.isShow
  145. })
  146. // 只有在打开时才发出事件
  147. if (this.isShow) this.uCollapse.onChange();
  148. this.$forceUpdate();
  149. },
  150. // 查询内容高度
  151. queryRect() {
  152. // $uGetRect为uView自带的节点查询简化方法,详见文档介绍:https://www.uviewui.com/js/getRect.html
  153. // 组件内部一般用this.$uGetRect,对外的为this.$u.getRect,二者功能一致,名称不同
  154. this.$uGetRect('#' + this.elId).then(res => {
  155. this.height = res.height;
  156. })
  157. }
  158. }
  159. };
  160. </script>
  161. <style lang="scss" scoped>
  162. @import "../../libs/css/style.components.scss";
  163. .u-collapse-head {
  164. position: relative;
  165. display: flex;
  166. justify-content: space-between;
  167. align-items: center;
  168. color: $u-main-color;
  169. font-size: 30rpx;
  170. line-height: 1;
  171. padding: 24rpx 0;
  172. text-align: left;
  173. }
  174. .u-collapse-title {
  175. flex: 1;
  176. overflow: hidden;
  177. }
  178. .u-arrow-down-icon {
  179. transition: all 0.3s;
  180. margin-right: 20rpx;
  181. margin-left: 14rpx;
  182. }
  183. .u-arrow-down-icon-active {
  184. transform: rotate(180deg);
  185. transform-origin: center center;
  186. }
  187. .u-collapse-body {
  188. overflow: hidden;
  189. transition: all 0.3s;
  190. }
  191. .u-collapse-content {
  192. overflow: hidden;
  193. font-size: 28rpx;
  194. color: $u-tips-color;
  195. text-align: left;
  196. }
  197. </style>