更新记录

1.0.4（2024-09-25） 下载此版本

支持vue3

1.0.3（2024-09-25） 下载此版本

支持vue3

1.0.2（2024-03-04） 下载此版本

bug修复

平台兼容性

插件介绍

1.支持自定义选择项

2.支持v-model双向绑定

3.支持vue2 vue3

4.支持配置每行个数 按钮间距

5.支持配置按钮样式

6.支持配置周起始日(0,1,2,3,4,5,6)

7.支持配置时间点显示格式以及v-model绑定格式，更多配置查看文档

扫码查看组件示例

文档地址

文档地址

推荐下载使用 ex-ui

推荐下载使用 ex-ui

项目依耐dayjs 请先安装dayjs

npm i dayjs

属性

list 配置项(按钮组)

当 num=0 （type=day 表示当天， type=week 表示本周， type=month 表示本月）

当 num=-1 （type=day 表示昨天， type=week 表示上周， type=month 表示上月）

当 num=1 （type=day 表示明天， type=week 表示下周， type=month 表示下月）

const dataList = [
  {
    type: "day",
    nums: -2,
    label: "前天",
  },
  {
    type: "day",
    nums: -1,
    label: "昨天",
  },
  {
    type: "day",
    nums: 0,
    label: "今天",
  },
  {
    type: "week",
    nums: 0,
    label: "本周",
  },
  {
    type: "week",
    nums: -1,
    label: "上周",
  },
  {
    type: "week",
    nums: 1,
    label: "下周",
  },
  {
    type: "month",
    nums: 0,
    label: "本月",
  },
  {
    type: "month",
    nums: 1,
    label: "下月",
  },
  {
    type: "month",
    nums: -1,
    label: "上月",
  },
  {
    type: "quarter",
    nums: 0,
    label: "本季度",
  },
  {
    type: "quarter",
    nums: 1,
    label: "下季度",
  },
  {
    type: "quarter",
    nums: -1,
    label: "上季度",
  },
  {
    type: "year",
    nums: 0,
    label: "本年度",
  },
  {
    type: "year",
    nums: 1,
    label: "下年度",
  },
  {
    type: "year",
    nums: -1,
    label: "上年度",
  },
  {
    type: "nextDay",
    nums: -2,
    label: "近3天",
  },
  {
    type: "nextDay",
    nums: -6,
    label: "近7天",
  },
  {
    type: "nextDay",
    nums: -14,
    label: "近15天",
  },
  {
    type: "nextDay",
    nums: -29,
    label: "近30天",
  },
  {
    type: "nextDay",
    nums: -59,
    label: "近60天",
  },
  {
    type: "nextDay",
    nums: -89,
    label: "近90天",
  },
  {
    type: "nextDay",
    nums: -20,
    label: "近3周",
  },
  {
    type: "nextDay",
    nums: -34,
    label: "近5周",
  },
  {
    type: "nextDay",
    nums: -48,
    label: "近7周",
  },
];

事件