小編給大家分享一下Vue如何實(shí)現(xiàn)底部側(cè)邊工具欄，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

站在用戶的角度思考問題，與客戶深入溝通，找到新源網(wǎng)站設(shè)計(jì)與新源網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋新源地區(qū)。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

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

因?yàn)槭莻€(gè)常見的功能，所以寫個(gè)組件。效果圖如下：

組件具體代碼如下： tool.vue

export default {

}



.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

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

補(bǔ)充：下面看下vue 側(cè)邊導(dǎo)航欄遞歸顯示 的實(shí)例代碼。

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

父組件的節(jié)點(diǎn)

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

子組件的節(jié)點(diǎn) 

看完了這篇文章，相信你對(duì)“Vue如何實(shí)現(xiàn)底部側(cè)邊工具欄”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文標(biāo)題：Vue如何實(shí)現(xiàn)底部側(cè)邊工具欄-創(chuàng)新互聯(lián)
文章位置：http://weahome.cn/article/ggjse.html