Vue2实现vue-cron回显以及一些自适应改动

参照组件：一个cron表达式生成插件,基于vue3.0与element-plus实现

一、Vue-cron组件改动

computed: {
    text() {
      return Language
    },
    secondsText: {
      get: function () {
        let seconds = ''
        const cronEvery = this.second.cronEvery
        switch (cronEvery.toString()) {
          case '1':
            seconds = '*'
            break
          case '2':
            seconds = this.second.incrementStart + '/' + this.second.incrementIncrement
            break
          case '3':
            this.second.specificSpecific.forEach(val => {
              seconds += val + ','
            })
            seconds = seconds.slice(0, -1)
            break
          case '4':
            seconds = this.second.rangeStart + '-' + this.second.rangeEnd
            break
        }
        return seconds
      }
      ..... //剩下的参照
      },
    cron() {
     // 自适应去除年
      return `${this.secondsText || '*'} ${this.minutesText || '*'} ${this.hoursText || '*'} ${this.daysText || '*'} ${this.monthsText || '*'} ${this.weeksText || '?'} `
    }

二、my-cron组件适配

import Vue from 'vue'
import Cron from '../../../my-cron/src/Cron'
import Base from '../Base'
import { Popover, Button, Input, Tabs, TabPane, Row, Col, Radio, InputNumber, Select, Option } from 'element-ui'

const components = [Popover, Button, Input, Tabs, TabPane, Row, Col, Radio, InputNumber, Select, Option]
components.forEach(comp => {
  Vue.use(comp)
})


export default {
  name: 'MyCron',
  mixins: [Base],
  components: {
    Cron
  },
  props: {
    placeholder: {
      type: String,
      default: '请输入定时策略'
    },
    vm: { // 用于操作实例，例如changeCron时调取后端cron校验
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      cronPopover: false,
      cron: '',
      value: ''
    }
  },
  watch: {
    cron: {
      handler(val) {
        this.$refs.cron.setValue(val)
        this.fieldValue = val
        this.$emit('change', val)
      }
    },
    fieldValue: {
      immediate: true,
      handler(val) {
        this.cron = val
      }
    }
  },
  methods: {
    changeCron(val) {
      this.cron = val
      this.hidePopover()
    },
    hidePopover() {
      this.cronPopover = false
    }
  },
  render() {
    const vnode = (
      <el-popover vModel={this.cronPopover} disabled={this.disabled || this.readonly}>
        <Cron {...{
          props: { i18n: 'cn' },
          on: {
            change: this.changeCron,
            close: this.hidePopover
          }
        }}></Cron>
        <el-input slot="reference"
          clearable={true}
          disabled={this.disabled}
          readonly={this.readonly}
          vModel={this.cron}
          placeholder={this.placeholder}></el-input>
      </el-popover>
    )
    return this.renderComponent(vnode)
  }
}

三、使用实例

<my-cron label="表达式"
              name="cronExpression"
              :vm="vm"
              :rules="{ required: true, message: '表达式' }">
              </my-cron>

• vm是当前vue实例

data() {
    return {
      vm: this
    }
  }

四、代码地址

自适应后的Vue-cron组件
封装在form中的cron组件逻辑调整