经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
基于vue3的Crontab组件
来源：cnblogs　　作者：Vrapile　　时间：2024/4/8 9:32:34　　对本文有异议

网上找的没有满意的，决定从若依前后端分离其前端vue2中的crontab进行转换，先上效果

若依v2版：

 改v3后：

 

 

v2转v3没什么难度，其中有大量的将 this.*** 替换为 ***.value，笔者写了个正则替换，希望可以帮助大家

  1. this.(\w+)         $1.value

 

需要注意的有，在v2中【this.$refs[refName].cycle01 = indexArr[0]】这样写

在v3中要转换一下，在子组件中用【defineExpose】抛出一个setData方法，然后【proxy.$refs[refName].setData("cycle01", Number(indexArr[0]))】赋值

 

其中子组件CrontabSecond.vue的代码，其它分/时/日/月/周/年的类似，参照着改就可以了

  1. <template>
  2.     <el-form size="small">
  3.         <el-form-item>
  4.             <el-radio v-model='radioValue' :label="1">
  5.                 每秒，允许的通配符[, - * /]
  6.             </el-radio>
  7.         </el-form-item>
  8.  
  9.         <el-form-item>
  10.             <el-radio v-model='radioValue' :label="2">
  11.                 周期，从
  12.                 <el-input-number v-model='cycle01' :min="0" :max="58" /> -
  13.                 <el-input-number v-model='cycle02' :min="cycle01 ? cycle01 + 1 : 1" :max="59" /> 秒
  14.             </el-radio>
  15.         </el-form-item>
  16.  
  17.         <el-form-item>
  18.             <el-radio v-model='radioValue' :label="3">
  19.                 从
  20.                 <el-input-number v-model='average01' :min="0" :max="58" /> 秒开始，每
  21.                 <el-input-number v-model='average02' :min="1" :max="59 - average01 || 0" /> 秒执行一次
  22.             </el-radio>
  23.         </el-form-item>
  24.  
  25.         <el-form-item class="crontab-select">
  26.             <el-radio v-model='radioValue' :label="4">
  27.                 指定
  28.                 <el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width:300px">
  29.                     <el-option v-for="item in 60" :key="item" :value="String(item-1)" :label="'第' + String(item-1) + '秒'">第 {{item-1}} 秒</el-option>
  30.                 </el-select>
  31.             </el-radio>
  32.         </el-form-item>
  33.     </el-form>
  34. </template>
  35.  
  36. <script setup name="CrontabSecond">
  37. import { ref } from 'vue';
  39. const emits = defineEmits(["update"]);
  41. const props = defineProps({
  42.   check: {
  43.         type: Function,
  44.         require:false
  45.     },
  46.   cron: {
  47.         type: Object,
  48.     default: function(){
  49.       return {}
  50.     }
  51.     },
  52. });
  54. const radioValue = ref(1);
  55. const cycle01 = ref(1);
  56. const cycle02 = ref(2);
  57. const average01 = ref(0);
  58. const average02 = ref(1);
  59. const checkboxList = ref([]);
  61. // 计算两个周期值
  62. const cycleTotal = computed(() => {
  63.     const c01 = props.check(cycle01.value, 0, 58)
  64.     const c02 = props.check(cycle02.value, c01 ? c01 + 1 : 1, 59)
  65.     return c01 + '-' + c02;
  66. })
  67. // 计算平均用到的值
  68. const averageTotal = computed(() => {
  69.     const a01 = props.check(average01.value, 0, 58)
  70.     const a02 = props.check(average02.value, 1, 59 - a01 || 0)
  71.     return a01 + '/' + a02;
  72. })
  73. // 计算勾选的checkbox值合集
  74. const checkboxString = computed(() => {
  75.     let str = checkboxList.value.join();
  76.     return str == '' ? '*' : str;
  77. })
  79. watch(()=>radioValue.value, ()=>{
  80.   radioChange();
  81. })
  82. watch(()=>cycleTotal.value, ()=>{
  83.   cycleChange();
  84. })
  85. watch(()=>averageTotal.value, ()=>{
  86.   averageChange();
  87. })
  88. watch(()=>checkboxString.value, ()=>{
  89.   checkboxChange();
  90. })
  92. // 单选按钮值变化时
  93. function radioChange() {
  94.     switch (radioValue.value) {
  95.         case 1:
  96.             emits('update', 'second', '*', 'second');
  97.             break;
  98.         case 2:
  99.             emits('update', 'second', cycleTotal.value);
  100.             break;
  101.         case 3:
  102.             emits('update', 'second', averageTotal.value);
  103.             break;
  104.         case 4:
  105.             emits('update', 'second', checkboxString.value);
  106.             break;
  107.     }
  108. }
  109. // 周期两个值变化时
  110. function cycleChange() {
  111.     if (radioValue.value == '2') {
  112.         emits('update', 'second', cycleTotal.value);
  113.     }
  114. }
  115. // 平均两个值变化时
  116. function averageChange() {
  117.     if (radioValue.value == '3') {
  118.         emits('update', 'second', averageTotal.value);
  119.     }
  120. }
  121. // checkbox值变化时
  122. function checkboxChange() {
  123.     if (radioValue.value == '4') {
  124.         emits('update', 'second', checkboxString.value);
  125.     }
  126. }
  128. defineExpose({
  129.   setData(key, value){
  130.         eval(key).value = value
  131.   }
  132. })
  133. </script>

 

