zydx-plus 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/calendar/index.js

@@ -0,0 +1,6 @@
+import main from './src/Calendar';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/calendar/src/Calendar.css

@@ -0,0 +1,262 @@
+.cale{
+	position: absolute;
+	top: 22px;
+	right: 0;
+	width: 300px;
+	height: 330px;
+	z-index: 100;
+	background-color: #fff;
+	box-shadow: 0 0 4px 1px #ccc;
+	border-radius: 5px;
+	padding: 0 10px;
+	display: grid;
+	user-select: none;
+}
+.cale-cont{
+	width: 100%;
+	height: 300px;
+	background-color: #fff;
+	border-radius: 10px;
+}
+.calendar-Time-header{
+	text-align: center;
+	vertical-align: middle;
+	padding: 10px 0;
+	font-size: 14px;
+}
+.month-txt{
+	padding: 26px 0 55px 0;
+	display: flex;
+}
+.calendar-lastY{
+	font-size: 12px;
+	cursor: pointer;
+	margin-right: 10px;
+}
+.calendar-nextY{
+	font-size: 12px;
+	cursor: pointer;
+	margin-left: 10px;
+}
+.month-txt-left{
+	flex: 1;
+	color: #4581FB;
+	font-size: 50px;
+	font-weight: bold;
+}
+.month-txt-right{
+	flex: 1;
+	text-align: right;
+	font-size: 55px;
+	color: #F4C256;
+	font-weight: bold;
+}
+.month-txt-right>text{
+	color: #4581FB;
+}
+.calendar-lastMonth{
+	width: 30px;
+	font-size: 12px;
+	margin-right: 20%;
+	padding: 0 5px;
+	text-align: center;
+	cursor: pointer;
+}
+.calendar-nextMonth{
+	width: 30px;
+	text-align: center;
+	margin-left: 20%;
+	font-size: 12px;
+	padding: 0 5px;
+	cursor: pointer;
+}
+.calendar-backToToday{
+	text-align: center;
+	font-size: 24px;
+	position: absolute;
+	right: 5px;
+}
+
+.calendar-row:before,
+.calendar-row:after {
+	display: table;
+	content: ' ';
+}
+
+.calendar-row:after {
+	clear: both;
+}
+
+.calendar-col {
+	position: relative;
+	float: left;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	-o-text-overflow: ellipsis;
+	overflow: hidden;
+	font-size: 12px;
+}
+.cal-k{
+	width: 14.2%;
+	height: 37px;
+	padding: 2px 0;
+	transform:scale(.8);
+	cursor: pointer;
+}
+.aligncanter {
+	text-align: center;
+}
+.coll{
+	background-color: #4581FB;
+	height: 22px !important;
+	border-radius: 30px;
+	width: 14.2%;
+	line-height: 22px;
+	color: #fff;
+    transform:scale(.8);
+}
+.colh{
+	background-color: #F4C256;
+	height: 22px;
+	border-radius: 30px;
+	width: 14.2%;
+	line-height: 22px;
+	color: #fff;
+	transform:scale(.8);
+}
+.ma{
+	margin-right: 0 !important;
+}
+
+.calendar-header {
+	color: gray;
+	vertical-align: middle;
+	font-size: 12px;
+	padding: 5px 0;
+}
+
+.calendar-day {
+	height: 80px;
+	transform: translate3d(0px, 0px, 0px) translateZ(0px); transition-duration: 0ms; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+
+.calendar-content {
+}
+
+.calendar-date{
+}
+.calendar-today {
+	border-radius: 6px;
+	background-color: #43CD80;
+	color:white;
+	-moz-box-shadow: 0px 2px 10px #ABABAB;
+	-webkit-box-shadow: 0px 2px 10px #ABABAB;
+	box-shadow: 0px 2px 10px #ABABAB;
+}
+.calendar-today .calendar-point{
+	color: white !important;
+}
+
+.calendar-today .calendar-text{
+	color: white !important;
+}
+
+.calendar-col-lastMonth .calendar-text{
+	color: gray;
+}
+
+.calendar-col-nextMonth .calendar-text{
+	color: gray;
+}
+
+.calendar-today .calendar-date{
+	color: white !important;
+}
+
+.calendar-active {
+	color:#01AAED;
+	background-color: #D9D9D9;
+	-moz-box-shadow: 0px 2px 10px #ABABAB;
+	-webkit-box-shadow: 0px 2px 10px #ABABAB;
+	box-shadow: 0px 2px 10px #ABABAB;
+}
+/* 范围标记 */
+.calendar-range {
+	/* color:#01AAED; */
+	border-radius: 0px;
+	background-color: #D9D9D9;
+	-moz-box-shadow: none;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+}
+
+
+
+.ClearBoth {
+	clear: both;
+}
+.calendar-col-nextMonth{
+	color:gray;
+}
+.calendar-col-lastMonth{
+	color:gray;
+}
+.calendar-btn-disabled{
+	color:gainsboro;
+}
+.calendar-point{
+	font-size: 16px;color: #01AAED;top:2px;right: 2px;position: absolute;
+}
+.calendar-text{
+	padding: 4px 0;
+	width:100%;font-size: 20px;color: #01AAED;top:40px;left: 0px;position: absolute;overflow:hidden;
+}
+.dayValue{
+	text-align: center;
+	height: 34px;
+	box-sizing: border-box;
+}
+
+.calendar-day-6-7{
+	color: #4581FB;
+}
+
+/* 超出日期范围 */
+.calendar-out-of-Date{
+	background-color: #EAEAEA;
+}
+.calendar-out-of-Date .calendar-date{
+	color: gray;
+}
+
+
+
+
+
+/* 以下为实现0.5px底部边界 */
+.under_line{position: relative;}
+.under_line:before,
+.under_line:after{position: absolute;content: " ";height: 1px;width: 100%;left: 0;transform-origin: 0 0;-webkit-transform-origin: 0 0;}
+/* .fineLine:before{顶部top: 0;background: #000;} */
+.under_line:after{bottom: 0;border-bottom: 1px solid #ccc;}
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5){.under_line:after,.under_line:before{-webkit-transform: scaleY(.667);}}
+@media only screen and (-webkit-min-device-pixel-ratio: 2){.under_line:after,.under_line:before{-webkit-transform: scaleY(.5);}}
+/* 以上为实现0.5px底部边界 */
+.cle-but-cont{
+	margin-top: 5px;
+	padding: 5px 0 0 0;
+	text-align: right;
+	border-top: 1px solid #ccc;
+}
+.cle-but{
+	margin-left: 5px;
+	font-size: 12px;
+	background-color: #fff;
+	border: 1px solid #000;
+	border-radius: 3px;
+	padding: 2px 5px;
+	cursor: pointer;
+	width: 50px;
+	text-align: center;
+}

package/src/components/calendar/src/Calendar.vue

@@ -0,0 +1,699 @@
+<template>
+  <div class="cale">
+    <div class="cale-cont">
+      <div class='calendar-Time-header under_line'>
+        <span class='calendar-lastY' @click="subYear">《</span>
+				<span class='calendar-lastMonth' @click="subMonth" :class="{'calendar-btn-disabled' : lastDisabled }">{{lastText}}</span>
+        <span class='calendar-TimeH'>{{title_time}}</span>
+        <span class='calendar-nextMonth' @click="addMonth" :class="{'calendar-btn-disabled' : nextDisabled }">{{nextText}}</span>
+        <span class='calendar-nextY' @click="addYear">》</span>
+      </div>
+      <div class="calendar-content">
+        <div class="calendar-row calendar-header">
+          <div class="calendar-col aligncanter coll">星期日</div>
+          <div class="calendar-col aligncanter colh">星期一</div>
+          <div class="calendar-col aligncanter colh">星期二</div>
+          <div class="calendar-col aligncanter colh">星期三</div>
+          <div class="calendar-col aligncanter colh">星期四</div>
+          <div class="calendar-col aligncanter colh">星期五</div>
+          <div class="calendar-col aligncanter coll ma">星期六</div>
+        </div>
+        <div class="calendar-row calendar-day"
+             :style="{'transform':transformObj, 'transition-duration':transformTimeObj}">
+          <div class="calendar-col aligncanter cal-k calendar-col-lastMonth" :style="{'line-height':(showLunar)?'auto':'37px'}" v-for='item in beforeDateList'
+               :key='item.key' @click="subMonth" :class="{'calendar-out-of-Date' : item.outOfDate }">
+            {{item.dateIndex}}
+            <p class='calendar-span'>{{item.markText}}</p>
+          </div>
+
+          <div class="calendar-col aligncanter cal-k currentDays" :style="{'line-height':(showLunar)?'auto':'37px'}" :class="{'calendar-active' : item.dateIndex == currentSelectTime
+					, 'calendar-today' : item.isToday
+					, 'calendar-range' : item.isRanges
+					, 'calendar-out-of-Date' : item.outOfDate }" v-for='item in dateList' v-bind:key='item.key'
+               @click="selectedDateFun(item.dateIndex)">
+            <div class='dayValue'>
+							<span class='calendar-date calendar-day-6-7'
+                    v-if="item.isDaySunOrSat">{{item.dateIndex}}</span>
+              <span v-else class='calendar-date'>{{item.dateIndex}}</span>
+              <span class='calendar-point'
+                    :style="{'color':item.pointTextColor?item.pointTextColor:maskColor}">{{item.pointText}}</span>
+              <p class='calendar-span'
+                    :style="{'color':item.markTextColor?item.markTextColor:maskColor}">{{item.markText}}</p>
+            </div>
+          </div>
+
+          <div class="calendar-col cal-k aligncanter calendar-col-nextMonth" :style="{'line-height':(showLunar)?'auto':'37px'}" v-for='item in afterDateList'
+               :key='item.key' @click="addMonth" :class="{'calendar-out-of-Date' : item.outOfDate }">
+            {{item.dateIndex}}
+            <p class='calendar-span'>{{item.markText}}</p>
+          </div>
+        </div>
+        <div class="ClearBoth"></div>
+      </div>
+      <div class="cle-but-cont">
+        <button class="cle-but" @click="confirm">确认</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+	import lunarYearTool from './sloarToLunar.js'
+	export default {
+		name: 'zydx-calendar',
+		props: {
+			/**
+			 * @description 当前时间 yyyy-MM-dd
+			 */
+			currentTime: {
+				type: String,
+				default: function() {
+					let timeObj = new Date();
+					return timeObj.getFullYear() + "-" + (timeObj.getMonth() + 1) + "-" + timeObj.getDate();
+				}
+			},
+			/**
+			 * @description 标记点列表
+			 * time	标记时间	yyyy-MM-dd
+			 * text	标记内容
+			 * markPoint 是否显示标记点 默认false
+			 * markTextColor 标记内容颜色
+			 * pointText 左上角标记点内容
+			 * pointTextColor 标记点颜色
+			 */
+			mark: {
+				type: Array,
+				default: function() {
+					return undefined;
+				}
+			},
+			/**
+			 * @description 上月文字
+			 */
+			lastText: {
+				type: String,
+				default: '〈'
+			},
+			/**
+			 * @description 下月文字
+			 */
+			nextText: {
+				type: String,
+				default: '〉'
+			},
+			/**
+			 * @description 全局标记点颜色，包括点和文字
+			 */
+			maskColor: {
+				type: String,
+				default: '#01AAED'
+			},
+			/**
+			 * @description 是否显示农历，mask优先级高
+			 */
+			showLunar: {
+				type: Boolean,
+				default: true
+			},
+			/**
+			 * @description 设置标记范围
+			 */
+			range: {
+				type: Object,
+				default: function() {
+					return {
+						rangeStart: undefined, //设置标记范围开始，yyyy-MM-dd
+						rangeEnd: undefined //设置标记范围结束，yyyy-MM-dd
+					}
+				}
+			},
+			/**
+			 * @description 是否开启范围选择模式
+			 */
+			rangeMode: {
+				type: Boolean,
+				default: false
+			},
+			/**
+			 * @description 日历起始时间 yyyy-MM-dd
+			 */
+			dateStart: {
+				type: String,
+				default: '1970-01-01'
+			},
+			/**
+			 * @description 日历结束时间 yyyy-MM-dd
+			 */
+			dateEnd: {
+				type: String,
+				default: '2100-12-31'
+			},
+			/**
+			 * @description 是否可以滚动
+			 */
+			canDrag: {
+				type: Boolean,
+				default: true
+			},
+		},
+		created() {
+			this.render();
+		},
+		data() {
+			return {
+				nextDisabled: false,
+				lastDisabled: false,
+				currentSelectTime: undefined, //点击时保存的dateIndex
+				title_time: '', //顶头文本
+				year: undefined, //当前年
+				month: undefined, //当前月
+				beforeDateList: [], //上个月的日期列表
+				dateList: [], //本月的日期列表
+				afterDateList: [], //下个月的日期列表
+				firstRangeSelected: false, // 范围开始时间是否已经选择
+				rangeStart_: undefined, //标记范围开始，yyyyMM-dd
+				rangeEnd_: undefined, //标记范围结束，yyyyMM-dd
+				transform_x: 0,
+				transform_time: 0,
+				tileMonth: '',
+				monthY: '',
+				dayChange: '',
+				monthList: [{
+						id: '01',
+						name: 'January'
+					},
+					{
+						id: '02',
+						name: 'February'
+					},
+					{
+						id: '03',
+						name: 'March'
+					},
+					{
+						id: '04',
+						name: 'April'
+					},
+					{
+						id: '05',
+						name: 'May'
+					},
+					{
+						id: '06',
+						name: 'June'
+					},
+					{
+						id: '07',
+						name: 'July'
+					},
+					{
+						id: '08',
+						name: 'August'
+					},
+					{
+						id: '09',
+						name: 'September'
+					},
+					{
+						id: '10',
+						name: 'October'
+					},
+					{
+						id: '11',
+						name: 'November'
+					},
+					{
+						id: '12',
+						name: 'December'
+					},
+				]
+			};
+		},
+		methods: {
+			confirm() {
+				let that = this
+        if(that.rangeMode) {
+          that.$emit('confirm', {
+            start: that.rangeStart_,
+            end: that.rangeEnd_
+          });
+        }else {
+          that.$emit('confirm', that.dayChange.time);
+        }
+			},
+			render(setTimeStr) { //初始化
+				let that = this;
+				let currentTimeStr = setTimeStr ? setTimeStr : that.currentTime;
+				let timeObj = this.toDateByStr(currentTimeStr); //当前选定的时间
+
+				//计算头部显示的年月
+				let _tempTileMonth = (timeObj.getMonth() + 1);
+				if (_tempTileMonth < 10)
+					_tempTileMonth = '0' + _tempTileMonth;
+				this.title_time = timeObj.getFullYear() + "年" + _tempTileMonth + "月";
+				this.tileMonth = _tempTileMonth
+				for (let i = 0; i < this.monthList.length; i++) {
+					if (this.monthList[i].id === _tempTileMonth) {
+						this.monthY = this.monthList[i].name
+					}
+				}
+
+				//获取当前时间月份1号
+				let firstDayStr = timeObj.getFullYear() + "/" + (timeObj.getMonth() + 1) + "/01";
+				let date = that.toDateByStr(firstDayStr);
+				that.year = date.getFullYear();
+				that.month = date.getMonth() + 1;
+				let firstDayWeek = date.getDay(); //第一天是星期几
+				let grid_sum = 0; //总格子数 ，用于后面填满格子
+				//获取上一个月的天数
+				let TempMonth;
+				let TempYear;
+				if (that.month == 1) { //跨年
+					TempMonth = 12;
+					TempYear = that.year - 1;
+				} else {
+					TempYear = that.year;
+					TempMonth = that.month - 1;
+				}
+				let TempLastMonthStr = TempYear + "/" + TempMonth + "/01";
+				let lastMonthTotalDay = that.getTotalDay(TempLastMonthStr);
+				let lastMonthStartDay = lastMonthTotalDay - firstDayWeek;
+
+				let _dateStart = that.toDateByStr1(that.dateStart);
+				let _dateEnd = that.toDateByStr1(that.dateEnd);
+				// 创建前面的日期
+				that.beforeDateList = [];
+				for (let i = 0; i < firstDayWeek; i++) {
+					grid_sum++;
+					lastMonthStartDay++;
+					let tempObj = {
+						dateIndex: lastMonthStartDay,
+						key: 'before_' + i
+					};
+
+					//判断是否超出日期范围
+					let _tempBeforeDate = new Date(TempYear + "/" + TempMonth + "/" + lastMonthStartDay);
+					if (_dateStart > _tempBeforeDate || _tempBeforeDate > _dateEnd) {
+						tempObj.outOfDate = true;
+					}
+
+					//获取农历
+					if (that.showLunar) {
+						let LunarDate = that.sloarToLunar(TempYear, TempMonth, lastMonthStartDay);
+						let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate.lunarDay;
+						tempObj.markText = tempLunarDay;
+					}
+
+					that.beforeDateList.push(tempObj);
+				}
+
+				//获取一个月的天数
+				let totalDay = that.getTotalDay(currentTimeStr);
+
+				//生成本月日历
+				let today = new Date();
+				let today_year = today.getFullYear();
+				let today_month = today.getMonth() + 1;
+				let today_day = today.getDate();
+				that.dateList = [];
+				for (let i = 1; i <= totalDay; i++) { //循环日
+					grid_sum++;
+
+					let tempObj = {
+						dateIndex: i,
+						key: 'date_' + i,
+						isRanges: false,
+						isToday: false
+					};
+					//当前日期变量
+					let tempDay = that.toDateByStr(that.year + "/" + that.month + "/" + i);
+
+					//判断是否为当天
+					if (today_year == that.year && today_month == that.month && today_day == i)
+						tempObj.isToday = true;
+
+					//周六和周日，特殊处理
+					let tempCurrWeek = tempDay.getDay();
+					if (tempCurrWeek == 0 || tempCurrWeek == 6)
+						tempObj.isDaySunOrSat = true;
+
+					//判断是否超出日期范围
+					if (_dateStart > tempDay || tempDay > _dateEnd) {
+						tempObj.outOfDate = true;
+					}
+
+					//获取农历
+					if (that.showLunar) {
+						let LunarDate = that.sloarToLunar(that.year, that.month, i);
+						that.lunarMonth = LunarDate.lunarMonth;
+						that.lunarYear = LunarDate.lunarYear;
+						let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate.lunarDay;
+						tempObj.lunarMonth = LunarDate.lunarMonth;
+						tempObj.lunarYear = LunarDate.lunarYear;
+						tempObj.lunarDay = LunarDate.lunarDay;
+						tempObj.markText = tempLunarDay;
+						tempObj.markTextColor = '#454545';
+					}
+
+					//设置了标记点
+					if (that.mark) {
+						for (let z = 0; z < that.mark.length; z++) { //判断是否为标记点
+							let tempDayMark = that.toDateByStr1(that.mark[z].time.trim())
+							if (tempDay.getTime() == tempDayMark.getTime()) {
+								let tempTextStr = that.mark[z].text
+								if (that.mark[z].markPoint != false) { // 是否显示点
+									tempObj.pointText = that.mark[z].pointText ? that.mark[z].pointText : '●';
+									tempObj.pointTextColor = that.mark[z].pointTextColor ? that.mark[z].pointTextColor :
+										undefined;
+								}
+								if (tempTextStr != undefined && tempTextStr != "") { // 是否显示文字
+									tempObj.markText = tempTextStr;
+									tempObj.markTextColor = that.mark[z].markTextColor ? that.mark[z].markTextColor :
+										undefined;
+								}
+								break;
+							}
+						}
+					}
+
+					that.dateList.push(tempObj);
+				}
+
+				that.setRange();
+
+				// 创建后面的空白，补够五行
+				that.afterDateList = [];
+				if (grid_sum < 42) { // 创建后面的空白，补够五行
+					let j = 0;
+
+					//获取下一月
+					let TempMonthNext;
+					let TempYearNext;
+					if (that.month == 12) { //跨年
+						TempMonthNext = 1;
+						TempYearNext = that.year + 1;
+					} else {
+						TempYearNext = that.year;
+						TempMonthNext = that.month + 1;
+					}
+
+					for (let i = grid_sum; i < 42; i++) {
+						j++;
+
+						let tempObj = {
+							dateIndex: j,
+							key: 'after_' + j
+						};
+						//获取农历
+						if (that.showLunar) {
+							let LunarDate = that.sloarToLunar(TempYearNext, TempMonthNext, j);
+							let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate
+							.lunarDay;
+							tempObj.markText = tempLunarDay;
+						}
+
+						//判断是否超出日期范围
+						let _tempAfterDate = new Date(TempYearNext + "/" + TempMonthNext + "/" + j);
+						if (_dateStart > _tempAfterDate || _tempAfterDate > _dateEnd) {
+							tempObj.outOfDate = true;
+						}
+
+						that.afterDateList.push(tempObj);
+					}
+				}
+				that.selectedDateFun(today_day)
+			},
+			sloarToLunar(year, month, day) {
+				// console.log('----')
+				// console.log(year + "--" +month+ "--" + day)
+				let result = lunarYearTool.sloarToLunar(year, month, day);
+				//console.log(result)
+				return result;
+			},
+			getTotalDay(time) { //获取月 日期总数
+				time = time.replace(/-/g, "/");
+				let selectedDate = new Date(time);
+				if (selectedDate == "Invalid Date") {
+					selectedDate = new Date(time + "/01");
+				}
+
+				let dayMany = new Date(selectedDate.getFullYear(), (selectedDate.getMonth() + 1), 0).getDate()
+				return dayMany;
+			},
+			toDateByStr(timeStr) { //字符串转换时间，转换失败或者不传字符串则返回当前
+				let timeObj;
+				if (timeStr) {
+					timeObj = new Date(timeStr.replace(/-/g, "/"));
+				}
+				if (!timeStr || timeObj == "Invalid Date")
+					timeObj = new Date();
+				return timeObj;
+			},
+			toDateByStr1(timeStr) { //字符串转换时间，转换失败或者不传字符串则null
+				try {
+					let timeObj;
+					if (timeStr) {
+						timeObj = new Date(timeStr.replace(/-/g, "/"));
+					}
+					if (!timeStr || timeObj == "Invalid Date")
+						return null;
+					return timeObj;
+				} catch (e) {
+					return null;
+				}
+			},
+			selectedDateFun(index) { //点击日期
+				let that = this;
+				let selectObj = that.dateList[index - 1];
+				selectObj.year = that.year;
+				selectObj.month = that.month;
+				selectObj.day = index;
+				selectObj.time = that.year + "-" + that.month + "-" + index;
+				that.$emit('dayChange', selectObj);
+				that.dayChange = selectObj
+
+				//判断是否超出日期范围
+				if (that.checkOutOfDate(selectObj.time)) {
+					return;
+				}
+
+				that.currentSelectTime = index;
+
+				//开启了范围选择模式
+				if (that.rangeMode) {
+					if (!that.firstRangeSelected) { //选择开始时间
+						that.firstRangeSelected = !that.firstRangeSelected
+						that.rangeStart_ = selectObj.time;
+						that.rangeEnd_ = undefined;
+						that.clearRange();
+					} else { //选择了结束时间
+						that.rangeEnd_ = selectObj.time;
+						that.firstRangeSelected = !that.firstRangeSelected
+						that.$emit('rangeChange', {
+							start: that.rangeStart_,
+							end: that.rangeEnd_,
+						});
+						that.setRange();
+					}
+				}
+			},
+      subYear() { //减一年
+        let that = this
+        let _Month = that.month;
+        let _Year = that.year;
+        _Year -= 1
+        let str = _Year + "/" + _Month + "/01";
+        that.$emit('monthChange', {
+          date: str
+        });
+        that.render(str);
+      },
+      addYear() { //加一年
+        let that = this
+        let _Month = that.month;
+        let _Year = that.year;
+        _Year += 1
+        let str = _Year + "/" + _Month + "/01";
+        that.$emit('monthChange', {
+          date: str
+        });
+        that.render(str);
+      },
+			addMonth() { //加一个月
+				let that = this;
+
+				let _Month = that.month;
+				let _Year = that.year;
+				if (that.month == 12) { //跨年
+					_Month = 1;
+					_Year += 1;
+				} else {
+					_Month += 1;
+				}
+
+				let str = _Year + "/" + _Month + "/01";
+
+				//判断是否超出日期范围
+				if (that.checkOutOfDate(str)) {
+					that.nextDisabled = true;
+					return;
+				}
+
+				that.month = _Month;
+				that.year = _Year;
+				that.lastDisabled = false;
+
+				//检查日期上限值是否在当月内，如果在则不能再切换下个月
+				if (that.checkDateRange(that.year, that.month, 1)) {
+					that.nextDisabled = true;
+				}
+
+				if (that.rangeMode) { //开启了范围模式
+					that.currentSelectTime = undefined;
+				}
+
+				that.$emit('monthChange', {
+					date: str
+				});
+				that.render(str);
+			},
+			subMonth() { //减一个月
+				let that = this;
+
+				let _Month = that.month;
+				let _Year = that.year;
+				if (that.month == 1) { //跨年
+					_Month = 12;
+					_Year -= 1;
+				} else {
+					_Month -= 1;
+				}
+
+				let str = _Year + "/" + _Month + "/01";
+
+				//判断是否超出日期范围
+				let _totalDay = that.getTotalDay(str);
+				if (that.checkOutOfDate(_Year + "/" + _Month + "/" + _totalDay)) {
+					that.lastDisabled = true;
+					return;
+				}
+
+				that.month = _Month;
+				that.year = _Year;
+				that.nextDisabled = false;
+
+				//检查日期下限值是否在当月内，如果在则不能再切换上个月
+				if (that.checkDateRange(that.year, that.month)) {
+					that.lastDisabled = true;
+				}
+
+				if (that.rangeMode) { //开启了范围模式
+					that.currentSelectTime = undefined;
+				}
+
+				that.$emit('monthChange', {
+					date: str
+				});
+				that.render(str);
+			},
+			setRange() { //设置范围
+				let that = this;
+				let rangeStartDate = that.toDateByStr1(that.rangeStart_);
+				let rangeEndDate = that.toDateByStr1(that.rangeEnd_);
+				if (!rangeStartDate || !rangeEndDate)
+					return;
+				if (rangeStartDate > rangeEndDate) { //防止范围出错
+					let tempD = rangeEndDate;
+					rangeEndDate = rangeStartDate;
+					rangeStartDate = tempD;
+				}
+
+				//循环判断范围
+				for (let i = 0; i < that.dateList.length; i++) {
+					let _TempDtStr = that.year + "/" + that.month + "/" + that.dateList[i].dateIndex;
+					let _TempDt = that.toDateByStr1(_TempDtStr);
+					that.dateList[i].isRanges = false;
+					if (rangeStartDate <= _TempDt && _TempDt <= rangeEndDate) //时间在范围内
+						that.dateList[i].isRanges = true;
+				}
+			},
+			clearRange() { //关闭范围模式范围
+				let that = this;
+				//循环判断范围
+				for (let i = 0; i < that.dateList.length; i++) {
+					that.dateList[i].isRanges = false;
+				}
+			},
+			checkOutOfDate(time) { //判断是否超出日期范围,yyyy-MM-dd
+				let that = this;
+				let _dateStart = that.toDateByStr1(that.dateStart);
+				let _dateEnd = that.toDateByStr1(that.dateEnd);
+				let _tempDate = that.toDateByStr1(time);
+				if (_dateStart > _tempDate || _tempDate > _dateEnd) {
+					return true;
+				} else
+					return false;
+			},
+			checkDateRange(year, month, type) { //判断范围界限值是否在当月内,yyyy-MM-dd,type；1 上限值,其他：下限值
+				let that = this;
+
+				let totalDay = that.getTotalDay(year + '/' + month + '/01');
+				let firstD = that.toDateByStr1(year + '/' + month + '/01');
+				let lastD = that.toDateByStr1(year + '/' + month + '/' + totalDay);
+
+				if (type == 1) { //上限值
+					let _dateEnd = that.toDateByStr1(that.dateEnd);
+					if (firstD <= _dateEnd && _dateEnd <= lastD) {
+						return true;
+					} else
+						return false;
+				} else { //下限值
+					let _dateStart = that.toDateByStr1(that.dateStart);
+					if (firstD <= _dateStart && _dateStart <= lastD) {
+						return true;
+					} else
+						return false;
+				}
+			}
+		},
+		watch: {
+			currentTime: function(val, oldVal) { //时间改变
+				let dateNew = this.toDateByStr1(val);
+				if (dateNew.getFullYear() == this.year && (dateNew.getMonth() + 1) == this.month) {
+					console.log('time is not change')
+				} else {
+					this.currentSelectTime = dateNew.getDate();
+					this.render();
+				}
+			},
+			range: function(val, oldVal) { //范围改变
+				if (val.rangeStart != oldVal.rangeStart || val.rangeEnd != oldVal.rangeEnd) {
+					this.rangeStart_ = val.rangeStart;
+					this.rangeEnd_ = val.rangeEnd;
+					this.setRange();
+				}
+			},
+			mark: function(val, oldVal) { //标记改变
+				this.render();
+			},
+			rangeMode: function(val, oldVal) { //范围改变
+				if (!val) { //如果是关闭范围模式
+					this.rangeStart_ = undefined; //标记范围开始，yyyyMM-dd
+					this.rangeEnd_ = undefined; //标记范围结束，yyyyMM-dd
+					this.firstRangeSelected = false;
+					this.clearRange()
+				}
+			},
+		},
+		computed: {
+			transformObj: function() {
+				return 'translate3d(' + this.transform_x + 'px, 0px, 0px) translateZ(0px)';
+			},
+			transformTimeObj: function() {
+				return this.transform_time + 'ms';
+			}
+		},
+	}
+</script>
+
+<style scoped src="./Calendar.css"></style>

