使用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 27 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
vue.js 使用原生js实现轮播图
Apr 26 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 批量添加多行文本框textarea一行一个
2014/06/03 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
php文件包含的几种方式总结
2019/09/19 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
arguments对象
2006/11/20 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
AngularJS实现进度条功能示例
2017/07/05 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
浅谈python中的占位符
2017/11/09 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
会计专业自我鉴定范文
2013/10/06 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
出国留学计划书
2014/04/27 职场文书
运动会闭幕式主持词
2015/07/01 职场文书