collapse.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <div class="el-collapse" role="tablist" aria-multiselectable="true">
  3. <slot></slot>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'ElCollapse',
  9. componentName: 'ElCollapse',
  10. props: {
  11. accordion: Boolean,
  12. value: {
  13. type: [Array, String, Number],
  14. default() {
  15. return [];
  16. }
  17. }
  18. },
  19. data() {
  20. return {
  21. activeNames: [].concat(this.value)
  22. };
  23. },
  24. provide() {
  25. return {
  26. collapse: this
  27. };
  28. },
  29. watch: {
  30. value(value) {
  31. this.activeNames = [].concat(value);
  32. }
  33. },
  34. methods: {
  35. setActiveNames(activeNames) {
  36. activeNames = [].concat(activeNames);
  37. let value = this.accordion ? activeNames[0] : activeNames;
  38. this.activeNames = activeNames;
  39. this.$emit('input', value);
  40. this.$emit('change', value);
  41. },
  42. handleItemClick(item) {
  43. if (this.accordion) {
  44. this.setActiveNames(
  45. (this.activeNames[0] || this.activeNames[0] === 0) &&
  46. this.activeNames[0] === item.name
  47. ? '' : item.name
  48. );
  49. } else {
  50. let activeNames = this.activeNames.slice(0);
  51. let index = activeNames.indexOf(item.name);
  52. if (index > -1) {
  53. activeNames.splice(index, 1);
  54. } else {
  55. activeNames.push(item.name);
  56. }
  57. this.setActiveNames(activeNames);
  58. }
  59. }
  60. },
  61. created() {
  62. this.$on('item-click', this.handleItemClick);
  63. }
  64. };
  65. </script>