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键盘事件使用介绍
Nov 01 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
js倒计时简单实现方法
Dec 17 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
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 empty函数报错解决办法
2014/03/06 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python3 replace()函数使用方法
2018/03/19 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
python接入支付宝的实例操作
2020/07/20 Python
html5与css3小应用
2013/04/03 HTML / CSS
幼儿园老师寄语
2014/04/03 职场文书
生产车间标语
2014/06/11 职场文书
社团活动总结报告
2014/06/27 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技