Vue 3的启用触摸功能的日期和星期选择器– mpvue-calendar

Vue 3的启用触摸功能的日期和星期选择器– mpvue-calendar
插件名称 mpvue-calendar
发布时间 2021年2月27日
插件作者 Hzy0913

mpvue-calendar是Vue 3应用程序具有触摸功能的日期和星期选择器组件。

安装和下载:

# NPM
$ npm i mpvue-calendar

更多功能:

  • 支持单个日期,日期范围和星期范围。
  • 多种语言。
  • 允许设置自定义假期。
  • 允许设置开始/结束日期。
  • 允许禁用日期。
  • 自定义日期格式。

如何使用它:

1.导入并注册组件。

import { ref } from 'vue'
import Calendar from 'mpvue-calendar'
export default {
  components: {
    Calendar,
  }
}

2.将日历添加到应用程序。

<Calendar
  :remarks="remarks"
/>
export default {
  components: {
    Calendar,
  },
  setup() {
    const remarks = ref({'2021-2-26': 'Any Text'})
    return {
      remarks,
    }
  }
}

3.完整的props。

format: { // (year, month) => [String, String]
  type: Function,
},
holidays: {
  type: Object,
  default() {
    return {};
  }
},
lunar: {
  type: Object,
},
remarks: {
  type: Object,
  default() {
    return {};
  }
},
monthRange: {
  type: Array,
},
tileContent: {
  type: Object,
  default() {
    return {};
  }
},
completion: {
  type: Boolean,
  default: false
},
useSwipe: {
  type: Boolean,
  default: true
},
backgroundText: {
  type: Boolean,
},
monFirst: {
  type: Boolean,
  default: false
},
className: {
  type: String,
},
mode: { // 'month', 'week','monthRange'
  type: String,
  default: 'month'
},
weeks: {
  type: Array,
  default: undefined
},
begin: {
  type: String,
},
end: {
  type: String,
},
selectMode: { // 'select', 'multi','range', 'multiRange'
  type: String,
  default: 'select'
},
language: {
  type: String,
},
selectDate: {
  type: [String, Array, Object],
},
disabled: {
  type: Object,
},