vue-calendar — это легкий, высокопроизводительный компонент календаря, разработанный на основе vue 2.0.

внешний интерфейс JavaScript Vue.js

vue-calendar-component

  • Легкий, высокопроизводительный компонент календаря на основе vue 2.0.
  • Небольшие размеры, хорошая производительность, красивый стиль и широкие возможности масштабирования.
  • Нативная разработка js, сторонние библиотеки не представлены

Why

  • На Github есть много компонентов, которые щелкают всплывающий календарь, чтобы выбрать определенное время, но нет компонента, который просто отображает календарь и может щелкнуть, чтобы получить время.
  • Небольшое количество компонентов календаря занимает слишком много памяти, что явно нецелесообразно для такой простой функции, как календарь.

Demo

效果
Или, пожалуйста, используйте мобильный режим браузера для просмотра

Эффект

  • 🎉 Дайте звезду, если сочтете это полезным~~ 🎉

Install

npm i vue-calendar-component --save
cnpm i vue-calendar-component --save  //国内镜像

Usage

//vue文件中引入
import Calendar from 'vue-calendar-component';

 components: {
    Calendar
  }
    <Calendar
      v-on:choseDay="clickDay"
      v-on:changeMonth="changeDate"
      // v-on:isToday="clickToday"
      // :markDate=arr // arr=['2018/4/1','2018/4/3'] 标记4月1日和4月3日 简单标记
      //:markDateMore=arr // 多种不同的标记
      // 第一个标记和第二个标记不能同时使用
      // :agoDayHide='1514937600' //某个日期以前的不允许点击  时间戳10位
      // :futureDayHide='1525104000' //某个日期以后的不允许点击  时间戳10位
      // :sundayStart="true" //默认是周一开始 当是true的时候 是周日开始
    ></Calendar>

    clickDay(data) {
      console.log(data); //选中某天
    },
    changeDate(data) {
      console.log(data); //左右点击切换月份
    },
    clickToday(data) {
      console.log(data); //跳到了本月
    }

  // 多个标记示例
  arr=[{date:'2018/4/1',className:"mark1"}, {date:'2018/4/13',className:"mark2"}];
  //4月1 标记的className是mark1 根据class做出一些标记样式

гитхаб-адресПодробная документация

API

Атрибуты иллюстрировать По умолчанию Это обязательно
choseDay Метод, вызываемый в выбранный день, возвращает выбранную дату ГГ-ММ-ДД. без нет
changeMonth Метод, вызываемый для переключения месяца и возврата даты для переключения на месяц ГГ-ММ-ДД. без нет
isToday При переключении месяцев, если вы переключаетесь на текущий месяц, вызовите этот метод, чтобы вернуть текущий месяц и сегодняшний день. без нет
markDate Если вам нужно отметить дни месяца, передайте массив дат текущего месяца. Такие, как ["2018/2/2", "2018/2/6"] будут помечены (тот же знак) пустой массив нет
markDateMore Нужны другие теги, как указано выше. Используйте последнюю строку примера кода. пустой массив нет
agoDayHide Клики не допускаются до определенной даты. Длина метки времени составляет 10 цифр. 0 нет
futureDayHide Клики не допускаются после определенной даты. Длина метки времени составляет 10 цифр. очень большой нет
sundayStart По умолчанию запуск начинается с понедельника, если true, то начинается с воскресенья. false нет
textTop Текст в шапке календаря, по умолчанию ['день', 'один', 'два', 'три', 'четыре', 'пять', 'шесть'] , который можно изменить по своему усмотрению потребности. --- нет 
✅ 在 Calendar标签上添加 ref 属性, 暴露出三个方法可以  直接切换月份
例如: <Calendar ref="Calendar"></Calendar>

      ✅ this.$refs.Calendar.PreMonth();  //调用方法实现转到上个月
      ✅ this.$refs.Calendar.NextMonth(); //调用方法实现转到下个月
      ✅ this.$refs.Calendar.ChoseMonth('2018-12-12'); //调用方法实现转到某个月
      ✅ this.$refs.Calendar.ChoseMonth('2018-12-12',false); //跳转到18年12月12日 但是不选中当天
      //第二个参数 false表示不选中日期 。

Обнаружена ошибка ---

  • Обнаружены сообщения об ошибках упаковки и компиляции UglifyJ. Поскольку текущая версия UglifyJs не умеет компилировать es6

Решениеnpm install --save-dev babel-preset-env
Затем создайте файл .babelrc в корневом каталоге. на входе,
{ "presets": ["env"] }
Сохраните его и перестройте

официальная документация babel-preset-env

Other

  • В App.vue под src есть демо для справки.
  • Если есть другие проблемы или версия, функционально несовместимая электронная почтаzwhcoder@gmail.com
Категории