vue 开发一个按钮组件的示例代码


Posted in Javascript onMarch 27, 2018

最近面试,被问到一个题目,vue做一个按钮组件;

当时只是说了一下思路,回来就附上代码。

解决思路:

  1. 通过父子组件通讯($refs 和 props)
  2. props接受参数, $refs调用子组件的方法
  3. 来达到点击提交改变按钮状态,如果不成功则取消按钮状态

在src/components/ 下建一个button.vue

<template>
<!-- use plane -->
<!-- 传入bgColor改变按钮背景色 -->
<!-- state切换button的状态 调用cancel()可以切换 -->
<!-- text为按钮文字 -->
 <div class="container">
  <button 
   @click="confirm"
   :disabled="state" 
   class="confirm" 
   :style="{background: btnData.bgColor}"
  >{{text}}</button>
 </div>
</template>
<script>
export default {
 data(){
  return {
   text: this.btnData.text,
   state: false,
  }
 },
 props: {
  btnData: {
   types: Array,
   default() {
    return {
     text: '确认',
    }
   }
  }
 },
 methods: {
  confirm(){
   this.text += '...'
   this.state = true
   //这里是激活父组件的事件,因为子组件是不会冒泡到父组件上的,必须手动调用$emit
   //相对应父组件要在调用该组件的时候,将其挂载到上面
   this.$emit("confirm")
  },
  cancel(){
   this.text = this.btnData.text
   this.state = false
  }
 }
}
</script>
<style lang="less" scoped>
.confirm {
 border: none;
 color: #fff;
 width: 100%;
 padding: 1rem 0;
 border-radius: 4px;
 font-size: 1.6rem;
 background: #5da1fd;
 &:focus {
  outline: none;
 }
}
</style>

在页面中调用:

<template>
  <div class="btn-box">
   <Btn 
    :btnData="{text: '确认注册'}"
    <!--这里就要挂载$emit调用的事件 @confirm="想要调用事件的名字"-->
    @confirm="confirm"
    ref="btn"
   ></Btn>
  </div> 
</template>
<script>
import Btn from '@/components/button'
export default {
 components: {
  Btn
 },
 methods: {
  confirm(){
   if(!this.companyName){
    this.$toast("公司名不能为空") 
    this.$refs.btn.cancel()
   }
 }
}
</script>

在这里,要注意一些细节:

1. button组件形成之后和其它div元素的间距,如果是在组件内定死是很难复用的。

2. 在复用的时候,在父组件中是改变不了子组件的样式的,如果要强制更改,单独写一个并去掉scoped。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 #Javascript
vue2中使用less简易教程
Mar 27 #Javascript
浅谈Vue内置component组件的应用场景
Mar 27 #Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 #Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 #Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 #Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 #Javascript
You might like
用PHP读取IMAP邮件
2006/10/09 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
js加解密 脚本解密
2008/02/22 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
Fabric 应用案例
2016/08/28 Python
python之django母板页面的使用
2018/07/03 Python
想学python 这5本书籍你必看!
2018/12/11 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
python MD5加密的示例
2020/10/19 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
四年级下册教学反思
2014/02/01 职场文书
文秘应届生求职信
2014/07/05 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL