无框架 → vanilla
没有 Vue / React？用 @cron-zen/vanilla 的 mountCronZen，纯 DOM，TS/JS 均可。
cron-zen可嵌入的 Cron 引擎
无框架用 vanilla · React 用 react · Vue2/3 各用各的 · core 任意运行时 · JS/TS · ESM/CJS
Skip to content
先选对包
| 环境 | 可视化 | 只要引擎 |
|---|---|---|
| 无框架（原生 HTML 等） | @cron-zen/vanilla | @cron-zen/core |
| React 18/19 | @cron-zen/react | @cron-zen/core |
| Vue 2.7 | @cron-zen/vue2 | @cron-zen/core |
| Vue 3 | @cron-zen/vue3 | @cron-zen/core |
完整对照：选哪个包 · 在线 Demo（四包 + core） · API · core · 引入方式
30 秒 Demo
html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cron-zen/vanilla@0.2.4/dist/cron-zen-vanilla.css" />
<script src="https://cdn.jsdelivr.net/npm/@cron-zen/vanilla@0.2.4/dist/cron-zen-vanilla.browser.js"></script>
<script>
CronZen.mountCronZen('#cron', { value: '', onChange: console.log })
</script>tsx
import { useState } from 'react'
import { CronZen } from '@cron-zen/react'
import '@cron-zen/react/style.css'
export function App() {
const [cron, setCron] = useState('')
return <CronZen value={cron} onChange={setCron} />
}vue
<script setup>
import { ref } from 'vue'
import { CronZen } from '@cron-zen/vue3'
import '@cron-zen/vue3/style.css'
const cron = ref('')
</script>
<template>
<CronZen v-model="cron" />
</template>vue
<template>
<cron-zen v-model="cron" />
</template>
<script>
import { CronZen } from '@cron-zen/vue2'
import '@cron-zen/vue2/style.css'
export default {
components: { CronZen },
data: () => ({ cron: '' }),
}
</script>js
const { parseCron } = require('@cron-zen/core')
console.log(parseCron('0 0 9 * * ?'))