下载地址： https://github.com/imxiaoer/FloatToolBar

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

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

<template> <ul class="float-tool"> <li class="hasChild"> <span class="tool-icon icon0"></span> <span>联系电话</span> <div class="txtbox"> <span>请拨 102-0012-9242</span> </div> </li> <li> <span class="tool-icon icon1"></span> <span>QQ 客服</span> </li> <li class="hasChild"> <span class="tool-icon icon2"></span> <span>APP下载</span> <div class="picbox"> <img src="./wechat.jpg" alt="微信二维码"> </div> </li> <li class="hasChild"> <span class="tool-icon icon3"></span> <span>关注微信</span> <div class="picbox"> <img src="./wechat.jpg" alt="微信二维码"> </div> </li> <li onclick="window.scrollTo(0, 0)"> <span class="tool-icon icon4"></span> <span>返回顶部</span> </li> </ul></template><script type="text/ecmascript-6">export default {}</script><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</style>

下载地址： https://github.com/imxiaoer/FloatToolBar

补充：下面看下vue 侧边导航栏递归显示 的实例代码。

import axios from "axios";import tabs1 from "../tab_content/tab1.vue";import myTree from "./items.vue";export default { data() { return { theModel: [], }; props: ["tabs"] }, components: { myTree }, methods: { tabsvalue(data){ console.log(data) this.$emit("get-data",data) } },watch: {}, created() { axios .get("../../../static/nav.json") // .get("。。。") .then( function(response) { var arr = response.data.dActionList; var zNodes = []; var farternode = []; for (var i in arr) { if (arr[i].desktop == "0" && arr[i].parentId != null) { farternode.push(arr[i]); } if (arr[i].parentId && arr[i].desktop == "1") { zNodes.push(arr[i]); } } var childNodes = function getChildNodes( parentId, zNodes, nodes, child, parentItem ) { if (!parentId || !zNodes) return nodes; var childNode = []; for (var k in zNodes) { if (zNodes[k].parentId == parentId) { if (child) { childNode.push(zNodes[k]); } else { nodes.push(zNodes[k]); } childNodes(zNodes[k].id, zNodes, nodes, true, zNodes[k]); } } if (childNode.length > 0 && child) { parentItem.children = childNode; } return nodes; }; for (var j in farternode) { farternode[j]["children"] = []; var nodes = []; nodes = childNodes(farternode[j].id, zNodes, nodes, 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

<template> <div id="navto"> <my-tree v-for="menuItem in theModel" :key="menuItem.id" :model="menuItem" @data-tabsvalue="tabsvalue"></my-tree> </div></template>

父组件的节点

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' } }}

子组件的js

<template> <li> <span @click="toggle"> <i :class="['icon', (isFolder || isDynamicFolder) ? folderIcon : 'file-text']"></i> <span class="mousestyle">{{ model.text}}</span> </span> <!-- <transition name="mybox" > --> <ul v-if="isOpen"> <span v-for="item in model.children" :key="item.id" @click.stop="run(item)"> <tree-menu :model="item" @data-tabsvalue="tabsvalue"> </tree-menu> </span> </ul> <!-- </transition> --> </li></template>

子组件的节点

总结

以上所述是小编给大家介绍的Vue实现底部侧边工具栏的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！