vue2-calendar 笔记

需求 价格日历

官网:http://blog.w3cub.com/vue2-calendar/

1.安装

npm install vue2-slot-calendar

2、安装sass-loader node-sass

     cnpm install sass-loader --save

    cnpm install node-sass --save

3、在组件内引入

4、要求安装bootstarp.sass

cnpm install --save bootstrap-sass 

5、bootstrap依赖jquery

cnpm install jquery

6、在webpack.dev.config.js中配置 

vue2-calendar 笔记_第1张图片

7.更改完配置文件重启服务 

在index.html中引入标签(解决日历头部左右按钮显示问题)

8、其余按照官网就好了

vue2-calendar 笔记_第2张图片

vue2-calendar 笔记_第3张图片

vue2-calendar 笔记_第4张图片

vue2-calendar 笔记_第5张图片

vue2-calendar 笔记_第6张图片

vue2-calendar 笔记_第7张图片

vue2-calendar 笔记_第8张图片

vue2-calendar 笔记_第9张图片

具体细节看官方下载文件 

按需求修改价格变成动态的

在父组件中

vue2-calendar 笔记_第10张图片

vue2-calendar 笔记_第11张图片

prices这个数组动态获取就行

在子组件内

vue2-calendar 笔记_第12张图片

 vue2-calendar 笔记_第13张图片

vue2-calendar 笔记_第14张图片

 vue2-calendar 笔记_第15张图片

vue2-calendar 笔记_第16张图片

vue2-calendar 笔记_第17张图片

vue2-calendar 笔记_第18张图片

组件动画过度设置

vue2-calendar 笔记_第19张图片

你可能感兴趣的:(vue2-calendar 笔记)