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 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
angular2使用简单介绍
Mar 01 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 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显示搜索引擎来的关键词
2014/02/13 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
深入理解PHP内核(一)
2015/11/10 PHP
php文件包含的几种方式总结
2019/09/19 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
jquery选择器简述
2015/08/31 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python3实现飞机大战
2020/11/29 Python
python3代码中实现加法重载的实例
2020/12/03 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
学生会主席竞聘书
2014/03/31 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
结婚纪念日感言
2015/08/01 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
python 网络编程要点总结
2021/06/18 Python
Vue的过滤器你真了解吗
2022/02/24 Vue.js
MySQL主从切换的超详细步骤
2022/06/28 MySQL