前端小知识

1.嵌套路由 导航:to="{ path: '/test/submittest' }" 要在前面加上父的地址
2.对于class与style样式绑定

//带有判断  三元表达式的类
 :class="{ cli: activeAdd == scope.row.id, add }"
:class="[assistantList.length>3?'wrap':assistantList.length!=0?'nowrap':'up','con']"
  <div :style="{'display':attachList.length==0?'none':'block'}">暂未上传作业内容</div>

3.es6 export/import

A.js——export a——import {a} from A.js
A.js——export default a —— import a from A.js
一个文件可以有多个export 输出 但只能有一个默认输出

4.时间格式转为时间戳

   let time =new Date(this.homeWorkInfo.ReviewEndTime).getTime()

5.前端动态修改备注 在总数组上修改 有时候不需要直接刷新接口

//传入数组中的index
 @click="optionHandler({name:getOptionNames(scope.row.StateStr)[0],data:scope.row,index:scope.$index})"
//保存修改的备注
    async saveRemark(val, id) {
      //判断是否有值或者是否已修改

      if (!val) {
        this.$alert.warning('请输入内容后保存')
      } else {
        let { data } = await this.$api.updateRemark({
          taskID: this.taskID,
          myTaskID: id,
          remark: val,
        })
        if (data.status == 1) {
          this.$alert.success('保存成功')
          this.isShowRemark = false
          //前端修改备注
          this.studentlist[this.remarkData.index].Remark = val     //（这里动态修改）
          //console.log(this.studentlist)
          this.$forceUpdate()
        }
      }
    },

6.实现页面右侧边框隐藏（如看视频时候右侧栏点击关闭 视频撑满全屏）

主要是样式

//页面的动态变化 宽
    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        overflow: hidden
    }

    .right {
        position: relative;
        background: rgba(249,249,249,1);
        opacity: 0.99;
        width: 415px;
        height: 100vh;
        transition: 2s all;
    }

    .none {
        margin-right: -410px;
    }

    .left {
        flex: 1;
        height: 100vh;
        background-color: black;
    }


//右侧栏
$(".btnclass").click(function () {
    $(".right").toggleClass("none");
    $(".btnclass").toggleClass("layui-icon-right");
    $(".btnclass").toggleClass("layui-icon-left");
});

7.项目小知识

1.如何让element-ui中dialog弹出框居中 未解决 已解决 加/deep/
2.解决eslint 自动修复问题
3.修改elementui中默认样式 看博客 /deep/
字重有匹配算法 百度查看
伪类 LoVe HA 顺序

8.关于web屏幕页面 高度

监听滚动条事件：window.onresize=()=>{}
区别几个浏览器以及dom元素的高度：
document.documentElement.clientHeight 网页可见区域高度就是视野范围高度不包括水平滚动条高度
body
offsetHeight = body.padding + body.border + body.height(CSS设置或内容撑的);
clientHeight = body.padding + body.height(CSS设置或内容撑的);
scrollHeight >= clientHeight;
网页正文全文高：document.body.scrollHeight 有隐藏部分
每个元素都有这几个属性 滚动条指：不只是body自己 包括每个元素自身
也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。
当元素没有滚动条时 srollHeight=clientHeight
scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。
单位px，只读元素。
offsetTop：是个定值 元素距离顶部的距离 不会因为滚动下拉条而变
offsetLeft:元素距离 上一级的定位元素有关

9.vue 加载图片问题

<img v-if="item.type==data.type" :src="require(`@/assets/${item.url}.png`)">

10.前端锚点定位

答题卡问题 描述：点击题号 相应的题目跳到视野区 相对应也是：点击题目 相应题号也变化

答题卡.png

//题号
 <div id="nav_warp" class="question-nav">
              <span v-for="item in questionList" :id="`nav_${item.ObjectID}`" :key="item.ObjectID" class="question-nav__item" :class="{'error':item.CorrectRate!=-1&&item.CorrectRate<rate,'active':item.active}" @click="getCurrentQuestion(item)">{{ item.Index }}</span>
            </div>
//题目
 <div id="question_list" class="question-main__content">
   <div v-for="(item,index) in questionList" :id="item.ObjectID" :key="item.ObjectID" class="question-item" @click="getCurrentQuestion(item)">
   </div>
</div>

    getCurrentQuestion(data) {
      this.questionList.forEach((item) => {
        item.active = false
      })
      data.active = true
      this.$nextTick(() => {
        location.href = `#${data.ObjectID}`   //利用链接跳转到
        //锚点定位
        // if (!this.$util.isEleInView(data.ObjectID, 'question_list')) {
        //   this.$util.elIntoView(data.ObjectID)
        // }

//利用方法  
        if (!this.$util.isEleInView(`nav_${data.ObjectID}`, 'nav_warp')) {
          this.$util.elIntoView(`nav_${data.ObjectID}`)
        }
      })
    },

核心方法

/** 元素是否处于父容器的可见区域 参数元素 id子元素id pid 父级id*/
export function isEleInView(id, pid) {
  // 取得其父容器，此例为指定id的div  text-warp 就对定位
  var div = document.getElementById(pid)
  var ele = document.getElementById(id)
  //console.log(ele)
  var _scrollTop = div.scrollTop
  var _height = div.clientHeight
  var _eleTop = ele.offsetTop //由于div绝对定位 所以offsetTop是离div顶部的距离
  if (_eleTop < _scrollTop) {
    return false
  }
  if (_eleTop - _scrollTop < _height) {
    return true
  }
  return false
}
//元素定位到视野中
export function elIntoView(id) {
  const returnEle = document.getElementById(id)
  if (returnEle) {
    returnEle.scrollIntoView(true)
  }
}

11. index: scope.$index