package/src/components/calendar/src/sloarToLunar.js

@@ -0,0 +1,195 @@
+/* 公历转农历代码思路：
+1、建立农历年份查询表
+2、计算输入公历日期与公历基准的相差天数
+3、从农历基准开始遍历农历查询表，计算自农历基准之后每一年的天数，并用相差天数依次相减，确定农历年份
+4、利用剩余相差天数以及农历每个月的天数确定农历月份
+5、利用剩余相差天数确定农历哪一天 */
+var lunarYearTool = {
+	// 农历1949-2100年查询表
+	lunarYearArr: [
+		0x0b557, //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
+		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
+	],
+	lunarMonth: ['正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'],
+	lunarDay: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '初', '廿'],
+	tianGan: ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'],
+	diZhi: ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'],
+	/**
+	 * @description 	公历转农历函数
+	 * @param {int} sy 	年份
+	 * @param {int} sm 	月份
+	 * @param {int} sd	日期
+	 * */
+	sloarToLunar: function(sy, sm, sd) { // 
+		let that = this;
+		// 输入的月份减1处理
+		sm -= 1;
+
+		// 计算与公历基准的相差天数
+		// Date.UTC()返回的是距离公历1970年1月1日的毫秒数,传入的月份需要减1
+		let daySpan = (Date.UTC(sy, sm, sd) - Date.UTC(1949, 0, 29)) / (24 * 60 * 60 * 1000) + 1;
+		let ly, lm, ld;
+		// 确定输出的农历年份
+		for (let j = 0; j < that.lunarYearArr.length; j++) {
+			let tempDaySpan = that.lunarYearDays(that.lunarYearArr[j]);
+			daySpan -= tempDaySpan
+			if (daySpan <= 0) {
+				ly = 1949 + j;
+				// 获取农历年份确定后的剩余天数
+				daySpan += tempDaySpan;
+				break
+			}
+		}
+
+		// 确定输出的农历月份
+		let lunarYearMonthsList = that.lunarYearMonths(that.lunarYearArr[ly - 1949])
+		let hasLeapMonth_Result = that.hasLeapMonth(that.lunarYearArr[ly - 1949]);
+		for (let k = 0; k < lunarYearMonthsList.length; k++) {
+			daySpan -= lunarYearMonthsList[k];
+			if (daySpan <= 0) {
+				// 有闰月时，月份的数组长度会变成13，因此，当闰月月份小于等于k时，lm不需要加1
+				if (hasLeapMonth_Result && hasLeapMonth_Result <= k) {
+					if (hasLeapMonth_Result < k) {
+						lm = k;
+					} else if (hasLeapMonth_Result === k) {
+						lm = '闰' + k;
+					} else {
+						lm = k + 1;
+					}
+				} else {
+					lm = k + 1;
+				}
+				// 获取农历月份确定后的剩余天数
+				daySpan += lunarYearMonthsList[k];
+				break
+			}
+		}
+
+		// 确定输出农历哪一天
+		ld = daySpan;
+
+		// 将计算出来的农历月份转换成汉字月份，闰月需要在前面加上闰字
+		if (hasLeapMonth_Result && (typeof(lm) === 'string' && lm.indexOf('闰') > -1)) {
+			lm = `闰${this.lunarMonth[/\d/.exec(lm) - 1]}`
+		} else {
+			lm = that.lunarMonth[lm - 1];
+		}
+
+		// 将计算出来的农历年份转换为天干地支年
+		ly = that.getTianGan(ly) + that.getDiZhi(ly);
+
+		// 将计算出来的农历天数转换成汉字
+		if (ld < 11) {
+			ld = `${this.lunarDay[10]}${this.lunarDay[ld-1]}`
+		} else if (ld > 10 && ld < 20) {
+			ld = `${this.lunarDay[9]}${this.lunarDay[ld-11]}`
+		} else if (ld === 20) {
+			ld = `${this.lunarDay[1]}${this.lunarDay[9]}`
+		} else if (ld > 20 && ld < 30) {
+			ld = `${this.lunarDay[11]}${this.lunarDay[ld-21]}`
+		} else if (ld === 30) {
+			ld = `${this.lunarDay[2]}${this.lunarDay[9]}`
+		}
+
+		return {
+			lunarYear: ly,
+			lunarMonth: lm,
+			lunarDay: ld,
+		}
+	},
+	/**
+	 * @description 计算农历年是否有闰月，参数为存储农历年的16进制
+	 * 				农历年份信息用16进制存储，其中16进制的最后1位可以用于判断是否有闰月
+	 * */
+	hasLeapMonth: function(ly) {
+		// 获取16进制的最后1位，需要用到&与运算符
+		if (ly & 0xf) {
+			return ly & 0xf
+		} else {
+			return false
+		}
+	},
+	/**
+	 * @description 如果有闰月，计算农历闰月天数，参数为存储农历年的16进制
+	 *				农历年份信息用16进制存储，其中16进制的第1位（0x除外）可以用于表示闰月是大月还是小月
+	 * */
+	leapMonthDays: function(ly) {
+		if (this.hasLeapMonth(ly)) {
+			// 获取16进制的第1位（0x除外）
+			return (ly & 0xf0000) ? 30 : 29
+		} else {
+			return 0
+		}
+	},
+	/**
+	 * @description 计算农历一年的总天数，参数为存储农历年的16进制
+	 *				农历年份信息用16进制存储，其中16进制的第2-4位（0x除外）可以用于表示正常月是大月还是小月
+	 * */
+	lunarYearDays: function(ly) {
+		let totalDays = 0;
+
+		// 获取正常月的天数，并累加
+		// 获取16进制的第2-4位，需要用到>>移位运算符
+		for (let i = 0x8000; i > 0x8; i >>= 1) {
+			let monthDays = (ly & i) ? 30 : 29;
+			totalDays += monthDays;
+		}
+		// 如果有闰月，需要把闰月的天数加上
+		if (this.hasLeapMonth(ly)) {
+			totalDays += this.leapMonthDays(ly);
+		}
+
+		return totalDays
+	},
+	/**
+	 * @description 获取农历每个月的天数  参数需传入16进制数值
+	 * */
+	lunarYearMonths: function(ly) {
+		let monthArr = [];
+		let that = this;
+		// 获取正常月的天数，并添加到monthArr数组中
+		// 获取16进制的第2-4位，需要用到>>移位运算符
+		for (let i = 0x8000; i > 0x8; i >>= 1) {
+			monthArr.push((ly & i) ? 30 : 29);
+		}
+		// 如果有闰月，需要把闰月的天数加上
+		if (this.hasLeapMonth(ly)) {
+			monthArr.splice(this.hasLeapMonth(ly), 0, that.leapMonthDays(ly));
+		}
+
+		return monthArr
+	},
+	/**
+	 * @description 将农历年转换为天干，参数为农历年
+	 * */
+	getTianGan: function(ly) {
+		let tianGanKey = (ly - 3) % 10;
+		if (tianGanKey === 0) tianGanKey = 10;
+		return this.tianGan[tianGanKey - 1]
+	},
+	/**
+	 * @description 将农历年转换为地支，参数为农历年
+	 * */
+	getDiZhi: function(ly) {
+		let diZhiKey = (ly - 3) % 12;
+		if (diZhiKey === 0) diZhiKey = 12;
+		return this.diZhi[diZhiKey - 1]
+	}
+}
+
+export default lunarYearTool;

