tnblog
首页
视频
资源
登录
原

vue3实现展开更多，加载全部 。加载更多，展开全部

808人阅读 2024/12/3 14:51 总访问：889427 评论：0 收藏：0 手机
分类: 前端

方法一：分成两份来展示，一份显示出来，一份隐藏掉，点击加载全部在把隐藏的显示出来

封装的组件的代码如下：

  1. <template>
  2.     <div class="completeUerList-container">
  3.         <div class="cu-ct-title">
  4.             {{ props.title }}
  5.         </div>
  6.         <div class="cu-ct-users">
  7.             <div class="cu-ct-us-item" v-for="(item, index) in state.firstUsers" :key="index">
  8.                 <img class="cu-ct-us-head" src="https://image.tnblog.net/dbc68332d521436c983fbc3adc6d9c7f.jpeg" />
  9.                 <div class="cu-ct-us-name">
  10.                     成都标榜：闵杨
  11.                     <!-- <div class="cu-ct-us-spline"></div> -->
  12.                 </div>
  13.             </div>
  15.             <div class="cu-ct-us-item" v-show="state.isShowMore" v-for="(item, index) in state.remainingUsers" :key="index">
  16.                 <img class="cu-ct-us-head" src="https://image.tnblog.net/dbc68332d521436c983fbc3adc6d9c7f.jpeg" />
  17.                 <div class="cu-ct-us-name">成都标榜：闵杨</div>
  18.             </div>
  19.         </div>
  20.         <div class="cu-ct-more" v-if="completeuCount > 10 && !state.isShowMore">
  21.             <div class="cuct-wrap" @click="loadMore">
  22.                 加载全部<el-icon size="16"><ArrowDownBold class="cuct-wrap-icon" /></el-icon>
  23.             </div>
  24.         </div>
  25.     </div>
  26. </template>
  27. <script setup lang="ts" name="CompleteUerList">
  28.     import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue'
  29.     import { ArrowDownBold } from '@element-plus/icons-vue'
  31.     const props = defineProps({
  32.         title: {
  33.             type: String,
  34.             default: '已完成任务'
  35.         },
  36.         completeUsers: {
  37.             type: [] as any,
  38.             default: []
  39.         }
  40.     })
  42.     const state = reactive({
  43.         firstUsers: [],
  44.         remainingUsers: [],
  45.         isShowMore: false
  46.     })
  48.     const completeuCount = ref(0)
  50.     onMounted(() => {
  51.         completeuCount.value = props.completeUsers.length
  53.         if (completeuCount.value > 10) {
  54.             // 分成两份来展示，默认显示10条
  55.             state.firstUsers = props.completeUsers.slice(0, 10)
  56.             state.remainingUsers = props.completeUsers.slice(10)
  57.         }
  58.         else{
  59.             state.firstUsers = props.completeUsers
  60.         }
  61.     })
  63.     // 加载更多，让另外一份隐藏的显示出来
  64.     const loadMore = () => {
  65.         state.isShowMore = true
  66.     }
  67. </script>
  68. <style scoped="scoped" lang="scss">
  69.     .completeUerList-container {
  70.         .cu-ct-title {
  71.             font-family: Microsoft YaHei;
  72.             font-weight: 600;
  73.             font-size: 16px;
  74.             color: #292f3d;
  75.         }
  77.         .cu-ct-users {
  78.             margin-top: 15px;
  80.             .cu-ct-us-item:last-child {
  81.                 border-bottom: none;
  82.                 padding-bottom: 0px;
  83.             }
  85.             .cu-ct-us-item {
  86.                 display: flex;
  87.                 align-items: center;
  88.                 margin-bottom: 10px;
  89.                 border-bottom: solid 1px #f7f7f7;
  90.                 padding-bottom: 10px;
  91.                 cursor: pointer;
  93.                 .cu-ct-us-head {
  94.                     width: 28px;
  95.                     height: 28px;
  96.                     border-radius: 50%;
  97.                 }
  99.                 .cu-ct-us-name {
  100.                     font-family: Microsoft YaHei;
  101.                     font-weight: 400;
  102.                     font-size: 14px;
  103.                     color: #60646e;
  104.                     line-height: 26px;
  105.                     margin-left: 15px;
  106.                 }
  108.                 .cu-ct-us-spline {
  109.                     height: 1px;
  110.                     background: #f7f7f7;
  111.                     width: 300px;
  112.                     margin-top: 10px;
  113.                 }
  114.             }
  115.         }
  117.         .cu-ct-more {
  118.             margin-top: 13px;
  119.             margin-bottom: 7px;
  120.             text-align: center;
  121.             font-family: Microsoft YaHei;
  122.             font-weight: 400;
  123.             font-size: 14px;
  124.             color: #1880ff;
  126.             .cuct-wrap {
  127.                 display: flex;
  128.                 align-items: center;
  129.                 justify-content: center;
  130.                 cursor: pointer;
  132.                 .cuct-wrap-icon {
  133.                     margin-left: 5px;
  134.                 }
  135.             }
  136.         }
  137.     }
  138. </style>

