关注微信
返回顶部
<script type="text/ecmascript-6">
export default {
}
<style lang="stylus" rel="stylesheet/stylus">
.float-tool
position: fixed
right: 10px
bottom: 10px
z-index: 99
width: 55px
font-size: 12px
li
position: relative
margin-bottom: 5px
width: 55px
height: 55px
text-align: center
color: #FFF
background-color: #6b4ec2
cursor: pointer
&.hasChild:hover > div
display: block
.tool-icon
display: block
width: 55px
height: 35px
background: url('icons.png') no-repeat
.icon0
background-position: center -153px
.icon1
background-position: center 5px
.icon2
background-position: center -50px
.icon3
background-position: center -102px
.icon4
background-position: center -312px
.txtbox
display: none
position: absolute
top: 0px
right: 65px
width: 150px
height: 45px
line-height: 45px
font-size: 14px
padding: 5px
background-color: #6b4ec2
&:after
display: block
position: absolute
right: -5px
top: 22px
content: ''
width: 0
height: 0
border-width: 7px 0 7px 7px
border-style: solid
border-color: transparent transparent transparent #6b4ec2
.picbox
display: none
position: absolute
top: -30px
right: 65px
width: 100px
height: 100px
padding: 5px
background-color: #6b4ec2
img
width: 100%
height: 100%
&:after
display: block
position: absolute
right: -5px
top: 50px
content: ''
width: 0
height: 0
border-width: 7px 0 7px 7px
border-style: solid
border-color: transparent transparent transparent #6b4ec2
下载地址：
补充：下面看下vue 侧边导航栏递归显示 的实例代码。
0 && child) {
parentItem.children = childNode;
}
return nodes;
};
for (var j in farternode) {
farternode[j]["children"] = [];
var nodes = [];
nodes = childNodes(farternode[j].id,false,null);
farternode[j].children = nodes;
}
console.log(farternode);
console.log(nodes);
this.theModel = farternode;
}.bind(this)
)
.catch(function(error) {
console.log(error);
});
console.log(this.$refs.tabsdata)
}
};
父组件 的js
父组件的节点
子组件的js
子组件的节点
总结
以上所述是小编给大家介绍的Vue实现底部侧边工具栏的实例代码。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