package/src/components/tipBox/index.js

@@ -1,7 +1,35 @@
-import publicTable from './src/main';
+import { createVNode, render } from 'vue'
+import XtxConfirm from './src/main.vue'
 
-publicTable.install = function(Vue) {
-    Vue.component(publicTable.name, publicTable);
-};
+// 准备div容器
+const divNode = createVNode('div', { class: 'xtx-confirm-container' })
+render(divNode, document.body)
+// 获取 DOM 节点, 用于挂载组件或卸载组件
+const container = divNode.el
 
-export default publicTable;
+// 导出函数可通过调用 Confirm() 函数动态创建 XtxConfirm 组件
+const Confirm = ({ type, url ,title, promptContent, middle, cancelShow, inputArr }) => {
+    // 返回 Promise 对象
+    return new Promise((resolve, reject) => {
+        // 2. 点击确认按钮，触发resolve同时销毁组件
+        const submit = () => {
+            let val = '点击确认'
+            if(type === 'input') {
+                val = inputArr.map(x => {
+                    return x.value
+                })
+            }
+            render(null, container)
+            resolve(val)
+        }
+        // 3. 点击取消按钮，触发reject同时销毁组件
+        const cancel = () => {
+            render(null, container)
+            reject('点击取消')
+        }
+        // 1. 创建 XtxConfirm 组件
+        const VNode = createVNode(XtxConfirm, { type, url ,title, promptContent, middle, cancelShow, inputArr, submit, cancel })
+        render(VNode, container)
+    })
+}
+export default Confirm

