锚点定位的实现、offsetTop、反转字符串、修改el-image点击预览从第一张开始、实现短信验证码、Avue中自定义表单如何对它设置校验

2022-12-06 219 阅读1分钟

1.锚点定位的实现方式 在对象中添加id属性，在div盒子中与对象中的id属性对应，完成锚点定位的跳转

效果： 图片.png

图片.png

图片.png

（1）简单粗暴的跳转：直接在href属性上添加（注：添加#）或在点击事件加入scrollIntoView()

图片.png

图片.png

（2）若需要对锚点定位的位置进行修改，可以添加点击事件自行修改

图片.png

图片.png

offset的用法：

图片.png

页面滚动距离

图片.png

例：若切换页面回到顶部

图片.png

也可以用tabs做锚点

图片.png

图片.png

2.反转字符串

首先使用split将字符串拆分成一个一个字符在数组内，再对数组进行反转，最后通过join指定连接符生成字符串。

（1）Split()函数用法： split()通过指定分隔符对字符串进行切片，如果参数 num 有指定值，则仅分隔 num+1 个子字符串

图片.png

（2）join用法：

图片.png

图片.png

图片.png

3.修改el-image点击预览从第一张开始

图片.png

图片.png

图片.png

图片.png

4.实现短信验证码

图片.png 先写一个定时器

点击验证码 图片.png 页面样式

图片.png

5. Avue中自定义表单如何对它设置校验

思路：address1不传给后端，它是用来拼接省市区的一个字段，遇到的问题是将三个下拉选中还是会报rules中的请输入门店地址，这是因为我们选中的是省市区三个字段而不是address1，所以我们应该在三个下拉选中后给address1赋一个值（form.address1）。

页面： 图片.png 配置项

图片.png

vue中

图片.png

图片.png

图片.png

图片.png

图片.png