[Day 24] 实作-日期格式转换字串长度限制

好的~ 昨天做好搜寻栏了，今天来做下面的列表

那一样需要先建一个子组件，可以参考 Day21，这边就不赘述

父组件 FestivalPage.vue

引入资料

这次资料集是用节庆专区这支api，这边先放其中一笔当参考

{
    "actId": 451,
    "actName": "2021新社花海节",
    "levelName": "国际级",
    "grade1": "浪漫",
    "grade2": "",
    "grade3": "乐活",
    "grade4": "",
    "grade5": "",
    "grade6": "",
    "description": "「新社花海」活动以「幸福花海、慢活山城、悠游台三线」为主轴，促进花海及山城自然农村特色与休闲农业区活动，营造「慢城」、「慢活」与「漫游」的台三线，进行点、线、面之推动，打造属於山城地区之农村休闲、体验及疗癒之新兴产业。活动以农委会种苗改良场第二农场40公顷土地为基地，营造秋季花海飨宴。常年则以国家级推动方案之「浪漫台三线-农情客家庄」环境整备目标，打造中部山城地区环境优美之入口意象。",
    "participation": "",
    "cityId": 1018,
    "address": "台中市 新社区协成里协兴街30号",
    "tel": "",
    "org": "台中市政府、行政院农业委会种苗改良繁殖场",
    "startTime": "Nov 1, 2021 12:00:00 AM",
    "endTime": "Dec 31, 2021 12:00:00 AM",
    "cycle": "2021年暂停办理",
    "noncycle": "",
    "website": "",
    "longitude": "24.2032599",
    "latitude": "120.8059929",
    "class1": "01",
    "class2": "02",
    "map": null,
    "travellinginfo": "",
    "parkinginfo": "",
    "charge": "",
    "remarks": "",
    "cityName": "台中市  新社区(新社乡)",
    "imageUrl": "/e_new_upload/task/a66dc343-cd8b-4ee0-a265-8d7fff520c3b/C2_315080000H_080551/abfd8ed838981f6c3ca4254b792be5a0368c91cc.jpg"
},

把资料从父组件传到子组件

<v-col sm="12" 
  v-for="item in festivalList" 
  :key="item.actId">
  <Festival :festival="item"></Festival>
</v-col>

子组件 Festival.vue

插入图片

在Day22的时候有分析过资料集，imageUrl他是提供内部的档案位置，在前面还需要加上 https://cloud.culture.tw/ 才能顺利捞到图片，这边写一个简单function来转换连结

getImageUrl(imageUrl) {
    return `https://cloud.culture.tw/${imageUrl}`;
},

<v-img 
  class="white--text align-end" 
  :src='getImageUrl(festival.imageUrl)' 
  max-height="200" 
/>

活动等级

这边使用v-chip组件来呈现，主要有分国际级跟全国级，用简单的v-if v-else处理即可。

<v-chip v-if="festival.levelName==='国际级'"
  label
  color="orange darken-3"
  text-color="white"
>
  {{ festival.levelName }}
</v-chip>
<v-chip v-else
  label
  color="blue darken-3"
  text-color="white"
>
  {{ festival.levelName }}
</v-chip>

日期格式转换

原本的日期是 "Nov 1, 2021 12:00:00 AM" 这种格式，但是我想要转成YYYY/MM/DD 这种比较好阅读的格式，这边一样写一只简单的Funtion来转换。

这边用到 Date.parse() 这个功能，他可以把日期格式转为毫秒，细节可参考这篇

然後用 new Date() 转成系统可以理解的日期，最後取出需要的栏位组成日期字串，可参考这篇。

getDateFormat(datetime) {
    const newDate = new Date(Date.parse(datetime));
    return `${newDate.getFullYear()}/${newDate.getMonth() + 1}/${newDate.getDate()}`;
},

文字超过限制转为 ...

因为活动描述都太长了，如果全部显示的话，画面会太长也不好看，

原本 v-card 就有预设 overflow 的属性了，不过它显示的行数还是太多，

我希望可以最多显示4行字就好，详细可参考这篇

这边采用CSS的方式

<div class="festival-desc">
    <p class="ellipsis">{{ festival.description }}</p>
</div>

.festival-desc {
  font-size: medium;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;   /* 想要显示多少行字*/
  -webkit-box-orient: vertical;
  white-space: normal;
}