手写 el-collapse

根据提供的代码，手写 el-collapse 的过程如下所示：
1. 首先，需要创建一个 Collapse 组件的 Vue 单文件组件。
2. 在 template 中，使用 `<div>` 标签来包裹需要折叠的内容。可以使用 `v-for` 来遍历 `collapseData` 数组，并使用 `CollapseItem` 组件来展示每个折叠项的标题和内容。
3. 在 script 标签中，导出一个对象，其中包含了组件的相关属性和方法。
4. 在 data 中定义一个 `collapseData` 数组，用于存储每个折叠项的标题和内容。
5. 在 style 标签中，使用 scoped 属性来限定样式的作用域，可以定义 `.collapse` 类来设置组件的宽度。

下面是手写 el-collapse 的代码示例：

<template>
  <div class="el-collapse">
    <div v-for="(item, index) in collapseData" :key="index" class="el-collapse-item">
      <div class="el-collapse-header" @click="toggleCollapse(index)">
        {{ item.title }}
      </div>
      <div class="el-collapse-content" v-show="item.show">
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collapseData: [
        { title: '标题1', content: '与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；', show: false },
        { title: '标题2', content: '控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；', show: false },
        { title: '标题3', content: '清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；', show: false },
        { title: '标题4', content: '用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；', show: false },
      ],
    };
  },
  methods: {
    toggleCollapse(index) {
      this.collapseData[index].show = !this.collapseData[index].show;
    },
  },
};
</script>

<style scoped>
.el-collapse {
  width: 600px;
}

.el-collapse-item {
  margin-bottom: 10px;
}

.el-collapse-header {
  cursor: pointer;
  background-color: #f0f0f0;
  padding: 10px;
}

.el-collapse-content {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
}
</style>

这样，你就可以使用 `<el-collapse>` 标签来引用这个组件，并实现手风琴效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [手写Vue个人组件库——Collapse / CollapseItem](https://blog.csdn.net/m0_46995864/article/details/118893487)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]