家里的样式
This commit is contained in:
zhangdingyu
52
src/components/Breadcrumb/index.vue
Normal file
52
src/components/Breadcrumb/index.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path">
|
||||
<span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
|
||||
<router-link v-else :to="item.redirect||item.path">{{ item.meta.title }}</router-link>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
levelList: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.getBreadcrumb()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getBreadcrumb()
|
||||
},
|
||||
methods: {
|
||||
getBreadcrumb() {
|
||||
let matched = this.$route.matched.filter(item => item.name)
|
||||
const first = matched[0]
|
||||
if (first && first.name !== 'dashboard') {
|
||||
matched = [{ path: '/dashboard', meta: { title: '主页' }}].concat(matched)
|
||||
}
|
||||
this.levelList = matched
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
.app-breadcrumb.el-breadcrumb {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
margin-left: 10px;
|
||||
color: #fff;
|
||||
.no-redirect {
|
||||
color: #fff;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
526
src/components/Calendar/calendar.js
Normal file
526
src/components/Calendar/calendar.js
Normal file
@@ -0,0 +1,526 @@
|
||||
/**
|
||||
* @1900-2100区间内的公历、农历互转
|
||||
* @charset UTF-8
|
||||
* @Author Jea杨(JJonline@JJonline.Cn)
|
||||
* @Time 2014-7-21
|
||||
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
|
||||
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
|
||||
* @Version 1.0.2
|
||||
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
|
||||
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
|
||||
*/
|
||||
/* eslint-disable */
|
||||
var calendar = {
|
||||
|
||||
/**
|
||||
* 农历1900-2100的润大小信息表
|
||||
* @Array Of Property
|
||||
* @return Hex
|
||||
*/
|
||||
lunarInfo:[0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,//1900-1909
|
||||
0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,//1910-1919
|
||||
0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,//1920-1929
|
||||
0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,//1930-1939
|
||||
0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,//1940-1949
|
||||
0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0,//1950-1959
|
||||
0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,//1960-1969
|
||||
0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6,//1970-1979
|
||||
0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,//1980-1989
|
||||
0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,//1990-1999
|
||||
0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,//2000-2009
|
||||
0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,//2010-2019
|
||||
0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,//2020-2029
|
||||
0x05aa0,0x076a3,0x096d0,0x04afb,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,//2030-2039
|
||||
0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0,//2040-2049
|
||||
/**Add By JJonline@JJonline.Cn**/
|
||||
0x14b63,0x09370,0x049f8,0x04970,0x064b0,0x168a6,0x0ea50, 0x06b20,0x1a6c4,0x0aae0,//2050-2059
|
||||
0x0a2e0,0x0d2e3,0x0c960,0x0d557,0x0d4a0,0x0da50,0x05d55,0x056a0,0x0a6d0,0x055d4,//2060-2069
|
||||
0x052d0,0x0a9b8,0x0a950,0x0b4a0,0x0b6a6,0x0ad50,0x055a0,0x0aba4,0x0a5b0,0x052b0,//2070-2079
|
||||
0x0b273,0x06930,0x07337,0x06aa0,0x0ad50,0x14b55,0x04b60,0x0a570,0x054e4,0x0d160,//2080-2089
|
||||
0x0e968,0x0d520,0x0daa0,0x16aa6,0x056d0,0x04ae0,0x0a9d4,0x0a2d0,0x0d150,0x0f252,//2090-2099
|
||||
0x0d520],//2100
|
||||
|
||||
/**
|
||||
* 公历每个月份的天数普通表
|
||||
* @Array Of Property
|
||||
* @return Number
|
||||
*/
|
||||
solarMonth:[31,28,31,30,31,30,31,31,30,31,30,31],
|
||||
|
||||
/**
|
||||
* 天干地支之天干速查表
|
||||
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Gan:["\u7532","\u4e59","\u4e19","\u4e01","\u620a","\u5df1","\u5e9a","\u8f9b","\u58ec","\u7678"],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表
|
||||
* @Array Of Property
|
||||
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Zhi:["\u5b50","\u4e11","\u5bc5","\u536f","\u8fb0","\u5df3","\u5348","\u672a","\u7533","\u9149","\u620c","\u4ea5"],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表<=>生肖
|
||||
* @Array Of Property
|
||||
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Animals:["\u9f20","\u725b","\u864e","\u5154","\u9f99","\u86c7","\u9a6c","\u7f8a","\u7334","\u9e21","\u72d7","\u732a"],
|
||||
|
||||
/**
|
||||
* 24节气速查表
|
||||
* @Array Of Property
|
||||
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
|
||||
* @return Cn string
|
||||
*/
|
||||
solarTerm:["\u5c0f\u5bd2","\u5927\u5bd2","\u7acb\u6625","\u96e8\u6c34","\u60ca\u86f0","\u6625\u5206","\u6e05\u660e","\u8c37\u96e8","\u7acb\u590f","\u5c0f\u6ee1","\u8292\u79cd","\u590f\u81f3","\u5c0f\u6691","\u5927\u6691","\u7acb\u79cb","\u5904\u6691","\u767d\u9732","\u79cb\u5206","\u5bd2\u9732","\u971c\u964d","\u7acb\u51ac","\u5c0f\u96ea","\u5927\u96ea","\u51ac\u81f3"],
|
||||
|
||||
/**
|
||||
* 1900-2100各年的24节气日期速查表
|
||||
* @Array Of Property
|
||||
* @return 0x string For splice
|
||||
*/
|
||||
sTermInfo:['9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f',
|
||||
'97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f',
|
||||
'b027097bd097c36b0b6fc9274c91aa','9778397bd19801ec9210c965cc920e','97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2','9778397bd197c36c9210c9274c91aa',
|
||||
'97b6b97bd19801ec95f8c965cc920e','97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec95f8c965cc920e','97bcf97c3598082c95f8e1cfcc920f',
|
||||
'97bd097bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f',
|
||||
'97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd097bd07f595b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c8dc2','9778397bd19801ec9210c9274c920e','97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',
|
||||
'97b6b97bd19801ec95f8c965cc920f','97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e','97bd07f1487f595b0b0bc920fb0722',
|
||||
'7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e','97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf7f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa','97b6b97bd197c36c9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',
|
||||
'97b6b7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36b0b70c9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa','97b6b7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','977837f0e37f149b0723b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c35b0b6fc9210c8dc2',
|
||||
'977837f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
|
||||
'977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
|
||||
'977837f0e37f14998082b0723b06bd','7f07e7f0e37f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f595b0b0bb0b6fb0722','7f0e37f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e37f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f149b0723b0787b0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0723b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722','7f0e37f0e366aa89801eb072297c35',
|
||||
'7ec967f0e37f14998082b0723b06bd','7f07e7f0e37f14998083b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14898082b0723b02d5','7f07e7f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66aa89801e9808297c35','665f67f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66a449801e9808297c35',
|
||||
'665f67f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e36665b66a449801e9808297c35','665f67f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721','7f0e26665b66a449801e9808297c35','665f67f0e37f1489801eb072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722'],
|
||||
|
||||
/**
|
||||
* 数字转中文速查表
|
||||
* @Array Of Property
|
||||
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr1:["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341"],
|
||||
|
||||
/**
|
||||
* 日期转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['初','十','廿','卅']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr2:["\u521d","\u5341","\u5eff","\u5345"],
|
||||
|
||||
/**
|
||||
* 月份转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr3:["\u6b63","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341","\u51ac","\u814a"],
|
||||
|
||||
/**
|
||||
* 返回农历y年一整年的总天数
|
||||
* @param lunar Year
|
||||
* @return Number
|
||||
* @eg:var count = calendar.lYearDays(1987) ;//count=387
|
||||
*/
|
||||
lYearDays:function(y) {
|
||||
var i, sum = 348;
|
||||
for(i=0x8000; i>0x8; i>>=1) { sum += (calendar.lunarInfo[y-1900] & i)? 1: 0; }
|
||||
return(sum+calendar.leapDays(y));
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0-12)
|
||||
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
|
||||
*/
|
||||
leapMonth:function(y) { //闰字编码 \u95f0
|
||||
return(calendar.lunarInfo[y-1900] & 0xf);
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月的天数 若该年没有闰月则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0、29、30)
|
||||
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
|
||||
*/
|
||||
leapDays:function(y) {
|
||||
if(calendar.leapMonth(y)) {
|
||||
return((calendar.lunarInfo[y-1900] & 0x10000)? 30: 29);
|
||||
}
|
||||
return(0);
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
|
||||
* @param lunar Year
|
||||
* @return Number (-1、29、30)
|
||||
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
|
||||
*/
|
||||
monthDays:function(y,m) {
|
||||
if(m>12 || m<1) {return -1}//月份参数从1至12，参数错误返回-1
|
||||
return( (calendar.lunarInfo[y-1900] & (0x10000>>m))? 30: 29 );
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回公历(!)y年m月的天数
|
||||
* @param solar Year
|
||||
* @return Number (-1、28、29、30、31)
|
||||
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
|
||||
*/
|
||||
solarDays:function(y,m) {
|
||||
if(m>12 || m<1) {return -1} //若参数错误 返回-1
|
||||
var ms = m-1;
|
||||
if(ms==1) { //2月份的闰平规律测算后确认返回28或29
|
||||
return(((y%4 == 0) && (y%100 != 0) || (y%400 == 0))? 29: 28);
|
||||
}else {
|
||||
return(calendar.solarMonth[ms]);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 农历年份转换为干支纪年
|
||||
* @param lYear 农历年的年份数
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhiYear:function(lYear) {
|
||||
var ganKey = (lYear - 3) % 10;
|
||||
var zhiKey = (lYear - 3) % 12;
|
||||
if(ganKey == 0) ganKey = 10;//如果余数为0则为最后一个天干
|
||||
if(zhiKey == 0) zhiKey = 12;//如果余数为0则为最后一个地支
|
||||
return calendar.Gan[ganKey-1] + calendar.Zhi[zhiKey-1];
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 公历月、日判断所属星座
|
||||
* @param cMonth [description]
|
||||
* @param cDay [description]
|
||||
* @return Cn string
|
||||
*/
|
||||
toAstro:function(cMonth,cDay) {
|
||||
var s = "\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf";
|
||||
var arr = [20,19,21,21,21,22,23,23,23,23,22,22];
|
||||
return s.substr(cMonth*2 - (cDay < arr[cMonth-1] ? 2 : 0),2) + "\u5ea7";//座
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入offset偏移量返回干支
|
||||
* @param offset 相对甲子的偏移量
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhi:function(offset) {
|
||||
return calendar.Gan[offset%10] + calendar.Zhi[offset%12];
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入公历(!)y年获得该年第n个节气的公历日期
|
||||
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
|
||||
* @return day Number
|
||||
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
|
||||
*/
|
||||
getTerm:function(y,n) {
|
||||
if(y<1900 || y>2100) {return -1;}
|
||||
if(n<1 || n>24) {return -1;}
|
||||
var _table = calendar.sTermInfo[y-1900];
|
||||
var _info = [
|
||||
parseInt('0x'+_table.substr(0,5)).toString() ,
|
||||
parseInt('0x'+_table.substr(5,5)).toString(),
|
||||
parseInt('0x'+_table.substr(10,5)).toString(),
|
||||
parseInt('0x'+_table.substr(15,5)).toString(),
|
||||
parseInt('0x'+_table.substr(20,5)).toString(),
|
||||
parseInt('0x'+_table.substr(25,5)).toString()
|
||||
];
|
||||
var _calday = [
|
||||
_info[0].substr(0,1),
|
||||
_info[0].substr(1,2),
|
||||
_info[0].substr(3,1),
|
||||
_info[0].substr(4,2),
|
||||
|
||||
_info[1].substr(0,1),
|
||||
_info[1].substr(1,2),
|
||||
_info[1].substr(3,1),
|
||||
_info[1].substr(4,2),
|
||||
|
||||
_info[2].substr(0,1),
|
||||
_info[2].substr(1,2),
|
||||
_info[2].substr(3,1),
|
||||
_info[2].substr(4,2),
|
||||
|
||||
_info[3].substr(0,1),
|
||||
_info[3].substr(1,2),
|
||||
_info[3].substr(3,1),
|
||||
_info[3].substr(4,2),
|
||||
|
||||
_info[4].substr(0,1),
|
||||
_info[4].substr(1,2),
|
||||
_info[4].substr(3,1),
|
||||
_info[4].substr(4,2),
|
||||
|
||||
_info[5].substr(0,1),
|
||||
_info[5].substr(1,2),
|
||||
_info[5].substr(3,1),
|
||||
_info[5].substr(4,2),
|
||||
];
|
||||
return parseInt(_calday[n-1]);
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历数字月份返回汉语通俗表示法
|
||||
* @param lunar month
|
||||
* @return Cn string
|
||||
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
|
||||
*/
|
||||
toChinaMonth:function(m) { // 月 => \u6708
|
||||
if(m>12 || m<1) {return -1} //若参数错误 返回-1
|
||||
var s = calendar.nStr3[m-1];
|
||||
s+= "\u6708";//加上月字
|
||||
return s;
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历日期数字返回汉字表示法
|
||||
* @param lunar day
|
||||
* @return Cn string
|
||||
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
|
||||
*/
|
||||
toChinaDay:function(d){ //日 => \u65e5
|
||||
var s;
|
||||
switch (d) {
|
||||
case 10:
|
||||
s = '\u521d\u5341'; break;
|
||||
case 20:
|
||||
s = '\u4e8c\u5341'; break;
|
||||
break;
|
||||
case 30:
|
||||
s = '\u4e09\u5341'; break;
|
||||
break;
|
||||
default :
|
||||
s = calendar.nStr2[Math.floor(d/10)];
|
||||
s += calendar.nStr1[d%10];
|
||||
}
|
||||
return(s);
|
||||
},
|
||||
|
||||
/**
|
||||
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
|
||||
* @param y year
|
||||
* @return Cn string
|
||||
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
|
||||
*/
|
||||
getAnimal: function(y) {
|
||||
return calendar.Animals[(y - 4) % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y solar year
|
||||
* @param m solar month
|
||||
* @param d solar day
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.solar2lunar(1987,11,01));
|
||||
*/
|
||||
solar2lunar:function (y,m,d) { //参数区间1900.1.31~2100.12.31
|
||||
if(y<1900 || y>2100) {return -1;}//年份限定、上限
|
||||
if(y==1900&&m==1&&d<31) {return -1;}//下限
|
||||
if(!y) { //未传参 获得当天
|
||||
var objDate = new Date();
|
||||
}else {
|
||||
var objDate = new Date(y,parseInt(m)-1,d)
|
||||
}
|
||||
var i, leap=0, temp=0;
|
||||
//修正ymd参数
|
||||
var y = objDate.getFullYear(),m = objDate.getMonth()+1,d = objDate.getDate();
|
||||
var offset = (Date.UTC(objDate.getFullYear(),objDate.getMonth(),objDate.getDate()) - Date.UTC(1900,0,31))/86400000;
|
||||
for(i=1900; i<2101 && offset>0; i++) { temp=calendar.lYearDays(i); offset-=temp; }
|
||||
if(offset<0) { offset+=temp; i--; }
|
||||
|
||||
//是否今天
|
||||
var isTodayObj = new Date(),isToday=false;
|
||||
if(isTodayObj.getFullYear()==y && isTodayObj.getMonth()+1==m && isTodayObj.getDate()==d) {
|
||||
isToday = true;
|
||||
}
|
||||
//星期几
|
||||
var nWeek = objDate.getDay(),cWeek = calendar.nStr1[nWeek];
|
||||
if(nWeek==0) {nWeek =7;}//数字表示周几顺应天朝周一开始的惯例
|
||||
//农历年
|
||||
var year = i;
|
||||
|
||||
var leap = calendar.leapMonth(i); //闰哪个月
|
||||
var isLeap = false;
|
||||
|
||||
//效验闰月
|
||||
for(i=1; i<13 && offset>0; i++) {
|
||||
//闰月
|
||||
if(leap>0 && i==(leap+1) && isLeap==false){
|
||||
--i;
|
||||
isLeap = true; temp = calendar.leapDays(year); //计算农历闰月天数
|
||||
}
|
||||
else{
|
||||
temp = calendar.monthDays(year, i);//计算农历普通月天数
|
||||
}
|
||||
//解除闰月
|
||||
if(isLeap==true && i==(leap+1)) { isLeap = false; }
|
||||
offset -= temp;
|
||||
}
|
||||
|
||||
if(offset==0 && leap>0 && i==leap+1)
|
||||
if(isLeap){
|
||||
isLeap = false;
|
||||
}else{
|
||||
isLeap = true; --i;
|
||||
}
|
||||
if(offset<0){ offset += temp; --i; }
|
||||
//农历月
|
||||
var month = i;
|
||||
//农历日
|
||||
var day = offset + 1;
|
||||
|
||||
//天干地支处理
|
||||
var sm = m-1;
|
||||
var gzY = calendar.toGanZhiYear(year);
|
||||
|
||||
//月柱 1900年1月小寒以前为 丙子月(60进制12)
|
||||
var firstNode = calendar.getTerm(year,(m*2-1));//返回当月「节」为几日开始
|
||||
var secondNode = calendar.getTerm(year,(m*2));//返回当月「节」为几日开始
|
||||
|
||||
//依据12节气修正干支月
|
||||
var gzM = calendar.toGanZhi((y-1900)*12+m+11);
|
||||
if(d>=firstNode) {
|
||||
gzM = calendar.toGanZhi((y-1900)*12+m+12);
|
||||
}
|
||||
|
||||
//传入的日期的节气与否
|
||||
var isTerm = false;
|
||||
var Term = null;
|
||||
if(firstNode==d) {
|
||||
isTerm = true;
|
||||
Term = calendar.solarTerm[m*2-2];
|
||||
}
|
||||
if(secondNode==d) {
|
||||
isTerm = true;
|
||||
Term = calendar.solarTerm[m*2-1];
|
||||
}
|
||||
//日柱 当月一日与 1900/1/1 相差天数
|
||||
var dayCyclical = Date.UTC(y,sm,1,0,0,0,0)/86400000+25567+10;
|
||||
var gzD = calendar.toGanZhi(dayCyclical+d-1);
|
||||
//该日期所属的星座
|
||||
var astro = calendar.toAstro(m,d);
|
||||
|
||||
return {'lYear':year,'lMonth':month,'lDay':day,'Animal':calendar.getAnimal(year),'IMonthCn':(isLeap?"\u95f0":'')+calendar.toChinaMonth(month),'IDayCn':calendar.toChinaDay(day),'cYear':y,'cMonth':m,'cDay':d,'gzYear':gzY,'gzMonth':gzM,'gzDay':gzD,'isToday':isToday,'isLeap':isLeap,'nWeek':nWeek,'ncWeek':"\u661f\u671f"+cWeek,'isTerm':isTerm,'Term':Term,'astro':astro};
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y lunar year
|
||||
* @param m lunar month
|
||||
* @param d lunar day
|
||||
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.lunar2solar(1987,9,10));
|
||||
*/
|
||||
lunar2solar:function(y,m,d,isLeapMonth) { //参数区间1900.1.31~2100.12.1
|
||||
var isLeapMonth = !!isLeapMonth;
|
||||
var leapOffset = 0;
|
||||
var leapMonth = calendar.leapMonth(y);
|
||||
var leapDay = calendar.leapDays(y);
|
||||
if(isLeapMonth&&(leapMonth!=m)) {return -1;}//传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
|
||||
if(y==2100&&m==12&&d>1 || y==1900&&m==1&&d<31) {return -1;}//超出了最大极限值
|
||||
var day = calendar.monthDays(y,m);
|
||||
var _day = day;
|
||||
//bugFix 2016-9-25
|
||||
//if month is leap, _day use leapDays method
|
||||
if(isLeapMonth) {
|
||||
_day = calendar.leapDays(y,m);
|
||||
}
|
||||
if(y < 1900 || y > 2100 || d > _day) {return -1;}//参数合法性效验
|
||||
|
||||
//计算农历的时间差
|
||||
var offset = 0;
|
||||
for(var i=1900;i<y;i++) {
|
||||
offset+=calendar.lYearDays(i);
|
||||
}
|
||||
var leap = 0,isAdd= false;
|
||||
for(var i=1;i<m;i++) {
|
||||
leap = calendar.leapMonth(y);
|
||||
if(!isAdd) {//处理闰月
|
||||
if(leap<=i && leap>0) {
|
||||
offset+=calendar.leapDays(y);isAdd = true;
|
||||
}
|
||||
}
|
||||
offset+=calendar.monthDays(y,i);
|
||||
}
|
||||
//转换闰月农历 需补充该年闰月的前一个月的时差
|
||||
if(isLeapMonth) {offset+=day;}
|
||||
//1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
|
||||
var stmap = Date.UTC(1900,1,30,0,0,0);
|
||||
var calObj = new Date((offset+d-31)*86400000+stmap);
|
||||
var cY = calObj.getUTCFullYear();
|
||||
var cM = calObj.getUTCMonth()+1;
|
||||
var cD = calObj.getUTCDate();
|
||||
|
||||
return calendar.solar2lunar(cY,cM,cD);
|
||||
}
|
||||
};
|
||||
|
||||
export default calendar
|
||||
/* eslint-disable */
|
||||
837
src/components/Calendar/calendar.vue
Normal file
837
src/components/Calendar/calendar.vue
Normal file
@@ -0,0 +1,837 @@
|
||||
<style scoped>
|
||||
.calendar {
|
||||
margin:auto;
|
||||
width: 100%;
|
||||
min-width:300px;
|
||||
background: #fff;
|
||||
font-family: "PingFang SC","Hiragino Sans GB","STHeiti","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
.calendar-tools{
|
||||
height:40px;
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
color:#5e7a88;
|
||||
}
|
||||
.calendar-tools span{
|
||||
cursor: pointer;
|
||||
}
|
||||
.calendar-prev{
|
||||
width: 14.28571429%;
|
||||
float:left;
|
||||
text-align: center;
|
||||
}
|
||||
.calendar-info{
|
||||
padding-top: 3px;
|
||||
font-size:16px;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
}
|
||||
.calendar-info>div.month{
|
||||
margin:auto;
|
||||
height:20px;
|
||||
width:100px;
|
||||
text-align: center;
|
||||
color:#5e7a88;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.calendar-info>div.month .month-inner{
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
height:240px;
|
||||
transition:top .5s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.calendar-info>div.month .month-inner>span{
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
height:20px;
|
||||
width:100px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
.calendar-info>div.year{
|
||||
font-size:10px;
|
||||
line-height: 1;
|
||||
color:#999;
|
||||
}
|
||||
.calendar-next{
|
||||
width: 14.28571429%;
|
||||
float:right;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar table {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
margin-bottom:10px;
|
||||
border-collapse: collapse;
|
||||
color: #444444;
|
||||
}
|
||||
.calendar td {
|
||||
margin:2px !important;
|
||||
padding:0px 0;
|
||||
width: 14.28571429%;
|
||||
height:44px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size:14px;
|
||||
line-height: 125%;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
.calendar td.week{
|
||||
font-size:10px;
|
||||
pointer-events:none !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
.calendar td.disabled {
|
||||
color: #ccc;
|
||||
pointer-events:none !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
.calendar td.disabled div{
|
||||
color: #ccc;
|
||||
}
|
||||
.calendar td span{
|
||||
display:block;
|
||||
max-width:40px;
|
||||
height:26px;
|
||||
font-size: 16px;
|
||||
line-height:26px;
|
||||
margin:0px auto;
|
||||
border-radius:20px;
|
||||
}
|
||||
.calendar td:not(.selected) span:not(.red):hover{
|
||||
background:#f3f8fa;
|
||||
color:#444;
|
||||
}
|
||||
.calendar td:not(.selected) span.red:hover{
|
||||
background:#f9efef;
|
||||
}
|
||||
|
||||
.calendar td:not(.disabled) span.red{
|
||||
color:#ea6151;
|
||||
}
|
||||
.calendar td.selected span{
|
||||
background-color: #5e7a88;
|
||||
color: #fff;
|
||||
}
|
||||
.calendar td .text{
|
||||
position: absolute;
|
||||
top:28px;
|
||||
left:0;
|
||||
right:0;
|
||||
text-align: center;
|
||||
|
||||
padding:2px;
|
||||
font-size:8px;
|
||||
line-height: 1.2;
|
||||
color:#444;
|
||||
}
|
||||
.calendar td .isGregorianFestival,
|
||||
.calendar td .isLunarFestival{
|
||||
color:#ea6151;
|
||||
}
|
||||
.calendar td.selected span.red{
|
||||
background-color: #ea6151;
|
||||
color: #fff;
|
||||
}
|
||||
.calendar td.selected span.red:hover{
|
||||
background-color: #ea6151;
|
||||
color: #fff;
|
||||
}
|
||||
.calendar thead td {
|
||||
text-transform: uppercase;
|
||||
height:30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.calendar-button{
|
||||
text-align: center;
|
||||
}
|
||||
.calendar-button span{
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
min-height: 1em;
|
||||
min-width: 5em;
|
||||
vertical-align: baseline;
|
||||
background:#5e7a88;
|
||||
color:#fff;
|
||||
margin: 0 .25em 0 0;
|
||||
padding: .6em 2em;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
border-radius: .3em;
|
||||
}
|
||||
.calendar-button span.cancel{
|
||||
background:#efefef;
|
||||
color:#666;
|
||||
}
|
||||
.calendar-years{
|
||||
position: absolute;
|
||||
left:0px;
|
||||
top:60px;
|
||||
right:0px;
|
||||
bottom:0px;
|
||||
background:#fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap:wrap;
|
||||
overflow: auto;
|
||||
transition:all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
.calendar-years.show{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
.calendar-years>span{
|
||||
margin:1px 5px;
|
||||
display: inline-block;
|
||||
width:60px;
|
||||
line-height: 30px;
|
||||
border-radius: 20px;
|
||||
text-align:center;
|
||||
border:1px solid #fbfbfb;
|
||||
color:#999;
|
||||
}
|
||||
.calendar-years>span.active{
|
||||
border:1px solid #5e7a88;
|
||||
background-color: #5e7a88;
|
||||
color:#fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="calendar">
|
||||
<div class="calendar-tools">
|
||||
<span class="calendar-prev" @click="prev">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g class="transform-group">
|
||||
<g transform="scale(0.015625, 0.015625)">
|
||||
<path
|
||||
d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984c-18.752-18.72-18.752-49.12 0-67.872l351.968-352c18.752-18.752 49.12-18.752 67.872 0 18.752 18.72 18.752 49.12 0 67.872l-318.016 318.048 318.016 318.016c18.752 18.752 18.752 49.12 0 67.872C696.544 907.328 684.256 912 671.968 912z"
|
||||
fill="#5e7a88"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="calendar-next" @click="next">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g class="transform-group">
|
||||
<g transform="scale(0.015625, 0.015625)">
|
||||
<path
|
||||
d="M761.056 532.128c0.512-0.992 1.344-1.824 1.792-2.848 8.8-18.304 5.92-40.704-9.664-55.424L399.936 139.744c-19.264-18.208-49.632-17.344-67.872 1.888-18.208 19.264-17.376 49.632 1.888 67.872l316.96 299.84-315.712 304.288c-19.072 18.4-19.648 48.768-1.248 67.872 9.408 9.792 21.984 14.688 34.56 14.688 12 0 24-4.48 33.312-13.44l350.048-337.376c0.672-0.672 0.928-1.6 1.6-2.304 0.512-0.48 1.056-0.832 1.568-1.344C757.76 538.88 759.2 535.392 761.056 532.128z"
|
||||
fill="#5e7a88"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="calendar-info" @click.stop="changeYear">
|
||||
<!-- {{monthString}} -->
|
||||
<div class="month">
|
||||
<div :style="{'top':-(month*20)+'px'}" class="month-inner">
|
||||
<span v-for="m in months" :key="m">{{ m }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="year">{{ year }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<table cellpadding="5">
|
||||
<thead>
|
||||
<tr>
|
||||
<td v-for="week in weeks" :key="week" class="week">{{ week }}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(day,k1) in days" :key="(day,k1)" style="{'animation-delay',(k1*30)+'ms'}">
|
||||
<td
|
||||
v-for="(child,k2) in day"
|
||||
:key="(child,k2)"
|
||||
:class="{'selected':child.selected,'disabled':child.disabled}"
|
||||
@click="select(k1,k2,$event)">
|
||||
<span :class="{'red':k2==0||k2==6||((child.isLunarFestival||child.isGregorianFestival) && lunar)}">{{ child.day }}</span>
|
||||
<div v-if="child.eventName!=undefined" class="text" >{{ child.eventName }}</div>
|
||||
<div
|
||||
v-if="lunar"
|
||||
:class="{'isLunarFestival':child.isLunarFestival,'isGregorianFestival':child.isGregorianFestival}"
|
||||
class="text">{{ child.lunar }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div :class="{'show':yearsShow}" class="calendar-years">
|
||||
<span v-for="y in years" :key="y" :class="{'active':y==year}" @click.stop="selectYear(y)">{{ y }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
import calendar from './calendar.js'
|
||||
export default {
|
||||
props: {
|
||||
// 多选模式
|
||||
multi: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 范围模式
|
||||
range:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 默认日期
|
||||
value: {
|
||||
type: Array,
|
||||
default: function(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 开始选择日期
|
||||
begin: {
|
||||
type: Array,
|
||||
default: function(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 结束选择日期
|
||||
end: {
|
||||
type: Array,
|
||||
default: function(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
|
||||
// 是否小于10补零
|
||||
zero:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 屏蔽的日期
|
||||
disabled:{
|
||||
type: Array,
|
||||
default: function(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 是否显示农历
|
||||
lunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
// 自定义星期名称
|
||||
weeks: {
|
||||
type: Array,
|
||||
default:function(){
|
||||
return window.navigator.language.toLowerCase() == "zh-cn"?['日', '一', '二', '三', '四', '五', '六']:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
||||
}
|
||||
},
|
||||
// 自定义月份
|
||||
months:{
|
||||
type: Array,
|
||||
default:function(){
|
||||
return window.navigator.language.toLowerCase() == "zh-cn"?['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
|
||||
}
|
||||
},
|
||||
// 自定义事件
|
||||
events: {
|
||||
type: Object,
|
||||
default: function(){
|
||||
return {}
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
years:[],
|
||||
yearsShow:false,
|
||||
year: 0,
|
||||
month: 0,
|
||||
day: 0,
|
||||
days: [],
|
||||
multiDays:[],
|
||||
today: [],
|
||||
festival:{
|
||||
lunar:{
|
||||
"1-1":"春节",
|
||||
"1-15":"元宵节",
|
||||
"2-2":"龙头节",
|
||||
"5-5":"端午节",
|
||||
"7-7":"七夕节",
|
||||
"7-15":"中元节",
|
||||
"8-15":"中秋节",
|
||||
"9-9":"重阳节",
|
||||
"10-1":"寒衣节",
|
||||
"10-15":"下元节",
|
||||
"12-8":"腊八节",
|
||||
"12-23":"祭灶节",
|
||||
},
|
||||
gregorian:{
|
||||
"1-1":"元旦",
|
||||
"2-14":"情人节",
|
||||
"3-8":"妇女节",
|
||||
"3-12":"植树节",
|
||||
"4-5":"清明节",
|
||||
"5-1":"劳动节",
|
||||
"5-4":"青年节",
|
||||
"6-1":"儿童节",
|
||||
"7-1":"建党节",
|
||||
"8-1":"建军节",
|
||||
"9-10":"教师节",
|
||||
"10-1":"国庆节",
|
||||
"12-24":"平安夜",
|
||||
"12-25":"圣诞节",
|
||||
},
|
||||
},
|
||||
rangeBegin:[],
|
||||
rangeEnd:[],
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
events(){
|
||||
this.render(this.year,this.month)
|
||||
},
|
||||
value(){
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
let now = new Date();
|
||||
this.year = now.getFullYear()
|
||||
this.month = now.getMonth()
|
||||
this.day = now.getDate()
|
||||
if (this.value.length>0) {
|
||||
if (this.range) { //范围
|
||||
this.year = parseInt(this.value[0][0])
|
||||
this.month = parseInt(this.value[0][1]) - 1
|
||||
this.day = parseInt(this.value[0][2])
|
||||
|
||||
let year2 = parseInt(this.value[1][0])
|
||||
let month2 = parseInt(this.value[1][1]) - 1
|
||||
let day2 = parseInt(this.value[1][2])
|
||||
|
||||
this.rangeBegin = [this.year, this.month,this.day]
|
||||
this.rangeEnd = [year2, month2 , day2]
|
||||
}else if(this.multi){//多选
|
||||
this.multiDays=this.value;
|
||||
this.year = parseInt(this.value[0][0])
|
||||
this.month = parseInt(this.value[0][1]) - 1
|
||||
this.day = parseInt(this.value[0][2])
|
||||
}else{ //单选
|
||||
this.year = parseInt(this.value[0])
|
||||
this.month = parseInt(this.value[1]) - 1
|
||||
this.day = parseInt(this.value[2])
|
||||
}
|
||||
}
|
||||
this.render(this.year, this.month)
|
||||
},
|
||||
// 渲染日期
|
||||
render(y, m) {
|
||||
let firstDayOfMonth = new Date(y, m, 1).getDay() //当月第一天
|
||||
let lastDateOfMonth = new Date(y, m + 1, 0).getDate() //当月最后一天
|
||||
let lastDayOfLastMonth = new Date(y, m, 0).getDate() //最后一月的最后一天
|
||||
this.year = y
|
||||
let seletSplit = this.value
|
||||
let i, line = 0,temp = [],nextMonthPushDays = 1
|
||||
for (i = 1; i <= lastDateOfMonth; i++) {
|
||||
let day = new Date(y, m, i).getDay() //返回星期几（0～6）
|
||||
let k
|
||||
// 第一行
|
||||
if (day == 0) {
|
||||
temp[line] = []
|
||||
} else if (i == 1) {
|
||||
temp[line] = []
|
||||
k = lastDayOfLastMonth - firstDayOfMonth + 1
|
||||
for (let j = 0; j < firstDayOfMonth; j++) {
|
||||
// console.log("第一行",lunarYear,lunarMonth,lunarValue,lunarInfo)
|
||||
temp[line].push(Object.assign(
|
||||
{day: k,disabled: true},
|
||||
this.getLunarInfo(this.computedPrevYear(),this.computedPrevMonth(true),k),
|
||||
this.getEvents(this.computedPrevYear(),this.computedPrevMonth(true),k),
|
||||
))
|
||||
k++;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (this.range) { // 范围
|
||||
// console.log("日期范围",this.getLunarInfo(this.year,this.month+1,i))
|
||||
let options = Object.assign(
|
||||
{day: i},
|
||||
this.getLunarInfo(this.year,this.month+1,i),
|
||||
this.getEvents(this.year,this.month+1,i),
|
||||
)
|
||||
if (this.rangeBegin.length > 0) {
|
||||
let beginTime = Number(new Date(this.rangeBegin[0], this.rangeBegin[1], this.rangeBegin[2]))
|
||||
let endTime = Number(new Date(this.rangeEnd[0], this.rangeEnd[1], this.rangeEnd[2]))
|
||||
let stepTime = Number(new Date(this.year, this.month, i))
|
||||
if (beginTime <= stepTime && endTime >= stepTime) {
|
||||
options.selected = true
|
||||
}
|
||||
}
|
||||
if (this.begin.length>0) {
|
||||
let beginTime = Number(new Date(parseInt(this.begin[0]),parseInt(this.begin[1]) - 1,parseInt(this.begin[2])))
|
||||
if (beginTime > Number(new Date(this.year, this.month, i))) options.disabled = true
|
||||
}
|
||||
if (this.end.length>0){
|
||||
let endTime = Number(new Date(parseInt(this.end[0]),parseInt(this.end[1]) - 1,parseInt(this.end[2])))
|
||||
if (endTime < Number(new Date(this.year, this.month, i))) options.disabled = true
|
||||
}
|
||||
if (this.disabled.length>0){
|
||||
if (this.disabled.filter(v => {return this.year === v[0] && this.month === v[1]-1 && i === v[2] }).length>0) {
|
||||
options.disabled = true
|
||||
}
|
||||
}
|
||||
temp[line].push(options)
|
||||
}else if(this.multi){//多选
|
||||
let options
|
||||
// 判断是否选中
|
||||
if(this.value.filter(v => {return this.year === v[0] && this.month === v[1]-1 && i === v[2] }).length>0 ){
|
||||
options = Object.assign({day: i,selected:true},this.getLunarInfo(this.year,this.month+1,i),this.getEvents(this.year,this.month+1,i))
|
||||
}else{
|
||||
options = Object.assign({day: i,selected:false},this.getLunarInfo(this.year,this.month+1,i),this.getEvents(this.year,this.month+1,i))
|
||||
if (this.begin.length>0) {
|
||||
let beginTime = Number(new Date(parseInt(this.begin[0]),parseInt(this.begin[1]) - 1,parseInt(this.begin[2])))
|
||||
if (beginTime > Number(new Date(this.year, this.month, i))) options.disabled = true
|
||||
}
|
||||
if (this.end.length>0){
|
||||
let endTime = Number(new Date(parseInt(this.end[0]),parseInt(this.end[1]) - 1,parseInt(this.end[2])))
|
||||
if (endTime < Number(new Date(this.year, this.month, i))) options.disabled = true
|
||||
}
|
||||
if (this.disabled.length>0){
|
||||
if (this.disabled.filter(v => {return this.year === v[0] && this.month === v[1]-1 && i === v[2] }).length>0) {
|
||||
options.disabled = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
temp[line].push(options)
|
||||
} else { // 单选
|
||||
// console.log(this.lunar(this.year,this.month,i));
|
||||
|
||||
let chk = new Date()
|
||||
let chkY = chk.getFullYear()
|
||||
let chkM = chk.getMonth()
|
||||
// 匹配上次选中的日期
|
||||
if (parseInt(seletSplit[0]) == this.year && parseInt(seletSplit[1]) - 1 == this.month && parseInt(seletSplit[2]) == i) {
|
||||
// console.log("匹配上次选中的日期",lunarYear,lunarMonth,lunarValue,lunarInfo)
|
||||
temp[line].push(Object.assign(
|
||||
{day: i,selected: true},
|
||||
this.getLunarInfo(this.year,this.month+1,i),
|
||||
this.getEvents(this.year,this.month+1,i),
|
||||
))
|
||||
this.today = [line, temp[line].length - 1]
|
||||
}
|
||||
// 没有默认值的时候显示选中今天日期
|
||||
else if (chkY == this.year && chkM == this.month && i == this.day && this.value == "") {
|
||||
|
||||
// console.log("今天",lunarYear,lunarMonth,lunarValue,lunarInfo)
|
||||
temp[line].push(Object.assign(
|
||||
{day: i,selected: true},
|
||||
this.getLunarInfo(this.year,this.month+1,i),
|
||||
this.getEvents(this.year,this.month+1,i),
|
||||
))
|
||||
this.today = [line, temp[line].length - 1]
|
||||
}else{
|
||||
// 普通日期
|
||||
// console.log("设置可选范围",i,lunarYear,lunarMonth,lunarValue,lunarInfo)
|
||||
let options = Object.assign(
|
||||
{day: i,selected:false},
|
||||
this.getLunarInfo(this.year,this.month+1,i),
|
||||
this.getEvents(this.year,this.month+1,i),
|
||||
)
|
||||
if (this.begin.length>0) {
|
||||
let beginTime = Number(new Date(parseInt(this.begin[0]),parseInt(this.begin[1]) - 1,parseInt(this.begin[2])))
|
||||
if (beginTime > Number(new Date(this.year, this.month, i))) options.disabled = true
|
||||
}
|
||||
if (this.end.length>0){
|
||||
let endTime = Number(new Date(parseInt(this.end[0]),parseInt(this.end[1]) - 1,parseInt(this.end[2])))
|
||||
if (endTime < Number(new Date(this.year, this.month, i))) options.disabled = true
|
||||
}
|
||||
if (this.disabled.length>0){
|
||||
if (this.disabled.filter(v => {return this.year === v[0] && this.month === v[1]-1 && i === v[2] }).length>0) {
|
||||
options.disabled = true
|
||||
}
|
||||
}
|
||||
temp[line].push(options)
|
||||
}
|
||||
}
|
||||
// 到周六换行
|
||||
if (day == 6 && i < lastDateOfMonth) {
|
||||
line++
|
||||
}else if (i == lastDateOfMonth) {
|
||||
// line++
|
||||
let k = 1
|
||||
for (let d=day; d < 6; d++) {
|
||||
// console.log(this.computedNextYear()+"-"+this.computedNextMonth(true)+"-"+k)
|
||||
temp[line].push(Object.assign(
|
||||
{day: k,disabled: true},
|
||||
this.getLunarInfo(this.computedNextYear(),this.computedNextMonth(true),k),
|
||||
this.getEvents(this.computedNextYear(),this.computedNextMonth(true),k),
|
||||
))
|
||||
k++
|
||||
}
|
||||
// 下个月除了补充的前几天开始的日期
|
||||
nextMonthPushDays=k
|
||||
}
|
||||
} //end for
|
||||
|
||||
// console.log(this.year+"/"+this.month+"/"+this.day+":"+line)
|
||||
// 补充第六行让视觉稳定
|
||||
if(line<=5 && nextMonthPushDays>0){
|
||||
// console.log({nextMonthPushDays:nextMonthPushDays,line:line})
|
||||
for (let i = line+1; i<=5; i++) {
|
||||
temp[i] = []
|
||||
let start=nextMonthPushDays+(i-line-1)*7
|
||||
for (let d=start; d <= start+6; d++) {
|
||||
temp[i].push(Object.assign(
|
||||
{day: d,disabled: true},
|
||||
this.getLunarInfo(this.computedNextYear(),this.computedNextMonth(true),d),
|
||||
this.getEvents(this.computedNextYear(),this.computedNextMonth(true),d),
|
||||
))
|
||||
}
|
||||
}
|
||||
}
|
||||
this.days = temp
|
||||
},
|
||||
computedPrevYear(){
|
||||
let value=this.year
|
||||
if(this.month-1<0){
|
||||
value--
|
||||
}
|
||||
return value
|
||||
},
|
||||
computedPrevMonth(isString){
|
||||
let value=this.month
|
||||
if(this.month-1<0){
|
||||
value=11
|
||||
}else{
|
||||
value--
|
||||
}
|
||||
// 用于显示目的（一般月份是从0开始的）
|
||||
if(isString){
|
||||
return value+1
|
||||
}
|
||||
return value
|
||||
},
|
||||
computedNextYear(){
|
||||
let value=this.year
|
||||
if(this.month+1>11){
|
||||
value++
|
||||
}
|
||||
return value
|
||||
},
|
||||
computedNextMonth(isString){
|
||||
let value=this.month
|
||||
if(this.month+1>11){
|
||||
value=0
|
||||
}else{
|
||||
value++
|
||||
}
|
||||
// 用于显示目的（一般月份是从0开始的）
|
||||
if(isString){
|
||||
return value+1
|
||||
}
|
||||
return value
|
||||
},
|
||||
// 获取农历信息
|
||||
getLunarInfo(y,m,d){
|
||||
let lunarInfo=calendar.solar2lunar(y,m,d)
|
||||
let lunarValue=lunarInfo.IDayCn
|
||||
// console.log(lunarInfo)
|
||||
let isLunarFestival=false
|
||||
let isGregorianFestival=false
|
||||
if(this.festival.lunar[lunarInfo.lMonth+"-"+lunarInfo.lDay]!=undefined){
|
||||
lunarValue=this.festival.lunar[lunarInfo.lMonth+"-"+lunarInfo.lDay]
|
||||
isLunarFestival=true
|
||||
}else if(this.festival.gregorian[m+"-"+d]!=undefined){
|
||||
lunarValue=this.festival.gregorian[m+"-"+d]
|
||||
isGregorianFestival=true
|
||||
}
|
||||
return {
|
||||
lunar:lunarValue,
|
||||
isLunarFestival:isLunarFestival,
|
||||
isGregorianFestival:isGregorianFestival,
|
||||
}
|
||||
},
|
||||
// 获取自定义事件
|
||||
getEvents(y,m,d){
|
||||
if(Object.keys(this.events).length==0)return false;
|
||||
let eventName=this.events[y+"-"+m+"-"+d]
|
||||
let data={}
|
||||
if(eventName!=undefined){
|
||||
data.eventName=eventName
|
||||
}
|
||||
return data
|
||||
},
|
||||
// 上月
|
||||
prev(e) {
|
||||
e.stopPropagation()
|
||||
if (this.month == 0) {
|
||||
this.month = 11
|
||||
this.year = parseInt(this.year) - 1
|
||||
} else {
|
||||
this.month = parseInt(this.month) - 1
|
||||
}
|
||||
this.$emit('search', this.year, this.month+1) // 调用父组件方法
|
||||
this.render(this.year, this.month)
|
||||
this.$emit('selectMonth',this.month+1,this.year)
|
||||
this.$emit('prev',this.month+1,this.year)
|
||||
},
|
||||
// 下月
|
||||
next(e) {
|
||||
e.stopPropagation()
|
||||
if (this.month == 11) {
|
||||
this.month = 0
|
||||
this.year = parseInt(this.year) + 1
|
||||
} else {
|
||||
this.month = parseInt(this.month) + 1
|
||||
}
|
||||
this.$emit('search', this.year, this.month+1) // 调用父组件方法
|
||||
this.render(this.year, this.month)
|
||||
this.$emit('selectMonth',this.month+1,this.year)
|
||||
this.$emit('next',this.month+1,this.year)
|
||||
},
|
||||
// 选中日期
|
||||
select(k1, k2, e) {
|
||||
if (e != undefined) e.stopPropagation()
|
||||
// 日期范围
|
||||
if (this.range) {
|
||||
if (this.rangeBegin.length == 0 || this.rangeEndTemp != 0) {
|
||||
this.rangeBegin = [this.year, this.month,this.days[k1][k2].day]
|
||||
this.rangeBeginTemp = this.rangeBegin
|
||||
this.rangeEnd = [this.year, this.month, this.days[k1][k2].day]
|
||||
this.rangeEndTemp = 0
|
||||
|
||||
} else {
|
||||
this.rangeEnd = [this.year, this.month,this.days[k1][k2].day]
|
||||
this.rangeEndTemp = 1
|
||||
// 判断结束日期小于开始日期则自动颠倒过来
|
||||
if (+new Date(this.rangeEnd[0], this.rangeEnd[1], this.rangeEnd[2]) < +new Date(this.rangeBegin[0], this.rangeBegin[1], this.rangeBegin[2])) {
|
||||
this.rangeBegin = this.rangeEnd
|
||||
this.rangeEnd = this.rangeBeginTemp
|
||||
}
|
||||
// 小于10左边打补丁
|
||||
let begin=[]
|
||||
let end=[]
|
||||
if(this.zero){
|
||||
this.rangeBegin.forEach((v,k)=>{
|
||||
if(k==1)v=v+1
|
||||
begin.push(this.zeroPad(v))
|
||||
})
|
||||
this.rangeEnd.forEach((v,k)=>{
|
||||
if(k==1)v=v+1
|
||||
end.push(this.zeroPad(v))
|
||||
})
|
||||
}else{
|
||||
begin=this.rangeBegin
|
||||
end=this.rangeEnd
|
||||
}
|
||||
// console.log("选中日期",begin,end)
|
||||
this.$emit('select',begin,end)
|
||||
}
|
||||
this.render(this.year, this.month)
|
||||
}else if (this.multi) {
|
||||
// 如果已经选过则过滤掉
|
||||
let filterDay=this.multiDays.filter(v => {
|
||||
return this.year === v[0] && this.month === v[1]-1 && this.days[k1][k2].day === v[2]
|
||||
})
|
||||
if( filterDay.length>0 ){
|
||||
this.multiDays=this.multiDays.filter(v=> {
|
||||
return this.year !== v[0] || this.month !== v[1]-1 || this.days[k1][k2].day !== v[2]
|
||||
})
|
||||
}else{
|
||||
this.multiDays.push([this.year,this.month+1,this.days[k1][k2].day]);
|
||||
}
|
||||
this.days[k1][k2].selected = !this.days[k1][k2].selected
|
||||
this.$emit('select',this.multiDays)
|
||||
} else {
|
||||
// 取消上次选中
|
||||
if (this.today.length > 0) {
|
||||
this.days.forEach(v=>{
|
||||
v.forEach(vv=>{
|
||||
vv.selected= false
|
||||
})
|
||||
})
|
||||
}
|
||||
// 设置当前选中天
|
||||
this.days[k1][k2].selected = true
|
||||
this.day = this.days[k1][k2].day
|
||||
this.today = [k1, k2]
|
||||
this.$emit('select',[this.year,this.zero?this.zeroPad(this.month + 1):this.month + 1,this.zero?this.zeroPad(this.days[k1][k2].day):this.days[k1][k2].day])
|
||||
}
|
||||
},
|
||||
changeYear(){
|
||||
if(this.yearsShow){
|
||||
this.yearsShow=false
|
||||
return false
|
||||
}
|
||||
this.yearsShow=true
|
||||
this.years=[];
|
||||
for(let i=~~this.year-10;i<~~this.year+10;i++){
|
||||
this.years.push(i)
|
||||
}
|
||||
},
|
||||
selectYear(value){
|
||||
this.yearsShow=false
|
||||
this.year=value
|
||||
this.render(this.year,this.month)
|
||||
this.$emit('selectYear',value)
|
||||
this.$emit('search', this.year, this.month+1) // 调用父组件方法
|
||||
},
|
||||
// 返回今天
|
||||
setToday(){
|
||||
let now = new Date();
|
||||
this.year = now.getFullYear()
|
||||
this.month = now.getMonth()
|
||||
this.day = now.getDate()
|
||||
|
||||
this.render(this.year,this.month)
|
||||
// 遍历当前日找到选中
|
||||
this.days.forEach(v => {
|
||||
let day=v.find(vv => {
|
||||
return vv.day==this.day && !vv.disabled
|
||||
})
|
||||
if(day!=undefined ){
|
||||
day.selected=true
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
// 日期补零
|
||||
zeroPad(n){
|
||||
return String(n < 10 ? '0' + n : n)
|
||||
},
|
||||
}
|
||||
}
|
||||
/* eslint-enable */
|
||||
</script>
|
||||
58
src/components/Hamburger/index.vue
Normal file
58
src/components/Hamburger/index.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<svg
|
||||
:class="{'is-active':isActive}"
|
||||
t="1492500959545"
|
||||
class="hamburger"
|
||||
style=""
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1691"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
@click="toggleClick">
|
||||
<path
|
||||
d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
|
||||
p-id="1692" />
|
||||
<path
|
||||
d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
|
||||
p-id="1693" />
|
||||
<path
|
||||
d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
|
||||
p-id="1694" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Hamburger',
|
||||
props: {
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
toggleClick: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hamburger {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transform: rotate(90deg);
|
||||
transition: .38s;
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
.hamburger.is-active {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
</style>
|
||||
72
src/components/Scrollpane/index.vue
Normal file
72
src/components/Scrollpane/index.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div ref="scrollContainer" class="scroll-container" @wheel.prevent="handleScroll">
|
||||
<div ref="scrollWrapper" :style="{left: left + 'px'}" class="scroll-wrapper">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const padding = 15 // tag's padding
|
||||
|
||||
export default {
|
||||
name: 'ScrollPane',
|
||||
data() {
|
||||
return {
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleScroll(e) {
|
||||
const eventDelta = e.wheelDelta || -e.deltaY * 3
|
||||
const $container = this.$refs.scrollContainer
|
||||
const $containerWidth = $container.offsetWidth
|
||||
const $wrapper = this.$refs.scrollWrapper
|
||||
const $wrapperWidth = $wrapper.offsetWidth
|
||||
|
||||
if (eventDelta > 0) {
|
||||
this.left = Math.min(0, this.left + eventDelta)
|
||||
} else {
|
||||
if ($containerWidth - padding < $wrapperWidth) {
|
||||
if (this.left < -($wrapperWidth - $containerWidth + padding)) {
|
||||
this.left = this.left
|
||||
} else {
|
||||
this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
|
||||
}
|
||||
} else {
|
||||
this.left = 0
|
||||
}
|
||||
}
|
||||
},
|
||||
moveToTarget($target) {
|
||||
const $container = this.$refs.scrollContainer
|
||||
const $containerWidth = $container.offsetWidth
|
||||
const $targetLeft = $target.offsetLeft
|
||||
const $targetWidth = $target.offsetWidth
|
||||
|
||||
if ($targetLeft < -this.left) {
|
||||
// tag in the left
|
||||
this.left = -$targetLeft + padding
|
||||
} else if ($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + $containerWidth - padding) {
|
||||
// tag in the current view
|
||||
// eslint-disable-line
|
||||
} else {
|
||||
// tag in the right
|
||||
this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.scroll-container {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
.scroll-wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
91
src/components/Sticky/index.vue
Normal file
91
src/components/Sticky/index.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div :style="{height:height+'px',zIndex:zIndex}">
|
||||
<div
|
||||
:class="className"
|
||||
:style="{top:(isSticky ? stickyTop +'px' : ''),zIndex:zIndex,position:position,width:width,height:height+'px'}"
|
||||
>
|
||||
<slot>
|
||||
<div>sticky</div>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Sticky',
|
||||
props: {
|
||||
stickyTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: false,
|
||||
position: '',
|
||||
width: undefined,
|
||||
height: undefined,
|
||||
isSticky: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.height = this.$el.getBoundingClientRect().height
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
window.addEventListener('resize', this.handleReize)
|
||||
},
|
||||
activated() {
|
||||
this.handleScroll()
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
window.removeEventListener('resize', this.handleReize)
|
||||
},
|
||||
methods: {
|
||||
sticky() {
|
||||
if (this.active) {
|
||||
return
|
||||
}
|
||||
this.position = 'fixed'
|
||||
this.active = true
|
||||
this.width = this.width + 'px'
|
||||
this.isSticky = true
|
||||
},
|
||||
handleReset() {
|
||||
if (!this.active) {
|
||||
return
|
||||
}
|
||||
this.reset()
|
||||
},
|
||||
reset() {
|
||||
this.position = ''
|
||||
this.width = 'auto'
|
||||
this.active = false
|
||||
this.isSticky = false
|
||||
},
|
||||
handleScroll() {
|
||||
const width = this.$el.getBoundingClientRect().width
|
||||
this.width = width || 'auto'
|
||||
const offsetTop = this.$el.getBoundingClientRect().top
|
||||
if (offsetTop < this.stickyTop) {
|
||||
this.sticky()
|
||||
return
|
||||
}
|
||||
this.handleReset()
|
||||
},
|
||||
handleReize() {
|
||||
if (this.isSticky) {
|
||||
this.width = this.$el.getBoundingClientRect().width + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
43
src/components/SvgIcon/index.vue
Normal file
43
src/components/SvgIcon/index.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<svg :class="svgClass" aria-hidden="true">
|
||||
<use :xlink:href="iconName"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SvgIcon',
|
||||
props: {
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconName() {
|
||||
return `#icon-${this.iconClass}`
|
||||
},
|
||||
svgClass() {
|
||||
if (this.className) {
|
||||
return 'svg-icon ' + this.className
|
||||
} else {
|
||||
return 'svg-icon'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
103
src/components/Tinymce/components/editorImage.vue
Normal file
103
src/components/Tinymce/components/editorImage.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">上传图片
|
||||
</el-button>
|
||||
<el-dialog :visible.sync="dialogVisible">
|
||||
<el-upload
|
||||
:multiple="true"
|
||||
:file-list="fileList"
|
||||
:show-file-list="true"
|
||||
:on-remove="handleRemove"
|
||||
:on-success="handleSuccess"
|
||||
:before-upload="beforeUpload"
|
||||
class="editor-slide-upload"
|
||||
action="https://httpbin.org/post"
|
||||
list-type="picture-card">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getToken } from 'api/qiniu'
|
||||
|
||||
export default {
|
||||
name: 'EditorSlideUpload',
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: '#1890ff'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
listObj: {},
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkAllSuccess() {
|
||||
return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
|
||||
},
|
||||
handleSubmit() {
|
||||
const arr = Object.keys(this.listObj).map(v => this.listObj[v])
|
||||
if (!this.checkAllSuccess()) {
|
||||
this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
|
||||
return
|
||||
}
|
||||
this.$emit('successCBK', arr)
|
||||
this.listObj = {}
|
||||
this.fileList = []
|
||||
this.dialogVisible = false
|
||||
},
|
||||
handleSuccess(response, file) {
|
||||
const uid = file.uid
|
||||
const objKeyArr = Object.keys(this.listObj)
|
||||
for (let i = 0, len = objKeyArr.length; i < len; i++) {
|
||||
if (this.listObj[objKeyArr[i]].uid === uid) {
|
||||
this.listObj[objKeyArr[i]].url = response.files.file
|
||||
this.listObj[objKeyArr[i]].hasSuccess = true
|
||||
return
|
||||
}
|
||||
}
|
||||
},
|
||||
handleRemove(file) {
|
||||
const uid = file.uid
|
||||
const objKeyArr = Object.keys(this.listObj)
|
||||
for (let i = 0, len = objKeyArr.length; i < len; i++) {
|
||||
if (this.listObj[objKeyArr[i]].uid === uid) {
|
||||
delete this.listObj[objKeyArr[i]]
|
||||
return
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUpload(file) {
|
||||
const _self = this
|
||||
const _URL = window.URL || window.webkitURL
|
||||
const fileName = file.uid
|
||||
this.listObj[fileName] = {}
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
img.src = _URL.createObjectURL(file)
|
||||
img.onload = function() {
|
||||
_self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
|
||||
}
|
||||
resolve(true)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.editor-slide-upload {
|
||||
margin-bottom: 20px;
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
204
src/components/Tinymce/index.vue
Normal file
204
src/components/Tinymce/index.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
|
||||
<textarea :id="tinymceId" class="tinymce-textarea"/>
|
||||
<div class="editor-custom-btn-container">
|
||||
<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import editorImage from './components/editorImage'
|
||||
import plugins from './plugins'
|
||||
import toolbar from './toolbar'
|
||||
|
||||
export default {
|
||||
name: 'Tinymce',
|
||||
components: { editorImage },
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
toolbar: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
menubar: {
|
||||
type: String,
|
||||
default: 'file edit insert view format table'
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 360
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hasChange: false,
|
||||
hasInit: false,
|
||||
tinymceId: this.id,
|
||||
fullscreen: false,
|
||||
languageTypeList: {
|
||||
'en': 'en',
|
||||
'zh': 'zh_CN'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
language() {
|
||||
return 'zh_CN'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
if (!this.hasChange && this.hasInit) {
|
||||
this.$nextTick(() =>
|
||||
window.tinymce.get(this.tinymceId).setContent(val || ''))
|
||||
}
|
||||
},
|
||||
language() {
|
||||
this.destroyTinymce()
|
||||
this.$nextTick(() => this.initTinymce())
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initTinymce()
|
||||
},
|
||||
activated() {
|
||||
this.initTinymce()
|
||||
},
|
||||
deactivated() {
|
||||
this.destroyTinymce()
|
||||
},
|
||||
destroyed() {
|
||||
this.destroyTinymce()
|
||||
},
|
||||
methods: {
|
||||
initTinymce() {
|
||||
const _this = this
|
||||
window.tinymce.init({
|
||||
language: this.language,
|
||||
selector: `#${this.tinymceId}`,
|
||||
height: this.height,
|
||||
body_class: 'panel-body ',
|
||||
object_resizing: false,
|
||||
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
|
||||
menubar: this.menubar,
|
||||
plugins: plugins,
|
||||
end_container_on_empty_block: true,
|
||||
powerpaste_word_import: 'clean',
|
||||
code_dialog_height: 450,
|
||||
code_dialog_width: 1000,
|
||||
advlist_bullet_styles: 'square',
|
||||
advlist_number_styles: 'default',
|
||||
imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
|
||||
default_link_target: '_blank',
|
||||
link_title: false,
|
||||
nonbreaking_force_tab: true, // inserting nonbreaking space need Nonbreaking Space Plugin
|
||||
init_instance_callback: editor => {
|
||||
if (_this.value) {
|
||||
editor.setContent(_this.value)
|
||||
}
|
||||
_this.hasInit = true
|
||||
editor.on('NodeChange Change KeyUp SetContent', () => {
|
||||
this.hasChange = true
|
||||
this.$emit('input', editor.getContent())
|
||||
})
|
||||
},
|
||||
setup(editor) {
|
||||
editor.on('FullscreenStateChanged', (e) => {
|
||||
_this.fullscreen = e.state
|
||||
})
|
||||
}
|
||||
// 整合七牛上传
|
||||
// images_dataimg_filter(img) {
|
||||
// setTimeout(() => {
|
||||
// const $image = $(img);
|
||||
// $image.removeAttr('width');
|
||||
// $image.removeAttr('height');
|
||||
// if ($image[0].height && $image[0].width) {
|
||||
// $image.attr('data-wscntype', 'image');
|
||||
// $image.attr('data-wscnh', $image[0].height);
|
||||
// $image.attr('data-wscnw', $image[0].width);
|
||||
// $image.addClass('wscnph');
|
||||
// }
|
||||
// }, 0);
|
||||
// return img
|
||||
// },
|
||||
// images_upload_handler(blobInfo, success, failure, progress) {
|
||||
// progress(0);
|
||||
// const token = _this.$store.getters.token;
|
||||
// getToken(token).then(response => {
|
||||
// const url = response.data.qiniu_url;
|
||||
// const formData = new FormData();
|
||||
// formData.append('token', response.data.qiniu_token);
|
||||
// formData.append('key', response.data.qiniu_key);
|
||||
// formData.append('file', blobInfo.blob(), url);
|
||||
// upload(formData).then(() => {
|
||||
// success(url);
|
||||
// progress(100);
|
||||
// })
|
||||
// }).catch(err => {
|
||||
// failure('出现未知问题，刷新页面，或者联系程序员')
|
||||
// console.log(err);
|
||||
// });
|
||||
// },
|
||||
})
|
||||
},
|
||||
destroyTinymce() {
|
||||
if (window.tinymce.get(this.tinymceId)) {
|
||||
window.tinymce.get(this.tinymceId).destroy()
|
||||
}
|
||||
},
|
||||
setContent(value) {
|
||||
window.tinymce.get(this.tinymceId).setContent(value)
|
||||
},
|
||||
getContent() {
|
||||
window.tinymce.get(this.tinymceId).getContent()
|
||||
},
|
||||
imageSuccessCBK(arr) {
|
||||
const _this = this
|
||||
arr.forEach(v => {
|
||||
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tinymce-container {
|
||||
position: relative;
|
||||
}
|
||||
.tinymce-container>>>.mce-fullscreen {
|
||||
z-index: 10000;
|
||||
}
|
||||
.tinymce-textarea {
|
||||
visibility: hidden;
|
||||
z-index: -1;
|
||||
}
|
||||
.editor-custom-btn-container {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
/*z-index: 2005;*/
|
||||
}
|
||||
.fullscreen .editor-custom-btn-container {
|
||||
z-index: 10000;
|
||||
position: fixed;
|
||||
}
|
||||
.editor-upload-btn {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
7
src/components/Tinymce/plugins.js
Normal file
7
src/components/Tinymce/plugins.js
Normal file
@@ -0,0 +1,7 @@
|
||||
// Any plugins you want to use has to be imported
|
||||
// Detail plugins list see https://www.tinymce.com/docs/plugins/
|
||||
// Custom builds see https://www.tinymce.com/download/custom-builds/
|
||||
|
||||
const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
|
||||
|
||||
export default plugins
|
||||
6
src/components/Tinymce/toolbar.js
Normal file
6
src/components/Tinymce/toolbar.js
Normal file
@@ -0,0 +1,6 @@
|
||||
// Here is a list of the toolbar
|
||||
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
|
||||
|
||||
const toolbar = ['bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
|
||||
|
||||
export default toolbar
|
||||
Reference in New Issue
Block a user