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 focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
微信小程序异步处理详解
Nov 10 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
Vue退出登录时清空缓存的实现
Nov 12 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正确解析UTF-8字符串技巧应用
2012/11/07 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
python tkinter图形界面代码统计工具
2019/09/18 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
2015元旦标语横幅
2014/12/09 职场文书
台风停课通知
2015/04/24 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS