# vue3+elementplus 的cron表达式生成插件
## 目的
- vue3环境中使用cron表达式插件
## 依赖版本
- Vue3.0.0+
- element-plus
## 使用
### 1 安装
`npm i vue3-cron-plus-picker`
或者
`pnpm add vue3-cron-plus-picker`

### 2 引入
1. 全局引入
    在src\main.js中引入下载的包，并引入其样式
    ```js
    import { createApp } from 'vue'
    import './style.css'
    import App from './App.vue'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import Vue3CronPlusPicker from 'vue3-cron-plus-picker' // 引入组件
    import 'vue3-cron-plus-picker/style.css' //引入组件相关样式

    createApp(App).use(ElementPlus).use(Vue3CronPlusPicker).mount('#app')

    ```
2. 局部引入
在使用的组件的vue文件中直接引入
```js
import 'vue3-cron-plus-picker/style.css'
import {Vue3CronPlusPicker} from 'vue3-cron-plus-picker'
```
### 3 使用
```js
  <template>
  <div>
    <el-input class="elInput" v-model="cronValue" placeholder="请输入正确的cron表达式">
      <template #append>
        <el-button class="inputButton" @click="openDialog">配置cron</el-button>
      </template>
    </el-input>
    <el-dialog v-model="showCron"  >
      <vue3-cron-plus-picker @hide="showCron=false" @fill="cronFill" :expression="expression"/>
    </el-dialog>
    
  </div>
</template>

<script setup>
import {ref} from 'vue'


const cronValue = ref('')
const showCron = ref()
const expression = ref('')
const openDialog = ()=>{
  showCron.value = true
  expression.value = cronValue.value
}
const cronFill = (contabValue)=>{
  cronValue.value = contabValue
}

</script>
<style>
</style>

```
### 4 参数
<table>
        <thead>
            <tr>
                <th>属性名</th>
                <th>说明</th>
                <th>类型</th>
                <th>Default</th>
                <th>可选值</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>expression</td>
                <td>cron表达式绑定的值</td>
                <td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code></span></td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <td>hideComponent</td>
                <td>可以隐藏的组件内容</td>
                <td><span class="inline-flex items-center"><code class="api-typing mr-1">Array</code></span></td>
                <td>-</td>
                <td>second/min/hour/day/mouth/week/year/result</td>
            </tr>
        </tbody>
    </table>

### 5 事件

<table>
    <thead>
        <tr>
            <th>名称</th>
            <th>说明</th>
            <th>类型</th>
            <th>方法对应的参数类型</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>fill</td>
            <td>填充选择的cron表达式</td>
            <td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code></span></td>
            <td>(contabValue: string) => void</td>
        </tr>
        <tr>
            <td>hide</td>
            <td>关闭组件</td>
            <td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code></span></td>
            <td>() => void</td>
        </tr>
    </tbody>
</table>