@H_301_0@下载地址： <a rel="external nofollow" href="https://github.com/imxiaoer/FloatToolBar">https://github.com/imxiaoer/FloatToolBar
因为是个常见的功能，所以写个组件。效果图如下：
组件具体代码如下： tool.vue
-
联系电话
-
APP下载
- 关注微信
@H_301_0@<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) } };@H_301_0@ 父组件 的js
<div class="jb51code">
<pre class="brush:js;">@H_301_0@父组件的节点
<div class="jb51code">
<pre class="brush:js;">
import tabs from '../compont/tabs.vue'
export default {
name: 'treeMenu',props:["model"],data () {
return {
folderIcon: 'folder',isDynamicFolder: false,isOpen: false,}
},computed: {
isFolder () {
return !!(this.model.children && this.model.children.length)
}
},watch: {
isDynamicFolder () {
this.isOpen = true
this.folderIcon = 'folder-open'
}
},methods: {
tabsvalue(data){
this.$emit("data-tabsvalue",data)
},run(data){
if(!data.children){
this.tabsvalue(data)
console.log(data.text);
console.log(data.url)
}
},toggle () {
this.isOpen = !this.isOpen
this.folderIcon = this.isOpen ? 'folder-open' : 'folder'
}
}
} - 关注微信
