cron-editor.vue 1.6 KB
Newer Older
Mosher's avatar
Mosher committed
1 2
<template>
    <Select
3
        v-model="value[0]"
Mosher's avatar
Mosher committed
4
        class="transfer-select"
5
        @on-change='handleCronChange'
Mosher's avatar
Mosher committed
6
        :disabled="disabled"
7 8 9
        :placeholder="placeholder">
        <Option class="hidden" v-for="(item,i) in value" :value="item" :label="item" :key="i">
        </Option>
Mosher's avatar
Mosher committed
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
        <vue-cron class='vue-cron'  @cronValue='handleCronChange'></vue-cron>
    </Select>
    
</template>


<script lang="ts">
import { Vue, Component, Prop, Watch, Model } from 'vue-property-decorator';
import VueCron from './vue-cron/vue-cron.vue';

@Component({
    components: {
        'vue-cron': VueCron,
    }
})
export default class CronEditor extends Vue {
    
    /**
     * 启用状态
     *
     * @type {any}
     * @memberof CronEditor
     */ 
    @Prop() disabled: any;

    /**
     * 下拉框显示值
     *
     * @type {any}
     * @memberof CronEditor
     */ 
    @Prop() placeholder:any;

43 44 45 46 47 48 49 50
    /**
     * 绑定Cron表达式
     * 
     * @type {any[]}
     * @memberof CronEditor
     */
    public value: any[] = [];

Mosher's avatar
Mosher committed
51 52 53 54 55 56
    /**
     * 处理返回Cron表达式
     *
     * @type {any}
     * @memberof CronEditor
     */ 
57 58 59 60 61 62 63 64 65 66 67
    public handleCronChange(val: any) {
        this.value[0] = val;
        this.value.push(val);
    }

    /**
     * Vue生命周期
     * 
     */
    public created() {
        this.value[0] = '';
Mosher's avatar
Mosher committed
68 69 70 71 72
    }
}

</script>

73
<style lang="scss">
Mosher's avatar
Mosher committed
74 75 76 77 78 79 80 81 82 83 84 85 86 87
.transfer-select{
  .ivu-select-dropdown {
      padding: 0px;
      overflow: inherit;
      .hidden {
          display: none;
      }
      .vue-cron{
          min-width: 100% !important;
      }
  }
}

</style>