uni-collapse-item.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <view :class="['uni-collapse-cell',{'uni-collapse-cell--disabled':disabled,'uni-collapse-cell--open':isOpen}]" :hover-class="disabled ? '' : 'uni-collapse-cell--hover'">
  3. <view class="uni-collapse-cell__title" @click="onClick">
  4. <view v-if="thumb" class="uni-collapse-cell__title-extra">
  5. <image :src="thumb" class="uni-collapse-cell__title-img" />
  6. </view>
  7. <view class="uni-collapse-cell__title-inner">
  8. <view class="uni-collapse-cell__title-text">{{ title }}</view>
  9. </view>
  10. <view :class="{'uni-active':isOpen,'uni-collapse-cell--animation':showAnimation===true}" class="uni-collapse-cell__title-arrow">
  11. <uni-icon color="#bbb" size="20" type="arrowdown" />
  12. </view>
  13. </view>
  14. <view :class="{'uni-collapse-cell--animation':showAnimation===true}" :style="{height:isOpen ? height : '0px'}" class="uni-collapse-cell__content">
  15. <view class="view" :id="elId">
  16. <slot />
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. import uniIcon from '../uni-icon/uni-icon.vue'
  23. export default {
  24. name: 'UniCollapseItem',
  25. components: {
  26. uniIcon
  27. },
  28. props: {
  29. title: { // 列表标题
  30. // type: String,
  31. default: ''
  32. },
  33. name: { // 唯一标识符
  34. type: [Number, String],
  35. default: 0
  36. },
  37. disabled: { // 是否禁用
  38. type: Boolean,
  39. default: false
  40. },
  41. showAnimation: { // 是否显示动画
  42. type: Boolean,
  43. default: false
  44. },
  45. open: { // 是否展开
  46. type: Boolean,
  47. default: false
  48. },
  49. thumb: { // 缩略图
  50. type: String,
  51. default: ''
  52. }
  53. },
  54. data() {
  55. /**
  56. * TODO 兼容新旧编译器
  57. * 新编译器(自定义组件模式)下必须使用固定数值,否则部分平台下会获取不到节点。
  58. * 随机数值是在旧编译器下使用的,旧编译器模式已经不推荐使用,后续直接废掉随机数值的写法。
  59. */
  60. const elId = this.__call_hook ? 'uni_collapse_item' : `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
  61. return {
  62. isOpen: false,
  63. height: 'auto',
  64. elId: elId
  65. }
  66. },
  67. watch: {
  68. open(val) {
  69. this.isOpen = val
  70. }
  71. },
  72. inject: ['collapse'],
  73. created() {
  74. this.isOpen = this.open
  75. this.nameSync = this.name ? this.name : this.collapse.childrens.length
  76. this.collapse.childrens.push(this)
  77. if (this.collapse.accordion) {
  78. if (this.isOpen) {
  79. let lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]
  80. if (lastEl) {
  81. this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
  82. }
  83. }
  84. }
  85. },
  86. // #ifdef H5
  87. mounted() {
  88. this.getSize()
  89. },
  90. // #endif
  91. // #ifndef H5
  92. onReady() {
  93. this.getSize()
  94. },
  95. // #endif
  96. methods: {
  97. getSize() {
  98. if (this.showAnimation) {
  99. uni.createSelectorQuery().in(this).select(`#${this.elId}`).boundingClientRect().exec((ret) => {
  100. this.height = ret[0].height + 'px'
  101. })
  102. }
  103. },
  104. onClick() {
  105. if (this.disabled) {
  106. return
  107. }
  108. if (this.collapse.accordion) {
  109. this.collapse.childrens.forEach(vm => {
  110. if (vm === this) {
  111. return
  112. }
  113. vm.isOpen = false
  114. })
  115. }
  116. this.isOpen = !this.isOpen
  117. this.collapse.onChange && this.collapse.onChange()
  118. }
  119. }
  120. }
  121. </script>
  122. <style>
  123. @charset "UTF-8";
  124. .uni-collapse-cell {
  125. position: relative
  126. }
  127. .uni-collapse-cell--hover {
  128. background-color: #f1f1f1
  129. }
  130. .uni-collapse-cell--open {
  131. background-color: #f1f1f1
  132. }
  133. .uni-collapse-cell--disabled {
  134. opacity: .3
  135. }
  136. .uni-collapse-cell--animation {
  137. transition: all .3s
  138. }
  139. .uni-collapse-cell:after {
  140. position: absolute;
  141. z-index: 3;
  142. right: 0;
  143. bottom: 0;
  144. left: 0;
  145. height: 1px;
  146. content: '';
  147. -webkit-transform: scaleY(.5);
  148. transform: scaleY(.5);
  149. background-color: #c8c7cc
  150. }
  151. .uni-collapse-cell__title {
  152. padding: 24upx 30upx;
  153. width: 100%;
  154. box-sizing: border-box;
  155. flex: 1;
  156. position: relative;
  157. display: flex;
  158. flex-direction: row;
  159. justify-content: space-between;
  160. align-items: center
  161. }
  162. .uni-collapse-cell__title-extra {
  163. margin-right: 18upx;
  164. display: flex;
  165. flex-direction: row;
  166. justify-content: center;
  167. align-items: center
  168. }
  169. .uni-collapse-cell__title-img {
  170. height: 52upx;
  171. width: 52upx
  172. }
  173. .uni-collapse-cell__title-arrow {
  174. width: 20px;
  175. height: 20px;
  176. display: flex;
  177. align-items: center;
  178. transform: rotate(0);
  179. transform-origin: center center
  180. }
  181. .uni-collapse-cell__title-arrow.uni-active {
  182. transform: rotate(-180deg)
  183. }
  184. .uni-collapse-cell__title-inner {
  185. flex: 1;
  186. overflow: hidden;
  187. display: flex;
  188. flex-direction: column
  189. }
  190. .uni-collapse-cell__title-text {
  191. font-size: 32upx;
  192. text-overflow: ellipsis;
  193. white-space: nowrap;
  194. color: inherit;
  195. line-height: 1.5;
  196. overflow: hidden
  197. }
  198. .uni-collapse-cell__content {
  199. position: relative;
  200. width: 100%;
  201. overflow: hidden;
  202. background: #fff
  203. }
  204. .uni-collapse-cell__content .view {
  205. font-size: 28upx
  206. }
  207. </style>