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

下载地址：https://github.com/imxiaoer/FloatToolBar因为是个常见的功能，所以写个组件。效果图如

下载地址： 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实现底部侧边工具栏的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！