open-index/open-npm huggingface dataset:
npm package: @minigui/cron-sdk
Description: Cron-sdk expression plugin based on vue3 + elementplus 基于vue3 + elementplus的cron-sdk表达式插件
Author: longzhoufeng
Latest version: 0.1.6

# @minigui/cron-sdk


这是一个 cron-sdk 表达式生成插件,基于 vue3.0+ 和elements-plus实现
[demo](http://www.kits.com.cn/cron-sdk/)

## 项目地址

- github : https://github.com/longzhoufeng/cron-sdk

1、安装依赖: 
```
yarn install
```
2、启动
```
yarn serve
```
## 依赖

- Vue 3.0.0+
- elementplus

## 安装方式

```
npm install @minigui/cron-sdk
```

## 全局引入方式

```javascript
//前置配置
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import App from './App.vue'
//全局引入
import cronSdk from '@minigui/cron-sdk'
import '@minigui/cron-sdk/lib/cronSdk.css' // 引入样式
const app = createApp(App)
app
  .use(ElementPlus)
  .use(cronSdk)
  .mount('#app') //使用方式：<cronSdk></cronSdk>
```

## 局部引入方式

```javascript
//局部引入
import { cronSdk } from '@minigui/cron-sdk'
import '@minigui/cron-sdk/lib/cronSdk.css' // 引入样式
export default {
  template: '<cronSdk/>',
  components: { cronSdk },
}
```

## 示例

```vue
<template>
  <div class="cron">
    <h1>cron-sdk</h1>
    <el-popover
      v-model:visible="state.cronPopover"
      width="700px"
      trigger="manual"
    >
      <cronSdk
        @change="changeCron"
        @close="togglePopover(false)"
        max-height="400px"
        i18n="cn"
      ></cronSdk>
      <template #reference>
        <el-input
          @focus="togglePopover(true)"
          v-model="state.cron"
          placeholder="* * * * * ? *"
        ></el-input>
      </template>
    </el-popover>
  </div>
</template>

<script>
import { reactive, defineComponent, watch } from 'vue'
export default defineComponent({
  setup() {
    const state = reactive({
      cronPopover: false,
      cron: '',
    })
    const changeCron = (val) => {
      if (typeof val !== 'string') return false
      state.cron = val
    }
    const togglePopover = (bol) => {
      state.cronPopover = bol
    }

    return {
      state,
      changeCron,
      togglePopover,
    }
  },
})
</script>

<style lang="scss" scoped>
.cron {
  width: 400px;
  margin: 0 auto;
  margin-top: 100px;
  h1 {
    font-size: 50px;
    text-align: center;
  }
}
</style>
```

在示例中我使用了 es6(es2015)语法,你可能需要引入 babel-polyfill 才能正常运行,或者你也可以用 es5 的写法

## 参数

- i18n

  - 参数 `{String} language` 目前仅支持`en|cn`

  国际化支持

- max-height

  - 参数 `{String} height`

  设定 cronSdk 的 max-height, 默认没有该属性

## 事件

- change(cronText)

  - 参数：`{String} cronText` cron 表达式的值

  当 corn 表达式的值发生变化变化时触发

- close()

  - 参数：无

  当点击 corn 表达式选择框取消按钮时触发

## 联系方式

邮箱 : 389672697@qq.com

欢迎大家关注我做的网站: http://www.kits.com.cn/

如果对您有帮助, 欢迎 star

有任何问题请发 Issues 或者邮箱联系我-.- 谢谢!