u-collapse.vue 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <view class="u-collapse">
  3. <u-line v-if="border"></u-line>
  4. <slot />
  5. </view>
  6. </template>
  7. <script>
  8. import props from './props.js';
  9. /**
  10. * collapse 折叠面板
  11. * @description 通过折叠面板收纳内容区域
  12. * @tutorial https://www.uviewui.com/components/collapse.html
  13. * @property {String | Number | Array} value 当前展开面板的name,非手风琴模式:[<string | number>],手风琴模式:string | number
  14. * @property {Boolean} accordion 是否手风琴模式( 默认 false )
  15. * @property {Boolean} border 是否显示外边框 ( 默认 true )
  16. * @event {Function} change 当前激活面板展开时触发(如果是手风琴模式,参数activeNames类型为String,否则为Array)
  17. * @example <u-collapse></u-collapse>
  18. */
  19. export default {
  20. name: "u-collapse",
  21. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  22. watch: {
  23. needInit() {
  24. this.init()
  25. }
  26. },
  27. created() {
  28. this.children = []
  29. },
  30. computed: {
  31. needInit() {
  32. // 通过computed,同时监听accordion和value值的变化
  33. // 再通过watch去执行init()方法,进行再一次的初始化
  34. return [this.accordion, this.value]
  35. }
  36. },
  37. watch: {
  38. // 当父组件需要子组件需要共享的参数发生了变化,手动通知子组件
  39. parentData() {
  40. if (this.children.length) {
  41. this.children.map(child => {
  42. // 判断子组件(u-checkbox)如果有updateParentData方法的话,就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
  43. typeof(child.updateParentData) === 'function' && child.updateParentData()
  44. })
  45. }
  46. },
  47. },
  48. methods: {
  49. // 重新初始化一次内部的所有子元素
  50. init() {
  51. this.children.map(child => {
  52. child.init()
  53. })
  54. },
  55. /**
  56. * collapse-item被点击时触发,由collapse统一处理各子组件的状态
  57. * @param {Object} target 被操作的面板的实例
  58. */
  59. onChange(target) {
  60. let changeArr = []
  61. this.children.map((child, index) => {
  62. // 如果是手风琴模式,将其他的折叠面板收起来
  63. if (this.accordion) {
  64. child.expanded = child === target ? !target.expanded : false
  65. child.setContentAnimate()
  66. } else {
  67. if(child === target) {
  68. child.expanded = !child.expanded
  69. child.setContentAnimate()
  70. }
  71. }
  72. // 拼接change事件中,数组元素的状态
  73. changeArr.push({
  74. // 如果没有定义name属性,则默认返回组件的index索引
  75. name: child.name || index,
  76. status: child.expanded ? 'open' : 'close'
  77. })
  78. })
  79. this.$emit('change', changeArr)
  80. this.$emit(target.expanded ? 'open' : 'close', target.name)
  81. }
  82. }
  83. }
  84. </script>
  85. <style lang="scss" scoped>
  86. @import "../../libs/css/components.scss";
  87. </style>