24年7月-8月工作笔记整理（前端）

一、问题解决

1.浏览器拦截跳转的解决方案

//先打开一个空白页let winHandler = window.open('', '_blank')//再重定向到想要跳转的链接winHandler.location.href = redirectUrl

2.文字大小跟随父级元素宽度适配缩放

//父元素加不换行和相对定位，子元素通过计算得出缩放的比例，以及偏移的量，最后实现缩放后居中
//html:<div  style='position: 'retactive', white-space: nowrap;'><div:style="{transform: `scale(${item.scale}) translateX(-${item.offsetX}%)`,position: 'absolute',left: '50%'}">{{ item.quotaSymbol }}</div></div>//js:
//文字自适应父级宽度缩放,返回缩放比例
//入参：文字内容,文字的信息,父元素宽度
export function scaleRatio(text, font, parentWidth) {//计算文字的宽度const canvas = document.createElement('canvas')const context = canvas.getContext('2d')context.font = fontconst { width } = context.measureText(text)return parentWidth / Math.max(width, parentWidth)
}

3.pc端实现滚动懒加载

//html:<div class="content" v-loading="noticeLoading" @scroll="watchScroll"><div v-if="noticeData && noticeData.length > 0"><divclass="content-card"v-for="(item, index) in noticeData":key="index"@click="toDetail(item.messageType, item.businessId)"><div class="notice-title"><div class="title-style">{{ item.title }}</div><divclass="more"style="font-weight: 400"v-if="item.messageType === '36'">详情 <i class="el-icon-arrow-right"></i></div></div><div class="notice-text">{{ item.content }}</div><div class="notice-text time">{{ item.sendTime }}</div></div><div class="dataDesc"><span v-if="dataLoading && !finished"><i class="el-icon-loading"></i>加载中...</span><span v-else>没有更多了</span></div></div><i-no-data v-if="noticeData.length === 0 && !noticeLoading">暂无消息提醒</i-no-data></div>//  js:
data(){
return{//消息通知//一次多少页pageSize: 10,//第几页pageNum: 1,//总共条数total: 0,//懒加载loadingdataLoading: false,//判断是否加载完成finished: true,switch: false, // 加锁，防止滚动时，判断条件重复调用
}
}//滚动方法watchScroll(e) {const scrollTop = e.target.scrollTop // listBox 滚动条向上卷曲出去的长度，随滚动变化const clientHeight = e.target.clientHeight // listBox 的视口可见高度，固定不变const scrollHeight = e.target.scrollHeight // listBox 的整体高度，随数据加载变化const saveHeight = 30 // 安全距离，距离底部XX时，触发加载const tempVal = scrollTop + clientHeight + saveHeight // 向上卷曲距离 + 视口可见高度 + 安全距离// 如果不加入 saveHeight 安全距离，在 scrollTop + clientHeight == scrollHeight 时，触发加载// 加入安全距离，相当于在 scrollTop + clientHeight >= scrollHeight - 30 时，触发加载，比前者更早触发if (tempVal >= scrollHeight) {if (!this.finished && !this.switch) {// 数据加载未结束 && 未加锁this.queryUserMessage()}this.switch = true // 加锁，防止重复触发}},//获取消息通知async queryUserMessage() {this.dataLoading = truetry {const { list, total } = await getMessage({farmId: this.farmId,pageSize: this.pageSize,pageNum: this.pageNum,orgId: this.orgId})this.loading = falseif (list && list.length > 0) {this.noticeData = this.noticeData.concat(list)this.total = totalif (list.length < this.pageSize ||this.noticeData.length >= this.total) {// 返回结果条数少于请求条数，认为已结束// 目前数据条数等于总条数，认为已结束this.finished = true} else {this.finished = falsethis.pageNum += 1 // 页码加1this.switch = false // 还可以继续加载，改变锁状态}}this.noticeLoading = false} catch (error) {this.noticeLoading = falseconsole.log('error===', error)}},

4.字体抗锯齿设置

//App.vue
#app {/* 字体抗锯齿，让字体看起来更清晰 */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

二、基础知识学习

1.vue3的watch

//监听ref:
watch(name, (currentValue, prevValue) => {console.log(currentValue, prevValue)
})
//监听reactive:（要使用箭头函数）
watch(() => nameObj.name, (newVal, oldVal) => {console.log(newVal, oldVal)
})
//监听多个 reactive ：（且一个数组装现值，一个数组装旧值）
watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [preName, preEng]) => {console.log(curName, preName, '----', curEng, preEng)
})）

2.vue3的组件间ref使用，父组件通过ref调用子组件的方法或数据需要子组件暴露出来

//父组件：
const cardRef = ref<InstanceType<typeof HomeOrderCard>>()
onMounted(() => {cardRef.value?.sayHello()
})
//子组件：
const sayHello = () => {console.log('hello')alert('are you ok?')
}
defineExpose({sayHello
})