Vue实现底部侧边工具栏的实例代码

前端之家收集整理的这篇文章主要介绍了Vue实现底部侧边工具栏的实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下载地址:

因为是个常见的功能,所以写个组件。效果图如下:

组件具体代码如下: tool.vue

    联系电话
    请拨 102-0012-9242
  • QQ 客服
  • 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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

    原文链接:https://www.f2er.com/vue/30528.html

    猜你在找的Vue相关文章