🤦‍♂️vue封装cron 表达式输入框

1.实列图片

2.代码部分

<!--
 * @description: InputCron cron 表达式输入框
 * @author: wanghao
 * @Date: 2022-03-22 15:49:07
 * @Modified By: wanghao
 * @version: 1.0.0
-->
<template>
  <div class="Ami-input-cron">
    <div class="ami-input-cron">
      <ami-input class="ami-input-cron" style="width: auto" v-model="editCronValue" :placeholder="placeholder" :disabled="disabled" :clearable="clearable" :size="size">
        <template slot="append" :disabled="disabled">
          <ami-button slot="append" :icon="icon" @click="showConfigDlg">
            <!-- 文字 -->
            <span>{{ configure }}</span>
          </ami-button>
        </template>
      </ami-input>
      <!-- 弹窗 -->
      <ami-dialog :title="title" :visible.sync="dialogVisible" width="1280px" :before-close="handleClose">
        <!-- 内容区域-->
        <easy-cron ref="child" v-model="editCronValue" :exeStartTime="exeStartTime" :hideYear="hideYear" :remote="remote" :hideSecond="hideSecond"></easy-cron>
        <span slot="footer" class="dialog-footer">
        <ami-button @click="dialogVisible = false">取 消</ami-button>
        <ami-button type="primary" @click="submit">确 定</ami-button>
      </span>
      </ami-dialog>
      <!-- 数据预览 -->
        <ami-input
            v-if="preview===true"
            class="ami-input-cron-text"
            type="textarea"
            :value="previewlist"
            :rows="6"
            readonly>
        </ami-input>
    </div>
  </div>
</template>
<script>
  import EasyCron from './easy-cron';
  export default {
    name: 'ami-input-cron',
    model: {
      prop: 'cronValue',
      event: 'change'
    },
    /**
     * 绑定事件
     * @access：change
     */
    props: {
      // v-model监听值
      cronValue: {
        type: String,
        default: ''
      },
      // 输入框展位文本
      placeholder: {
        type: String,
        default: '请输入cron表达式'
      },
      // 执行时间
      exeStartTime: {
        type: [Number, String, Object],
        default: 0
      },
      // 预览
      preview: {
        type: Boolean,
        default: false
      },
      // 隐藏选择--秒，年
      hideSecond: {
        type: Boolean,
        default: false
      },
      // 隐藏选择--年
      hideYear: {
        type: Boolean,
        default: false
      },
      // 回调函数，在创建和值改变时回调
      remote: {
        type: Function,
        default: null
      },
      // 输入框是否清空
      clearable: {
        type: Boolean,
        default: false
      },
      // 禁用
      disabled: {
        type: Boolean,
        default: false
      },
      // (输入框)尺寸大小 large、small 和 mini 三种尺寸
      size: {
        type: String,
        default: ''
      },
      // 输入框按钮文字
      configure: {
        type: String,
        default: '配置'
      },
      // 输入框图标
      icon: {
        type: String,
        default: 'ami-icon-date'
      },
      // 弹窗标题
      title: {
        type: String,
        default: '配置Cron表达式'
      }
    },
    data() {
      return {
        editCronValue: this.cronValue,
        dialogVisible: false, // 弹窗
        // 预览子组件数据
        previewlist: ''
      };
    },
    watch: {
      /**
       * 监听v-model 绑定的值
       */
      cronValue(newVal, oldVal) {
        if (newVal === this.editCronValue) {
          return;
        }
        this.editCronValue = newVal;
      },
      /**
       * 编辑 cronValue
       */
      editCronValue(newVal, oldVal) {
        this.$emit('change', newVal);
      }
    },
    methods: {
      /**
       * @default:通知父组件促发change事件
       * 提交数据
       */
      submit(newVal) {
        this.$emit('click', newVal);
        // 调用子组件数据
        this.previewlist = this.$refs.child.preTimeList;
        // 触发父组件click事件，关闭弹窗
        this.dialogVisible = false;
      },
      /**
       * 打开弹出层（弹窗）
       */
      showConfigDlg() {
        if (!this.disabled) {
          this.dialogVisible = true;
        }
      },
      /**
       * 关闭弹出层（弹窗）
       */
      handleClose() {
        this.dialogVisible = false;
      }
    },
    components: {
      EasyCron
    }
  };
</script>

代码附件：附件地址

3.说明文档

InputCron cron 表达式输入框

基础用法

:::demo v-model的值为当前被选中的ami-input-cron的 value 属性值

<ami-input-cron v-model="formData.cronValue" clearable></ami-input-cron>
<script>
  export default {
    data() {
      return {
        exeStartTime:String(new Date()),
        formData:{
          cronValue:"",
        }
      };
    },
  }
</script>

:::

配置完展示预览效果的

:::demo preview 配置完是否展示预览数据

<ami-input-cron v-model="formData.cronValue" preview></ami-input-cron>
<script>
  export default {
    data() {
      return {
        exeStartTime:String(new Date()),
        formData:{
          cronValue:'',
        }
      };
    },
  }
</script>

:::

创建和值改变时回调

:::demo remote 回调函数，在创建和值改变时回调

<ami-input-cron v-model="formData.cronValue" :remote="remote"></ami-input-cron>
<script>
  export default {
    data() {
      return {
        exeStartTime:'2015-09-02 12:23:10',
        formData:{
          cronValue:"11 9 2 * 4 ? *",
        }
      };
    },
    methods:{
      remote (val, time, cb) {
      const msg = `remote called: ${val} ${time}`
      console.info(msg)
      setTimeout(() => {
        // get result for e via http...
        const result = msg
        // ...
        // callback
        cb(result)
      }, 200)
    }
   }
  }
</script>

:::

基础用法-促发事件

:::demo @click 促发事件，弹窗内确定按钮触发事件

<ami-input-cron v-model="formData.cronValue" @click="sublist" clearable></ami-input-cron>
<script>
  export default {
    data() {
      return {
        exeStartTime:String(new Date()),
        formData:{
          cronValue:"",
        }
      };
    },
    methods:{
      /*
      * 点击事件
      */
      sublist(){
        alert('触发点击');
      }
    }
  }
</script>

:::

Attributes

Input Events