vue3+elementplus 的cron表达式生成插件

目的

vue3环境中使用cron表达式插件

依赖版本

Vue3.0.0+
element-plus

使用

1 安装

npm i vue3-cron-plus-picker 或者 pnpm add vue3-cron-plus-picker

2 引入

全局引入在src\main.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')

局部引入在使用的组件的vue文件中直接引入

import 'vue3-cron-plus-picker/style.css'
import {Vue3CronPlusPicker} from 'vue3-cron-plus-picker'

3 使用

  <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 参数

属性名	说明	类型	Default	可选值
expression	cron表达式绑定的值	`string`	-	-
hideComponent	可以隐藏的组件内容	`Array`	-	second/min/hour/day/mouth/week/year/result

5 事件

名称	说明	类型	方法对应的参数类型
fill	填充选择的cron表达式	`Function`	(contabValue: string) => void
hide	关闭组件	`Function`	() => void

README.md Unescape Escape

vue3+elementplus 的cron表达式生成插件

目的

依赖版本

使用

1 安装

2 引入

3 使用

4 参数

5 事件

README.md