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


Posted in Javascript onSeptember 03, 2018

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

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

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

组件具体代码如下: 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实现底部侧边工具栏的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 #Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 #Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 #Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 #Javascript
VUE预渲染及遇到的坑
Sep 03 #Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 #Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 #Javascript
You might like
PHP开发文件系统实例讲解
2006/10/09 PHP
PHP4.04简明安装
2006/10/09 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python入门篇之列表和元组
2014/10/17 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
留学推荐信中文范文三篇
2014/01/25 职场文书
美德好少年主要事迹
2014/01/29 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
党校毕业心得体会
2014/09/13 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
MySQL修炼之联结与集合浅析
2021/10/05 MySQL