1.0.0 • Published 1 year ago
antd-vue-cron v1.0.0
antd-vue-cron
依赖
- Vue 2.0.0+
- ant-design-vue 1.7.8+
安装方式
npm install vue-cron
引入方式
//前置配置
import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
//全局引入
import AntdVueCron from 'vue-cron'
Vue.use(AntdVueCron);//使用方式:<vueCron></vueCron>
//局部引入
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<a-input
v-model="expression"
disabled
style="width:350px"
>
<span
slot="addonAfter"
type="primary"
@click="showModal"
style="cursor: pointer;"
>
显示corn
</span>
</a-input>
<a-modal
title="corn 表达式"
v-model="visible"
:footer="null"
width="800px"
destroyOnClose
>
<antd-vue-cron
i18n="cn"
:expression="expression"
@change="handlerChange"
@close="visible = false"
/>
</a-modal>
</div>
</template>
<script>
import Vue from 'vue'
import { Input, Modal } from 'ant-design-vue'
import { cron } from '@/components/index'
Vue.use(Modal)
export default {
name: 'App',
components: {
'antd-vue-cron': cron,
'a-input': Input,
// 'a-icon': Icon,
// 'a-button': Button
},
data () {
return {
visible: false,
expression: '0 0 0 1 1 ? *'
}
},
methods: {
showModal () {
this.visible = true
},
handlerChange (expression) {
console.log('handlerChange', expression)
this.expression = expression
this.visible = false
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
参数
i18n
参数
{String} language
目前仅支持en|cn
国际化支持
事件
- change(cronText)
- 参数:`{String} cronText` cron表达式的值
当corn表达式的值发生变化变化时触发
- close()
- 参数:无
当点击corn表达式选择框取消按钮时触发
有任何问题请发Issues,欢迎pull request 谢谢!
此库为学习使用,参考了同类的库 vue-cron
1.0.0
1 year ago