对这个组件的使用：

  1. <template>
  2.     <div class="teacher-training-container">
  3.         <CompleteUerList title="已完成任务" :completeUsers=state.completeUsers></CompleteUerList>
  4.     </div>
  6. </template>
  7. <script setup lang="ts" name="teacher-training-details">
  8.     const CompleteUerList = defineAsyncComponent(() => import('/@/components/CompleteUerList.vue'))
  10.         const state = reactive({
  11.             // 模拟提供数据源
  12.             completeUsers:function(){
  13.                 let users = []
  14.                 for (let index = 0; index < 16; index++) {
  15.                     users.push({name:index})    
  16.                 }
  17.                 return users
  18.             }(),
  19.     })
  20. </script>

增加了一个是否显示全部的配置IsShowAll

  1. <template>
  2.     <div class="completeUerList-container">
  3.         <div class="cu-ct-title">
  4.             {{ props.title }}
  5.         </div>
  6.         <div class="cu-ct-users">
  7.             <div class="cu-ct-us-item" v-for="(item, index) in state.firstUsers" :key="index">
  8.                 <img class="cu-ct-us-head" src="https://image.tnblog.net/dbc68332d521436c983fbc3adc6d9c7f.jpeg" />
  9.                 <div class="cu-ct-us-name">
  10.                     成都标榜：闵杨
  11.                 </div>
  12.             </div>
  14.             <div class="cu-ct-us-item" v-show="state.isShowMore" v-for="(item, index) in state.remainingUsers" :key="index">
  15.                 <img class="cu-ct-us-head" src="https://image.tnblog.net/dbc68332d521436c983fbc3adc6d9c7f.jpeg" />
  16.                 <div class="cu-ct-us-name">成都标榜：闵杨</div>
  17.             </div>
  18.         </div>
  19.         <div class="cu-ct-more" v-if="completeuCount > 10 &&!IsShowAll && !state.isShowMore">
  20.             <div class="cuct-wrap" @click="loadMore">
  21.                 加载全部<el-icon size="16"><ArrowDownBold class="cuct-wrap-icon" /></el-icon>
  22.             </div>
  23.         </div>
  24.     </div>
  25. </template>
  26. <script setup lang="ts" name="CompleteUerList">
  27.     import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue'
  28.     import { ArrowDownBold } from '@element-plus/icons-vue'
  30.     const props = defineProps({
  31.         title: {
  32.             type: String,
  33.             default: '已完成任务'
  34.         },
  35.         IsShowAll: {
  36.             type: Boolean,
  37.             default: false
  38.         },
  39.         completeUsers: {
  40.             type: [] as any,
  41.             default: []
  42.         }
  43.     })
  45.     const state = reactive({
  46.         firstUsers: [],
  47.         remainingUsers: [],
  48.         isShowMore: false
  49.     })
  51.     const completeuCount = ref(0)
  53.     onMounted(() => {
  54.         completeuCount.value = props.completeUsers.length
  56.         if (completeuCount.value > 10 && props.IsShowAll===false) {
  57.             state.firstUsers = props.completeUsers.slice(0, 10)
  58.             state.remainingUsers = props.completeUsers.slice(10)
  59.         }
  60.         else{
  61.             state.firstUsers = props.completeUsers
  62.         }
  63.     })
  65.     const loadMore = () => {
  66.         state.isShowMore = true
  67.     }
  68. </script>
  69. <style scoped="scoped" lang="scss">
  70.     .completeUerList-container {
  71.         .cu-ct-title {
  72.             font-family: Microsoft YaHei;
  73.             font-weight: 600;
  74.             font-size: 16px;
  75.             color: #292f3d;
  76.         }
  78.         .cu-ct-users {
  79.             margin-top: 15px;
  81.             .cu-ct-us-item:last-child {
  82.                 border-bottom: none;
  83.                 padding-bottom: 0px;
  84.             }
  86.             .cu-ct-us-item {
  87.                 display: flex;
  88.                 align-items: center;
  89.                 margin-bottom: 10px;
  90.                 border-bottom: solid 1px #f7f7f7;
  91.                 padding-bottom: 10px;
  92.                 cursor: pointer;
  94.                 .cu-ct-us-head {
  95.                     width: 28px;
  96.                     height: 28px;
  97.                     border-radius: 50%;
  98.                 }
  100.                 .cu-ct-us-name {
  101.                     font-family: Microsoft YaHei;
  102.                     font-weight: 400;
  103.                     font-size: 14px;
  104.                     color: #60646e;
  105.                     line-height: 26px;
  106.                     margin-left: 15px;
  107.                 }
  109.                 .cu-ct-us-spline {
  110.                     height: 1px;
  111.                     background: #f7f7f7;
  112.                     width: 300px;
  113.                     margin-top: 10px;
  114.                 }
  115.             }
  116.         }
  118.         .cu-ct-more {
  119.             margin-top: 13px;
  120.             margin-bottom: 7px;
  121.             text-align: center;
  122.             font-family: Microsoft YaHei;
  123.             font-weight: 400;
  124.             font-size: 14px;
  125.             color: #1880ff;
  127.             .cuct-wrap {
  128.                 display: flex;
  129.                 align-items: center;
  130.                 justify-content: center;
  131.                 cursor: pointer;
  133.                 .cuct-wrap-icon {
  134.                     margin-left: 5px;
  135.                 }
  136.             }
  137.         }
  138.     }
  139. </style>

