Button组件-实现基本功能(Vue-UI组件库)

news/2024/10/31 1:32:41/

组件有添加新成员了,他就是基本的button,不做过多详述,仅仅记录一下防止忘记
暂时的功能:
1.输入size选择button组建的大小
2.输入样式改变button组件的颜色
3.一些基本的样式

<template><div><div:class="['zypc-button',btSize,btType]"><span><slot></slot></span></div></div>
</template><script>
export default {data() {return {buttonClass: 'zypc-button'}},props: ["size","type"],computed:{btSize:function(){return `${this.buttonClass}-${this.size}`},btType:function(){return `${this.buttonClass}-${this.type}`}}
}
</script><style lang="">
.zypc-button {padding:4px 25px; margin:0px;border-radius: 10px;display:inline-block;  overflow:hidden;height: 32px;line-height:28px;background: rgb(45,183,245);color: white;
}
:hover.zypc-button {background: rgba(45,183,245,0.8);cursor: pointer;
}/* 按钮大小 */
.zypc-button-small {height: 32px;line-height:28px;
}
.zypc-button-large {padding:4px 35px; height: 45px;line-height: 41px;
}/* 确认,蓝色按钮 */
.zypc-button-blue {background: rgb(45,183,245);color: white;
}
:hover.zypc-button-blue {background: rgba(45,183,245,0.8);cursor: pointer;
}/* 错误,红色按钮 */
.zypc-button-error {background: rgb(235, 0, 18);color: white;
}
:hover.zypc-button-error {background:rgba(235, 0, 18,0.8);cursor: pointer;
}/* 通过,绿色按钮 */
.zypc-button-success {background: rgb(127, 174, 66);color: white;
}
:hover.zypc-button-success {background: rgba(127, 174, 66, 0.8);cursor: pointer;
}
</style>

http://www.ppmy.cn/news/368659.html

相关文章

支付宝沙箱模拟支付

首先配置沙箱应用环境沙箱环境 &#xff5c; 开放平台 进入页面后&#xff0c;使用支付宝进行登录&#xff08;你也可以根据官方的说明进行操作&#xff0c;这个页面的数据会随版本变化而变化&#xff09; 登录后来到支付宝开发平台 生成密钥&#xff0c;我是下载了软件&#x…

无监督域适应、人体解析、视频异常检测和水果成熟度分类,推荐本周那些有意思的​CV综述...

关注公众号&#xff0c;发现CV技术之美 今天向大家推荐四篇近期发布的文献综述&#xff0c;包含无监督域适应、人体解析、视频异常检测和水果成熟度分类。 ▌Source-Free Unsupervised Domain Adaptation: A Survey 作者单位&#xff1a;北卡罗来纳大学教堂山分校论文链接&…

制糖行业脱色的工艺原理

制糖技术已有千年的历史&#xff0c;从我国西周开始就有糖的制作方法。随之岁月的变迁&#xff0c;人们对糖的需求度越来越大&#xff0c;糖的应用也更广泛&#xff0c;制糖的技术也逐渐成熟。而制糖脱色是糖业必不可少的流程和工艺&#xff0c;是企业长期应用的技术&#xff0…

kubernetes-1.16.4安装(包括Dashboard界面)

安装环境 操作系统&#xff1a;CentOS-7.6 内核版本&#xff1a;3.xxx Docker版本&#xff1a;18.09.9 Kubernetes版本&#xff1a;1.16.4 服务架构 master&#xff08;hostname&#xff09;&#xff1a; ip&#xff1a;47.21.122.31 核心数&#xff1a;2 core 内存&#xff1a…

Linux下yum安装MySQL yum安装MySQL指定版本

yum 安装MySQL 1. 检查安装情况 查看有没有安装过&#xff1a; yum list installed MySQL* &#xff08;有存在要卸载yum remove MySQL*&#xff09; rpm -qa | grep mysql* 查看有没有安装包&#xff1a; yum list mysql* 2. 安装 MySQL 安装 MySQL 客户端&#xff1a; yum -y…

运放稳定性连载14:RO何时转变为ZO?(3)

我们现在知道了重负载和空载时的ZO意味着什么。我们关心的另一个关键曲线是RO变成最大值时的轻负载。我们并不十分清楚该工作点的位置&#xff0c;原因是我们不能看到OPA348 A-B类偏置级的内部&#xff0c;但在计算AC传输曲线之前&#xff0c;我们需要知道该点的位置。使用图7.…

制糖脱色的方法

精制糖的市场趋势 随着国内人民生活水平日益提高&#xff0c;用糖客户和消费者对食糖的品种&#xff0c;质量会产生有新的要求&#xff0c;近年来&#xff0c;糖产品种类更加丰富&#xff0c;包装规格与形式更加多样化&#xff0c;同时&#xff0c;消费人群更加注重饮食健康&am…

十大精密电阻排行榜

作者&#xff1a;lymex&#xff0c;排版&#xff1a;晓宇 微信公众号&#xff1a;芯片之家&#xff08;ID&#xff1a;chiphome-dy&#xff09; 一个好的精密电阻&#xff0c;必须具备老化小、温飘小、偏差小的特点&#xff0c;同时最好具备可靠性高、功率余量大温升小、噪音低…