vue3+elementPlus cron组件

 组件代码

使用：

<template>
  <div class="vuecron ">
    
    <el-input v-model="state.cron" placeholder="cron表达式..." @click="togglePopover(true)">
      <template #append>
        <el-popover v-model:visible="state.cronPopover" width="700px" trigger="manual" placement="top">
            <Vue3Cron
                :cron-value="state.cron"
                @change="changeCron"
                @close="togglePopover(false)"
                max-height="200px"
                i18n="cn"
            ></Vue3Cron>
        </el-popover>
      </template>
      <template #reference>
                <el-button @click="togglePopover(true)">设置</el-button>
            </template>
    </el-input>
    
  </div>
</template>

<script setup>
import Vue3Cron from '@/components/vue3-cron/index.vue'
import { reactive } from 'vue'
  const state = reactive({
      cronPopover: false,
      cron: ''
    })
    const changeCron = (val) => {
      if(typeof(val) !== 'string') return false
      state.cron = val
    }
    const togglePopover = (bol) => {
      state.cronPopover = bol
    }
</script>

<style lang="scss" scoped>
.vuecron {
  width: 400px;
  margin: 0 auto;
  margin-top: 100px;
 
}
</style>

原文地址：https://blog.csdn.net/lx6091543wwwcctv/article/details/137554859

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！