uni-collapse.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <view class="uni-collapse"><slot /></view>
  3. </template>
  4. <script>
  5. export default {
  6. name: 'UniCollapse',
  7. props: {
  8. accordion: {
  9. // 是否开启手风琴效果
  10. type: [Boolean, String],
  11. default: false
  12. }
  13. },
  14. data () {
  15. return {}
  16. },
  17. provide () {
  18. return {
  19. collapse: this
  20. }
  21. },
  22. created () {
  23. this.childrens = []
  24. },
  25. methods: {
  26. onChange () {
  27. let activeItem = []
  28. this.childrens.forEach((vm, index) => {
  29. if (vm.isOpen) {
  30. activeItem.push(vm.nameSync)
  31. }
  32. })
  33. this.$emit('change', activeItem)
  34. }
  35. }
  36. }
  37. </script>
  38. <style lang="scss">
  39. .uni-collapse {
  40. background-color: $uni-bg-color;
  41. position: relative;
  42. width: 100%;
  43. display: flex;
  44. flex-direction: column;
  45. &:after {
  46. position: absolute;
  47. z-index: 10;
  48. right: 0;
  49. bottom: 0;
  50. left: 0;
  51. height: 0px;
  52. content: '';
  53. -webkit-transform: scaleY(0.5);
  54. transform: scaleY(0.5);
  55. background-color: $uni-border-color;
  56. }
  57. &:before {
  58. position: absolute;
  59. z-index: 10;
  60. right: 0;
  61. top: 0;
  62. left: 0;
  63. height: 0px;
  64. content: '';
  65. -webkit-transform: scaleY(0.5);
  66. transform: scaleY(0.5);
  67. background-color: $uni-border-color;
  68. }
  69. }
  70. </style>