使用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 相关文章推荐
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Python中包的用法及安装
2020/02/11 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
管理科学大学生求职信
2013/11/13 职场文书
司机辞职报告范文
2014/01/20 职场文书
上课说话检讨书大全
2014/01/22 职场文书
员工晚婚的请假条
2014/02/08 职场文书
库房管理员岗位职责
2014/03/09 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
Python实战之实现康威生命游戏
2021/04/26 Python
分析并发编程之LongAdder原理
2021/06/29 Java/Android
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题