关于CrontabResult.vue的组件，转v3时，额外注意数组排序这里就好了，

  1. # 如果改为compare.value会出现bug的
  3. 正确为  arr.sort(this.compare)   改为   arr.sort(compare)

 

贴出核心Crontab.vue的代码，其子组件就不一一贴了，需要的可以自己下若依代码进行转换

  1. <template>
  2.   <div class="crontab">
  3.     <el-tabs type="border-card">
  4.       <el-tab-pane label="秒">
  5.         <CrontabSecond
  6.           @update="updateCrontabValue"
  7.           v-model:check="checkNumber"
  8.           v-model:cron="crontabValueObj"
  9.           ref="cronsecond"
  10.         />
  11.       </el-tab-pane>
  12.  
  13.       <el-tab-pane label="分钟">
  14.         <CrontabMin
  15.           @update="updateCrontabValue"
  16.           v-model:check="checkNumber"
  17.           v-model:cron="crontabValueObj"
  18.           ref="cronmin"
  19.         />
  20.       </el-tab-pane>
  21.  
  22.       <el-tab-pane label="小时">
  23.         <CrontabHour
  24.           @update="updateCrontabValue"
  25.           v-model:check="checkNumber"
  26.           v-model:cron="crontabValueObj"
  27.           ref="cronhour"
  28.         />
  29.       </el-tab-pane>
  30.  
  31.       <el-tab-pane label="日">
  32.         <CrontabDay
  33.           @update="updateCrontabValue"
  34.           v-model:check="checkNumber"
  35.           v-model:cron="crontabValueObj"
  36.           ref="cronday"
  37.         />
  38.       </el-tab-pane>
  39.  
  40.       <el-tab-pane label="月">
  41.         <CrontabMonth
  42.           @update="updateCrontabValue"
  43.           v-model:check="checkNumber"
  44.           v-model:cron="crontabValueObj"
  45.           ref="cronmonth"
  46.         />
  47.       </el-tab-pane>
  48.  
  49.       <el-tab-pane label="周">
  50.         <CrontabWeek
  51.           @update="updateCrontabValue"
  52.           v-model:check="checkNumber"
  53.           v-model:cron="crontabValueObj"
  54.           ref="cronweek"
  55.         />
  56.       </el-tab-pane>
  57.  
  58.       <el-tab-pane label="年">
  59.         <CrontabYear
  60.           @update="updateCrontabValue"
  61.           v-model:check="checkNumber"
  62.           v-model:cron="crontabValueObj"
  63.           ref="cronyear"
  64.         />
  65.       </el-tab-pane>
  66.     </el-tabs>
  67.  
  68.     <div class="crontab-main">
  69.       <div class="crontab-main-table">
  70.         <table>
  71.           <thead>
  72.             <th v-for="item of tabTitles" width="40" :key="item">{{item}}</th>
  73.             <!-- <th>Cron 表达式</th> -->
  74.           </thead>
  75.           <tbody>
  76.             <td>
  77.               <span>{{crontabValueObj.second}}</span>
  78.             </td>
  79.             <td>
  80.               <span>{{crontabValueObj.min}}</span>
  81.             </td>
  82.             <td>
  83.               <span>{{crontabValueObj.hour}}</span>
  84.             </td>
  85.             <td>
  86.               <span>{{crontabValueObj.day}}</span>
  87.             </td>
  88.             <td>
  89.               <span>{{crontabValueObj.month}}</span>
  90.             </td>
  91.             <td>
  92.               <span>{{crontabValueObj.week}}</span>
  93.             </td>
  94.             <td>
  95.               <span>{{crontabValueObj.year}}</span>
  96.             </td>
  97.             <!-- <td>
  98.               <span>{{crontabValueString}}</span>
  99.             </td> -->
  100.           </tbody>
  101.         </table>
  102.         <table>
  103.           <thead>
  104.             <th>Cron 表达式</th>
  105.           </thead>
  106.           <tbody>
  107.             <td>
  108.               <span>{{crontabValueString}}</span>
  109.             </td>
  110.           </tbody>
  111.         </table>
  112.       </div>
  113.       
  114.       <div class="crontab-main-result">
  115.         <CrontabResult v-model:ex="crontabValueString"></CrontabResult>
  116.       </div>
  117.     </div>
  118.  
  119.   </div>
  120. </template>
  121.  
  122. <script setup name="Crontab">
  123. import CrontabSecond from "./crontab/CrontabSecond.vue";
  124. import CrontabMin from "./crontab/CrontabMin.vue";
  125. import CrontabHour from "./crontab/CrontabHour.vue";
  126. import CrontabDay from "./crontab/CrontabDay.vue";
  127. import CrontabMonth from "./crontab/CrontabMonth.vue";
  128. import CrontabWeek from "./crontab/CrontabWeek.vue";
  129. import CrontabYear from "./crontab/CrontabYear.vue";
  130. import CrontabResult from "./crontab/CrontabResult.vue";
  132. const { proxy } = getCurrentInstance();
  134. const emits = defineEmits(["hide", "fill"]);
  136. const props = defineProps({
  137.   expression: {type: String, default: ""}
  138. })
  140. const tabTitles = ref(["秒", "分钟", "小时", "日", "月", "周", "年"])
  141. const tabActive = ref(0)
  142. const crontabValueObj = ref({
  143.   second: "*",
  144.   min: "*",
  145.   hour: "*",
  146.   day: "*",
  147.   month: "*",
  148.   week: "?",
  149.   year: "",
  150. })
  152. const crontabValueString = computed(() => {
  153.   let obj = crontabValueObj.value;
  154.   let str =
  155.     obj.second +
  156.     " " +
  157.     obj.min +
  158.     " " +
  159.     obj.hour +
  160.     " " +
  161.     obj.day +
  162.     " " +
  163.     obj.month +
  164.     " " +
  165.     obj.week +
  166.     (obj.year == "" ? "" : " " + obj.year);
  167.   return str;
  168. })
  170. onMounted(() => {
  171.   resolveExp();
  172. })
  174. watch(() => props.expression, (v) => {
  175.   resolveExp();
  176. });
  178. function resolveExp() {
  179.   // 反解析 表达式
  180.   if (props.expression) {
  181.     let arr = props.expression.split(" ");
  182.     if (arr.length >= 6) {
  183.       //6 位以上是合法表达式
  184.       let obj = {
  185.         second: arr[0],
  186.         min: arr[1],
  187.         hour: arr[2],
  188.         day: arr[3],
  189.         month: arr[4],
  190.         week: arr[5],
  191.         year: arr[6] ? arr[6] : "",
  192.       };
  193.       crontabValueObj.value = {
  194.         ...obj,
  195.       };
  196.       for (let i in obj) {
  197.         if (obj[i]) changeRadio(i, obj[i]);
  198.       }
  199.     }
  200.   } else {
  201.     // 没有传入的表达式 则还原
  202.     clearCron();
  203.   }
  204. }
  205. // tab切换值
  206. function tabCheck(index) {
  207.   tabActive.value = index;
  208. }
  209. // 由子组件触发，更改表达式组成的字段值
  210. function updateCrontabValue(name, value, from) {
  211.   // "updateCrontabValue", name, value, from;
  212.   crontabValueObj.value[name] = value;
  213.   if (from && from !== name) {
  214.     console.log(`来自组件 ${from} 改变了 ${name} ${value}`);
  215.     changeRadio(name, value);
  216.   }
  217. }
  218. // 赋值到组件
  219. function changeRadio(name, value) {
  220.   let arr = ["second", "min", "hour", "month"]
  221.   let refName = "cron" + name
  222.   let insValue;
  224.   if (!proxy.$refs[refName]) return;
  226.   if (arr.includes(name)) {
  227.     if (value === "*") {
  228.       insValue = 1;
  229.     } else if (value.indexOf("-") > -1) {
  230.       let indexArr = value.split("-");
  231.       isNaN(indexArr[0])
  232.         ? (proxy.$refs[refName].setData("cycle01", 0))
  233.         : (proxy.$refs[refName].setData("cycle01", Number(indexArr[0])));
  234.       proxy.$refs[refName].setData("cycle02", Number(indexArr[1]));
  235.       insValue = 2;
  236.     } else if (value.indexOf("/") > -1) {
  237.       let indexArr = value.split("/");
  238.       isNaN(indexArr[0])
  239.         ? (proxy.$refs[refName].setData("average01", 0))
  240.         : (proxy.$refs[refName].setData("average01", Number(indexArr[0])));
  241.       proxy.$refs[refName].setData("average02", Number(indexArr[1]));
  242.       insValue = 3;
  243.     } else {
  244.       insValue = 4;
  245.       let list = value.split(",");
  246.       for(let item of list){
  247.         item = String(item)
  248.       }
  249.       proxy.$refs[refName].setData("checkboxList", list);
  250.     }
  251.   } else if (name == "day") {
  252.     if (value === "*") {
  253.       insValue = 1;
  254.     } else if (value == "?") {
  255.       insValue = 2;
  256.     } else if (value.indexOf("-") > -1) {
  257.       let indexArr = value.split("-");
  258.       isNaN(indexArr[0])
  259.         ? (proxy.$refs[refName].setData("cycle01", 0))
  260.         : (proxy.$refs[refName].setData("cycle01", Number(indexArr[0])));
  261.       proxy.$refs[refName].setData("cycle02", Number(indexArr[1]));
  262.       insValue = 3;
  263.     } else if (value.indexOf("/") > -1) {
  264.       let indexArr = value.split("/");
  265.       isNaN(indexArr[0])
  266.         ? (proxy.$refs[refName].setData("average01", 0))
  267.         : (proxy.$refs[refName].setData("average01", Number(indexArr[0])));
  268.       proxy.$refs[refName].setData("average02", Number(indexArr[1]));
  269.       insValue = 4;
  270.     } else if (value.indexOf("W") > -1) {
  271.       let indexArr = value.split("W");
  272.       isNaN(indexArr[0])
  273.         ? (proxy.$refs[refName].setData("workday", 0))
  274.         : (proxy.$refs[refName].setData("workday", Number(indexArr[0])));
  275.       insValue = 5;
  276.     } else if (value === "L") {
  277.       insValue = 6;
  278.     } else {
  279.       let list = value.split(",");
  280.       for(let item of list){
  281.         item = String(item)
  282.       }
  283.       proxy.$refs[refName].setData("checkboxList", list);
  284.       insValue = 7;
  285.     }
  286.   } else if (name == "week") {
  287.     if (value === "*") {
  288.       insValue = 1;
  289.     } else if (value == "?") {
  290.       insValue = 2;
  291.     } else if (value.indexOf("-") > -1) {
  292.       let indexArr = value.split("-");
  293.       isNaN(indexArr[0])
  294.         ? (proxy.$refs[refName].setData("cycle01", "0"))
  295.         : (proxy.$refs[refName].setData("cycle01", String(indexArr[0])));
  296.       proxy.$refs[refName].setData("cycle02", String(indexArr[1]));
  297.       insValue = 3;
  298.     } else if (value.indexOf("#") > -1) {
  299.       let indexArr = value.split("#");
  300.       isNaN(indexArr[0])
  301.         ? (proxy.$refs[refName].setData("average01", 1))
  302.         : (proxy.$refs[refName].setData("average01", Number(indexArr[0])));
  303.       proxy.$refs[refName].setData("average02", String(indexArr[1]));
  304.       insValue = 4;
  305.     } else if (value.indexOf("L") > -1) {
  306.       let indexArr = value.split("L");
  307.       isNaN(indexArr[0])
  308.         ? (proxy.$refs[refName].setData("weekday", "1"))
  309.         : (proxy.$refs[refName].setData("weekday", String(indexArr[0])));
  310.       insValue = 5;
  311.     } else {
  312.       let list = value.split(",");
  313.       for(let item of list){
  314.         item = String(item)
  315.       }
  316.       proxy.$refs[refName].setData("checkboxList", list);
  317.       insValue = 6;
  318.     }
  319.   } else if (name == "year") {
  320.     if (value == "") {
  321.       insValue = 1;
  322.     } else if (value == "*") {
  323.       insValue = 2;
  324.     } else if (value.indexOf("-") > -1) {
  325.       insValue = 3;
  326.     } else if (value.indexOf("/") > -1) {
  327.       insValue = 4;
  328.     } else {
  329.       let list = value.split(",");
  330.       for(let item of list){
  331.         item = String(item)
  332.       }
  333.       proxy.$refs[refName].setData("checkboxList", list);
  334.       insValue = 5;
  335.     }
  336.   }
  337.   proxy.$refs[refName].setData("radioValue",  insValue);
  338. }
  339. // 表单选项的子组件校验数字格式（通过-props传递）
  340. function checkNumber(value, minLimit, maxLimit) {
  341.   // 检查必须为整数
  342.   value = Math.floor(Number(value));
  343.   if (value < minLimit) {
  344.     value = minLimit;
  345.   } else if (value > maxLimit) {
  346.     value = maxLimit;
  347.   }
  348.   return value;
  349. }
  350. // 隐藏弹窗
  351. function hidePopup() {
  352.   emits("hide");
  353. }
  354. // 填充表达式
  355. function submitFill() {
  356.   emits("fill", crontabValueString);
  357.   hidePopup();
  358. }
  359. function clearCron() {
  360.   // 还原选择项
  361.   ("准备还原");
  362.   crontabValueObj.value = {
  363.     second: "*",
  364.     min: "*",
  365.     hour: "*",
  366.     day: "*",
  367.     month: "*",
  368.     week: "?",
  369.     year: "",
  370.   };
  371.   for (let j in crontabValueObj.value) {
  372.     changeRadio(j, crontabValueObj.value[j]);
  373.   }
  374. }
  376. defineExpose({
  377.   submitFill, clearCron
  378. })
  379. </script>
  380. <style scoped>
  381. .crontab{
  382.   flex: 1;
  383.   height: 100%;
  384.   display: flex;
  385.   flex-direction: column;
  386. }
  387. .crontab-main {
  388.   flex: 1;
  389.   width: 100%;
  390.   margin: 10px auto;
  391.   background: #fff;
  392.   border-radius: 5px;
  393.   font-size: 12px;
  394.   border: 1px solid #ccc;
  395.   box-sizing: border-box;
  396.   line-height: 24px;
  397.   padding: 5px 10px 5px;
  398.   display: flex;
  399.   justify-content: space-between;
  400.   overflow-y: auto;
  401. }
  402. .crontab-main-table {
  403.   box-sizing: border-box;
  404.   line-height: 24px;
  405.   padding: 5px 10px 5px;
  406.   width: 50%;
  407.   display: flex;
  408.   flex-direction: column;
  409.   justify-content: space-around;
  410.   table {
  411.     text-align: center;
  412.     width: 100%;
  413.     margin: 0;
  414.     span {
  415.       display: block;
  416.       width: 100%;
  417.       font-family: arial;
  418.       line-height: 30px;
  419.       height: 30px;
  420.       white-space: nowrap;
  421.       overflow: hidden;
  422.       border: 1px solid #e8e8e8;
  423.     }
  424.   }
  425. }
  427. .crontab-main-result {
  428.   box-sizing: border-box;
  429.   padding: 5px 10px 5px;
  430.   background-color: #f1f1f1;
  431.   background-size: cover;
  432.   width: 48%;
  433.   display: flex;
  434.   flex-direction: column;
  435.   .crontab-result-title{
  436.     padding: 5px;
  437.   }
  438.   :deep(.crontab-result-scroll) {
  439.     font-size: 12px;
  440.     line-height: 24px;
  441.     margin: 0 !important;
  442.     padding-left: 80px;
  443.   }
  444. }
  446. .crontab-footer {
  447.   text-align: right;
  448.   height: 25px;
  449.   padding: 5px 20px;
  450. }
  451. </style>

 

