简单封装一个button组件
时间:2019-09-03
本文章向大家介绍简单封装一个button组件,主要包括简单封装一个button组件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Github地址:https://github.com/ElsonJe/Simple-ui.git
阿里矢量图标库:https://www.iconfont.cn/
一、效果
二、封装
<template> <button @click="ClickHandler()" :class="styles" :disabled="disabled">{{ text }}</button> </template> <script> export default { name: 'sp-button', data() { return {} }, props: { /* 按钮中显示的文字 */ text: { type: String }, /* 是否启用按钮 */ disabled: { type: Boolean, default: false }, /* 按钮形状 */ design: { type: String, default: 'block' }, /* 矢量图标 */ icon: String, /* 内置按钮风格 */ type: { type: String, default: 'normal' } }, methods: { /* 按钮点击时触发的事件,用于父组件中使用 */ ClickHandler() { this.$emit('click') } }, computed: { /* 根据不同的props,展示按钮样式 */ styles: { get() { return ['sp-button', this.design, this.icon, this.type] } } } } </script> <style scoped> /* 引入矢量图标 */ @import '../../assets/icons/iconfont.css'; button { width: 100px; height: 30px; outline: none; /*outline 去除原生的button样式*/ /*动画设置*/ transition: border 0.8s; -webkit-transition: border 0.8s; transition: background-color 0.1s; -webkit-transition: background-color 0.1s; } /*normal style*/ .normal { border: 1px solid rgb(135, 135, 136); background-color: #ffffff; font-size: 12px; color: rgb(92, 90, 90); } .normal:hover { cursor: pointer; background-color: #F4F4F5; } .normal:active { color: #000; border: 1px solid rgb(135, 135, 136); background-color: #F4F4F5; } .normal:disabled { cursor: not-allowed; background-color: rgb(241, 243, 245); opacity: 0.8; } /* primary style */ .primary { color: #ffffff; background-color: #3a8ee6; font-size: 12px; border: none; } .primary:active { background-color: rgb(192, 215, 250); color: rgb(105, 83, 233); border: none; } .primary:hover{ cursor: pointer; background-color: rgb(125, 174, 248); } .primary:disabled{ background-color: rgb(192, 215, 250); color: #3a8ee6; border: none; cursor: not-allowed; } /* warning style*/ .warning { color: #ffffff; background-color: #CF9236; font-size: 12px; border: none; } .warning:active { background-color: rgb(233, 202, 157); color: rgb(185, 115, 10); border: none; } .warning:hover{ cursor: pointer; background-color: rgb(231, 177, 97); } .warning:disabled{ background-color: rgb(233, 202, 157); color: rgb(185, 115, 10); border: none; cursor: not-allowed; } /* error style*/ .error { color: #ffffff; background-color: rgb(250, 96, 96); font-size: 12px; border: none; } .error:active { background-color: rgb(243, 181, 181); color: rgb(245, 60, 60); border: none; } .error:hover{ cursor: pointer; background-color: rgb(238, 127, 127); } .error:disabled{ background-color: rgb(243, 181, 181); color: rgb(245, 60, 60); border: none; cursor: not-allowed; } /* success style */ .success { color: #ffffff; background-color: #5DAF34; font-size: 12px; border: none; } .success:active { background-color: rgb(185, 218, 168); color: rgb(70, 153, 29); border: none; } .success:hover{ cursor: pointer; background-color: rgb(129, 211, 85); } .success:disabled{ background-color: rgb(185, 218, 168); color: rgb(70, 153, 29); border: none; cursor: not-allowed; } /* info style */ .info { color: #ffffff; background-color: #A6A9AD; font-size: 12px; border: none; } .info:active { background-color: rgb(212, 214, 218); color: rgb(141, 144, 146); border: none; } .info:hover{ cursor: pointer; background-color: rgb(176, 178, 182); } .info:disabled{ background-color: rgb(212, 214, 218); color: rgb(141, 144, 146); border: none; cursor: not-allowed; } /* 方块 */ .block { border-radius: 0px; } /* 半圆 */ .oval { border-radius: 50px; } /* 圆角 */ .fillet { border-radius: 5px; } /* 圆 */ .circle { /*宽高相等才能成为圆,但从视觉上来看,width比height多5px更为好看*/ width: 50px; height: 45px; border-radius: 50%; } </style>
三、总结
功能不多,更多的是样式的设计和颜色的搭配。
谦良恭卑,信诚实至;
生活不易,共勉同求。
原文地址:https://www.cnblogs.com/elsonww/p/11456244.html
- 1191: [HNOI2006]超级英雄Hero
- 2005: [Noi2010]能量采集
- 1067: [SCOI2007]降雨量
- 2761: [JLOI2011]不重复数字(哈希表)
- 1297: [SCOI2009]迷路
- Javascript DOM操作实例
- 2431: [HAOI2009]逆序对数列
- JavaScript实例---表格隔行变色以及移入鼠标高亮
- 1022: [SHOI2008]小约翰的游戏John
- Javascript数组
- 1588: [HNOI2002]营业额统计
- [git]撤销的相关命令:reset、revert、checkout
- Thrift教程初级篇——thrift安装环境变量配置第一个实例
- 1083: [SCOI2005]繁忙的都市
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- mybatis generator and 和or条件
- 『.Net反射』ILGenerator.Emit 动态MSIL 编程
- Spring通过XML配置文件以及通过注解形式来AOP 来实现前置,后置,环绕,异常通知
- 切面编程(环绕通知与前后置通知区别)
- Spring在代码中获取bean的几种方式
- Spring 一个接口多个实现类怎么注入
- ASP.NET MVC Controller的激活
- js 逗号表达式
- spring动态调用方法
- Spring AOP动态代理原理与实现方式
- 基于注解多数据源解决方案
- Java并发编程:CountDownLatch、CyclicBarrier和Semaphore
- 你需要实现一个高效的缓存,它允许多个用户读,但只允许一个用户写,以此来保持它的完整性,你会怎样去实现它?
- java阻塞队列得实现
- 谈谈如何利用 valgrind 排查内存错误