说明

个人代码总结，非知识分享

date-picker

date.ts

import dayjs from 'dayjs'
import { ref } from 'vue';

// pnpm i -S dayjs

export const today = dayjs().format('YYYY-MM-DD') 

const size = ref<'' | 'large' | 'small'>('')

export const shortcuts = [
  {
    text: '今天',
    value: new Date()
  },
  {
    text: '明天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() + 3600 * 1000 * 24)
      return date
    }
  },
  {
    text: '下个星期',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
      return date
    }
  }
]

export const disabledDateBefore = (time: Date) => {
  return time.getTime() < Date.now() - 3600 * 1000 * 24
}

export const disabledDateAfter = (time: Date) => {
  return time.getTime() < Date.now()
}

info.vue

import { disabledDateBefore, shortcuts, today } from '@/utils/date';

info.vue

<el-date-picker v-model="form.name" type="date" placeholder="选择日期" :shortcuts="shortcuts" format="YYYY/MM/DD" :disabled-date="disabledDateBefore"
            value-format="YYYY-MM-DD" />

ElMessageBox

main.ts

import 'element-plus/theme-chalk/src/message.scss'
import 'element-plus/theme-chalk/src/message-box.scss'

message.ts

import { ElMessage, ElMessageBox } from 'element-plus'

export const openMessage = () => {
  ElMessageBox.confirm('确定要清空复习计划?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '关闭',
    type: 'warning'
  })
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}