cron 表达式前端组件_Vuetify组件可更轻松地编辑CRON表达式

cron 表达式前端组件

维克朗编辑 (vue-cron-editor)

VueCronEditor is a component library built with Vue & Vuetify allowing for easier editing of CRON expressions.

VueCronEditor是使用Vue＆Vuetify构建的组件库，可以更轻松地编辑CRON表达式。

View Demo 查看演示 View Github 查看Github

要求 (Requirements)

• Vue ^2.0

  Vue ^ 2.0

安装 (Installation)

There are currently two versions available:

当前有两个版本：

• vue-cron-editor-buefy (RECOMMENDED)

  vue-cron-editor-buefy (推荐)

npm install vue-cron-editor-buefy --save

• vue-cron-editor-vuetify

  Vue Cron编辑器Vuetify

  • NOTE: Requires your application to use Vuetify ^2.0 and have your components wrapped inside 注意 ：要求您的应用程序使用Vuetify ^ 2.0并将组件包装在<v-app> element.<v-app>元素内。

npm install vue-cron-editor-vuetify --save

用法 (Usage)

<template>
  <v-app>
    <v-content>
      <VueCronEditorBuefy v-model="cronExpression"/>
      {{cronExpression}}
    </v-content>
  </v-app>
</template>

<script>
import VueCronEditorBuefy from 'vue-cron-editor-buefy';

export default {
  name: 'App',
  components: {
    VueCronEditorBuefy
  },
  data: () => ({
      cronExpression: "*/1 * * * *"
  }),
};
</script>

The editor tab will be set to one which is able to represent an initial expression given to a value prop (minutes tab in the example above). If none of the tabs can represent the given expression then advanced tab is selected.

编辑器选项卡将设置为一个能够表示赋予value prop的初始表达式的选项卡(在上例中为分钟选项卡)。 如果所有选项卡都不能代表给定的表达式，则选择高级选项卡。

i18n (i18n)

The language of the component can be selected with the locale prop.

组件的语言可以使用locale prop选择。

<VueCronEditorBuefy
    v-model="expression"
    locale="pl"
></VueCronEditorBuefy>

Currently supported languages:

当前支持的语言：

• en

  恩

• pl

  PL

Custom locales can be provided via a customLocales prop:

可以通过customLocales道具提供自定义语言环境：

<VueCronEditorBuefy
    v-model="expression"
    locale="test"
    :custom-locales="{
    test: {
        every: "Every",
        minutes: "minute(s)",
        hoursOnMinute: "hour(s) on minute",
        daysAt: "day(s) at",
        at: "at",
        onThe: "On the",
        dayOfEvery: "day of every",
        monthsAt: "month(s) at",
        everyDay: "Every",
        mon: "Mon",
        tue: "Tue",
        wed: "Wed",
        thu: "Thu",
        fri: "Fri",
        sat: "Sat",
        sun: "Sun",
        hasToBeBetween: "Has to be between",
        and: "and"
    }
}"
></VueCronEditorBuefy>

贡献 (Contributing)

To build the demo/samples app run in root directory:

要构建demo / samples应用程序，请在根目录中运行：

npm install
npm run serve

For testing the built packages:

要测试构建的软件包：

npm install
cd src/vuetify
npm run pack
cd ../buefy
npm run pack

cd ../../test_app
npm install
npm run serve

翻译自: https://vuejsexamples.com/vuetify-component-for-easier-editing-of-cron-expressions/

cron 表达式前端组件