基于vue的toast组件(提示框),toast组件,可以直接用
对你有帮助的话就帮我扫一下支付宝红包呗,不要的扫给我也可以,谢谢了各位,有啥需要可以在下方留言,多金大佬也可以打赏些小费。效果:用法:this.toast('保存成功')html部分:<div class="toast" v-show="toastShow">{{toastText}}</div>js部
·
对你有帮助的话就帮我扫一下支付宝红包呗,不要的扫给我也可以,谢谢了各位,有啥需要可以在下方留言,多金大佬也可以打赏些小费。
效果:
用法:
this.toast('保存成功')
html部分:
<div class="toast" v-show="toastShow">
{{toastText}}
</div>
js部分:
data () {
return {
toastShow: false,
toastText: ''
}
},
methods: {
toast (str) {
let v = this
v.toastText = str
v.toastShow = true
setTimeout(function(){
v.toastShow = false
}, 1500)
}
}
style部分:
.toast {
position: fixed;
z-index: 2000;
left: 50%;
top:45%;
transition:all .5s;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-align: center;
border-radius: 5px;
color:#FFF;
background: rgba(17, 17, 17, 0.7);
height: 45px;
line-height: 45px;
padding: 0 15px;
max-width: 150px;
}
更多推荐
已为社区贡献6条内容
所有评论(0)