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 相关文章推荐
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
js数组操作常用方法
May 08 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
vue实现全选、反选功能
Nov 17 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
react 生命周期实例分析
May 18 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
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Python列表切片用法示例
2017/04/19 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
Python2与Python3的区别实例分析
2019/04/11 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
中专生的个人自我评价
2013/12/11 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
收款委托书
2014/10/14 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android