当前位置：首页 > VUE

vue实现iview日历显示

2026-01-22 23:41:03VUE

实现步骤

安装必要的依赖库iview和vue。通过npm或yarn进行安装：

npm install iview vue

在main.js中引入iview并注册组件：

import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

创建日历组件并配置基本属性。在Vue单文件组件中，使用<Calendar>标签并绑定相关数据：

vue实现iview日历显示

<template>
  <div>
    <Calendar v-model="value" @on-change="handleChange"></Calendar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    };
  },
  methods: {
    handleChange(date) {
      console.log(date);
    }
  }
};
</script>

自定义样式和功能

通过设置show-week属性显示周数：

<Calendar v-model="value" show-week></Calendar>

使用disabled-date属性禁用特定日期：

vue实现iview日历显示

<Calendar 
  v-model="value" 
  :disabled-date="disabledDate"
></Calendar>

<script>
export default {
  methods: {
    disabledDate(date) {
      return date && date.valueOf() < Date.now() - 86400000;
    }
  }
};
</script>

事件处理

监听日期选择事件并执行相应操作：

<Calendar 
  v-model="value" 
  @on-change="handleChange"
  @on-select="handleSelect"
></Calendar>

<script>
export default {
  methods: {
    handleChange(date) {
      console.log('日期变化:', date);
    },
    handleSelect(date) {
      console.log('选中日期:', date);
    }
  }
};
</script>

多语言支持

配置iView的locale设置以支持多语言：

import Vue from 'vue';
import iView from 'iview';
import locale from 'iview/dist/locale/en-US';

Vue.use(iView, {
  locale
});

完整示例

以下是一个完整的Vue单文件组件示例，展示iview日历的基本用法：

<template>
  <div>
    <Calendar 
      v-model="currentDate" 
      show-week
      :disabled-date="disabledBeforeToday"
      @on-change="logDate"
    ></Calendar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    };
  },
  methods: {
    disabledBeforeToday(date) {
      return date && date.valueOf() < Date.now() - 86400000;
    },
    logDate(date) {
      console.log('当前选择日期:', date);
    }
  }
};
</script>