<template> <div class="item-code-container"> <div class="fixed"> <div class="iconfont icon-erweima " v-on:mouseenter="visible" @mouseleave="invisible"></div> </div> <div class="code"> <img src="@/assets/code.png" alt="" v-show="showCode"> </div> </div> </template>
css:
<style lang="less"> .item-code-container{ position: fixed; top:75%; right: 150px; .fixed{ border-radius:3px; border: 1px solid #CCC; div{ padding: 3px; border-bottom: 1px solid #CCC; } div:hover{ background: #e44f50; } .iconfont { font-size: 40px; color: #fff; background: #CCC; } } .code{ position: absolute; top:30px; right: -100px; } } </style>
js:
export default {
data() {
return {
showCode:false
};
},
methods: {
visible:function(){
this.showCode = true;
},
invisible:function(){
this.showCode = false;
}
}
}
</script>
原文：https://www.cnblogs.com/fmyblog/p/12102448.html