以往写html代码的时候是将组件绑定点击函数然后通过ducument拿到css改变样式,也可以在js代码中用document拿别的class或id的样式。
我们以用document实现弹窗效果为例
<!-- 弹窗 -->
<div class="popbar" id="popbar">
<h3 class="notice">来啦</h3>
</div>
.popbar{
position: absolute;
width: 340px;
height: 60px;
box-shadow: 0 0 5px 1px #464647;
border-radius: 15px;
border: none;
margin-right: 10px;
//改变margin-top的值以实现弹窗效果
margin-top: -80px;//end 10px
margin-left: 10px;
background-color: rgba(100, 235, 102, 0.6);
transition: all 0.5s;
.notice{
margin-top: 11.5px;
text-align: center;
font-size: 25px;
color: aliceblue;
}
}
这里我们通过改变margin-top的值来实现弹窗效果,js代码如下
function lock(){
document.getElementById("barlock").style.transform = "scale(1)"
document.getElementById("popbar").style.marginTop= "10px"
setTimeout(() => {
document.getElementById("popbar").style.marginTop= "-80px"
},2000)
}
此处实现了一秒的动画效果(从-80到10),在两秒后回到-80的位置
视频效果如下
弹窗效果展示
右下角的锁同样可以如此实现,除了改变还可以inner html来实现新加样式
但在vue中使用document似乎有点行不通
那在vue中应该如何实现呢?
- 是可以通过绑定class样式(或者style)在method中写函数
- 或者同样使用document来实现(这里涉及到全局的函数,windows操作等,等弄明白了再更新)
- 还有就是同样在method中写的 类似document 的方法:就是用 this.$refs函数,将组件绑定上ref值后拿style样式
等我后边更新 今天肩膀很疼
2023.2.11
明天开学了,这边更新一下
vue中改变样式可以使用ref邦定标签,然后通过this.refs.(ref值).style.(元素属性,同document语法)
<div ref="test" style="background=red"> </div>
在函数中
method{
this.refs.test.style.background="blue";
}