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中配置 

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

8、其余按照官网就好了

具体细节看官方下载文件 

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

在父组件中

prices这个数组动态获取就行

在子组件内

 

 

组件动画过度设置