因为是个常见的功能，所以写个组件。效果图如下：
组件具体代码如下： tool.vue
-
联系电话
-
APP下载
- 关注微信
<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实现底部侧边工具栏的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
- 关注微信
