方法（持續更新）"/>
公共方法（持續更新）
1. 滚动条自动滚到最底部
如何让滚动条自动滚到最底部-php教程-PHP中文网
2. vue3使用i18n国际化
.html
Vue3 如何使用多语言 vue-i18n - 简书
vue3中如何使用vue-i18n实现多语言切换 - 芦苇派
vue3中使用vue-i18n(ts中使用$t, vue3不用this)_vue3使用i18n_一只爱吃糖的小羊的博客-CSDN博客
3. ant design vue 再次确认密码
validatePassTwo(rule, value, callback) {
const that = this;
if (
that.newForm.getFieldValue("password") ===
that.newForm.getFieldValue("oldPassword")
) {
this.newForm.setFields({
'password':{
'errors':null,
'value':that.newForm.getFieldValue("password")
},
'oldPassword':{
'errors':null,
'value':that.newForm.getFieldValue("oldPassword")
}
})
callback();
} else {
if (rule.field === "oldPassword") {
if (value !== that.newForm.getFieldValue("password"))
callback(new Error("原密码与新密码不一致"));
} else if (rule.field === "password") {
if (value !== that.newForm.getFieldValue("oldPassword"))
callback(new Error("原密码与新密码不一致"));
}
}
},
其中
this.newForm.setFields({
'password':{
'errors':null,
'value':that.newForm.getFieldValue("password")
},
'oldPassword':{
'errors':null,
'value':that.newForm.getFieldValue("oldPassword")
}
})
可以设置field的值 ，把errors改为null就可以手动清除验证报错的信息
4. vite项目获取静态资源的公共方法
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题_vue3引入图片_Young丶的博客-CSDN博客
// 获取静态资源
export const getAssets = (url:String) => {
return new URL(`../assets/${url}`,import.meta.url).href
// 必须是相对路径 否则无法显示
}
5. 监听页面是否发生修改
可以用 beforeRouteLeave 和 updated 来判断。export default {
name: 'supplier',
components:{cmtWrap,cmtContent},
props: [],
beforeRouteLeave (to, from, next) {//离开当前页if(this.updateCount > 1){ //更新次数大于1 说明用户修改过当前页数据 因为获取详情时会更新一次if(from.path.includes('nowPath')){
this.$confirm('即将离开当前页，请确定是否保存当前数据？', '离开当前页', {
confirmButtonText: '保存',
cancelButtonText: '不保存',
type: 'warning'
}).then(() => {
//...todo 这里调接口 保存数据
next()
}).catch(() => {next()});
}else{next()}
}else{
next()
}
},
updated:function () {
this.updateCount = this.updateCount + 1
},
data() {
return {
updateCount:0,//判断用户是否更新当前数据 }
},
computed:{},
watch:{},
mounted:function () {
this.getInitData()
},
methods: {
getInitData:function(){
//...todo 页面进来，先获取默认数据
}
},
}
6. 动态缓存组件切换时不能更新的解决办法
1. 第一种方法
在keep-alive中，有两个生命周期钩子函数，分别是activated()和deactivated()。我们可以使用activated()，在组件激活的时候会被调用，每次进入页面的时候，都会执行，在这个里面进行数据的请求，用来替代mounted。所以，只要将mounted替换为activated就可以解决问题了。
2. 第二种方法
我们可以在keep-alive中，加上一个属性exclude，属性的值就是组件的name，因为exclude是可以取消被keep-alive缓存的组件。代码示例如下：
<keep-alive exclude="detail">
<router-view/>
</keep-alive>
7. 父盒子旋转子盒子不旋转的实现方法
中心思想：双重旋转互相抵消（即父盒子如果香油旋转，那么子盒子只需要向左旋转，这样子盒子就不会随着父盒子一起旋转）
旋转动画：
@keyframes rotateRight {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
@keyframes rotateLeft {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(-360deg);
}
}
.basic-left-pepole-count {
animation: rotateRight 3s linear infinite;
div {
animation: rotateLeft 3s linear infinite;
}
}
参考内容：css实现只旋转边框，内含文字不转动_css旋转内容不旋转_白抹灰的博客-CSDN博客
8. 后端返回文件流前端展示
前端实现在线预览pdf、word、xls、ppt等文件_PrinciplesMan的博客-CSDN博客_前端在线预览pdf
前端处理blob文件流_wzp6010625的博客-CSDN博客
URL.createObjectURL()的使用方法_RawMarin的博客-CSDN博客
前端预览pdf文件流_这个柚子有点酸~的博客-CSDN博客
核心是转成blob对象，生成url去访问
9. base64转blob对象
base64ToBlob (code) { code = code.replace(/[\n\r]/g, ''); var raw = window.atob(code); var rawLength = raw.length; var uint8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLength; i++) { uint8Array[i] = raw.charCodeAt(i); } return new Blob([uint8Array], {type: 'application/pdf;charset-UTF-8'}) }, viewPdf (content) { if (!content) { this.$message.error('暂无内容') return } const blob = this.base64ToBlob(content) this.fileURL = URL.createObjectURL(blob); }
10.Vue2 配置網頁標題
chainWebpack: config => { config .plugin('html') .tap(args => { args[0].title= '你的标题' return args }) }
11.Vue2 倒計時
countDown(time){ if (time == 0) { this.send = false this.codeMessage = '发送验证码' } else { this.send = true this.codeMessage = time +'s' time-- setTimeout(()=>{ this.countDown(time) },1000) } },
12.vue2分屏显示内容并且同步滚动
<template><div class="container"><div class="t-pdf-content"><div class="left"><h3 class="t-pdf-content-title">原文件</h3><h3 class="t-pdf-content-title">OSS文件</h3></div><div class="right"><div ref="scroll-left" class="t-pdf-content-scroll">213131首先祝自己生日快乐！又老了一岁，时间就这样不经意间溜走……愿时光荏苒，岁月静好！每个人都有属于自己的故事，只是故事的主角与内容不一样罢了，无论怎样的故事，最终逃脱不掉岁月的摧残。明天和意外，谁知道哪一个先来！没发生的事，永远都是无常的。不能设定，只能计划。好好爱身边的人，人世间每一次相遇都是久别重逢，而每一次分开可能今生再也不相见。除了生死，其他的都是小事未来充满着无数可能永远无法知道下一秒会发生什么唯一能做的就是珍惜眼前人遇见，只为记录那一段曾经一个人的故事，刚刚开始（期待你成为故事中的那个角色）首先祝自己生日快乐！又老了一岁，时间就这样不经意间溜走……愿时光荏苒，岁月静好！每个人都有属于自己的故事，只是故事的主角与内容不一样罢了，无论怎样的故事，最终逃脱不掉岁月的摧残。明天和意外，谁知道哪一个先来！没发生的事，永远都是无常的。不能设定，只能计划。好好爱身边的人，人世间每一次相遇都是久别重逢，而每一次分开可能今生再也不相见。除了生死，其他的都是小事未来充满着无数可能永远无法知道下一秒会发生什么唯一能做的就是珍惜眼前人遇见，只为记录那一段曾经一个人的故事，刚刚开始（期待你成为故事中的那个角色）首先祝自己生日快乐！又老了一岁，时间就这样不经意间溜走……愿时光荏苒，岁月静好！每个人都有属于自己的故事，只是故事的主角与内容不一样罢了，无论怎样的故事，最终逃脱不掉岁月的摧残。明天和意外，谁知道哪一个先来！没发生的事，永远都是无常的。不能设定，只能计划。好好爱身边的人，人世间每一次相遇都是久别重逢，而每一次分开可能今生再也不相见。除了生死，其他的都是小事未来充满着无数可能永远无法知道下一秒会发生什么唯一能做的就是珍惜眼前人遇见，只为记录那一段曾经一个人的故事，刚刚开始（期待你成为故事中的那个角色）首先祝自己生日快乐！又老了一岁，时间就这样不经意间溜走……愿时光荏苒，岁月静好！每个人都有属于自己的故事，只是故事的主角与内容不一样罢了，无论怎样的故事，最终逃脱不掉岁月的摧残。明天和意外，谁知道哪一个先来！没发生的事，永远都是无常的。不能设定，只能计划。好好爱身边的人，人世间每一次相遇都是久别重逢，而每一次分开可能今生再也不相见。除了生死，其他的都是小事未来充满着无数可能永远无法知道下一秒会发生什么唯一能做的就是珍惜眼前人遇见，只为记录那一段曾经一个人的故事，刚刚开始（期待你成为故事中的那个角色）首先祝自己生日快乐！又老了一岁，时间就这样不经意间溜走……愿时光荏苒，岁月静好！每个人都有属于自己的故事，只是故事的主角与内容不一样罢了，无论怎样的故事，最终逃脱不掉岁月的摧残。明天和意外，谁知道哪一个先来！没发生的事，永远都是无常的。不能设定，只能计划。好好爱身边的人，人世间每一次相遇都是久别重逢，而每一次分开可能今生再也不相见。除了生死，其他的都是小事未来充满着无数可能永远无法知道下一秒会发生什么唯一能做的就是珍惜眼前人遇见，只为记录那一段曾经一个人的故事，刚刚开始（期待你成为故事中的那个角色）首先祝自己生日快乐！又老了一岁，时间就这样不经意间溜走……愿时光荏苒，岁月静好！每个人都有属于自己的故事，只是故事的主角与内容不一样罢了，无论怎样的故事，最终逃脱不掉岁月的摧残。明天和意外，谁知道哪一个先来！没发生的事，永远都是无常的。不能设定，只能计划。好好爱身边的人，人世间每一次相遇都是久别重逢，而每一次分开可能今生再也不相见。除了生死，其他的都是小事未来充满着无数可能永远无法知道下一秒会发生什么唯一能做的就是珍惜眼前人遇见，只为记录那一段曾经一个人的故事，刚刚开始（期待你成为故事中的那个角色）</div><div ref="scroll-right" class="t-pdf-content-scroll t-pdf-content-scroll-right">214124143131首先祝自己生日快乐！又老了一岁，时间就这样不经意间溜走……愿时光荏苒，岁月静好！每个人都有属于自己的故事，只是故事的主角与内容不一样罢了，无论怎样的故事，最终逃脱不掉岁月的摧残。明天和意外，谁知道哪一个先来！没发生的事，永远都是无常的。不能设定，只能计划。好好爱身边的人，人世间每一次相遇都是久别重逢，而每一次分开可能今生再也不相见。除了生死，其他的都是小事未来充满着无数可能永远无法知道下一秒会发生什么唯一能做的就是珍惜眼前人遇见，只为记录那一段曾经一个人的故事，刚刚开始（期待你成为故事中的那个角色）首先祝自己生日快乐！又老了一岁，时间就这样不经意间溜走……愿时光荏苒，岁月静好！每个人都有属于自己的故事，只是故事的主角与内容不一样罢了，无论怎样的故事，最终逃脱不掉岁月的摧残。明天和意外，谁知道哪一个先来！没发生的事，永远都是无常的。不能设定，只能计划。好好爱身边的人，人世间每一次相遇都是久别重逢，而每一次分开可能今生再也不相见。除了生死，其他的都是小事未来充满着无数可能永远无法知道下一秒会发生什么唯一能做的就是珍惜眼前人遇见，只为记录那一段曾经一个人的故事，刚刚开始（期待你成为故事中的那个角色）首先祝自己生日快乐！又老了一岁，时间就这样不经意间溜走……愿时光荏苒，岁月静好！每个人都有属于自己的故事，只是故事的主角与内容不一样罢了，无论怎样的故事，最终逃脱不掉岁月的摧残。明天和意外，谁知道哪一个先来！没发生的事，永远都是无常的。不能设定，只能计划。好好爱身边的人，人世间每一次相遇都是久别重逢，而每一次分开可能今生再也不相见。除了生死，其他的都是小事未来充满着无数可能永远无法知道下一秒会发生什么唯一能做的就是珍惜眼前人遇见，只为记录那一段曾经一个人的故事，刚刚开始（期待你成为故事中的那个角色）首先祝自己生日快乐！又老了一岁，时间就这样不经意间溜走……愿时光荏苒，岁月静好！每个人都有属于自己的故事，只是故事的主角与内容不一样罢了，无论怎样的故事，最终逃脱不掉岁月的摧残。明天和意外，谁知道哪一个先来！没发生的事，永远都是无常的。不能设定，只能计划。好好爱身边的人，人世间每一次相遇都是久别重逢，而每一次分开可能今生再也不相见。除了生死，其他的都是小事未来充满着无数可能永远无法知道下一秒会发生什么唯一能做的就是珍惜眼前人遇见，只为记录那一段曾经一个人的故事，刚刚开始（期待你成为故事中的那个角色）</div><div class="t-pdf-blue" @mousedown="moveDiv"></div></div></div><div class="t-pdf-btns"><a-form :form="form" :label-col="{ span: 12 }" :wrapper-col="{ span: 24 }" @submit="handleSubmit"><a-form-item label="比對結果："><a-radio-group name="radioGroup" :default-value="1"><a-radio :value="1">一致</a-radio><a-radio :value="2">不一致</a-radio></a-radio-group></a-form-item><a-form-item label="備註：" :label-col="{ span: 12 }" :wrapper-col="{ span: 24 }"><a-inputv-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"/></a-form-item></a-form><div class="t-pdf-saveBtn"><a-button type="primary">保存</a-button></div></div></div>
</template><script>
import {preViewPDF,saveViewPDF} from "@/views/Migration/api";export default {name: "preViewPDF",data(){return {form: this.$form.createForm(this),// 詳情idid:null}},created() {if (this.$route.query.id){this.id = this.$route.query.idthis.$nextTick(()=> {this.onGetFileInfo()})}},mounted() {this.$refs["scroll-left"].addEventListener('scroll',this.scrollLeft)this.$refs["scroll-right"].addEventListener('scroll',this.scrollRight)window.onmouseup = function() {document.onmousemove = null}},methods:{// 保存狀態更改handleSubmit() {this.form.validateFields(async (err, values) => {if (!err) {const res = await saveViewPDF()}});},// 獲取文件信息async onGetFileInfo(){const res = await preViewPDF({id:this.id})console.log(res)},// 滾動方法scrollLeft(){const scrollTopLeft = this.$refs["scroll-left"].scrollTopthis.$refs["scroll-right"].scrollTop = scrollTopLeft},scrollRight(){const scrollTopRight = this.$refs["scroll-right"].scrollTopthis.$refs["scroll-left"].scrollTop = scrollTopRight},// 拖拽div滾動條moveDiv(e){const div = document.querySelector('.t-pdf-blue')const rightDiv = document.querySelector('.right')// 獲取父盒子不帶邊框的高度let rightDivHeight = rightDiv.clientHeight// 鼠標距離可視區頂部的垂直距離const y = e.clientYdocument.onmousemove = function (e) {let clientY = e.clientYlet top = clientY - 180if (top <= 0){top = 0} else if ( top > rightDivHeight - div.offsetHeight){top = rightDivHeight - div.offsetHeight}div.style.top = top + 'px'}}}
}
</script><style scoped lang="less">
.container {min-height: 100vh;margin: 0 auto;width: 1300px;.t-pdf-content {background-color: #FFFFFF;.left,.right {display: flex;justify-content: space-between;align-items: center;h3,.t-pdf-content-scroll {width: 50%;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;}}.left {h3 {padding: 10px;height: 55px;font-size: 20px;font-weight: bold;line-height: 1;}}.right {position: relative;height: calc(100vh - 230px);.t-pdf-content-scroll {padding: 60px 165px 0;overflow-y: scroll;height: 100%;line-height: 1.7;font-size: 15px;color: #a6a6a6;letter-spacing: 2px;border: 1px solid #e9e9e9;&:first-child {border-right: unset;&::-webkit-scrollbar{display: none;}}}.t-pdf-blue {position: absolute;left: 0;top: 230px;width: 100%;height: 30px;border: 1px solid #afdcfc;background-color: #f6fcff;opacity: .5;}}}.t-pdf-btns {padding: 10px;display: flex;justify-content: flex-end;align-items: center;width: 100%;height: 80px;background-color: #f6f6f6;.ant-form {display: flex;justify-content: center;align-items: center;width: 50%;.ant-form-item {margin-bottom: unset;display: flex;align-items: center;}}.t-pdf-saveBtn {margin-left: 50px;}}
}h3 {margin-bottom: unset;
}</style>
html设置文字元素不可选择,css如何设置文字不允许选中？_Ray Who的博客-CSDN博客
HTML 如何获取父级div高度-百度经验
js——事件中event鼠标属性 document对象访问 盒子页面宽高距离及滚动高度（offset/client/scroll等）_肖ZE的博客-CSDN博客
实现div的拖拽_木12138的博客-CSDN博客_div 拖拽
前端开发之CSS样式——自定义滚动条_at小白在线中的博客-CSDN博客
13.隱藏滾動條
::-webkit-scrollbar{ display: none; }
14.css实现loading省略号动画
.loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 3s infinite; content: "\2026"; /* ascii code for the ellipsis character */ } @keyframes ellipsis { from { width: 0px; } to { width: 30px; } }
15.h5 回退小程序
背景：微信小程序通过web-view跳转到h5页面，操作后需要携带参数回到小程序。
web-view | 微信开放文档
用到的知识点：wx.miniProgram.postMessage
在h5页面：
wx.miniProgram.navigateBack({delta: 1})
wx.miniProgram.postMessage({data:{ billvId: String(this.billInfo.billvId)} })
需要注意两点：1、一定要先navigateBack回退，然后再执行 postMessage的数据传输，因为官方文档中强调（网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息）
2、我们要传输的数据一定要放在data中
在小程序内的Web-view页面：
接收到传递的数据后，在获取当前页面栈，向前一个页面栈setData我们要传输的数据。
// 小程序代码
<web-view bindmessage="handleGetMessage" src="test.html"></web-view>
Page({
handleGetMessage: function(e) {
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
let billvId = e.detail.data[0].billvId
prevPage.setData({ invoiceId: billvId})
}
})
————————————————
版权声明：本文为CSDN博主「大大。」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：
16.前端实现锚点功能
一、hash
这种方式非常简单，给待跳转元素添加 id，之后修改 window.location 即可，用法如
<div id="root"></div>
当需要跳转时可调用
window.location='#root';
// window.location.href='#root';
// window.location.hash='#root';
二、scrollIntoView
Element.scrollIntoView 方法会滚动元素的父容器，使元素显示在当前视窗内，用法如
<div id="root"></div>
当需要跳转时可调用
document.getElementById('root').scrollIntoView();
scrollIntoView 提供一些选项，允许开发者自定义滚动方式，选项包括
- behavior，定义动画过渡效果， "auto" 或 "smooth" 之一。
- 默认为 "auto"，没有动画；
- 取值 "smooth" 时，将匀速滚动。
- block，定义垂直方向的对齐， "start", "center", "end", 或 "nearest" 之一。
- 默认为 "start"，元素顶部将滚动到视窗顶部；
- 取值 "end"，元素底部将和视窗底部对齐；
- 取值 "center"，元素中线将和视窗中间对齐；
- 取值 "nearest"，元素将就近对齐。即，若页面向上滚动，则顶部对齐；若页面向下滚动，则底部对齐。
- inline，定义水平方向的对齐， "start", "center", "end", 或 "nearest" 之一。
- 默认为 "nearest"。含义同 block 选项的取值。
三、scrollTo/scrollBy
window.scrollTo 可将视窗滚动到指定的坐标。用法如：
window.scrollTo(xpos, ypos);
window.scrollBy 可将视窗向上下或左右移动指定坐标的距离。用法如：
window.scrollBy(xnum, ynum);
这种方式还需要实用 Element.getBoundingClientRect 来获取元素的大小及相对于当前视窗的位置。Element.getBoundingClientRect 的返回值包含 top、left、bottom、right、width 和 height 六个属性，除了 width 和 height 以外的属性均是相对于视窗的左上角来计算的。
以 HTML 根节点为滚动容器为例：
<div id="root"></div>
当需要跳转时可调用
const {scrollTop: domScrollTop, scrollLeft: domScrollLeft} = document.documentElement;
const {top: targetOffsetTop} = document.getElementById('root').getBoundingClientRect();// 滚动 div#root 元素顶部到与视窗顶部对齐
window.scrollTo(domScrollLeft, domScrollTop + targetOffsetTop);
window.scrollBy(domScrollLeft, targetOffsetTop);
同理，滚动元素到与视窗底部或与视窗中间对齐亦可取参计算。
17.socket实时获取后端数据（轮询）
socket.io-client如何在建立连接时设置请求标头 | 那些遇到过的问题
18.监听路由的方法
// 监听,当路由发生变化的时候执行
watch:{
$route(to,from){
console.log(to.path); // // 这种可能拿不到this,
}
},
或者
// 监听,当路由发生变化的时候执行
watch: {
$route: {
handler: function(val, oldVal){
console.log(val); // 这种可能拿不到this
},
// 深度观察监听
deep: true
}
},
或者
// 监听,当路由发生变化的时候执行
watch: {
'$route':'getPath'
},
methods: {
getPath(v1,v2){
console.log(this.$route.path);
// 为了使用this, 我使用的是这种
}
19.点击关闭h5页面（分微信内置浏览器和其他浏览器情况）
const ua = window.navigator.userAgent.toLowerCase() if (ua.match(/MicroMessenger/i) == 'micromessenger'){ 微信内置浏览器 WeixinJSBridge.call('closeWindow'); } else { 其他浏览器 window.close() }
20.js获取当天零点和24点
方法一：
const stamp1 = new Date(new Date().setHours(0, 0, 0, 0)); //获取当天零点的时间
const stamp2 = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1); //获取当天23:59:59的时间
方法二：（存在浏览器兼容问题）
const stamp1 = new Date(new Date().toLocaleDateString()); //获取当天零点的时间
const stamp2 = new Date(+new Date(new Date().toLocaleDateString()) + 24 * 60 * 60 * 1000 - 1); //获取当天23:59:59的时间，+new Date(time)，表示获取时间戳
注意:toLocaleDateString方法尽量不要使用，可以看下别的博主写的关于这个方法的坑，关于toLocaleDateString的坑，我一开始用的方式这种，导致安卓上的H5页面报错Uncaught (in promise) Error: [TimeFormater]: Invalid Date!
21.js 隐藏手机号码中间四位
在前端开发中，遇到如下需求：隐藏手机号码，将中间几位替换为*。通过js如何实现手机号码隐藏中间4位呢？下面整理几种实现方式：
1. 使用正则
function geTel(tel){
var reg = /^(\d{3})\d{4}(\d{4})$/;
return tel.replace(reg, "$1****$2");
}
//测试
var tel = "17326453333";
console.log(geTel(tel));//173****3333
2. 通过长度截取
function geTel(tel){
return tel.substring(0, 3)+"****"+tel.substr(tel.length-4);
}
//测试
var tel = "17326453333";
console.log(geTel(tel));//173****3333
22.在data中调用methods里的方法
data(){ let self = this // 加上这句改变this就可以了 return { tablist:[ { icon:require('../../../assets/dajiarenshou/n-kefu.png'), tabName:'服务管家', method:function() { self.callPhone() } }, { icon:require('../../../assets/dajiarenshou/n-shenqingguanli.png'), tabName:'立即申请', method:function(){ self.goKefu() } } ] } },
23.文件的导出
//导出 exportExcel() { exportExcelApi().then(response => { let data = response.data // var newBlob = new Blob([data.data], { type: 'application/excel;charset=UTF-8' }) var anchor = document.createElement('a') anchor.download = '招聘岗位' + moment(new Date()).format('YYYY-MM-DD') + '.xlsx' // 如果返回的是base64数据 // anchor.href = window.URL.createObjectURL(newBlob) // // 如果返回的是路径 anchor.href = data.data anchor.click() }) .catch(async e => { this.$Message.error(e.toString()) }) },
24.h5页面返回上一页不刷新并且滚动条停留在原先位置
// 页面创建时
created() {this.pageNumber = 1this.aList = JSON.parse(sessionStorage.getItem('aList'))this.aParam = JSON.parse(sessionStorage.getItem('aParam'))if (this.aList){this.houseList = this.aListthis.pageNumber = this.aParam.page} else {this.init()}// console.log('this.houseList1',this.houseList)
},mounted() {if (this.aList){// 一定要在mouted里面获取，否则报undefined 并且最好使用querySelector，避免冲突document.querySelector("#conBody").scrollTop = this.aParam.topsessionStorage.removeItem('aList')sessionStorage.removeItem('aParam')}this.$refs.conBody.addEventListener('scroll',this.scroll)
},
// 跳转时存取数据
onHouseInfoClick(id){let list = JSON.stringify(this.houseList)let param = {page:this.pageNumber,top:this.$refs.conBody.scrollTop}param = JSON.stringify(param)sessionStorage.setItem('aList',list)sessionStorage.setItem('aParam',param)this.$router.push({path:'/registerListDetail',query:{id:id}})
}
参考文献地址：.html项目-h5列表跳转详情，实现后退不刷新，修改数据则刷新的功能(记录滚动条)_大只兔的博客-CSDN博客_h5返回上一页不刷新html 返回上一页强制刷新,微信返回上一页强制刷新问题_爱吃香菜的卷毛的博客-CSDN博客
25.js一鍵撥號
callPhone(){ window.location.href = 'tel:021-34032206' },
26.路由监听设备是移动端还是pc端
router.beforeEach((to,from,next) => { let device = navigator.userAgent.toLowerCase(); if (to.path === '/mobileIndex' || to.path === '/pcIndex'){ next() } else { if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(device)) { //移动端 next({path:'/mobileIndex'}) } else { //pc端 next('/pcIndex') } } })
27.同一项目下移动和pc的视口适配切换
module.exports = { plugins: { autoprefixer: {}, // 用来给不一样的浏览器自动添加相应前缀，如-webkit-，-moz-等等 "postcss-px-to-viewport": { unitToConvert: "px", // 需要转换的单位，默认为"px" viewportWidth: 1920, // 视窗的宽度，对应pc设计稿的宽度，一般是1920 // viewportHeight: 1080,// 视窗的高度，对应的是我们设计稿的高度 unitPrecision: 3, // 单位转换后保留的精度 propList: [ // 能转化为vw的属性列表 "*", ], viewportUnit: "vw", // 希望使用的视口单位 fontViewportUnit: "vw", // 字体使用的视口单位 selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。cretae minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值，而不添加备用属性 exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 } } }; // 第二步 配置移动端 module.exports = { sourceMap: false, css: { loaderOptions: { postcss: { plugins: [ require('postcss-px-to-viewport')({ unitToConvert: 'px', // 需要转换的单位，默认为"px" viewportWidth: 375, // 视窗的宽度，对应移动端设计稿的宽度，一般是375 // viewportHeight:667,// 视窗的高度，对应的是我们设计稿的高度 unitPrecision: 3, // 单位转换后保留的精度 propList: [ // 能转化为vw的属性列表 '*', ], viewportUnit: 'vw', // 希望使用的视口单位 fontViewportUnit: 'vw', // 字体使用的视口单位 selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。 minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值，而不添加备用属性 exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件 }), ], }, }, }, };
28.监听enter事件
<input v-on:keyup.enter="submit">//局部
//全局
methods: { handleKeyDown(e) {let key = null;if (window.event === undefined) {key = e.keyCode;} else {key = window.event.keyCode;}if (key === 13) {//触发的事件this.onSubmit();}},},created() {window.addEventListener("keydown", this.handleKeyDown, true); //开启监听键盘按下事件},
全局添加时，离开本页面时要取消监听
destroyed() {window.removeEventListener("keydown", this.handleKeyDown, true);},
29.去除特殊字符
excludeSpecial(s) { // 去掉转义字符 s = s.replace(/[\'\"\\\/\b\f\n\r\t]/g, ''); // 去掉特殊字符 s = s.replace(/[\@\#\$\%\^\&\*\{\}\:\"\<\>\?]/,''); return s; },
30.Vue定义全局函数方法（暨前端加密解密代码）
1.创建一个js文件
/** @Author: your name* @Date: 2022-02-26 17:18:27* @LastEditTime: 2022-02-26 17:18:28* @LastEditors: Please set LastEditors* @Description: 打开koroFileHeader查看配置 进行设置: /%E9%85%8D%E7%BD%AE* @FilePath: \visit_system\src\api\encryption.js*/
import CryptoJS from 'crypto-js'
import {install} from "vant";var key = CryptoJS.enc.Hex.parse('d86d7bab3d6ac01ad9dc6a897652f2d2')
//是否加密
const isEncryption = truelet base = {}base.install = function (Vue,options){// 密文解密为对象Vue.prototype.decodeData = function (data) {if (isEncryption) {return JSON.parse(decrypt(data))} else {return data}}// 对象加密成密文Vue.prototype.encryptData = function (data) {if (isEncryption) {return encrypt(JSON.stringify(data))}else {return data}}
}export default base/*** 加密* @param {*} word * @returns */
export function encrypt(word) {var srcs = CryptoJS.enc.Utf8.parse(word)var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7})return encrypted.toString()
}/*** 解密* @param {*} word * @returns */
export function decrypt(word) {var decrypt = CryptoJS.AES.decrypt(word, key, {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7})return CryptoJS.enc.Utf8.stringify(decrypt).toString()
}
2.全局引入注册
// 引入加密解密文件 import base from '@/api/encryption'
Vue.use(base)
3.在文件中使用this调用js文件中的方法
31.vue实现div滚动加载更多
<div ref="rightDiv">11233</div>
mounted(){
this.$refs.rightDiv.addEventListener('scroll',this.scroll)
// debounce 是一个防抖工具类函数 需要自己定义
}
scroll() {
const scrollTop = this.$refs.rightDiv.scrollTop
// 获取可视区的高度
const windowHeight = this.$refs.rightDiv.clientHeight
// 获取滚动条的总高度
const scrollHeight = this.$refs.rightDiv.scrollHeight
console.log(
'scrollTop',
scrollTop,
'windowHeight',
windowHeight,
'scrollHeight',
scrollHeight
)
if (scrollTop + windowHeight >= scrollHeight ) {
// 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
// 调用函数
}
},
本人补充Tip：切记v-if会影响addEventListener的绑定，如果dom结构无数据时使用v-show
更多推荐
公共方法（持續更新）
发布评论