JCron.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <div class="components-input-demo-presuffix">
  3. <a-input @click="openModal" placeholder="corn表达式" v-model="cron" @change="handleOK">
  4. <a-icon slot="prefix" type="schedule" title="corn控件"/>
  5. <a-icon v-if="cron" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
  6. </a-input>
  7. <JCronModal ref="innerVueCron" :data="cron" @ok="handleOK"></JCronModal>
  8. </div>
  9. </template>
  10. <script>
  11. import JCronModal from './JCronModal'
  12. export default {
  13. name: 'JCron',
  14. components: {
  15. JCronModal
  16. },
  17. props: {
  18. value: {
  19. required: false,
  20. type: String,
  21. default: () => {
  22. return '* * * * * ? *'
  23. }
  24. }
  25. },
  26. data () {
  27. return {
  28. cron: this.value
  29. }
  30. },
  31. watch: {
  32. value (val) {
  33. this.cron = val
  34. }
  35. },
  36. methods: {
  37. openModal () {
  38. this.$refs.innerVueCron.show()
  39. },
  40. handleOK (val) {
  41. this.cron = val
  42. this.$emit('change', this.cron)
  43. // this.$emit("change", Object.assign({}, this.cron));
  44. },
  45. handleEmpty () {
  46. this.handleOK('')
  47. }
  48. },
  49. model: {
  50. prop: 'value',
  51. event: 'change'
  52. }
  53. }
  54. </script>
  55. <style scoped>
  56. .components-input-demo-presuffix .anticon-close-circle {
  57. cursor: pointer;
  58. color: #ccc;
  59. transition: color 0.3s;
  60. font-size: 12px;
  61. }
  62. .components-input-demo-presuffix .anticon-close-circle:hover {
  63. color: #f5222d;
  64. }
  65. .components-input-demo-presuffix .anticon-close-circle:active {
  66. color: #666;
  67. }
  68. </style>