将原来组件的按钮移到引用层，引用样例

  1. 　　<el-dialog title="Cron表达式生成器" v-model="formCrontabOpen" append-to-body destroy-on-close class="nine-tanchuang-001">
  2.       <!-- <crontab @change="cronChange" v-model:value="formData.cronExpression" /> -->
  3.       <Crontab ref="crontabRef" @hide="formCrontabOpen=false" @fill="crontabFill" v-model:expression="formData.cronExpression"></Crontab>
  4.       <template #footer>
  5.         <div class="dialog-footer">
  6.           <el-button type="primary" @click="formCrontSubmit">确 定</el-button>
  7.           <el-button type="warning" @click="formCrontReset">重 置</el-button>
  8.           <el-button @click="formCrontabOpen=false">取 消</el-button>
  9.         </div>
  10.       </template>
  11.     </el-dialog>

 

对应引用位置的调用方法

  1. /** 确定访问子组件方法 */
  2. function formCrontSubmit(){
  3.   proxy.$refs.crontabRef.submitFill();
  4. }
  5. /** 重置访问子组件方法 */
  6. function formCrontReset(){
  7.   proxy.$refs.crontabRef.clearCron();
  8. }
  9. /** 子组件确认回调方法 */
  10. function crontabFill(value) {
  11.   formData.value.cronExpression = value;
  12. }

 

原文链接：https://www.cnblogs.com/Vrapile/p/18118548

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号