mo-quarter-picker

一个基于 Vue2 和 ElementUI 的季度范围选择器

注意：
此文档是1.0版本的

2.0版本的文件请至github查看，有更新

Home: https://mouday.github.io/mo-quarter-picker/
NPM: https://www.npmjs.com/package/mo-quarter-picker
Github: https://github.com/mouday/mo-quarter-picker

element-ui没有季节范围选择器，而字节跳动开源的UI库arco.design，只支持Vue3，奈何老项目是Vue2的，只能自己动手了

用到的第三方库

Vue2.js https://cn.vuejs.org/v2/guide/
element-ui https://element.eleme.cn/#/zh-CN/component/installation
momentjs http://momentjs.cn/

在线 demo: https://mouday.github.io/mo-quarter-picker/test.html

方式一：CDN 引入

https://cdn.jsdelivr.net/npm/mo-quarter-picker/

<script src="https://mouday.github.io/mo-quarter-picker/dist/mo-quarter-picker.min.js"></script>

Hello world

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>mo-quarter-picker</title><!-- element-ui样式 --><linkhref="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/theme-chalk/index.min.css"rel="stylesheet"/></head><body><h1>季节范围选择器：mo-quarter-picker</h1><div id="app"><mo-quarter-picker:value.sync="value"@on-change="handleChange"></mo-quarter-picker></div><!-- 引入依赖 --><script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/index.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.2/moment.min.js"></script><script src="https://mouday.github.io/mo-quarter-picker/dist/mo-quarter-picker.min.js"></script><script>const app = new Vue({el: "#app",data() {return {value: null};},methods: {handleChange(value) {console.log(value);}}});</script></body>
</html>

方式二：NPM

npm i mo-quarter-picker -S

main.js

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

参数

参数	说明	类型	可选值	默认值
value	当前值	Array	null，例如：[‘2022-09-01’, ‘2022-06-01’]支持`sync`	null

事件

事件名称	说明	回调参数
on-change	用户修改选定的值时触发	data

on-change 回调参数 data：

[{end_date: "2022-09-01"label: "Q3"quarter: 3start_date: "2022-07-01"value: "2022-3"year: 2022},{end_date: "2022-06-01"label: "Q2"quarter: 2start_date: "2022-04-01"value: "2023-2"year: 2023}
]

参考文章
第十一篇: 使用ElementUi 卡片封装一个季度选择器公共组件，可直接使用
用element+vue制作季节选择器，可以选择开始时间和结束时间（组件）

mo-quarter-picker:基于 Vue2 和 ElementUI 的季度范围选择器相关推荐

基于vue2.0 + elementUI 后台管理平台
Vue-Admin-Demo 这是一个基于vue2.0 + elementUI 后台管理平台 Github: https://github.com/xiahuahua/vue-vux-demo(欢迎S ...
基于vue2和elementui的table实现表格内容一条一条向上滚动播放
实现elementui中的表格一秒自动滚动一行,滚动条到底部后重新回到第一行开始滚动. <template><el-table ref="wgzp" :data= ...
vue2.0 element-ui中的el-select选择器无法显示选中的内容
我使用的是element-ui V2.2.3.代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值. select.vue文件 < ...
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
简介这个权限管理就是为了方便,跟系统安全真的不沾边,只是根据后台返回的角色信息来生成他可以看见的菜单和按钮,显示菜单的方法是根据权限删除掉路由表里没有权限的路由,然后再动态添加,原本包含没有访问权限 ...
基于vue-cli、elementUI的Vue超简单入门小例子
基于vue-cli.elementUI的Vue超简单入门小例子这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...
Vue2.0+ElementUI+PageHelper实现的表格分页
Vue2.0+ElementUI+PageHelper实现的表格分页前言最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...
vue2和elementUI 打造落日余晖登录页和滑块校验
文章目录前言 1 项目搭建 2 依赖引入 3 项目调整 ①vue-router ② App.vue ③ main.js 4 写登录页 5 写滑块校验 6 源码下载 7 问题解决 ①项目一直报错 ② ...
基于Vue2.x的前端架构，我们是这么做的
通过Vue CLI可以方便的创建一个Vue项目,但是对于实际项目来说还是不够的,所以一般都会根据业务的情况来在其基础上添加一些共性能力,减少创建新项目时的一些重复操作,本着学习和分享的目的,本文会介绍 ...
基于vue2+element+springboot+mybatis+jpa+mysql的学籍管理系统
目录整套系统源码下载一.开发背景二.用到的技术三.开发使用的IDE 四.搭建开发环境五.启动项目六.学籍管理系统使用说明七.结语八.源码下载基于vue2+element+spring ...

mo-quarter-picker:基于 Vue2 和 ElementUI 的季度范围选择器

mo-quarter-picker

方式一：CDN 引入

方式二：NPM

参数

事件

mo-quarter-picker:基于 Vue2 和 ElementUI 的季度范围选择器相关推荐

最新文章

热门文章