vue显示农历_ElementUI显示农历的日历

目前 Element 官方并没有打算支持农历显示的意愿，见 issues/11502 和 issues/2471。

两种方法：

第一种方法：使用 ele-calendar，lunarcalendar 属性表示是否需要农历。

第二种方法：对 Calendar 组件进行自定义内容，具体方法如下：

1、自己写阳历转阴历的方法或引入别人写好的 JS 文件，如中国农历(阴阳历)和西元阳历即公历互转 JavaScript 库

2、如果是引入上面的 JS 文件，我把它放在 src/assets/js 文件夹下，即位置为 src/assets/js/calendar.js，需要在 calendar.js 文件的最后一行添加 export default calendar; 。如果使用了ESLint，需要在 calendar.js 文件的第一行添加 /* eslint-disable */。

/* eslint-disable */

// calendar.js 的源代码

export default calendar;

3、在 Vue 中使用 Element 的 calendar 组件并自定义内容，date.day 为日历上每一天的日期(如 2020-01-04)，需要什么样的格式就自定义方法(如 solarDate2lunar(solarDate))输出。

import calendar from "@/assets/js/calendar.js";

export default {

name: "Index",

methods: {

solarDate2lunar(solarDate) {

var solar = solarDate.split("-");

var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]);

return solar[1] + "-" + solar[2] + "\n" + lunar.IMonthCn + lunar.IDayCn;

}

};

4、最后的效果：

vue显示农历_ElementUI显示农历的日历相关推荐

win7日历加入农历_还是农历更亲切，春节制作一个带农历的日历，欢欢喜喜过新年...
2019带农历的日历上图是用iSee图片专家制成的2019年2月份的台历,看上去就很豪华的样子,这个日历让我花费了不少的心血.其实,应该很多人都听说过iSee图片专家这个软件,它是一款功能十分全面的 ...
vxe-input vue 日期选择组件带农历节日、小圆点提醒
vxe-table vxe-input vue 日期选择组件带农历节日.小圆点提醒默认的日期选择是没有节日信息的可以通过 festival-method 方法自定义节日信息,接收一个对象,用于渲染 ...
SAP Cloud Application Programming bookshop 例子 Vue页面不能正常显示的原因分析
我在本地用cds run 命令启动 SAP Cloud Application Programming 应用后,访问如下 url: http://localhost:4004/vue/index.ht ...
Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片本人试了3种方法,2种方法失败了 ...
Vue子组件的显示与隐藏
文章目录 Vue子组件的显示与隐藏第一步使用v-show 1.1 父组件 1.2 子组件 2 第二步父子组件传参 2.1 父组件 2.2 子组件 Vue子组件的显示与隐藏在使用Vue开发前端页 ...
vue 点击展开显示更多点击收起部分隐藏
vue 点击展开显示更多点击收起部分隐藏要求: 只展示几条数据,其余的收起.点击显示更多时候,查看全部如下:以百度云的页面为例直接上代码: 1.html部分: <div><d ...
在线直播源码，VUE 获奖名单滚动显示的两种方式
在线直播源码,VUE 获奖名单滚动显示的两种方式第一种: 使用vue-seamless-scroll组件: 1.安装vue-seamless-scroll npm install vue-seaml ...
Vue中文字只显示三行，超过部分收起的实现方法
我们在网站开发过程中经常会遇到需要显示很长的文本内容,但是如果这部分内容并不是用户所关心的,就会占据大量的页面空间,影响用户体验,也影响美观.我们通常的做法是将这段长文本收起,只显示三行或四行,如果用 ...
Vue v-for :src 循环显示图片
Vue v-for :src 循环显示图片 <divclass="col-xs-12 col-md-6"v-for="(row, index) in songMen ...

vue显示农历_ElementUI显示农历的日历

vue显示农历_ElementUI显示农历的日历相关推荐

最新文章

热门文章