package/src/components/tipBox/src/main.vue

@@ -11,6 +11,16 @@
             <div class="tip-img" v-if="type === 'img'">
               <img :src="url" />
             </div>
+            <div class="tip-img" v-if="type === 'input'">
+              <div class="tip-input" v-for="(item,index) in inputArr" :key="index">
+                <span>{{ item.name }}</span>
+                <input v-if="item.type === 'input'" type="text" :placeholder="item.placeholder" v-model="item.value" :disabled="item.disabled" />
+                <select v-if="item.type === 'select'" :disabled="item.disabled" v-model="item.value" :placeholder="item.placeholder">
+                  <option value="1" v-for="(it,ind) in item.option" :key="ind">{{ it.name }}</option>
+                </select>
+                <div v-if="item.type === 'text'" class="text">{{ item.value }}</div>
+              </div>
+            </div>
           </div>
         </div>
         <div class="tip-btnBox">
@@ -46,21 +56,23 @@ export default {
       type: Boolean,
       default: true
     },
-    cancelShow: {
+    cancelShow: { //是否显示取消按钮
       type: Boolean,
       default: true
-    }
-  },
-  data () {
-    return {}
-  },
-  methods: {
-    submit: function (val) {
-      this.$emit('rheResults', val)
     },
-    cancel: function () {
-      this.$emit('cancel')
-    }
+    inputArr: { // 弹窗的提示标题
+      type: Array,
+      default: []
+    },
+    // 确认按钮
+    submit: {
+      type: Function,
+      default: () => {}
+    },
+    cancel: {
+      type: Function,
+      default: () => {}
+    },
   }
 }
 </script>

