使用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 相关文章推荐
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
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如何比较两个浮点数是否相等详解
2019/02/12 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
python进程和线程用法知识点总结
2019/05/28 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Python调用C/C++的方法解析
2020/08/05 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
学习十八大精神心得体会
2013/12/31 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
超级礼物观后感
2015/06/15 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
使用Redis实现实时排行榜功能
2021/07/02 Redis
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android