Vue 3 的 VCalendar 插件

日历和取日期插件 Vue.js (英语)。 。 。 .

Vue.js (英语) 3.2+, (中文(简体) ), 波普尔.js (英语) 要求为2.0+.

安装插件

国家预防机制

npm install v-calendar@next @popperjs/core

雅伦

yarn add v-calendar@next @popperjs/core

使用插件

: 警告: 截止 v3.0.0-alpha.7,所有安装方法都需要手动导入组件样式。 这是由于在libary模式下Vite构建限制.

import 'v-calendar/style.css';

方法1:全球使用

import VCalendar from 'v-calendar';
import 'v-calendar/style.css';

// Use plugin with optional defaults
app.use(VCalendar, {})

<!-- MyComponent.vue -->
<template>
  <VCalendar />
  <VDatePicker v-model="date" />
</template>

方法2:全球使用部件

// main.js
import { setupCalendar, Calendar, DatePicker } from 'v-calendar';
import 'v-calendar/style.css';

// Use plugin defaults (optional)
app.use(setupCalendar, {})

// Use the components
app.component('VCalendar', Calendar)
app.component('VDatePicker', DatePicker)

<!-- MyComponent.vue -->
<template>
  <VCalendar />
  <VDatePicker v-model="date" />
</template>

方法3:按需要使用组件

// main.js
import { setupCalendar } from 'v-calendar';

// Use calendar defaults (optional)
app.use(setupCalendar, {})

<!-- MyComponent.vue -->
<template>
  <Calendar />
  <DatePicker v-model="date">
</template>

<script>
import { Calendar, DatePicker } from 'v-calendar';
import 'v-calendar/style.css';

export default {
  components: {
    Calendar,
    DatePicker,
  },
  data() {
    return {
      date: new Date(),
    };
  },
}
</script>

源设置

兹将该项目复制和建造的上述步骤如下:

清除还原

git clone https://github.com/nathanreyes/v-calendar

# Move to directory
cd v-calendar

安装依赖关系

yarn

构建库

# Types, ES, ESM, CommonJS, IIFE
yarn build

打开并修正文件

yarn lint

测试库

# Types, ES, ESM, CommonJS, IIFE
yarn test