VUE文件封装日历组件

封装就是要具有灵活性，样式自适应，调用的时候传入props就可以变成自己想要的样式。

1、建一个vue文件，打出一个 < 然后按tab键 自动创建vue的模板 首先在script标签里写好name和props属性

props写成校验写法，这里我先定义了宽度w，高度h，单位rem，字体大小fontSize，字体颜色color，边框border，背景颜色background，这些都是基本的组件封装需要的props。如图：

这些props我都给它设置了一个默认值，当调用时不传其中的某个参数就是默认的值，传的话就是指定值；

然后定义交互的props： v-model需要的props：value v-model绑定的是显示在父组件某个容器里的值 显示的日期格式化单位format 控制显隐的点击函数fn。如图：

类型为Array或者Object的props设置默认值需要用回调函数返回。

2、props定义好后就开始写结构和样式，这里的样式不能写在style标签里面，需要用：style动态添加到标签上面。

先写data定义好几个基础的样式变量。如图：

接着在methods里面写两个设置宽度样式setWidth和高度样式setHeight的方法。如图：

setHeight与setWidth这两个方法的第一个参数为设置的像素大小（即设计图量的多少px就传多少，不带单位），第二个参数可选，传入true时返回一个纯数字，不传时返回一个带单位的值

这里我用了三元运算符，后面将会大量用到三元运算符（有嵌套用法）。this.w与this.fontSize即传入的props。

this.w*(w/257)与this.fontSize*(h/14) 这里的w / 257就是你要设置的宽相对于设计图的最外层大盒子的宽的占比。h/14就是设置的高相对于字体大小的占比。

这里不推荐用h / this.h 因为这里的组件高度需要自适应。

身为前端老司机，还是得分享些干货精品学习资料的，从最基础的HTML+CSS+JS前端小白入门到HTML5以及移动端各种框架都有整理，前端资料获取方式：

1.在你手机的右上角有【关注】选项，点击关注！

2.关注后，手机客户端点击我的主页面，右上角有私信，请私信回复：【学习】

已经设置好了关键词自动回复，所以回复的时候请注意关键词哟~

3、template里面创建好基本结构 。如图：

接着在created里面初始化样式 。如图：

上面的代码可能就是最后的this.selectStyle有点不好理解

这里的cw就是用按钮的实际的宽度去减选中时的高度。因为选中的时候宽度需要写成和高度一样的才能成为一个圆形。

这时就需要设置选中的按钮左右的margin。因为cw 有可能是奇数，所以除以2的时候再四舍五入就不是平均值了。

所以margin-right就是用cw减去margin-left的值，避免盒子被挤到下一行。

4、逻辑部分=>创建结构里需要显示的数据。如图：

在template里将数据渲染到标签上。如图：

接着在methods里面写一个初始化方法 init :

这个方法用来渲染页面的日期数据，这里需要写一个获取指定年份和月份所对应的天数。

在methods里面再定义一个方法getMonthDayCount。如图：