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中引入下载的包，并引入其样式

   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文件中直接引入

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

5 事件