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 相关文章推荐
js常用排序实现代码
Dec 28 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
Java无向树分析 实现最小高度树
Apr 09 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+jQuery实现自动补全功能源码
2013/05/15 PHP
探讨如何把session存入数据库
2013/06/07 PHP
PHP积分兑换接口实例
2015/02/09 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
python使用append合并两个数组的方法
2015/04/28 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
python logging日志模块的详解
2017/10/29 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Django-imagekit的使用详解
2020/07/06 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
退伍老兵事迹材料
2014/01/31 职场文书
晚归检讨书
2014/02/19 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
春晚观后感
2015/06/11 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript