基于VUE3和Element-plus实现的Cron表达式组件no-vue3-cron(支持回显)

no-vue3-cron

这是一个 cron 表达式生成插件,基于 vue3.0 与 element-plus 实现
demo

项目地址

  • github : https://github.com/wuchuanpeng/no-vue3-cron

  • github 项目启动: 1.npm install 2.npm run serve

安装方式

npm install no-vue3-cron

全局引入方式

//前置配置
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
//全局引入
import noVue3Cron from 'no-vue3-cron'
import 'no-vue3-cron/lib/noVue3Cron.css' // 引入样式
const app = createApp(App)
app
  .use(ElementPlus)
  .use(noVue3Cron)
  .mount('#app') //使用方式:

局部引入方式

//局部引入
import { noVue3Cron } from 'no-vue3-cron'
import 'no-vue3-cron/lib/noVue3Cron.css' // 引入样式
export default {
  template: '',
  components: { noVue3Cron },
}

示例






在示例中我使用了 es6(es2015)语法,你可能需要引入 babel-polyfill 才能正常运行,或者你也可以用 es5 的写法

参数

  • i18n

    • 参数 {String} language 目前仅支持en|cn

    国际化支持

  • max-height

    • 参数 {String} height

    设定 no-vue3-cron 的 max-height, 默认没有该属性

  • cron-value

    • 参数 {String} cron-value

    设定 no-vue3-cron 的 默认显示值, 用于回显

事件

  • change(cronText)

    • 参数:{String} cronText cron 表达式的值

    当 corn 表达式的值发生变化变化时触发

  • close()

    • 参数:无

    当点击 corn 表达式选择框取消按钮时触发

联系方式

邮箱 : [email protected]

欢迎大家关注我做的网站: http://www.nonone.cc/

如果对您有帮助, 欢迎 star

有任何问题请发 Issues 或者邮箱联系我-.- 谢谢!

你可能感兴趣的:(前端,vue.js,javascript,前端)