App.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <div id="app">
  3. <div class="box">
  4. <el-input v-model="input" placeholder class="inp"></el-input>
  5. <el-button type="primary" @click="showDialog">生成 cron</el-button>
  6. </div>
  7. <el-dialog title="生成 cron" :visible.sync="showCron">
  8. <vcrontab
  9. @hide="showCron=false"
  10. @fill="crontabFill"
  11. :expression="expression"
  12. ></vcrontab>
  13. </el-dialog>
  14. </div>
  15. </template>
  16. <script>
  17. import vcrontab from "../src/components/Crontab.vue";
  18. export default {
  19. components: { vcrontab },
  20. data() {
  21. return {
  22. input: "",
  23. expression: "",
  24. showCron: false,
  25. hideComponent: ["second"],
  26. };
  27. },
  28. methods: {
  29. crontabFill(value) {
  30. this.input = value;
  31. },
  32. showDialog() {
  33. this.expression = this.input;
  34. " this.expression ", this.expression;
  35. this.showCron = true;
  36. },
  37. },
  38. };
  39. </script>
  40. <style>
  41. .box {
  42. width: 500px;
  43. height: 100px;
  44. margin: 150px auto 0;
  45. }
  46. .inp {
  47. width: 300px !important;
  48. margin-right: 20px;
  49. }
  50. </style>