vue3+elementPlus cron组件

组件代码

使用:

复制代码
<template>
  <div class="vuecron ">
    
    <el-input v-model="state.cron" placeholder="cron表达式..." @click="togglePopover(true)">
      <template #append>
        <el-popover v-model:visible="state.cronPopover" width="700px" trigger="manual" placement="top">
            <Vue3Cron
                :cron-value="state.cron"
                @change="changeCron"
                @close="togglePopover(false)"
                max-height="200px"
                i18n="cn"
            ></Vue3Cron>
        </el-popover>
      </template>
      <template #reference>
                <el-button @click="togglePopover(true)">设置</el-button>
            </template>
    </el-input>
    
  </div>
</template>

<script setup>
import Vue3Cron from '@/components/vue3-cron/index.vue'
import { reactive } from 'vue'
  const state = reactive({
      cronPopover: false,
      cron: ''
    })
    const changeCron = (val) => {
      if(typeof(val) !== 'string') return false
      state.cron = val
    }
    const togglePopover = (bol) => {
      state.cronPopover = bol
    }
</script>

<style lang="scss" scoped>
.vuecron {
  width: 400px;
  margin: 0 auto;
  margin-top: 100px;
 
}
</style>
相关推荐
Jerry23 分钟前
Compose 基础知识测试
前端
changuncle32 分钟前
Angular初学者入门第三课——工厂函数(精品)
前端·javascript·angular.js
ScottePerk1 小时前
前端安全之XSS和CSRF
前端·安全·xss
PineappleCoder1 小时前
Canvas 复杂交互步骤:从事件监听 to 重新绘制全流程
前端
日月晨曦1 小时前
JavaScript事件循环:一次浏览器线程的"约会"指南
javascript
s3xysteak1 小时前
我要成为vue高手01:上下文
前端·javascript·vue.js
复苏季风1 小时前
前端居中布局:从 "卡壳" 到 "精通" 的全方位指南
前端·css
qb1 小时前
vue3.5.18源码:computed 在发布订阅者模式中的双重角色
前端·vue.js·架构
南篱1 小时前
JavaScript原型链没那么难:一文彻底搞懂
javascript·面试
程序员张31 小时前
Vue3+ElementPlus倒计时示例
javascript·vue.js·前端框架