vue 开发一个按钮组件的示例代码
作者:绯色琉璃 发布时间:2024-04-30 10:27:40
标签:vue,按钮
最近面试,被问到一个题目,vue做一个按钮组件;
当时只是说了一下思路,回来就附上代码。
解决思路:
通过父子组件通讯($refs 和 props)
props接受参数, $refs调用子组件的方法
来达到点击提交改变按钮状态,如果不成功则取消按钮状态
在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。
来源:https://segmentfault.com/a/1190000014015962
0
投稿
猜你喜欢
- 本文主要介绍了python opencv 找出图像中的最大轮廓并填充,分享给大家,具体如下:import cv2import numpy a
- 要使用摄像头,需要使用cv2.VideoCapture(0)创建VideoCapture对象,参数0指的是摄像头的编号,如果你电脑上有两个摄
- 我们通过模拟随机漫步可以说明如何运用数组运算。通过内置的random模块以纯Python的方式实现1000步的随机漫步根据前100个随机漫步
- 本文以简单示例分析了python中关键字is与 ==的区别,供大家参考一下。首先说明一下Python学习中几个相关的小知识点。Python中
- 之前写了一个matlab的,越用越觉得麻烦,如果不同数据集要改类别数目,而且运行速度慢。所以重新写了一个Python的,直接读取xml文件夹
- 0、背景今天看到了一个比较诡异的写法,for后直接跟了else语句,起初还以为是没有缩进好,查询后发现果然有这种语法,特此分享。之前写过c+
- 本文实例讲述了Python面向对象程序设计。分享给大家供大家参考,具体如下:示例1:#encoding:utf-8''
- 在上一篇用JS实现图片轮播效果代码(一)的基础上,增加了左右箭头的响应事件,实现了点击左右箭头也可以让图片滚动:js代码如下:window.
- JavaScript 循环中,i++ 与 i– 那个比较快?相信有不少朋友看过相关的讨论文章,比如这篇。文章解释了开启优化选项后,i– 的
- 三种遍历列表里面序号和值的方法:最近学习python这门语言,感觉到其对自己的工作效率有很大的提升,特在情人节这一天写下了这篇博客,下面废话
- 今天遇到一个问题,在通过php的mssql函数读取sql server数据导入mysql数据库时,sql server 的datetime类
- 最近pytorch出了visdom,也没有怎么去研究它,主要是觉得tensorboardX已经够用,而且用起来也十分的简单pip insta
- 本文将介绍PHP中单引号和双引号的区别。PHP中单引号和双引号简介在 PHP 中,我们使用引号来指定值是字符串文字。有两种不同类型的报价。它
- 本文以实例形式简述了Python中字符串类型与字典类型相互转换的方法,是比较实用的功能。具体方法如下:一、字典(dict)转为字符串(str
- 一、查询SQL Server中所有的表SQL语句:SELECT * FROM sys.tablesname列表示所有的表名。二、查询SQL
- 直接上代码,可以写在公共文件common和继承的基础类中,方便调用/* * $name为表单上传的name值 *
- 1、下载地址:MySQL官网2、解压解压之后的文件里边是没有data文件的,需要创建一个空文件夹命名为data(后面需要用),并且需要创建一
- 一、基础环境1、操作系统:CentOS 7.32、MySQL:8.0.13 链接: https://pan.baidu.com/s/13-j
- 前言这篇文章主要是就在公司实习的时候,对SQL优化工作作出的一些整理。在公司实习的时候,导师分配了SQL慢查询优化的任务,任务是这样的:每周
- 本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法!Dja