zydx-plus 1.18.80 → 1.18.82

package/package.json

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

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

@@ -223,7 +223,10 @@ li{list-style-type:none;}
 
 /* 超出日期范围 */
 .calendar-out-of-Date{
-	background-color: #EAEAEA;
+	color: #d7d6d6 !important
+}
+.calendar-out-of-Date .calendar-date,.calendar-out-of-Date .calendar-span{
+	color: #d7d6d6 !important
 }
 .calendar-out-of-Date .calendar-date{
 	color: gray;

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

@@ -86,659 +86,600 @@
 </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 是否显示时间
-       */
-      showDate: {
-        type: Boolean,
-        default: false
-      },
-			/**
-			 * @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: '',
-        cleDate: '00:00',
-        hour: '00',
-        minute: '00',
-        transHour: 0,
-        transMinute: 0,
-        cleFocusShow: false,
-				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: {
-      cleBlur() {
-        this.cleFocusShow = false
-      },
-      //获取焦点选择时间
-      cleFocus() {
-        this.cleFocusShow = true
-      },
-      scrollMinute(e) {
-        let top = e.target.scrollTop
-        let index = Math.floor(top/26)
-        this.transMinute = -(index * 26)
-        this.minute = (index < 10)? '0'+ index: index
-        this.cleDate = `${this.hour}:${this.minute}`
-      },
-      scrollHour(e) {
-        let top = e.target.scrollTop
-        let index = Math.floor(top/26)
-        this.transHour = -(index * 26)
-        this.hour = (index < 10)? '0'+ index: index
-        this.cleDate = `${this.hour}:${this.minute}`
-      },
-      //确认按钮
-			confirm() {
-				let that = this
-        if(that.rangeMode) {
-          if(that.showDate) {
-            that.$emit('confirm', {
-              start: that.rangeStart_,
-              end: that.rangeEnd_,
-              date: that.cleDate
-            });
-          }else {
-            that.$emit('confirm', {
-              start: that.rangeStart_,
-              end: that.rangeEnd_
-            });
-          }
-        }else {
-          if(that.showDate) {
-            that.$emit('confirm', {
-              start: that.dayChange.time,
-              date: that.cleDate
-            });
-          }else {
-            that.$emit('confirm', {
-              start: that.dayChange.time
-            });
-          }
+import lunarYearTool from './sloarToLunar.js'
+export default {
+    name: 'Li-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 是否显示时间
+         */
+        showDate: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * @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,
+            cleDate: '00:00',
+            cleFocusShow: false,
+            transHour: 0,
+            transMinute: 0,
+            hour: '00',
+            minute: '00',
+            dayChange: undefined,
+        };
+    },
+    methods: {
+        confirm() {
+            let date = {start: this.dayChange}
+            if(this.rangeMode) {
+                // 判断两个日期的大小
+                let start = (this.rangeStart_ === undefined)? null:this.rangeStart_.replace(/-/g, '')
+                let end = (this.rangeEnd_ === undefined)? null:this.rangeEnd_.replace(/-/g, '')
+                if(start > end) {
+                    date = {end: this.rangeStart_, start: this.rangeEnd_}
+                }else {
+                    date = {start: this.rangeStart_, end: this.rangeEnd_}
+                }
+            }
+            if(this.showDate) date.date = this.cleDate
+            this.$emit('confirm', date)
+        },
+        cleBlur() {
+            this.cleFocusShow = false
+        },
+        //获取焦点选择时间
+        cleFocus() {
+            this.cleFocusShow = true
+        },
+        scrollMinute(e) {
+            let top = e.target.scrollTop
+            let index = Math.floor(top/26)
+            this.transMinute = -(index * 26)
+            this.minute = (index < 10)? '0'+ index: index
+            this.cleDate = `${this.hour}:${this.minute}`
+        },
+        scrollHour(e) {
+            let top = e.target.scrollTop
+            let index = Math.floor(top/26)
+            this.transHour = -(index * 26)
+            this.hour = (index < 10)? '0'+ index: index
+            this.cleDate = `${this.hour}:${this.minute}`
+        },
+        subYear() { //减一年
+            let that = this
+            let _Month = that.month;
+            let _Year = that.year;
+            _Year -= 1
+            let str = _Year + "/" + _Month + "/01";
+            that.render(str);
+        },
+        addYear() { //加一年
+            let that = this
+            let _Month = that.month;
+            let _Year = that.year;
+            _Year += 1
+            let str = _Year + "/" + _Month + "/01";
+            that.render(str);
+        },
+        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 + "月";
+
+            //获取当前时间月份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(); //第一天是星期几
+            that.dayChange = that.year + '-' + that.month + '-' + new Date().getDate()
+            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);
+                }
+            }
+        },
+        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.dayChange = selectObj.time
+
+            //判断是否超出日期范围
+            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.setRange();
+                }
+            }
+        },
+        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.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.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';
         }
-			},
-			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/editor/src/editor.vue

@@ -82,6 +82,9 @@ export default defineComponent({
   mounted() {
     setTimeout(() => {
       this.formData.html = this.html
+      setTimeout(() => {
+        if(this.readOnly) this.opts.editable.config.readOnly = this.readOnly
+      },0)
     },0)
   },
   setup(props) {
@@ -99,7 +102,7 @@ export default defineComponent({
       editable: {
         config: {
           placeholder: props.placeholder,
-          readOnly: props.readOnly,
+          readOnly: false,
           autoFocus: (props.html !== ''),
           MENU_CONF: {
             // 上传图片

package/src/components/editor2/src/editor.vue

@@ -1,7 +1,7 @@
 <template>
     <div :style="heightStyle">
         <div class="ed-head">
-            <div class="ed-title" v-if="titleShow">{{ title }}</div>
+            <div class="ed-title" v-if="titleShow" :style="titleStyle">{{ title }}</div>
             <div class="ed-but" v-if="readOnly">
                 <div class="ed-head-but" v-for="(item,index) in toolbar">
                     <button v-if="item.key === 'but'" class="but" @click="item.onClick(item,info)" :style="{color: (item.active)? '#00ff00' :'#000'}">{{ item.title }}</button>
@@ -70,6 +70,14 @@ export default {
             type: String,
             default: ''
         },
+        titleStyle: {
+            type: Object,
+            default: {
+                'font-size': '16px',
+                'font-weight': 'bold',
+                'color': '#000'
+            }
+        },
         readOnly: {
             type: Boolean,
             default: true
@@ -293,7 +301,6 @@ export default {
     flex: 1;
     text-align: left;
     line-height: 22px;
-    font-size: 14px;
 }
 .enclosure-list{
     display: flex;

package/src/components/year/src/year.vue

@@ -142,6 +142,7 @@ export default {
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   cursor: pointer;
+  box-sizing: border-box;
 }
 .year-li:hover{
   color: #c64c10;

package/src/index.js

@@ -55,7 +55,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.18.80',
+    version: '1.18.82',
     install,
     Calendar,
     Message,