成都全网推广哪家专业_西安网络广告推广_免费开店的电商平台_全网引流推广 价格

在使用 Vue.js 结合 dayjs、lunar-javascript 库，可以通过以下步骤来实现：

1. 安装 dayjs 和中文包

首先，确保你已经安装了 dayjs。如果还没有安装，可以通过 npm 或 yarn 来安装：

npm install dayjs

 2.安装 chinese-lunar-calendar 插件

 npm install --save chinese-lunar-calendar

 3.封装获取阴历函数

import {getLunar} from 'chinese-lunar-calendar'export function lunarDate(pDate){const year = pDate.getFullYear()const month = pDate.getMonth() +1const day = pDate.getDate()const result = getLunar(year,month,day)return result.dateStr
}

4.调用方法

const date = new Date()
const result = lunarDate(date)//十月廿十

用例一

<template><div class="dates"><div class="times">{{ time.time }}</div><div class="weeks">{{ time.week }}{{ time.date }}{{ date.lunarYear }}{{ date.zodiac }}{{ date.dateStr }}</div></div>
</template><script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'; // 引入中文语言包
import { getLunar } from 'chinese-lunar-calendar'const timer = ref()
const time = ref({})
const date = ref({})
onMounted(() => {timer.value = window.setInterval(() => {time.value = generateTime()})const result = lunarDate(new Date())//十月廿十date.value = resultconsole.log(`当前年份和生肖是：${result}`)
})
onBeforeUnmount(() => {timer.value && clearInterval(timer.value)
})
/*** 生成时间* @returns {Object} 时间对象*/
function generateTime() {const time = dayjs().format('HH:mm:ss')const week = dayjs().locale('zh-cn').format('dddd')const date = dayjs().format('YYYY.MM.DD')return {time,week,date}
}
/*** 农历日期* @param {Date} pDate 日期* @returns {String} 农历日期*/
function lunarDate(pDate){const year = pDate.getFullYear()const month = pDate.getMonth() +1const day = pDate.getDate()const result = getLunar(year,month,day)return result
}</script><style scoped lang="scss">
.dates {width: 120px;padding: 0px 5px 0px 5px;overflow: hidden;display: flex;flex-direction: column;justify-content: start;.times {display: flex;justify-content: start;font-size: 18px;font-family: 'Agency FB, Agency FB-Bold';color: #fff;line-height: 24px;}.weeks {line-height: 18px;display: flex;justify-content: start;font-family: 'Agency FB, Agency FB-Bold';overflow: hidden;font-size: 14px;color: #fff;}
}
</style>

 

用例二

<template><div class="fix-box"><!-- 日历卡片 页面 --><div class="calendar-card"><div class="cal-top">{{ curYear }} 年 {{ curMonth }} 月</div><div class="cal-center">{{ curDay }}</div><div class="cal-footer"><p class="cal-footer-d">第 {{ dayOfYear }} 天 第 {{ weekOfYear }} 周</p><p class="cal-footer-w">{{ lunarDay }} {{ curWeek }}</p></div></div><p class="label d-elip">日历</p></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { getLunar } from "chinese-lunar-calendar";const curYear = ref(""); // 当前年份
const curMonth = ref(""); // 当前月份
const curDay = ref(""); // 当前日期
const curWeek = ref(""); // 当前周
const lunarDay = ref(""); // 农历日期
const dayOfYear = ref(""); // 当前日期是一年中的第几天
const weekOfYear = ref(""); // 当前日期是一年的第几周onMounted(() => {// 初始化日历const date = new Date();curYear.value = date.getFullYear();curMonth.value = date.getMonth() + 1;curDay.value = date.getDate();const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];const day = date.getDay();curWeek.value = weekday[day];const lunarDate = getLunar(curYear.value, curMonth.value, curDay.value);lunarDay.value = lunarDate.dateStr;// 获取当前时间是当年的第几天dayOfYear.value = Math.floor((date - new Date(curYear.value, 0, 0)) / 86400000);// 获取当前时间是当年的第几周const start = new Date(curYear.value, 0, 1);weekOfYear.value = Math.ceil((((date - start) / 86400000) + start.getDay() + 1) / 7);
});
</script><style scoped lang="less">
.fix-box {position: relative;.calendar-card {//   width: 100%;//   height: 100%;width: 186px;height: 186px;font-family: PingFang SC, -apple-system, BlinkMacSystemFont, Helvetica Neue,Helvetica, sans-serif;background: #fff;border-radius: 15px;overflow: hidden;transition: transform 0.3s ease;&:hover {transform: translateY(-3px);}.cal-top {font-size: 16px;color: #fff;line-height: 46px;height: 25%;background: rgba(239, 102, 99, 0.8);}.cal-center {font-size: 46px;font-weight: 600;line-height: 78px;height: 42%;}.cal-footer {height: 33%;.cal-footer-d {font-size: 14px;color: #999;}.cal-footer-w {font-size: 16px;}}}.label {position: absolute;bottom: -28px;left: 0;width: 100%;font-size: 14px;color: #fff;}.d-elip {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
}
</style>