npm安装no-vue3-cron引入报错，就直接把代码拿来自己改了
no-vue3-cron仓库地址：https://github.com/wuchuanpeng/no-vue3-cron
vue-cron.vue
<style lang="scss"> .no-vue3-cron-div { .language { position: absolute; right: 25px; z-index: 1; } .el-tabs { box-shadow: none; } .tabBody { overflow: auto; .el-row { margin: 20px 0; .long { .el-select { width: 200px; } } .el-input-number { width: 120px; } } } .myScroller { &::-webkit-scrollbar { /*滚动条整体样式*/ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px; background-color: skyblue; background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent ); } &::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: #ededed; border-radius: 10px; } } .bottom { width: 100%; margin-top: 5px; display: flex; align-items: center; justify-content: space-around; .value { float: left; font-size: 14px; vertical-align: middle; span:nth-child(1) { color: red } } } } </style> <template> <div class="no-vue3-cron-div"> <el-button class="language" type="text" @click="state.language = state.language === 'en' ? 'cn' : 'en'" >{{ state.language === 'en' ? 'cn' : 'en' }}</el-button > <el-tabs type="border-card"> <el-tab-pane> <template #label> <span><i class="el-icon-date"></i> {{ state.text.Seconds.name }}</span> </template> <div class="tabBody myScroller" :style="{'max-height': maxHeight}"> <el-row> <el-radio v-model="state.second.cronEvery" label="1">{{ state.text.Seconds.every }} </el-radio> </el-row> <el-row> <el-radio v-model="state.second.cronEvery" label="2" >{{ state.text.Seconds.interval[0] }} <el-input-number v-model="state.second.incrementIncrement" :min="1" :max="60" ></el-input-number> {{ state.text.Seconds.interval[1] || "" }} <el-input-number v-model="state.second.incrementStart" :min="0" :max="59" ></el-input-number> {{ state.text.Seconds.interval[2] || "" }} </el-radio> </el-row> <el-row> <el-radio class="long" v-model="state.second.cronEvery" label="3" >{{ state.text.Seconds.specific }} <el-select :style="{width: '100%'}" multiple v-model="state.second.specificSpecific" > <el-option v-for="(val, index) in 60" :key="index" :value="val - 1" >{{ val - 1 }} </el-option > </el-select> </el-radio> </el-row> <el-row> <el-radio v-model="state.second.cronEvery" label="4" >{{ state.text.Seconds.cycle[0] }} <el-input-number v-model="state.second.rangeStart" :min="1" :max="60" ></el-input-number> {{ state.text.Seconds.cycle[1] || "" }} <el-input-number v-model="state.second.rangeEnd" :min="0" :max="59" ></el-input-number> {{ state.text.Seconds.cycle[2] || "" }} </el-radio> </el-row> </div> </el-tab-pane> <el-tab-pane> <template #label> <span><i class="el-icon-date"></i> {{ state.text.Minutes.name }}</span> </template> <div class="tabBody myScroller" :style="{'max-height': maxHeight}"> <el-row> <el-radio v-model="state.minute.cronEvery" label="1">{{ state.text.Minutes.every }} </el-radio> </el-row> <el-row> <el-radio v-model="state.minute.cronEvery" label="2" >{{ state.text.Minutes.interval[0] }} <el-input-number v-model="state.minute.incrementIncrement" :min="1" :max="60" ></el-input-number> {{ state.text.Minutes.interval[1] }} <el-input-number v-model="state.minute.incrementStart" :min="0" :max="59" ></el-input-number> {{ state.text.Minutes.interval[2] || "" }} </el-radio> </el-row> <el-row> <el-radio class="long" v-model="state.minute.cronEvery" label="3" >{{ state.text.Minutes.specific }} <el-select :style="{width: '100%'}" multiple v-model="state.minute.specificSpecific" > <el-option v-for="(val, index) in 60" :key="index" :value="val - 1" >{{ val - 1 }} </el-option > </el-select> </el-radio> </el-row> <el-row> <el-radio v-model="state.minute.cronEvery" label="4" >{{ state.text.Minutes.cycle[0] }} <el-input-number v-model="state.minute.rangeStart" :min="1" :max="60" ></el-input-number> {{ state.text.Minutes.cycle[1] }} <el-input-number v-model="state.minute.rangeEnd" :min="0" :max="59" ></el-input-number> {{ state.text.Minutes.cycle[2] }} </el-radio> </el-row> </div> </el-tab-pane> <el-tab-pane> <template #label> <span><i class="el-icon-date"></i> {{ state.text.Hours.name }}</span> </template> <div class="tabBody myScroller" :style="{'max-height': maxHeight}"> <el-row> <el-radio v-model="state.hour.cronEvery" label="1">{{ state.text.Hours.every }} </el-radio> </el-row> <el-row> <el-radio v-model="state.hour.cronEvery" label="2" >{{ state.text.Hours.interval[0] }} <el-input-number v-model="state.hour.incrementIncrement" :min="0" :max="23" ></el-input-number> {{ state.text.Hours.interval[1] }} <el-input-number v-model="state.hour.incrementStart" :min="0" :max="23" ></el-input-number> {{ state.text.Hours.interval[2] }} </el-radio> </el-row> <el-row> <el-radio class="long" v-model="state.hour.cronEvery" label="3" >{{ state.text.Hours.specific }} <el-select :style="{width: '100%'}" multiple v-model="state.hour.specificSpecific"> <el-option v-for="(val, index) in 24" :key="index" :value="val - 1" >{{ val - 1 }} </el-option > </el-select> </el-radio> </el-row> <el-row> <el-radio v-model="state.hour.cronEvery" label="4" >{{ state.text.Hours.cycle[0] }} <el-input-number v-model="state.hour.rangeStart" :min="0" :max="23" ></el-input-number> {{ state.text.Hours.cycle[1] }} <el-input-number v-model="state.hour.rangeEnd" :min="0" :max="23" ></el-input-number> {{ state.text.Hours.cycle[2] }} </el-radio> </el-row> </div> </el-tab-pane> <el-tab-pane> <template #label> <span><i class="el-icon-date"></i> {{ state.text.Day.name }}</span> </template> <div class="tabBody myScroller" :style="{'max-height': maxHeight}"> <el-row> <el-radio v-model="state.day.cronEvery" label="1">{{ state.text.Day.every }} </el-radio> </el-row> <el-row> <el-radio v-model="state.day.cronEvery" label="2" >{{ state.text.Day.intervalWeek[0] }} <el-input-number v-model="state.week.incrementIncrement" :min="1" :max="7" ></el-input-number> {{ state.text.Day.intervalWeek[1] }} <el-select :style="{width: '100%'}" v-model="state.week.incrementStart"> <el-option v-for="(val, index) in 7" :key="index" :label="state.text.Week[val - 1]" :value="val" ></el-option> </el-select> {{ state.text.Day.intervalWeek[2] }} </el-radio> </el-row> <el-row> <el-radio v-model="state.day.cronEvery" label="3" >{{ state.text.Day.intervalDay[0] }} <el-input-number v-model="state.day.incrementIncrement" :min="1" :max="31" ></el-input-number> {{ state.text.Day.intervalDay[1] }} <el-input-number v-model="state.day.incrementStart" :min="1" :max="31" ></el-input-number> {{ state.text.Day.intervalDay[2] }} </el-radio> </el-row> <el-row> <el-radio class="long" v-model="state.day.cronEvery" label="4" >{{ state.text.Day.specificWeek }} <el-select :style="{width: '100%'}" multiple v-model="state.week.specificSpecific"> <el-option v-for="(val, index) in 7" :key="index" :label="state.text.Week[val - 1]" :value=" ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'][val - 1] " ></el-option> </el-select> </el-radio> </el-row> <el-row> <el-radio class="long" v-model="state.day.cronEvery" label="5" >{{ state.text.Day.specificDay }} <el-select :style="{width: '100%'}" multiple v-model="state.day.specificSpecific"> <el-option v-for="(val, index) in 31" :key="index" :value="val" >{{ val }} </el-option > </el-select> </el-radio> </el-row> <el-row> <el-radio v-model="state.day.cronEvery" label="6">{{ state.text.Day.lastDay }} </el-radio> </el-row> <el-row> <el-radio v-model="state.day.cronEvery" label="7">{{ state.text.Day.lastWeekday }} </el-radio> </el-row> <el-row> <el-radio v-model="state.day.cronEvery" label="8" >{{ state.text.Day.lastWeek[0] }} <el-select :style="{width: '100%'}" v-model="state.week.cronLastSpecificDomDay"> <el-option v-for="(val, index) in 7" :key="index" :label="state.text.Week[val - 1]" :value="val" ></el-option> </el-select> {{ state.text.Day.lastWeek[1] || "" }} </el-radio> </el-row> <el-row> <el-radio v-model="state.day.cronEvery" label="9"> <el-input-number v-model="state.day.cronDaysBeforeEomMinus" :min="1" :max="31" ></el-input-number> {{ state.text.Day.beforeEndMonth[0] }} </el-radio> </el-row> <el-row> <el-radio v-model="state.day.cronEvery" label="10" >{{ state.text.Day.nearestWeekday[0] }} <el-input-number v-model="state.day.cronDaysNearestWeekday" :min="1" :max="31" ></el-input-number> {{ state.text.Day.nearestWeekday[1] }} </el-radio> </el-row> <el-row> <el-radio v-model="state.day.cronEvery" label="11" >{{ state.text.Day.someWeekday[0] }} <el-input-number v-model="state.week.cronNthDayNth" :min="1" :max="5" ></el-input-number> <el-select :style="{width: '100%'}" v-model="state.week.cronNthDayDay"> <el-option v-for="(val, index) in 7" :key="index" :label="state.text.Week[val - 1]" :value="val" ></el-option> </el-select> {{ state.text.Day.someWeekday[1] }} </el-radio> </el-row> </div> </el-tab-pane> <el-tab-pane> <template #label> <span><i class="el-icon-date"></i> {{ state.text.Month.name }}</span> </template> <div class="tabBody myScroller" :style="{'max-height': maxHeight}"> <el-row> <el-radio v-model="state.month.cronEvery" label="1">{{ state.text.Month.every }} </el-radio> </el-row> <el-row> <el-radio v-model="state.month.cronEvery" label="2" >{{ state.text.Month.interval[0] }} <el-input-number v-model="state.month.incrementIncrement" :min="0" :max="12" ></el-input-number> {{ state.text.Month.interval[1] }} <el-input-number v-model="state.month.incrementStart" :min="0" :max="12" ></el-input-number> </el-radio> </el-row> <el-row> <el-radio class="long" v-model="state.month.cronEvery" label="3" >{{ state.text.Month.specific }} <el-select :style="{width: '100%'}" multiple v-model="state.month.specificSpecific"> <el-option v-for="(val, index) in 12" :key="index" :label="val" :value="val" ></el-option> </el-select> </el-radio> </el-row> <el-row> <el-radio v-model="state.month.cronEvery" label="4" >{{ state.text.Month.cycle[0] }} <el-input-number v-model="state.month.rangeStart" :min="1" :max="12" ></el-input-number> {{ state.text.Month.cycle[1] }} <el-input-number v-model="state.month.rangeEnd" :min="1" :max="12" ></el-input-number> </el-radio> </el-row> </div> </el-tab-pane> <el-tab-pane> <template #label> <span><i class="el-icon-date"></i> {{ state.text.Year.name }}</span> </template> <div class="tabBody myScroller" :style="{'max-height': maxHeight}"> <el-row> <el-radio v-model="state.year.cronEvery" label="1">{{ state.text.Year.every }} </el-radio> </el-row> <el-row> <el-radio v-model="state.year.cronEvery" label="2" >{{ state.text.Year.interval[0] }} <el-input-number v-model="state.year.incrementIncrement" :min="1" :max="99" ></el-input-number> {{ state.text.Year.interval[1] }} <el-input-number v-model="state.year.incrementStart" :min="2018" :max="2118" ></el-input-number> </el-radio> </el-row> <el-row> <el-radio class="long" v-model="state.year.cronEvery" label="3" >{{ state.text.Year.specific }} <el-select :style="{width: '100%'}" filterable multiple v-model="state.year.specificSpecific" > <el-option v-for="(val, index) in 100" :key="index" :label="2017 + val" :value="2017 + val" ></el-option> </el-select> </el-radio> </el-row> <el-row> <el-radio v-model="state.year.cronEvery" label="4" >{{ state.text.Year.cycle[0] }} <el-input-number v-model="state.year.rangeStart" :min="2018" :max="2118" ></el-input-number> {{ state.text.Year.cycle[1] }} <el-input-number v-model="state.year.rangeEnd" :min="2018" :max="2118" ></el-input-number> </el-radio> </el-row> </div> </el-tab-pane> </el-tabs> <div class="bottom"> <div class="value"> <span> cron预览: </span> <el-tag type="primary"> {{ state.cron }} </el-tag> </div> <div class="buttonDiv"> <el-button type="primary" size="mini" @click.stop="handleChange">{{ state.text.Save }}</el-button> <el-button type="primary" size="mini" @click.stop="close">{{ state.text.Close }}</el-button> </div> </div> </div> </template> <script> import Language from "./language"; import {watch, reactive, computed, toRefs, defineComponent} from "vue"; export default defineComponent({ name: "noVue3Cron", props: { cronValue: String, i18n: {}, maxHeight: {} }, setup(props, {emit}) { const {i18n} = toRefs(props) const state = reactive({ language: i18n.value, second: { cronEvery: "1", incrementStart: 3, incrementIncrement: 5, rangeStart: 0, rangeEnd: 0, specificSpecific: [], }, minute: { cronEvery: "1", incrementStart: 3, incrementIncrement: 5, rangeStart: 0, rangeEnd: 0, specificSpecific: [], }, hour: { cronEvery: "1", incrementStart: 3, incrementIncrement: 5, rangeStart: 0, rangeEnd: 0, specificSpecific: [], }, day: { cronEvery: "1", incrementStart: 1, incrementIncrement: 1, rangeStart: 0, rangeEnd: 0, specificSpecific: [], cronDaysBeforeEomMinus: 0, cronDaysNearestWeekday: 0, }, week: { cronEvery: "1", incrementStart: 1, incrementIncrement: 1, specificSpecific: [], cronLastSpecificDomDay: 1, cronNthDayDay: 1, cronNthDayNth: 1, }, month: { cronEvery: "1", incrementStart: 3, incrementIncrement: 5, rangeStart: 0, rangeEnd: 0, specificSpecific: [], }, year: { cronEvery: "1", incrementStart: 2017, incrementIncrement: 1, rangeStart: 0, rangeEnd: 0, specificSpecific: [], }, output: { second: "", minute: "", hour: "", day: "", month: "", Week: "", year: "", }, text: computed(() => Language[state.language || "cn"]), secondsText: computed(() => { let seconds = ""; let cronEvery = state.second.cronEvery; switch (cronEvery.toString()) { case "1": seconds = "*"; break; case "2": seconds = state.second.incrementStart + "/" + state.second.incrementIncrement; break; case "3": state.second.specificSpecific.map((val) => { seconds += val + ","; }); seconds = seconds.slice(0, -1); break; case "4": seconds = state.second.rangeStart + "-" + state.second.rangeEnd; break; } return seconds; }), minutesText: computed(() => { let minutes = ""; let cronEvery = state.minute.cronEvery; switch (cronEvery.toString()) { case "1": minutes = "*"; break; case "2": minutes = state.minute.incrementStart + "/" + state.minute.incrementIncrement; break; case "3": state.minute.specificSpecific.map((val) => { minutes += val + ","; }); minutes = minutes.slice(0, -1); break; case "4": minutes = state.minute.rangeStart + "-" + state.minute.rangeEnd; break; } return minutes; }), hoursText: computed(() => { let hours = ""; let cronEvery = state.hour.cronEvery; switch (cronEvery.toString()) { case "1": hours = "*"; break; case "2": hours = state.hour.incrementStart + "/" + state.hour.incrementIncrement; break; case "3": state.hour.specificSpecific.map((val) => { hours += val + ","; }); hours = hours.slice(0, -1); break; case "4": hours = state.hour.rangeStart + "-" + state.hour.rangeEnd; break; } return hours; }), daysText: computed(() => { let days = ""; let cronEvery = state.day.cronEvery; switch (cronEvery.toString()) { case "1": break; case "2": case "4": case "11": case "8": days = "?"; break; case "3": days = state.day.incrementStart + "/" + state.day.incrementIncrement; break; case "5": state.day.specificSpecific.map((val) => { days += val + ","; }); days = days.slice(0, -1); break; case "6": days = "L"; break; case "7": days = "LW"; break; case "9": days = "L-" + state.day.cronDaysBeforeEomMinus; break; case "10": days = state.day.cronDaysNearestWeekday + "W"; break; } return days; }), weeksText: computed(() => { let weeks = ""; let cronEvery = state.day.cronEvery; switch (cronEvery.toString()) { case "1": case "3": case "5": weeks = "?"; break; case "2": weeks = state.week.incrementStart + "/" + state.week.incrementIncrement; break; case "4": state.week.specificSpecific.map((val) => { weeks += val + ","; }); weeks = weeks.slice(0, -1); break; case "6": case "7": case "9": case "10": weeks = "?"; break; case "8": weeks = state.week.cronLastSpecificDomDay + "L"; break; case "11": weeks = state.week.cronNthDayDay + "#" + state.week.cronNthDayNth; break; } return weeks; }), monthsText: computed(() => { let months = ""; let cronEvery = state.month.cronEvery; switch (cronEvery.toString()) { case "1": months = "*"; break; case "2": months = state.month.incrementStart + "/" + state.month.incrementIncrement; break; case "3": state.month.specificSpecific.map((val) => { months += val + ","; }); months = months.slice(0, -1); break; case "4": months = state.month.rangeStart + "-" + state.month.rangeEnd; break; } return months; }), yearsText: computed(() => { let years = ""; let cronEvery = state.year.cronEvery; switch (cronEvery.toString()) { case "1": years = "*"; break; case "2": years = state.year.incrementStart + "/" + state.year.incrementIncrement; break; case "3": state.year.specificSpecific.map((val) => { years += val + ","; }); years = years.slice(0, -1); break; case "4": years = state.year.rangeStart + "-" + state.year.rangeEnd; break; } return years; }), cron: computed(() => { return `${state.secondsText || "*"} ${state.minutesText || "*"} ${state.hoursText || "*"} ${state.daysText || "*"} ${state.monthsText || "*"} ${state.weeksText || "?"} ${state.yearsText || "*"}`; }), }); watch(() => props.cronValue, (newCron) => { if(typeof(newCron) !== 'string' || !newCron) return false let crons = newCron.split(" "); // 解析seconds let secondsText = crons[0].trim(); if (secondsText === "*") { state.second.cronEvery = "1"; }else if (secondsText.includes("/")) { state.second.cronEvery = "2"; let secondsTexts = secondsText.split("/"); state.second.incrementStart = parseInt(secondsTexts[0]) state.second.incrementIncrement = parseInt(secondsTexts[1]) }else if (secondsText.includes(",") || isFinite(secondsText)) { state.second.cronEvery = "3"; state.second.specificSpecific = secondsText.split(",").map(item => parseInt(item)); }else if (secondsText.includes("-")) { state.second.cronEvery = "4"; let secondsTexts = secondsText.split("-"); state.second.rangeStart = parseInt(secondsTexts[0]) state.second.rangeEnd = parseInt(secondsTexts[1]) } // 解析minutes let minutesText = crons[1].trim(); if (minutesText === "*") { state.minute.cronEvery = "1"; }else if (minutesText.includes("/")) { state.minute.cronEvery = "2"; let minutesTexts = minutesText.split("/"); state.minute.incrementStart = parseInt(minutesTexts[0]) state.minute.incrementIncrement = parseInt(minutesTexts[1]) }else if (minutesText.includes(",") || isFinite(minutesText)) { state.minute.cronEvery = "3"; state.minute.specificSpecific = minutesText.split(",").map(item => parseInt(item)); }else if (minutesText.includes("-")) { state.minute.cronEvery = "4"; let minutesTexts = minutesText.split("-"); state.minute.rangeStart = parseInt(minutesTexts[0]) state.minute.rangeEnd = parseInt(minutesTexts[1]) } // 解析hours let hoursText = crons[2].trim(); if (hoursText === "*") { state.hour.cronEvery = "1"; }else if (hoursText.includes("/")) { state.hour.cronEvery = "2"; let hoursTexts = hoursText.split("/"); state.hour.incrementStart = parseInt(hoursTexts[0]) state.hour.incrementIncrement = parseInt(hoursTexts[1]) }else if (hoursText.includes(",") || isFinite(hoursText)) { state.hour.cronEvery = "3"; state.hour.specificSpecific = hoursText.split(",").map(item => parseInt(item)); }else if (hoursText.includes("-")) { state.hour.cronEvery = "4"; let hoursTexts = hoursText.split("-"); state.hour.rangeStart = parseInt(hoursTexts[0]) state.hour.rangeEnd = parseInt(hoursTexts[1]) } // 解析days weeks let daysText = crons[3].trim(); let weeksText = crons[5].trim(); if (daysText.includes("/")) { state.day.cronEvery = "3"; let daysTexts = daysText.split("/"); state.day.incrementStart = parseInt(daysTexts[0]) state.day.incrementIncrement = parseInt(daysTexts[1]) }else if (daysText.includes(",") || isFinite(daysText)) { state.day.cronEvery = "5"; state.day.specificSpecific = daysText.split(",").map(item => parseInt(item)); }else if (daysText === "L") { state.day.cronEvery = "6"; }else if (daysText === "LW") { state.day.cronEvery = "7"; }else if (daysText.startsWith("L-")) { state.day.cronEvery = "9"; state.day.cronDaysBeforeEomMinus = parseInt(daysText.replaceAll("L-", "")) }else if (daysText.endsWith("W")) { state.day.cronEvery = "10"; state.day.cronDaysNearestWeekday = parseInt(daysText.replaceAll("W", "")) }else if (daysText === "?") { if (weeksText.includes("/")) { state.day.cronEvery = "2"; let weeksTexts = weeksText.split("/"); state.week.incrementStart = parseInt(weeksTexts[0]) state.week.incrementIncrement = parseInt(weeksTexts[1]) }else if (weeksText.includes(",") || isFinite(weeksText)) { state.day.cronEvery = "4"; state.week.specificSpecific = weeksText.split(",").map(item => item); }else if (weeksText.includes("#")) { state.day.cronEvery = "11"; let weeksTexts = weeksText.split("#"); state.week.cronNthDayDay = parseInt(weeksTexts[0]) state.week.cronNthDayNth = parseInt(weeksTexts[1]) }else if (weeksText.endsWith("L")) { state.day.cronEvery = "8"; state.week.cronLastSpecificDomDay = parseInt(weeksText.replaceAll("L", "")) } }else { state.day.cronEvery = "1"; } // 解析months let monthsText = crons[4].trim(); if (monthsText === "*") { state.month.cronEvery = "1"; }else if (monthsText.includes("/")) { state.month.cronEvery = "2"; let monthsTexts = monthsText.split("/"); state.month.incrementStart = parseInt(monthsTexts[0]) state.month.incrementIncrement = parseInt(monthsTexts[1]) }else if (monthsText.includes(",") || isFinite(monthsText)) { state.month.cronEvery = "3"; state.month.specificSpecific = monthsText.split(",").map(item => parseInt(item)); }else if (monthsText.includes("-")) { state.month.cronEvery = "4"; let monthsTexts = monthsText.split("-"); state.month.rangeStart = parseInt(monthsTexts[0]) state.month.rangeEnd = parseInt(monthsTexts[1]) } // 解析years let yearsText = crons[6].trim(); if (yearsText === "*") { state.year.cronEvery = "1"; }else if (yearsText.includes("/")) { state.year.cronEvery = "2"; let yearsTexts = yearsText.split("/"); state.year.incrementStart = parseInt(yearsTexts[0]) state.year.incrementIncrement = parseInt(yearsTexts[1]) }else if (yearsText.includes(",") || isFinite(yearsText)) { state.year.cronEvery = "3"; state.year.specificSpecific = yearsText.split(",").map(item => parseInt(item)); }else if (yearsText.includes("-")) { state.year.cronEvery = "4"; let yearsTexts = yearsText.split("-"); state.year.rangeStart = parseInt(yearsTexts[0]) state.year.rangeEnd = parseInt(yearsTexts[1]) } }, { immediate: true }) const getValue = () => { return state.cron } const close = () => { emit('close') } const handleChange = () => { emit('change', state.cron) close() } const rest = (data) => { for (let i in data) { if (data[i] instanceof Object) { this.rest(data[i]); } else { switch (typeof data[i]) { case "object": data[i] = []; break; case "string": data[i] = ""; break; } } } } return { state, getValue, close, handleChange, rest } }, }); </script>
使用
<el-input v-model="formData.paramExpression" :disabled="disabledStatus" placeholder="请输入定时表达式" > <template #append> <el-popover :visible="cronPopover" width="700px" trigger="manual"> <vue-cron :value="formData.paramExpression" @change="changeCron" @close="cronPopover=false" max-height="400px" i18n="cn" ></vue-cron> <template #reference> <el-button @click="cronPopover = !cronPopover">设置定时表达式</el-button> </template> </el-popover> </template> </el-input>