帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue3简洁的日期选择器组件

帝国模板之家 2020-12-29 网页特效 评论

描述:

适用于Vue3应用程序的简单实用的日期选择器组件。

使用方法

1.导入DatepickerLite组件。

import { defineComponent } from "vue";
import DatepickerLite from "vue3-datepicker-lite";

2.将datepicker-lite组件添加到模板。

<datepicker-lite />

3.注册组件并完成。

export default defineComponent({
  name: "App",
  components: {
    DatepickerLite,
  }
});

4.组件默认配置项。

idAttr: {
  type: String,
},
nameAttr: {
  type: String,
},
classAttr: {
  type: String,
},
valueAttr: {
  type: String,
  default: "",
},
yearMinus: {
  type: Number,
  default: 0,
},
from: {
  type: String,
  default: "",
},
to: {
  type: String,
  default: "",
},
disabledDate: {
  type: Array,
  default: () => {
    return [];
  },
},
locale: {
  type: Object,
  default: () => {
    return {
      format: "{1}/{2}/{3}",
      weekday: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      todayBtn: "Today",
      clearBtn: "Clear",
      closeBtn: "Close",
    };
  },
},

5.每次更改日期都会触发一个事件。

changeEvent: (value) => {
  console.log(value + " selected!");
}
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言