Vue实现类似通讯录功能（上）

不是很好描述这种功能，大概和通讯录一样，按名称分组，右侧有字母列表，可进行选择。

（贴图出来比较一目了然）

使用 Vue 实现，这里需要安装一个插件 better-scroll ，安装引入流程可进上面链接的 github 上，按要求完成便可。
静态布局部分要自己好好写，这里就不说啦。

我这里写的是城市选择列表，但是功能和通讯录是一样的，首先在城市父组件内引入 axios ，引入这个是为了发起 ajax 请求。
然后在 mounted 这个钩子函数内，发起 ajax 请求，也可以写在 created 这个钩子函数内，但是最好写在 mounted 内。
然后请求函数的具体执行函数写在 methods 内，handleGetCityInfoSucc是成功接收的回调函数。这里的 *** 作是先把返回结果打印出来。
接下来去 data 部分创建两个变量，一个 cities 是个对象，一个 hotCities 是个数组，默认都为空。
然后将返回结果赋值给它们。
接下来就是父组件传值给子组件。
父组件通过绑定属性传递给子组件
第二层循环是第一层的item的内部循环，所以图中第二层循环写的是 innerItem of item ， item 是第一层循环中的 (item, key) of cities 。

双层循环的时候，如果父级的 key 值和子级循环的 key 一样了，也没有关系，只要父级的 key 值不重复就行了

字母索引组件的 ABCD 的索引，同样可以用上面的 cities 数据，也就是第一层循环就能将索引都渲染出来。

vue动态设置maxlength的方法如下:
maxLength='20' 实现效果： 4动态校验规则（必填项） 利用 ant design vue官方文档 中Form表单API中的 rules，双向绑定动态校验规则。

vue给的1360的图写页面做到自适应步骤如下：
1vue在设置好的div里面自动适应宽高，显示全部，不够宽高的留空白；
2本文使用的分辨率为：4000x2026；
3我的电脑分辨率为：1920x1080；
4默认宽高如果设置100%，电脑屏幕会显示不全的；
5注意：这里设置了最高 高度为700，如果高度太高，会显示不全；
6访问页面，电脑屏幕就可以完整的显示了。

对导航栏和轮播图进行样式设置。
1、在Vue组件中，找到导航栏和轮播图对应的区域，添加CSS样式,确定轮播图的背景色或者，可以使用CSS的background-color或background-image属性进行设置。
2、将导航栏的背景色或者透明度设置为与轮播图相同或者相似的颜色或透明度，可以使用CSS的background-color或opacity属性进行设置。
3、如果导航栏和轮播图的颜色不一样，可以使用Vue的计算属性computed来动态计算导航栏的颜色，使其与轮播图的颜色相同。

点击“视频编辑”按钮，选择要添加的视频素材，点击“开始制作”。

点击“编辑”选项下面的“贴图”，再点击界面下方的“＋”。

点击下图所示图标，然后在手机相册中选择一张素材。

界面下方有三个按钮，分别是放大、裁剪、旋转。可以自行设置，我一般都是默认 *** 作，直接点击界面右上角的“√”。

拖动界面下方的向左和向右的小箭头来设置显示时间段，向左的小箭头是开始显示时间，向右的小箭头则是结束显示时间。拖动界面上右下角的按钮可以更改显示的大小和角度，直接拖动则可以设置显示的位置，设置好之后点击界面右上角的“√”。

返回到编辑主界面，点击界面右上角的橙色按钮，然后点击“保存至相册”，选择视频导出模式，最后只需要等视频导出完成即可。

---