vue使用less预编译实现样式嵌套,完成导航到指定位置更换样式
@原文参考
为了实现导航样式至指定位置改变效果,采用了位置监测进行样式表添加删除动作,在这里使用到了less预编译完成样式嵌套。
操作记录:
1.安装依赖
npm install --save less less-loader
由于我是用的是IDEA编译环境,所以我直接在下方命令窗口使用了这个命令,也可以使用win自带的命令行窗口执行此命令。区别是前者安装后就可看到安装的版本号,后者查看安装成功与否需要再执行lessc -v
命令查看,显示版本号即安装成功。
2.引入依赖
在项目main.js中添加以下内容,全局注入less。
import less from 'less'
Vue.use(less)
3.使用less预编译
引入成功后,只需在样式表标签内添加lang = "less"
即可,如下。
<style lang = "less" scope>
添加scope
的原因是避免样式表被其他地方继承到,该样式表只对所使用vue(或者html)页面生效。这只是个人习惯,因为还不熟悉,避免出错。
以下附上导航到指定距离改变样式代码,一为分享,二为记录
<template>
<div class="header" id="header-sty">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">项目案例</a></li>
<li><a href="#">资讯中心</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</template>
<script>
//鼠标下滑隐藏,上滑出现js文件,附在文末,自取
import '../style/js/jquery-2.1.4.min'
export default {
name: 'public-header',
methods: {},
}
//鼠标下滑隐藏,上滑出现
$(function () {
let oTop1 = $(document).scrollTop()
$(window).scroll(function () {
let oTop2 = $(document).scrollTop()
if (oTop2 > oTop1) {
$('.header').addClass('hide').removeClass('show')
} else {
$('.header').addClass('show').removeClass('hide')
}
oTop1 = $(document).scrollTop()
})
})
//到指定距离改变样式
function newheaderstyle(obj, type, fn) {
if (obj.attachEvent) {
obj.attachEvent('on' + type, function () {
fn.call(obj)
})
} else {
obj.addEventListener(type, fn, false)
}
}
newheaderstyle(window, 'scroll', function () {
let scrollTop =
document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop >= document.documentElement.clientHeight) {
//滚动条下拉距离大于等于当前窗口高度时触发以下功能
$('.header').addClass('new-sty-b-s').removeClass('new-sty-b-h')
} else {
$('.header').addClass('new-sty-b-h').removeClass('new-sty-b-s')
}
})
</script>
<style lang="less" scoped>
.new-sty-b-h {
/*这里本来有小于指定距离的样式的,但是和公共样式冲突了*/
}
.header ul li a:hover {
border-bottom: 2px solid #404040; /*这个代替a标签下划线效果*/
}
.header ul li a {
/*display: block; !* 将链接设为块级元素 *!*/
color: white;
padding: 15px 0;
font-weight: bold;
text-decoration: none; /* 去掉下划线 */
transition: all 0.5s; /*平滑动作*/
}
.header ul li {
float: left;
padding: 2px 50px;
list-style: none;
}
.header:hover {
background: #fff;
-webkit-filter: drop-shadow(0 0 15px #f1f1f1);
filter: drop-shadow(0 0 15px #f1f1f1);
ul li a {
color: #404040;
}
}
.header {
position: fixed;
width: 100%;
font-size: 0.13rem;
font-family: 思源黑体;
color: white;
z-index: 99;
}
html,
body {
margin: 0;
padding: 0;
}
/*鼠标下滑隐藏,上滑出现样式块*/
.hide {
transition: 0.5s;
top: -150px;
}
.show {
top: 0;
transition: 0.5s;
}
/*到指定距离添加此样式块*/
.new-sty-b-s {
background: #fff;
-webkit-filter: drop-shadow(0 0 15px #f1f1f1);
filter: drop-shadow(0 0 15px #f1f1f1);
ul li a {
color: #404040;
}
ul li a:hover {
/*background-image: -webkit-linear-gradient(-45deg, #5DD9F4, #6256EB);*/
/*-webkit-background-clip: text;*/
/*-webkit-text-fill-color: transparent;*/
border-bottom: 2px solid #404040;
/*border-image: -webkit-linear-gradient(#5DD9F4, #6256EB) 30 30;*/
/*border-image: -moz-linear-gradient(#5DD9F4, #6256EB) 30 30;*/
/*border-image: linear-gradient(#5DD9F4, #6256EB) 30 30;*/
transition: 0.2s;
}
}
</style>
附带代码中引用js地址:https://files.cnblogs.com/files/auto-ajax/jquery-2.1.4.min.js
建议自己去下载jquery-2.1.4.min.js文件,可能之后限于博客园文件版块容量限制我会删掉它。
想把自己留给生活
想把生活留给你