u-collapse-item.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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. data() {
  83. return {
  84. isShow: false,
  85. elId: this.$u.guid(),
  86. height: 0, // body内容的高度
  87. headStyle: {}, // 头部样式,对象形式
  88. bodyStyle: {}, // 主体部分样式
  89. itemStyle: {}, // 每个item的整体样式
  90. arrowColor: '', // 箭头的颜色
  91. hoverClass: '', // 头部按下时的效果样式类
  92. arrow: true, // 是否显示右侧箭头
  93. };
  94. },
  95. watch: {
  96. open(val) {
  97. this.isShow = val;
  98. }
  99. },
  100. created() {
  101. this.parent = false;
  102. // 获取u-collapse的信息,放在u-collapse是为了方便,不用每个u-collapse-item写一遍
  103. this.isShow = this.open;
  104. },
  105. methods: {
  106. // 异步获取内容,或者动态修改了内容时,需要重新初始化
  107. init() {
  108. this.parent = this.$u.$parent.call(this, 'u-collapse');
  109. if(this.parent) {
  110. this.nameSync = this.name ? this.name : this.parent.childrens.length;
  111. this.parent.childrens.push(this);
  112. this.headStyle = this.parent.headStyle;
  113. this.bodyStyle = this.parent.bodyStyle;
  114. this.arrowColor = this.parent.arrowColor;
  115. this.hoverClass = this.parent.hoverClass;
  116. this.arrow = this.parent.arrow;
  117. this.itemStyle = this.parent.itemStyle;
  118. }
  119. this.$nextTick(() => {
  120. this.queryRect();
  121. });
  122. },
  123. // 点击collapsehead头部
  124. headClick() {
  125. if (this.disabled) return;
  126. if (this.parent && this.parent.accordion == true) {
  127. this.parent.childrens.map(val => {
  128. // 自身不设置为false,因为后面有this.isShow = !this.isShow;处理了
  129. if (this != val) {
  130. val.isShow = false;
  131. }
  132. });
  133. }
  134. this.isShow = !this.isShow;
  135. // 触发本组件的事件
  136. this.$emit('change', {
  137. index: this.index,
  138. show: this.isShow
  139. })
  140. // 只有在打开时才发出事件
  141. if (this.isShow) this.parent && this.parent.onChange();
  142. this.$forceUpdate();
  143. },
  144. // 查询内容高度
  145. queryRect() {
  146. // $uGetRect为uView自带的节点查询简化方法,详见文档介绍:https://www.uviewui.com/js/getRect.html
  147. // 组件内部一般用this.$uGetRect,对外的为this.$u.getRect,二者功能一致,名称不同
  148. this.$uGetRect('#' + this.elId).then(res => {
  149. this.height = res.height;
  150. })
  151. }
  152. },
  153. mounted() {
  154. this.init();
  155. }
  156. };
  157. </script>
  158. <style lang="scss" scoped>
  159. @import "../../libs/css/style.components.scss";
  160. .u-collapse-head {
  161. position: relative;
  162. @include vue-flex;
  163. justify-content: space-between;
  164. align-items: center;
  165. color: $u-main-color;
  166. font-size: 30rpx;
  167. line-height: 1;
  168. padding: 24rpx 0;
  169. text-align: left;
  170. }
  171. .u-collapse-title {
  172. flex: 1;
  173. overflow: hidden;
  174. }
  175. .u-arrow-down-icon {
  176. transition: all 0.3s;
  177. margin-right: 20rpx;
  178. margin-left: 14rpx;
  179. }
  180. .u-arrow-down-icon-active {
  181. transform: rotate(180deg);
  182. transform-origin: center center;
  183. }
  184. .u-collapse-body {
  185. overflow: hidden;
  186. transition: all 0.3s;
  187. }
  188. .u-collapse-content {
  189. overflow: hidden;
  190. font-size: 28rpx;
  191. color: $u-tips-color;
  192. text-align: left;
  193. }
  194. </style>