vue3,实现如何在element plus Collapse折叠面板中，只有在点击图标时才展开

 

 

 

 

忘了说：z-index 要注意一下，

menuNumber===1切换是通过handleChangeMenu的事件改变的

 

 

这个的类名是tailwind css的，主要看这里，对应上面的图片

<el-collapse-item name="1" class="relative">
          <template #title>
            <div class="w-full">
              <div @click="handleChangeURL" class="w-[90%] text-left">
                {{ titleList[0].cat_name }}
              </div>
              <div
                class="w-[50px] bg-white absolute -right-4 top-0 h-10 z-[99]"
              >
                <span
                  class="icon-jian iconfont theme-color"
                  v-if="menuNumber == 1"
                ></span>
                <span class="icon-jia1 iconfont theme-color" v-else></span>
              </div>
            </div>
          </template>
          <div>---------------你的内容--------------------</div> 
</el-collapse-item>

 

 

 

 

 

 

我的代码完整的

 <el-drawer v-model="visible" :show-close="true" size="100%">
      <el-collapse @change="handleChangeMenu" accordion>
        <el-collapse-item name="1" class="relative">
          <template #title>
            <div class="w-full">
              <div @click="handleChangeURL" class="w-[90%] text-left">
                {{ titleList[0].cat_name }}
              </div>
              <div
                class="w-[50px] bg-white absolute -right-4 top-0 h-10 z-[99]"
              >
                <span
                  class="icon-jian iconfont theme-color"
                  v-if="menuNumber == 1"
                ></span>
                <span class="icon-jia1 iconfont theme-color" v-else></span>
              </div>
            </div>
          </template>
          <div>
            <div class="overflow-x-auto whitespace-nowrap">
              <div
                @click="changeGoods(item.id)"
                v-for="(item, index) in goodsCategoryList"
                :key="index"
                class="inline-block px-4 py-1 bg-gray-200 mr-4 rounded-lg"
              >
                {{ item.cat_name }}
              </div>
            </div>
          </div>
          <!-- 图片 -->
          <div class="pt-4">
            <div class="overflow-x-auto whitespace-nowrap">
              <template v-for="(item, index) in goodsList" :key="index">
                <div
                  class="inline-block px-1 py-1 mr-2"
                  v-if="item.is_new === 0"
                >
                  <NuxtLink :to="`/productName/${item.id}`">
                    <div class="h-28 w-full">
                      <NuxtImg
                        class="h-full w-full object-cover"
                        :src="`${$config.public.IMAGR_URL}${
                          JSON.parse(item.images)[0]
                        }`"
                        :alt="item.name"
                      />
                    </div>
                  </NuxtLink>
                  <p
                    class="w-40 mt-2 text-center line-clamp-3 theme-text-color text-sm SourceHanSansCN-Normal whitespace-normal"
                  >
                    <!-- @click="handleChangeURL" -->
                    {{ item.name }}
                  </p>
                </div>
              </template>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item name="2" class="relative">
          <template #title>
            <div class="w-full">
              <div @click="handleChangeURL" class="w-[90%] text-left">
                {{ titleList[1].cat_name }}
              </div>
              <div
                class="w-[50px] bg-white absolute -right-4 top-0 h-10 z-[99]"
              >
                <span
                  class="icon-jian iconfont theme-color"
                  v-if="menuNumber == 2"
                ></span>
                <span class="icon-jia1 iconfont theme-color" v-else></span>
              </div>
            </div>
          </template>
          <div class="overflow-x-auto whitespace-nowrap">
            <template v-for="(item, index) in goodsListNew" :key="index">
              <div class="inline-block px-1 py-1 mr-2" v-if="item.is_new === 1">
                <div class="h-28 w-full">
                  <NuxtImg
                    class="h-full w-full object-cover"
                    :src="`${$config.public.IMAGR_URL}${
                      JSON.parse(item.images)[0]
                    }`"
                    :alt="item.name"
                  />
                </div>
                <p
                  class="w-40 mt-2 text-center line-clamp-3 theme-text-color text-sm SourceHanSansCN-Normal whitespace-normal"
                >
                  {{ item.name }}
                </p>
              </div>
            </template>
          </div>
        </el-collapse-item>
        <template v-for="(item, index) in titleList" :key="index">
          <el-collapse-item :name="index + 2" v-if="index > 1" class="relative">
            <template #title>
              <div class="w-full">
                <div @click="handleChangeURL" class="w-[90%] text-left">
                  {{ item.cat_name }}
                </div>
                <div
                  class="w-[50px] bg-white absolute -right-4 top-0 h-10 z-[99]"
                >
                  <div v-if="item.child.length > 0">
                    <span
                      class="icon-jian iconfont theme-color"
                      v-if="menuNumber == index + 2"
                    ></span>
                    <span class="icon-jia1 iconfont theme-color" v-else></span>
                  </div>
                </div>
              </div>
            </template>
            <ul v-if="item.child.length > 0">
              <li
                class="py-1"
                v-for="(item1, index1) in item.child"
                :key="index1"
                @click="handleChangeURL"
              >
                <NuxtLink to="/about"> {{ item1.cat_name }} </NuxtLink>
              </li>
            </ul>
          </el-collapse-item>
        </template>
      </el-collapse>
    </el-drawer>