1.0.6 • Published 6 years ago
april-vue-date v1.0.6
april-vue-date
一个PC端的vue日期选择插件
Build Setup
##最近做项目用到个时间插件,用第三方的插件总感觉不好看 所以自己花了半天的时间写了一个日历插件 可以设置供用户选择的最大和最小时间间隔
第一步 项目引入插件
npm install april-vue-date -S
或者 cnpm install april-vue-date -S (推荐)
或者 yarn add april-vue-date
第二步 main.js 里全局引入日历插件
import aprilVueDate from 'april-vue-date'
Vue.use(aprilVueDate)
第三步 需要用的地方添加使用
<april-vue-date></april-vue-date>
配置项
defaultDate -------- 默认时间 (可不写,默认为当前时间)
max-date -------- 选择范围(最大可选择日期) (可不写)
min-date -------- 选择范围(最小可选择日期) (可不写)
left -------- 时间选择框距离左边的距离 (可不写)
width -------- 时间选择框的长度 (可不写,默认为300)
height -------- 时间选择框的高度 (可不写,默认为30)
color -------- 时间选择框字体颜色 (可不写,默认为 #606266)
background -------- 弹出时间选择模块的背景色 (可不写,默认为 #fff)
locale -------- 语言包 值 zh:中文 en:英文 (可不写,默认为 zh 即中文)
@change-date -------- 用户确认选定的值时触发的函数
示例如下
<april-vue-date
default-date='2017-08-07' @change-date='changeDate'
max-date='2018-09-10' min-date='2018-07-10'
left='20' width='200' height='30' >
</april-vue-date>