卡片式组件封装demo

原创

已于 2024-07-17 16:36:00 修改 · 1.2k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue

于 2024-07-17 16:27:16 首次发布

效果视频：

卡片组件

样式还得细调~，时间有限，主要记录一下逻辑。

html结构：
在这里插入图片描述

父组件

数据处理

在父页面进行v-for循环，灵活根据状态可赋值数组，再根据数组的长度调用卡片组件。

数据格式

ASTATE：状态；整型，0表示进行中，1表示超期
DESCRIPTION：描述；字符串类型；
STARTTIME：开始时间；字符串类型，格式为年月日T时分秒
PLANENDTIME：结束时间；字符串类型，格式为年月日T时分秒

以上字段在子组件中皆有用到

[
  {
   
   
    "ASTATE": 0,
    "DESCRIPTION": "大名称大名称\n名称:21名称21名称21\n名称:21名称21名称21\n时间:2024-7-17",
    "STARTTIME": "2024-01-03T01:02:03",
    "PLANENDTIME": "2024-01-04T01:02:03",
    "ID": 2
  },
  {
   
   
    "ASTATE": 2,
    "DESCRIPTION": "大名称大名称\n名称:21名称21名称21\n名称:21名称21名称21\n时间:2024-7-17",
    "STARTTIME": "2024-01-07T01:02:03",
    "PLANENDTIME": "2024-01-08T01:02:03",
    "ID": 4
  }
]

父组件的全部代码

<!-- 页面名称 -->
<template>
  <div class="homebox-class">
    <div class="mainbox">
      <h2>任务管理</h2>
      <!-- 超期 -->
      <h4 v-if="taskOverdueData.length>0" class="overduetitle">超期 {
   
   {
   
   taskOverdueData.length}}</h4>
      <div class="outtabsbox">
        <tab-task-com-vue :width="18" :height="16" v-for="(task,index) in taskOverdueData" :taskData="task" :key="'overdue' + index"></tab-task-com-vue>
      </div>

      <!-- 进行中 -->
      <h4 v-if="taskOngoingData.length>0" class="ongoingtitle">进行中 {
   
   {
   
   taskOngoingData.length}}</h4>
      <div class="outtabsbox">
        <tab-task-com-vue :width="18" :height="16" v-for="(task,index) in taskOngoingData" :taskData="task" :key="'ongoing' + index"></tab-task-com-vue>
      </div>
    </div>
  </div>
</template>

<script>
import testdata from './test.json';
import tabTaskComVue from '@/views/hzevt/abnormal/tabTaskCom.vue';
export default {
   
   
  components: {
   
    tabTaskComVue },
  props: {
   
   },
  data() {
   
   
    return {
   
   
      taskOverdueData: [],
      taskOngoingData: [],
    };
  },
  watch: {
   
   },
  computed: {
   
   },
  created() {
   
    },
  mounted() {
   
   
    console.log('testdata', testdata);
    for (var i of testdata) {
   
   
      if (i.ASTATE == 0) {
   
   
        this.taskOngoingData.push(i);
      } else if (i.ASTATE == 2) {
   
   
        this.taskOverdueData.push(i);
      }
    }
  },
  methods: {
   
   },
};
</script