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>
标签：case,text,break,state,let,vue3Cron,组件,cronEvery,表达式 From： https://www.cnblogs.com/fhysy/p/17903292.html