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.

u-collapse.vue 2.5 KiB

3 vuotta sitten
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <view class="u-collapse">
  3. <slot />
  4. </view>
  5. </template>
  6. <script>
  7. /**
  8. * collapse 手风琴
  9. * @description 通过折叠面板收纳内容区域
  10. * @tutorial https://www.uviewui.com/components/collapse.html
  11. * @property {Boolean} accordion 是否手风琴模式(默认true)
  12. * @property {Boolean} arrow 是否显示标题右侧的箭头(默认true)
  13. * @property {String} arrow-color 标题右侧箭头的颜色(默认#909399)
  14. * @property {Object} head-style 标题自定义样式,对象形式
  15. * @property {Object} body-style 主体自定义样式,对象形式
  16. * @property {String} hover-class 样式类名,按下时有效(默认u-hover-class)
  17. * @event {Function} change 当前激活面板展开时触发(如果是手风琴模式,参数activeNames类型为String,否则为Array)
  18. * @example <u-collapse></u-collapse>
  19. */
  20. export default {
  21. name:"u-collapse",
  22. props: {
  23. // 是否手风琴模式
  24. accordion: {
  25. type: Boolean,
  26. default: true
  27. },
  28. // 头部的样式
  29. headStyle: {
  30. type: Object,
  31. default () {
  32. return {}
  33. }
  34. },
  35. // 主体的样式
  36. bodyStyle: {
  37. type: Object,
  38. default () {
  39. return {}
  40. }
  41. },
  42. // 每一个item的样式
  43. itemStyle: {
  44. type: Object,
  45. default () {
  46. return {}
  47. }
  48. },
  49. // 是否显示右侧的箭头
  50. arrow: {
  51. type: Boolean,
  52. default: true
  53. },
  54. // 箭头的颜色
  55. arrowColor: {
  56. type: String,
  57. default: '#909399'
  58. },
  59. // 标题部分按压时的样式类,"none"为无效果
  60. hoverClass: {
  61. type: String,
  62. default: 'u-hover-class'
  63. }
  64. },
  65. provide() {
  66. return {
  67. uCollapse: this
  68. }
  69. },
  70. created() {
  71. this.childrens = []
  72. },
  73. data() {
  74. return {
  75. }
  76. },
  77. methods: {
  78. // 重新初始化一次内部的所有子元素的高度计算,用于异步获取数据渲染的情况
  79. init() {
  80. this.childrens.forEach((vm, index) => {
  81. vm.init();
  82. })
  83. },
  84. // collapse item被点击,由collapse item调用父组件方法
  85. onChange() {
  86. let activeItem = [];
  87. this.childrens.forEach((vm, index) => {
  88. if (vm.isShow) {
  89. activeItem.push(vm.nameSync);
  90. }
  91. })
  92. // 如果是手风琴模式,只有一个匹配结果,也即activeItem长度为1,将其转为字符串
  93. if (this.accordion) activeItem = activeItem.join('');
  94. this.$emit('change', activeItem);
  95. }
  96. }
  97. }
  98. </script>
  99. <style lang="scss" scoped>
  100. @import "../../libs/css/style.components.scss";
  101. </style>