AI销管
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

u-collapse.vue 2.4 KiB

vor 2 Jahren
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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. created() {
  66. this.childrens = []
  67. },
  68. data() {
  69. return {
  70. }
  71. },
  72. methods: {
  73. // 重新初始化一次内部的所有子元素的高度计算,用于异步获取数据渲染的情况
  74. init() {
  75. this.childrens.forEach((vm, index) => {
  76. vm.init();
  77. })
  78. },
  79. // collapse item被点击,由collapse item调用父组件方法
  80. onChange() {
  81. let activeItem = [];
  82. this.childrens.forEach((vm, index) => {
  83. if (vm.isShow) {
  84. activeItem.push(vm.nameSync);
  85. }
  86. })
  87. // 如果是手风琴模式,只有一个匹配结果,也即activeItem长度为1,将其转为字符串
  88. if (this.accordion) activeItem = activeItem.join('');
  89. this.$emit('change', activeItem);
  90. }
  91. }
  92. }
  93. </script>
  94. <style lang="scss" scoped>
  95. @import "../../libs/css/style.components.scss";
  96. </style>