u-collapse-item.vue 6.5 KB

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