c_com_test v0.2.1

c_com_test

使用Vue编写的移动端日历组件

安装

npm install c_com_test

引入组件

import cal from 'c_com_test'
Vue.use(cal);

国际化

组件可根据localStorage中的locale字段自动切换语言。默认中文。
需要其它默认语言可在组件use前修改locale字段。

if(localStorage.getItem('locale')===""){
  localStorage.setItem("locale","en-US");
}
Vue.use(cal);

目前支持：

• 中文: zh-CN
• 英语: en-US

定制主题

此组件使用Less，只需覆盖内部样式变量即可完成自定义主题。

目前支持：

• @allBg:#F8F8F8; //整体背景色
• @todayColor:#409eff; //今天文字颜色
• @notThisMonthColor:#9B9B9B;//不是当前月的日期颜色
• @selectedColor: #FFFFFF; //选择的日期的文字颜色
• @selectedBg: #5DADFF; //选择日期的背景色
• @selectedAreaBg: #B9D9FA; //选择区间的背景色
• @highLightColor:pink; //高亮日期的颜色
• @disableClickColor:red; //不可点击的日期的颜色

定制方法

step 1

新建一个calReset.less，名字不重要。
在此文件中写入

@import '~c_com_test/src/components/calendar.less'; //此组件的安装目录
// Color variables 重写变量值
@allBg: blue!important;

step 2

全局覆盖main.js

import '../public/calReset.less';

在其它组件内部局部覆盖

<style scoped lang="less" src="./calendar.less"></style>

API

      <calendar
              ref="calCom"
              :weekSortMark="weekSortMark"
              :mode="mode"
              @firstSelected="firstSelectedFun"
              @secondSelected="secondSelectedFun"
      ></calendar>

Props

Events

Functions

可使用$refs调用的组件内部方法

example

      this.$refs.calCom.changeMonthView({
        mark:"2020-12-01"
      })

example

      this.$refs.calCom.chooseDay("2019-08-03","firstSelected");
      this.$refs.calCom.chooseDay("2019-08-09","secondSelected");