u-collapse-item.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <view class="u-collapse-item">
  3. <u-cell
  4. :title="title"
  5. :value="value"
  6. :label="label"
  7. :icon="icon"
  8. :isLink="isLink"
  9. :clickable="clickable"
  10. :border="parentData.border && showBorder"
  11. @click="clickHandler"
  12. :arrowDirection="expanded ? 'up' : 'down'"
  13. :disabled="disabled"
  14. >
  15. <!-- #ifndef MP-WEIXIN -->
  16. <!-- 微信小程序不支持,因为微信中不支持 <slot name="title" slot="title" />的写法 -->
  17. <template slot="title">
  18. <slot name="title"></slot>
  19. </template>
  20. <template slot="icon">
  21. <slot name="icon"></slot>
  22. </template>
  23. <template slot="value">
  24. <slot name="value"></slot>
  25. </template>
  26. <template slot="right-icon">
  27. <slot name="right-icon"></slot>
  28. </template>
  29. <!-- #endif -->
  30. </u-cell>
  31. <view
  32. class="u-collapse-item__content"
  33. :animation="animationData"
  34. ref="animation"
  35. >
  36. <view
  37. class="u-collapse-item__content__text content-class"
  38. :id="elId"
  39. :ref="elId"
  40. >
  41. <slot/>
  42. </view>
  43. </view>
  44. <u-line v-if="parentData.border"></u-line>
  45. </view>
  46. </template>
  47. <script>
  48. import props from './props.js';
  49. // #ifdef APP-NVUE
  50. const animation = uni.requireNativePlugin('animation')
  51. const dom = uni.requireNativePlugin('dom')
  52. // #endif
  53. /**
  54. * collapseItem 折叠面板Item
  55. * @description 通过折叠面板收纳内容区域(搭配u-collapse使用)
  56. * @tutorial https://www.uviewui.com/components/collapse.html
  57. * @property {String} title 标题
  58. * @property {String} value 标题右侧内容
  59. * @property {String} label 标题下方的描述信息
  60. * @property {Boolean} disbled 是否禁用折叠面板 ( 默认 false )
  61. * @property {Boolean} isLink 是否展示右侧箭头并开启点击反馈 ( 默认 true )
  62. * @property {Boolean} clickable 是否开启点击反馈 ( 默认 true )
  63. * @property {Boolean} border 是否显示内边框 ( 默认 true )
  64. * @property {String} align 标题的对齐方式 ( 默认 'left' )
  65. * @property {String | Number} name 唯一标识符
  66. * @property {String} icon 标题左侧图片,可为绝对路径的图片或内置图标
  67. * @event {Function} change 某个item被打开或者收起时触发
  68. * @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
  69. */
  70. export default {
  71. name: "u-collapse-item",
  72. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  73. data() {
  74. return {
  75. elId: uni.$u.guid(),
  76. // uni.createAnimation的导出数据
  77. animationData: {},
  78. // 是否展开状态
  79. expanded: false,
  80. // 根据expanded确定是否显示border,为了控制展开时,cell的下划线更好的显示效果,进行一定时间的延时
  81. showBorder: false,
  82. // 是否动画中,如果是则不允许继续触发点击
  83. animating: false,
  84. // 父组件u-collapse的参数
  85. parentData: {
  86. accordion: false,
  87. border: false
  88. }
  89. };
  90. },
  91. watch: {
  92. expanded(n) {
  93. clearTimeout(this.timer)
  94. this.timer = null
  95. // 这里根据expanded的值来进行一定的延时,是为了cell的下划线更好的显示效果
  96. this.timer = setTimeout(() => {
  97. this.showBorder = n
  98. }, n ? 10 : 290)
  99. }
  100. },
  101. mounted() {
  102. this.init()
  103. },
  104. methods: {
  105. // 异步获取内容,或者动态修改了内容时,需要重新初始化
  106. init() {
  107. // 初始化数据
  108. this.updateParentData()
  109. if (!this.parent) {
  110. return uni.$u.error('u-collapse-item必须要搭配u-collapse组件使用')
  111. }
  112. const {
  113. value,
  114. accordion,
  115. children = []
  116. } = this.parent
  117. if (accordion) {
  118. if (uni.$u.test.array(value)) {
  119. return uni.$u.error('手风琴模式下,u-collapse组件的value参数不能为数组')
  120. }
  121. this.expanded = this.name == value
  122. } else {
  123. if (!uni.$u.test.array(value) && value !== null) {
  124. return uni.$u.error('非手风琴模式下,u-collapse组件的value参数必须为数组')
  125. }
  126. this.expanded = (value || []).some(item => item == this.name)
  127. }
  128. // 设置组件的展开或收起状态
  129. this.$nextTick(function () {
  130. this.setContentAnimate()
  131. })
  132. },
  133. updateParentData() {
  134. // 此方法在mixin中
  135. this.getParentData('u-collapse')
  136. },
  137. async setContentAnimate() {
  138. // 每次面板打开或者收起时,都查询元素尺寸
  139. // 好处是,父组件从服务端获取内容后,变更折叠面板后可以获得最新的高度
  140. const rect = await this.queryRect()
  141. const height = this.expanded ? rect.height : 0
  142. this.animating = true
  143. // #ifdef APP-NVUE
  144. const ref = this.$refs['animation'].ref
  145. animation.transition(ref, {
  146. styles: {
  147. height: height + 'px'
  148. },
  149. duration: this.duration,
  150. // 必须设置为true,否则会到面板收起或展开时,页面其他元素不会随之调整它们的布局
  151. needLayout: true,
  152. timingFunction: 'ease-in-out',
  153. }, () => {
  154. this.animating = false
  155. })
  156. // #endif
  157. // #ifndef APP-NVUE
  158. const animation = uni.createAnimation({
  159. timingFunction: 'ease-in-out',
  160. });
  161. animation
  162. .height(height)
  163. .step({
  164. duration: this.duration,
  165. })
  166. .step()
  167. // 导出动画数据给面板的animationData值
  168. this.animationData = animation.export()
  169. // 标识动画结束
  170. uni.$u.sleep(this.duration).then(() => {
  171. this.animating = false
  172. })
  173. // #endif
  174. },
  175. // 点击collapsehead头部
  176. clickHandler() {
  177. if (this.disabled && this.animating) return
  178. // 设置本组件为相反的状态
  179. this.parent && this.parent.onChange(this)
  180. },
  181. // 查询内容高度
  182. queryRect() {
  183. // #ifndef APP-NVUE
  184. // $uGetRect为uView自带的节点查询简化方法,详见文档介绍:https://www.uviewui.com/js/getRect.html
  185. // 组件内部一般用this.$uGetRect,对外的为uni.$u.getRect,二者功能一致,名称不同
  186. return new Promise(resolve => {
  187. this.$uGetRect(`#${this.elId}`).then(size => {
  188. resolve(size)
  189. })
  190. })
  191. // #endif
  192. // #ifdef APP-NVUE
  193. // nvue下,使用dom模块查询元素高度
  194. // 返回一个promise,让调用此方法的主体能使用then回调
  195. return new Promise(resolve => {
  196. dom.getComponentRect(this.$refs[this.elId], res => {
  197. resolve(res.size)
  198. })
  199. })
  200. // #endif
  201. }
  202. },
  203. };
  204. </script>
  205. <style lang="scss" scoped>
  206. @import "../../libs/css/components.scss";
  207. .u-collapse-item {
  208. &__content {
  209. overflow: hidden;
  210. height: 0;
  211. &__text {
  212. padding: 12px 15px;
  213. color: $u-content-color;
  214. font-size: 14px;
  215. line-height: 18px;
  216. }
  217. }
  218. }
  219. </style>