// 動畫效果可以在此更改為需要的
const elTransition =
'0.4s height ease-in-out, 0.4s padding-top ease-in-out, 0.4s padding-bottom ease-in-out';
- Sep 15 Tue 2020 20:41
[HTML] [Vue] 收合動畫效果元件 + 使用
- Sep 11 Fri 2020 21:06
[HTML] [Vue] 回到頂端(scroll to top / go to top) 元件
<template> <div v-show="showGoTopIcon" id="goToTop" class='go-to-top' @click="scrollToTop" > <img :src="goTopSrc"> </div> </template>
- Jul 08 Wed 2020 21:21
[HTML] [Vue] 蒙板元件
<template>
<div>
<div class="mask full-page">
<div class="mask-background"> </div>
<div class="mask-slot">
<slot />
</div>
</div>
</div>
</template>
- Apr 27 Mon 2020 22:57
[JavaScript] [Vue] 套件 vue2-datepicker封裝應用 做出 date range + 快速選擇 元件
<template>
<div class="animated fadeIn">
<div class="flex-right">
<date-picker
:format="datetime.FormatDate"
:title-format="datetime.FormatDate"
:placeholder="_('w_DateSelectDates')"
:range="true"
:clearable="false"
type="date"
class="col-md-3"
v-model="inputDatum.dateRange"
@input="updateDateRange"
>
<template v-slot:sidebar="{ emit }">
<div style="text-align: left">
<button class="mx-btn mx-btn-text col-md-12" @click="selectToday(emit)">Today</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectYesterday(emit)">Yesterday</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectLast7days(emit)">Last 7 days</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectThisWeek(emit)">This Week</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectLastWeek(emit)">Last Week'</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectThisMonth(emit)">This Month</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectLastMonth(emit)">Last Month</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectQ1(emit)">Q1</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectQ2(emit)">Q2</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectQ3(emit)">Q3</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectQ4(emit)">Q4</button>
<button class="mx-btn mx-btn-text col-md-12" @click="selectThisYear(emit)">This Year</button>
</div>
</template>
</date-picker>
</div>
</div>
</template>
- Apr 01 Wed 2020 21:17
[資源整理] 轉職課程整理(2)
- Mar 23 Mon 2020 23:20
[JavaScript] [Vue] 使用 html2Canvas + JsPDF 下載 pdf
<template>
<div>
<b-col cols="6">
<b-button
variant="primary"
@click="pdfExport"
>
<i class="fa fa-file-pdf-o"></i>
Export PDF
</b-button>
</b-col>
</div>
</template>
- Jan 10 Fri 2020 00:21
[JavaScript] [Vue] 套件 vue-ctk-date-time-picker 封裝應用 做出 date range + 快速選擇 元件
<template>
<div>
<p class="title-date" v-if="isTitle">Select Dates</p>
<vue-ctk-date-time-picker
:no-label="true"
:range="true"
:custom-shortcuts="shortcuts"
formatted="YYYY/MM/DD"
format="YYYy/MM/DD"
disabled-dates="disabledDates"
v-model="date"
@is-hidden="validateDate"
@validate="validateDate"
id="range"
>
</vue-ctk-date-time-picker>
</div>
</template>
- Dec 03 Tue 2019 19:57
[WebStorm] code format eslint規範配置 script和style後的首行代碼不縮進
1.取消縮進檢查、編輯器配置:
File > Settings >
Editor > Code Style >
取消Indents Detection和EditorConfig勾選
- Aug 15 Thu 2019 20:26
[JavaScript] 記一次資料整理
interface IEnteredExitedSubtotal { Hour: number; Today: number; Total: number; TotalInTimeSection: number; } interface IInsideSubtotal { Total: number; } interface CameraData { Channel: number; EnteredSubtotal: IEnteredExitedSubtotal; ExitedSubtotal: IEnteredExitedSubtotal; InsideSubtotal: IInsideSubtotal; RuleName: string; UTC: number; } let data = `summary.Channel=123 summary.EnteredSubtotal.Hour=22 summary.EnteredSubtotal.Today=60 summary.EnteredSubtotal.Total=1769 summary.EnteredSubtotal.TotalInTimeSection=60 summary.ExitedSubtotal.Hour=19 summary.ExitedSubtotal.Today=52 summary.ExitedSubtotal.Total=1705 summary.ExitedSubtotal.TotalInTimeSection=52 summary.InsideSubtotal.Total=324 summary.RuleName=NumberStat summary.UTC=1565870249`;
- Jul 31 Wed 2019 00:00
【推薦】【哪吒之魔童降世】瀚墨 (敖丙cv) 翻唱 主題曲《哪吒》
歌好聽!!
電影好看!!
CP可口好吃!!
台灣何時會上映阿??
- Jul 02 Tue 2019 21:35
[JavaScript] 日期格式轉換,今天、昨天、本週、上週、本月、上月、本年、日期檢查...
// 注意:回傳值都為string格式,如果要日期格式,
請使用 new Date(this.getDateCount);
// 格式化日期
formatDate(dateArg: any): string {
const date = new Date(dateArg);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const formatMonth = month < 10 ? `0${month}` : month;
const formatDay = day < 10 ? `0${day}` : day;
return `${year}-${formatMonth}-${formatDay}`
// set Date to 00:00:00
DateToZero(value: Date): Date {
let date = new Date(value.getTime());
date.setHours(0, 0, 0, 0);
return date;
}
- Jun 15 Sat 2019 22:29
[城市尋寶] 木柵欄裡的祕密 七個關卡 答案 謎底 解答 破關(請慎入)
- May 31 Fri 2019 21:26
[JavaScript] 跑迴圈完成時間選單陣列,小時補am、pm,分鐘補0
// 小時 for (let i = 0; i < 25; i++) { const tempHour = i === 24 ? "00" : i < 10 ? "0" + i.toString() : i.toString(); const tempValue = tempHour + ":00" + (i < 12 || i > 23 ? " am" : " pm"); const tempObject = { value: i.toString(), text: tempValue }; this.dayRanges.hours.push(tempObject); } // 分鐘 for (let i = 0; i < 60; i++) { const tempMinute = i === 60 ? "00" : i < 10 ? "0" + i.toString() : i.toString(); const tempObject = { value: i.toString(), text: tempMinute }; this.dayRanges.minutes.push(tempObject); }
- May 20 Mon 2019 23:25
[面試] iSAP Solution 旭人科技股份有限公司
- Apr 15 Mon 2019 23:09
[JavaScript] [Vue] 連動式下拉選單 (不使用套件)