美文网首页
前端小知识

前端小知识

作者: 无题syl | 来源:发表于2020-09-11 10:44 被阅读0次

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)
  }
}
  1. index: scope.$index

相关文章

  • 前端小知识

    chrome关闭缓存:F12 在network下选中 disable Cache 标签默认type=submit,...

  • 前端小知识

    app: 1.原生app 优势:能调用后台应用 劣势:效率低 开发成本高 2.混合a...

  • 前端小知识

    1.嵌套路由 导航:to="{ path: '/test/submittest' }" 要在前面加上父的地址2.对...

  • 前端小知识

    1、padding:1px2px3px;则等效于什么? 上右下 左复制右 2、内边距的百分数值是这么计算的 根据...

  • 前端小知识

    1、React.PureComponent 与 React.Component 的区别 React.PureCom...

  • 前端知识if小例子

  • 前端的小知识

    这是学校当粗的考试题,当时没怎么重视马马虎虎背了背,后来发现这些理论知识还似挺有用的 1、简述对WEB标准以及W3...

  • 前端知识小库

    醉牛前端 , 收集前端常用的工具集合:http://f2er.club/ Animate.css框架:官网演示:h...

  • 前端小知识<2>

    1、var、let 及 const 区别 var 存在提升,可以在声明之前使用 值为 undefined。let、...

  • 前端开发小知识

    1.el-dialog嵌套在el-popover中但是遮罩层不对的问题参照element 官方文档 设置appen...

网友评论

      本文标题:前端小知识

      本文链接:https://www.haomeiwen.com/subject/xouvektx.html