赞
踩
前言: vue 的 cron 组件,支持解析/反解析 cron 表达式,生成最近五次的符合条件时间,依赖 vue2 和 element-ui
效果图:
npm install vcrontab
- //全局引入
- import vcrontab from "vcrontab";
- Vue.use(vcrontab); //使用方式:
-
- //单独引入
- import vcrontab from "vcrontab";
- export default {
- components: { vcrontab },
- };
- <template>
- <div id="app">
- <div class="box">
- <el-input v-model="input" placeholder class="inp"></el-input>
- <el-button type="primary" @click="showDialog">生成 cron</el-button>
- </div>
- <el-dialog title="生成 cron" :visible.sync="showCron">
- <vcrontab @hide="showCron=false" @fill="crontabFill" :expression="expression"></vcrontab>
- </el-dialog>
- </div>
- </template>
- <script>
- import vcrontab from 'vcrontab'
- export default {
- components: { vcrontab },
- data() {
- return {
- input: "",
- expression: "",
- showCron: false
- };
- },
- methods: {
- crontabFill(value) {
- //确定后回传的值
- this.input = value;
- },
- showDialog() {
- this.expression = this.input;//传入的 cron 表达式,可以反解析到 UI 上
- this.showCron = true;
- }
- }
- };
- </script>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。