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的IE和Firefox兼容性集锦
Dec 11 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
antd table按表格里的日期去排序操作
Nov 17 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 无限极分类
2008/03/27 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
python编程开发之类型转换convert实例分析
2015/11/13 Python
星球大战与Python之间的那些事
2016/01/07 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
转党组织关系介绍信
2014/01/08 职场文书
土地转让协议书
2014/09/27 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年团支部工作总结
2014/11/17 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers