Vue3的功能：收起显示

最新推荐文章于 2025-03-26 16:04:40 发布

Wayward and pinnacle

最新推荐文章于 2025-03-26 16:04:40 发布

阅读量454

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_74268696/article/details/144270737

   <div class="Talent-head">
<!--     &lt;!&ndash;  经营类目&ndash;&gt;-->
       <div class="Business-category-middle">
          <div class="Business-category">经营类目:</div>
         <div class="Business-category-list">
           <div
             v-for="(category, index) in visibleCategories"
             :key="index"
             class="clothing"
           >
             {{ category }}
           </div>
         </div>
         <div @click="toggleShowMore" class="toggle-button">
           {{ showMore ? '收起' : '更多' }}
         </div>

         </div>
       <!-- 达人搜索-->
       <div class="Talent-search-middle">
         <div class="Talent-search">达人搜索:</div>
         <div class="Business-category-list">
           <el-form :model="form1"  class="Talent-search-box">
             <el-form-item label="商品名称BD">
               <el-input    clearable  style="margin-right: 20px" @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="达人信息">
               <el-input  style="margin-right: 20px"  clearable @keyup.enter="handleQuery" />
             </el-form-item>
             <el-form-item label="店铺名称">
               <el-input    clearable   style="margin-right: 20px" @keyup.enter="handleQuery"/>
             </el-form-item>

             <div class="block">
               <el-form-item label="时间筛选">
               <el-date-picker
                 v-model="value2"
                 type="daterange"
                 start-placeholder="开始时期"
                 end-placeholder="结束日期"
                 :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
                 style="width: 400px"
               />
               </el-form-item>
             </div>
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>

           </el-form>
         </div>
       </div>
       </div>

// 假设这是你的经营类目列表
const categories = [
  '服装内衣', '服装内衣', '服装内衣', '服装内衣', '服装内衣',
  '服装内衣', '服装内衣', '服装内衣', '服装内衣', '服装内衣',
  '服装内衣', '服装内衣', '服装内衣', '服装内衣', '服装内衣',
  '服装内衣', '服装内衣', '服装内衣', '服装内衣', '服装内衣'
];

// 控制显示的项目数量
const limit = ref(10);
const showMore = ref(false);
// 计算属性，根据 showMore 的状态决定显示多少个类别
const visibleCategories = computed(() => {
  return showMore.value ? categories : categories.slice(0, limit.value);
});
// 切换显示更多或收起
const toggleShowMore = () => {
  showMore.value = !showMore.value;
}