126 lines
3.3 KiB
Markdown
126 lines
3.3 KiB
Markdown
|
# 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>
|
|||
|
|
|