这篇文章主要为大家详细介绍了vue实现价格日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现价格日历效果的具体代码，供大家参考，具体内容如下
1、效果图
2、下载全局安装：npm install ele-calendar
3、在components下新建文件calendar.vue，内容：
.el-picker-panel-calendar.el-date-picker-calendar.el-popper { box-shadow: none; } .el-date-table-calendar td > div > div { border: 1px solid #aaa; color: #fff; margin: 5px; & > div:first-child { background-color: #aaa; } & > div:nth-child(2) { padding: 5px; color: #000; .ivu-input-wrapper { width: 80%; } } &.active { border: 1px solid #2ab561; & > div:first-child { background-color: #2ab561; } & > div:nth-child(2) { padding: 5px; color: #000; .ivu-input-wrapper { width: 80%; } } } } // 这段如果放开的话当天之前的所有框置灰 // .el-date-table-calendar td.disabled > div > div { // border: 1px solid #aaa; // color: #fff; // margin: 5px; // & > div:first-child { // background-color: #aaa; // } // & > div:nth-child(2) { // padding: 5px; // color: #000; // .ivu-input-wrapper { // width: 80%; // } // } // } .el-date-table-calendar td.available:hover { color: #000; } .el-date-table-calendar td.available.today { color: #000; font-weight: normal; } .el-date-table-calendar tr td.current.available:not(.disabled) { background-color: #fff; }
4、页面引入注册
5、html
我是写在dialog中的
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是vue实现价格日历效果的详细内容，更多请关注本站其它相关文章！
