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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
2023-03-26 typescript 学习