项目实践记录

爱吃榴莲的小胖

已于 2022-03-30 12:25:50 修改

阅读量855

点赞数 1

分类专栏： Vue 文章标签：前端

于 2022-03-30 11:44:36 首次发布

本文链接：https://blog.csdn.net/weixin_41895706/article/details/123839073

版权

本文记录了在Dart Sass升级中遇到的DEPRECATION WARNING解决方法，介绍了如何使用sass-migrator处理。此外，讲解了前端开发中的锚点定位、页面加载状态判断、object-fit和object-position的使用，以及video属性的应用，特别是解决X5内核视频问题的策略。

摘要由CSDN通过智能技术生成

一、 DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.解决方法

sass 新版本目弃用“/”的用法，sass自定义element theme时会报warnning，

解决步骤如下：

npm install -g sass-migrator
cd node_modules
执行sass-migrator division **/*.scss

二、锚点定位

// 第一种
goAnchor(selector) {
     // 最好加个定时器给页面缓冲时间
     setTimeout(() => {
         // 获取锚点元素
         let anchor = this.$el.querySelector(selector)

         // scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域

         anchor.scrollIntoView({
            behavior: 'smooth', // 平滑过渡
         })
     }, 100)
}

//第二种
goAnchor(selector) {
     setTimeout(() => {
         // 获取锚点元素
         let anchor = this.$el.querySelector(selector)
         document.documentElement.scrollTop = anchor.offsetTop
     }, 100)
}

scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域

alignToTop
true 元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions:    {block: "start", inline: "nearest"}。这是这个参数的默认值。
false   元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions:    {block: "end", inline: "nearest"}

scrollIntoViewOptions
behavior 定义过渡动画。"auto","instant"或"smooth"。默认为"auto"。