package/src/components/tipBox/src/zydxStyle.css

@@ -16,6 +16,7 @@
   border-radius: 5px;
   border: 5px rgba(0, 0, 0, .1) solid;
   margin: 0 auto;
+  box-sizing: border-box;
 }
 .tip-boxContent{
   max-height: 600px;
@@ -79,9 +80,47 @@ font-size: 12px;
   text-align: center;
 }
 .tip-img{
-  width: 70%;
+  width: 100%;
   display: inline-block;
 }
 .tip-img>img{
   width: 100%;
 }
+.tip-input{
+  display: inline-block;
+  padding-bottom: 15px;
+}
+.tip-input:last-child{
+  padding-bottom: 0;
+}
+.tip-input>span{
+  font-size: 16px;
+  font-weight: bold;
+  display: inline-block;
+  line-height: 30px;
+  padding-right: 10px;
+}
+.tip-input>input{
+  width: 210px;
+  height: 30px;
+  box-sizing: border-box;
+  font-size: 16px;
+  outline: none;
+  padding-left: 10px;
+  border: 1px solid #ccc;
+}
+.tip-input>select{
+  width: 210px;
+  height: 30px;
+  box-sizing: border-box;
+  font-size: 16px;
+  outline: none;
+  padding-left: 10px;
+  border: 1px solid #ccc;
+}
+.text{
+  display: inline-block;
+  font-size: 16px;
+  width: 210px;
+  text-align: left;
+}

package/src/index.js

@@ -1,21 +1,20 @@
 import tipBox from './components/tipBox/index';
+import Calendar from './components/calendar/index';
 
 const components = [
-    tipBox
+    Calendar
 ];
 
-const install = function(Vue, opts = {}) {
+function install(app) {
     components.forEach(component => {
-        Vue.component(component.name, component);
+        app.component(component.name, component);
     });
-};
-
-if (typeof window !== 'undefined' && window.Vue) {
-    install(window.Vue);
+    app.config.globalProperties.$message = tipBox
 }
 
 export default {
-    version: '1.0.6',
+    version: '1.0.7',
     install,
-    tipBox
+    Calendar
 };
+