VUE3+TS和Element-plus实现的Cron表达式组件no-vue3-cron

最新推荐文章于 2025-03-24 14:59:20 发布

Demain-

最新推荐文章于 2025-03-24 14:59:20 发布

阅读量3.9k

点赞数

文章标签： vue.js typescript elementui

本文链接：https://blog.youkuaiyun.com/m0_58259728/article/details/130151683

版权

这是一个GitHub项目，提供了用于生成cron表达式的Vue3.0插件，集成于Element-Plus框架。用户可以通过安装、引入组件并配置来使用，展示了一个包含输入框和弹出设置的示例，允许手动触发和更改cron表达式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目地址

github : GitHub - wuchuanpeng/no-vue3-cron: 这是一个 cron 表达式生成插件,基于 vue3.0 与 element-plus 实现

安装方式：

pnpm install no-vue3-cron && npm install no-vue3-cron

引入方式：

//当前使用的页面引入
import { noVue3Cron } from 'no-vue3-cron'
import 'no-vue3-cron/lib/noVue3Cron.css' // 引入样式

示例：

<template>
  <div class="cron">
    <h1>no-vue3-cron</h1>
    <el-input v-model="state.cron" placeholder="cron表达式...">
      <template #append>
        <el-popover v-model:visible="state.cronPopover" width="700px" trigger="manual">
            <noVue3Cron
                :cron-value="state.cron"
                @change="changeCron"
                @close="state.cronPopover=false"
                max-height="400px"
                i18n="cn"
            ></noVue3Cron>
            <template #reference>
                <el-button @click="state.cronPopover = !state.cronPopover">设置</el-button>
            </template>
        </el-popover>
      </template>
    </el-input>
  </div>
</template>

<script>
import { reactive,defineComponent } from 'vue'
import { noVue3Cron } from 'no-vue3-cron'
import 'no-vue3-cron/lib/noVue3Cron.css'
export default defineComponent ({
  name: "App",
  setup(){
      const state = reactive({
          cronPopover: false,
          cron: ''
      })
      const changeCron = (val) => {
          if(typeof(val) !== 'string') return false
          state.cron = val
      }

      return {
          state,
          changeCron,
      }
  }
});
</script>

<style lang="scss" scoped>
.cron {
  width: 700px;
  margin: 0 auto;
  margin-top: 100px;
  h1 {
    font-size: 50px;
    text-align: center;
  }
}
</style>

效果：