租房小程序前端代码
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.

228 lines
6.6 KiB

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