组件代码

使用：

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

复制

推荐内容