Vue如何实现底部侧边工具栏

小编给大家分享一下Vue如何实现底部侧边工具栏，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

下载地址： 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如何实现底部侧边工具栏”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！