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 = font
  const { 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">
              <div
                class="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>
                  <div
                    class="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,
      //懒加载loading
      dataLoading: 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 = true
      try {
        const { list, total } = await getMessage({
          farmId: this.farmId,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          orgId: this.orgId
        })
        this.loading = false
        if (list && list.length > 0) {
          this.noticeData = this.noticeData.concat(list)
          this.total = total
          if (
            list.length < this.pageSize ||
            this.noticeData.length >= this.total
          ) {
            // 返回结果条数少于请求条数，认为已结束
            // 目前数据条数等于总条数，认为已结束
            this.finished = true
          } else {
            this.finished = false
            this.pageNum += 1 // 页码加1
            this.switch = false // 还可以继续加载，改变锁状态
          }
        }
        this.noticeLoading = false
      } catch (error) {
        this.noticeLoading = false
        console.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
})

3.History.pushState()方法用于在历史中添加一条记录。
window.history.pushState(state, title, url)
History.replaceState()方法用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。