使用

  1. <CompleteUerList title="已完成任务" :IsShowAll="false" :completeUsers=state.completeUsers></CompleteUerList>

方法二：固定高度的实现方式


实现思路：给一个固定高度然后设置一个超高就出现滚动条，点击加载全部的时候就把那个固定高度的样式去掉即可。

实现代码
直接复制进去就可以用了。

  1. <template>
  2.     <div class="ai-case-tinking-container">
  3.         <div class="ac-cc-area">
  4.             <div class="ac-cc-title">正在思考</div>
  5.             <div class="ac-think-body">
  6.                 <div class="ac-think-content" v-bind:class="{ 'ac-think-content-height': isFixedHeight }">
  7.                     1. 案例名称：立法听证会护航未成年人网络权益 基本信息 预期效果：树立规则意识与创新竞争观
  8.                     来源：财政部新能源汽车推广应用补助公示（2025年第1批）、海关总署进出口数据
  9.                     背景：2025年美国对华电动汽车征收45%关税背景下，我国车企通过技术授权模式进背景：2026年美国对华电动汽车征收45%关税背景下，我国车企通过技术授权模式进
  10.                 </div>
  11.                 <div class="ac-think-more" v-if="isFixedHeight" @click="loadAll">展开全部<el-icon><ArrowDown /></el-icon></div>
  12.             </div>
  13.         </div>
  14.     </div>
  15. </template>
  17. <script setup lang="ts" name="tasks">
  18. import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue'
  21. const isFixedHeight = ref(true)
  22. const loadAll = () =>{
  23.     isFixedHeight.value = false
  24. }
  27. onMounted(() => {
  28.     isFixedHeight.value = true
  29. })
  31. </script>
  32. <style scoped="scoped" lang="scss">
  33. .ai-case-tinking-container {
  34.     padding: 15px 15px 15px 15px;
  36.     .ac-cc-title {
  37.         height: 50px;
  38.         background: #f8f9fb;
  39.         border-radius: 4px 4px 0px 0px;
  40.         border: 1px solid #edeff3;
  41.         line-height: 50px;
  42.         padding-left: 20px;
  44.         font-family: PingFang SC, PingFang SC;
  45.         font-weight: 400;
  46.         font-size: 16px;
  47.         color: #30373d;
  48.     }
  50.     .ac-think-body {
  51.         margin-top: 15px;
  52.         padding: 15px 0px 15px 0px;
  54.         background: #f6f7fb;
  55.         border-radius: 10px 10px 10px 10px;
  58.         .ac-think-content-height{
  59.             height: 96px;
  60.         }
  62.         .ac-think-content {
  63.             font-family: PingFang SC, PingFang SC;
  64.             padding-left: 15px;
  65.             padding-right: 15px;
  66.             font-weight: 400;
  67.             font-size: 13px;
  68.             color: #30373d;
  69.             // height: 96px;
  70.             overflow-y: auto;
  71.             line-height: 25px;
  72.         }
  73.     }
  75.     .ac-think-more {
  76.         // width: 489px;
  77.         height: 29px;
  78.         background: linear-gradient(180deg, #f6f7fb 0%, #d4e9ff 100%);
  79.         border-radius: 0px 0px 10px 10px;
  80.         cursor: pointer;
  82.         text-align: center;
  83.         font-family: PingFang SC, PingFang SC;
  84.         font-weight: 400;
  85.         font-size: 12px;
  86.         line-height: 29px;
  87.         color: #1890ff;
  89.         display: flex;
  90.         justify-content: center;
  91.         align-items: center;
  93.     }
  94. }
  95. </style>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue3，vue组件，props给一个对象参数。vue组件间传参数vue父组件给子组件传参数。组件参数类型。父组件调用子组件的方法。vue组件事件监听，给子组件传递方法，子组件调用父组件方法
[TOC]组件可以使用props给组件传值，可以同时传递多个，可以是任意类型，比如字符串或者对象。 下面是个简单的例子： &lt...

vue3最基础的数据加载，表格table
vue3表格加载一点静态数据 &lt;template&gt; &lt;el-table :data=&quot;tableData&quot; style=&quot;width: 100%&quot...

vue3 Element Plus 表单输入框放到一行
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。 通过设置 inline 属性为 true 可以让表单域变为行内的表单域...

vue3 Element ui Plus 表格 分页，vue3 el-pagination分页
其实就是el-pagination控件的使用而已 &lt;template&gt; &lt;div&gt; &lt;el-table :data=&quot;tableData&quot; ...

vue触发a标签的点击事件。vue3 dom操作 触发点击事件 。文件选择库只会触发一次change事件的问题
[TOC]vue触发a标签的点击事件直接操作dom节点的方式比较简单 &lt;button @click=&quot;handleBtnClick&quot;&gt;点击按钮&...

vue3 ref的使用多个ref的使用。通过ref触发点击事件
多个ref获取的方法可以使用一样的,通过变量名来区分就行了 const vabUploadRef = ref() const multipleTableRef = ref() ...

vue elementui，vue3 element plus 文件上传的时候设置其他参数。后台.net接收传递的额外参数。图片上传
比如上传文件的时候额外传递两个select选择的值 前台前面上传文件的时候要提供默认参数很简单，el-upload绑定一个data即可...

vue，vue3 打开新页面，页面跳转。vue跳转到一个新页面。vue路由传参，vue3路由传参，vue3 获取路由参数
[TOC]VUE页面跳转本地页面跳转 goApplicationCenter() { //进行页面跳转 let path = &quot;/application-center&quo...

vuevue3组件封装，vue组件模板。简单组件模板。基础组件模板。vue引入自定义的组件。vue使用自定义的组件。插槽slot使用。vue封装格子效果，一块一块的grid布局效果
[TOC]vue封装组件的简单模板贴一个简单模板方便自定义组件的时候直接复制 &lt;template&gt; &lt;div class=&quot;app...

.net6 Signalr+vue3 的运用（上）
.net6 Signalr+Vue3 的运用（上）[TOC] 什么是 SignalR?ASP.NET Core SignalR 是一个开放源代码库，可用于简化向应用添加...

.net6 Signalr+vue3 的运用（下）
.net6 Signalr+Vue3 的运用（下）[TOC] 上篇链接：https://www.tnblog.net/hb/article/details/7961SignalR 中的用户 Sig...

.net6 Signalr+vue3 配合Ingress Nginx的运用
.net6 Signalr+Vue3 配合Ingress Nginx的运用[TOC] 结合上篇：https://www.tnblog.net/hb/article/details/7963 项目打...

vue3 Element Plus 表格使用vue3常用界面搭配。vue3基础模板使用
一个简单的表格加时间搜索界面效果如下： 代码如下： &lt;template&gt; &lt;div class=&quot;app-container&quot;&g...

vue3 如何加prototype。vue3使用globalProperties
在2.X版本中创建一个vue 实例是通过 new Vue()来实现的，到了3.X中则是通过使用createApp这个 API返回一个应用实例，并且可...
这一生多幸运赶上过你.
博主信息
排名
8
文章
242
粉丝
7
评论
7
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术