基于vue2 cron 表达式组件的使用

置顶你的眼睛會笑

已于 2023-12-13 13:41:03 修改

阅读量1k

点赞数 8

分类专栏： vue2 文章标签： vue.js

于 2023-12-08 10:13:05 首次发布

本文链接：https://blog.csdn.net/weixin_45563734/article/details/134870929

版权

vue2 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

基于vue2 cron 表达式组件的使用

1. 先上图
在这里插入图片描述

2. 代码目录
在这里插入图片描述

3. 直接上代码（组件代码太多，直接上压缩包，解压后直接用，压缩包再博客顶部）
4. 使用注：示例代码中使用了element-ui


// HomeView.vue

<template>
  <div class="home">
    <el-input placeholder="请输入内容" v-model="expression" style="width:340px;">
      <template slot="append">
        <div @click="open" style="cursor: pointer;">打开</div>
      </template>
    </el-input>
    <!-- 选择cron 弹窗 -->
    <el-dialog
      title="选择执行时间"
      :visible.sync="openCron"
      append-to-body
      destroy-on-close
      class="scrollbar scrollbar_box_warp"
    >
    <!-- cron 组件 -->
      <crontab
        @hide="openCron = false"
        @fill="crontabFill"
        :expression="expression"
      />
    </el-dialog>
  </div>
</template>

<script>
import Crontab from "@/components/Crontab";
export default {
  name: "HomeView",
  components: {
    Crontab,
  },
  data() {
    return {
      openCron: false,
      expression: "",
    };
  },
  methods: {
    /** 确定后回传值 */
    crontabFill(value) {
      console.log(value);
      this.expression = value
    },
    // 打开弹窗
    open() {
      this.openCron = true;
    },
  },
};
</script>

HomeView.vue 示例代码中使用了 element-ui 库
安装element-ui npm i element-ui -S
在 main.js 中写入以下内容： (当然你也可以不使用element-ui )

	import Vue from 'vue';
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	import App from './App.vue';
	
	Vue.use(ElementUI);
	
	new Vue({
	  el: '#app',
	  render: h => h(App)
	});