使用vue实现点击按钮滑出面板的实现代码


Posted in Javascript onJanuary 10, 2017

在通信的时候容易出错,或者信息根本传不过来。那么这里就示例一下,怎么通过组件之间的通信完成点击事件。

index.vue文件中:

<div>
   <el-button type="primary" @click="onShow">点我</el-button>
</div>

传递中介

<addForm :show="formShow" @onHide="formShow = false"></addForm>

引入组件,即是要弹出的组件

import addForm from './docsForm'
export default {
components: {
addForm
},
data() {
return {
show: false,
formShow: false
}
},
watch: {
 show: {
      handler: function(newVal, oldVal) {
        this.show = newVal
      },
      deep: true
    }
},
methods: {
onShow() {
      this.formShow = true
    }
}
}

该文件里面的方法就是这样。

然后就是弹出组件docsForm.vue怎样向上传数据

<slidePanel :width="550" :show="show" title="添加知识" @changeShow="hide">
<div class="docs-body">
</div>
</slidePanel>
export default {
props: {
show: false
},
methods: {
hide() {
      this.$emit('onHide')
    },
}

在组件slidePanel.vue中

<template>
  <transition name="slide-panel-fade">
    <div v-if="show" class="slide-panel" :style="{ width: width + 'px'}">
      <div class="slide-panel-layout">
        <div class="slide-panel-header">
          <h3 class="slide-panel-header-title">{{title}}</h3>
          <button class="slide-panel-header-close" @click="onShow"><i class="el-icon-close"></i></button>
        </div>
        <div class="slide-panel-body">
          <slot></slot>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  props: {
    title: String,
    show: Boolean,
    width: {
      type: Number,
      default: 500
    }
  },
  methods: {
    onShow() {
      this.$emit('changeShow', false)
    }
  },
  watch: {
    show: {
      handler: function(newVal, oldVal) {
        this.show = newVal
      },
      deep: true
    }
  },
  mounted() {
    document.body.appendChild(this.$el)
  },
  destroyed() {
    this.$el.remove()
  }
}
</script>

这样就可以实现不同组件之间的册拉弹出。

以上所述是小编给大家介绍的使用vue实现点击按钮滑出面板的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
jQuery 学习入门篇附实例代码
Mar 16 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 #Javascript
vue2滚动条加载更多数据实现代码
Jan 10 #Javascript
简单实现IONIC购物车功能
Jan 10 #Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 #Javascript
原生js实现水平方向无缝滚动
Jan 10 #Javascript
vue组件实例解析
Jan 10 #Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 #Javascript
You might like
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
浅析javascript中function 的 length 属性
2014/05/27 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
Python自定义简单图轴简单实例
2018/01/08 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python 字符串格式化的示例
2020/09/21 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
详解python中的异常捕获
2020/12/15 Python
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
银行自荐信范文
2013/10/07 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
大学教师个人总结
2015/02/10 职场文书
工作简报格式范文
2015/07/21 职场文书
教师研修随笔感言
2015/11/18 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP