cron expression input下载 - cron expression input源代码下载

cron expression input

其他资源

v1.2.7

下载

cron表达输入

描述

cron表达式UI ：输入组件可以轻松，直观地生成cron表达式，如https://crontab.guru/

例子

指示

NPM

从https://www.npmjs.com/cron-expression Input安装软件包

 npm install [email protected]

在您的代码中

 import "cron-expression-input/lib/cron-expression-input.min.css" ; /* CSS */
require ( "cron-expression-input" ) ; /* JAVASCRIPT */

CDN

将CDN添加到您的项目中

 < link rel =" stylesheet " href =" https://unpkg.com/[email protected]/lib/cron-expression-input.min.css " >
< script src =" https://unpkg.com/[email protected]/lib/cron-expression-input.min.js " > </ script >

用法

在HTML中使用

 <!DOCTYPE html >
< html >
< head >
    < meta charset =" UTF-8 " >
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " >
    < title > Sample Page </ title >
    < link rel =" stylesheet " href =" https://unpkg.com/[email protected]/lib/cron-expression-input.min.css " >
    < script src =" https://unpkg.com/[email protected]/lib/cron-expression-input.min.js " > </ script >
</ head >
< body >
    <!-- Component -->
    < cron-expression-input color =" d58512 " > </ cron-expression-input >
    <!-- Component -->
    < script src =" cron-expression-input.js " > </ script >
</ body >
</ html >

用于React

 import "cron-expression-input/lib/cron-expression-input.min.css" ; /* CSS */
require ( "cron-expression-input" ) ; /* JAVASCRIPT */

class App extends React . Component {
  constructor ( props ) {
    super ( props ) ;
    this . state = { cron : "* * * * *" } ;
  }

  render ( ) {
    return (
      < div >
        < cron-expression-input
          value = { this . state . cron }
          onInput = { ( e ) => this . setState ( { cron : e . nativeEvent . detail . value } ) }
          color = "d58512" />
      </ div >
    ) ;
  }
}

export default App ;

在Vue中使用

 < template >
  < div id = "app" >
    < cron-expression-input
      : value = " cron "
      v-on : input = "cron = $event.detail.value"
      color = "d58512" />
  </ div >
</ template >

< script >
import "cron-expression-input/lib/cron-expression-input.min.css" ; /* CSS */
require ( "cron-expression-input" ) ; /* JAVASCRIPT */

export default {
  name : 'App' ,
  data ( ) {
    return {
      cron : "* * * * *"
    }
  }
}
< / script>

组件属性

您可以将各种属性传递给组件以修改其行为，示例具有颜色属性：

姓名	类型	默认	描述
`width`	`{String}`	`100%`	组件输入的宽度
`height`	`{String}`	`34px`	组件输入的高度
`color`	`{String}`	`#d58512`	组件元素将采用的主要颜色（仅在十六进制中）