@tudan110/vue2-crontab
v1.0.0
Published
支持 Vue 2 的 Vue.js 单文件组件模板
Downloads
4
Readme
Vue2Crontab
Vue2Crontab
基于 element-ui，支持 Vue 2 的 crontab 组件。
截图
安装
确保先安装依赖：
# sh
npm install开发
启动开发服务：
npm run dev构建
构建库用于生产或发布：
npm run lib构建示例项目用于生产或发布：
npm run build检查并修复文件
npm run lint发布包到 npm
登录 npm 库
npm login发布
npm publish --access public如何使用 lib 文件？
注意
确保你的项目中已经安装并注册了 element-ui
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)npm 安装
npm i vue2-crontab全局导入
在 main.js 中导入并注册组件
import Vue from 'vue'
import Vue2Crontab from 'vue2-crontab'
Vue.use(Vue2Crontab)手动导入
import Vue2Crontab from 'vue2-crontab'
export default {
components: {
Vue2Crontab
}
}不使用构建工具或通过 CDN 引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 确保你的当前目录有该产物 -->
<script src="/lib/vue2-crontab.umd.js"></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>
</head>
<body>
<div id="app">
<vue2-crontab></vue2-crontab>
</div>
</body>
<script>
var app = new Vue({
el: '#app'
})
</script>
</html>示例
<template>
<div id="app">
<div class="container">
<h1>Vue2Crontab</h1>
<!-- 表单 -->
<el-form :model="form" :inline="true" label-width="110px">
<el-form-item label="执行时间" prop="cronExpression">
<el-input
v-model="form.cronExpression"
placeholder="请输入执行时间"
clearable
@focus="showCron=true"
/>
</el-form-item>
</el-form>
<!-- cron 组件 -->
<el-dialog title="执行时间" :visible.sync="showCron">
<vue2-crontab @hide="showCron=false" @fill="crontabFill" :expression="form.cronExpression"></vue2-crontab>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data() {
return {
showCron: false,
form: {
cronExpression: null,
}
}
},
methods: {
crontabFill(value) {
this.form.cronExpression = value
},
}
}
</script>
<style scoped>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-top: 60px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
</style>License
Made with ❤️
Published under MIT License.