This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

完成button组件的重构

old
宇天 2021-01-28 11:24:46 +08:00
parent 646da06db1
commit 8b7f4b8267
4 changed files with 60 additions and 47 deletions

View File

@ -15,14 +15,6 @@ const VERSION = require('./package.json').version
const BUILD_DATE = new Date().format()
const BASE_SCSS = `
@mixin focus1(){
box-shadow: 0 0 3px var(--color-blue-1);
}
@mixin focus2(){
box-shadow: 0 0 3px var(--color-orange-1);
}
* {
box-sizing: border-box;
margin: 0;padding: 0;

View File

@ -15,14 +15,6 @@ const VERSION = require('./package.json').version
const BUILD_DATE = new Date().format()
const BASE_SCSS = `
@mixin focus1(){
box-shadow: 0 0 2px #88f7df;
}
@mixin focus2(){
box-shadow: 0 0 2px #f3be4d;
}
* {
box-sizing: border-box;
margin: 0;padding: 0;

View File

@ -45,35 +45,35 @@ code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
:root {
/* primary */
--color-teal-1: #4db6ac;
--color-teal-2: #26a69a;
--color-teal-3: #009688;
--color-teal-1: rgb(72, 201, 176);
--color-teal-2: rgb(26, 188, 156);
--color-teal-3: rgb(22, 160, 133);
/* sucess */
--color-green-1: #81c784;
--color-green-2: #66bb6a;
--color-green-3: #4caf50;
--color-green-1: rgb(88, 214, 141);
--color-green-2: rgb(46, 204, 113);
--color-green-3: rgb(39, 173, 96);
/* info */
--color-blue-1: #64b5f6;
--color-blue-2: #42a5f5;
--color-blue-3: #2196f3;
--color-blue-1: rgb(100, 181, 246);
--color-blue-2: rgb(66, 165, 245);
--color-blue-3: rgb(33, 150, 243);
/* danger */
--color-red-1: #ff5061;
--color-red-2: #eb3b48;
--color-red-3: #ce3742;
--color-red-1: rgb(255, 107, 129);
--color-red-2: rgb(255, 71, 87);
--color-red-3: rgb(230, 52, 67);
/* warning */
--color-orange-1: #ffb618;
--color-orange-2: #f39c12;
--color-orange-3: #e67e22;
--color-orange-1: rgb(244, 211, 19);
--color-orange-2: rgb(241, 196, 15);
--color-orange-3: rgb(205, 167, 13);
/* default1 */
--color-plain-1: #f2f5fc;
--color-plain-2: #e8ebf4;
--color-plain-3: #dae1e9;
--color-plain-1: rgb(242, 245, 252);
--color-plain-2: rgb(232, 235, 244);
--color-plain-3: rgb(218, 225, 233);
/* default2 */
--color-grey-1: #cacfd2;
--color-grey-2: #bdc3c7;
--color-grey-3: #a1a6a9;
--color-grey-1: rgb(206, 214, 224);
--color-grey-2: rgb(164, 176, 190);
--color-grey-3: rgb(134, 144, 155);
/* inverse */
--color-dark-1: #62778d;
--color-dark-2: #526273;
--color-dark-3: #425064;
--color-dark-1: rgb(65, 91, 118);
--color-dark-2: rgb(52, 73, 94);
--color-dark-3: rgb(44, 62, 80);
}

View File

@ -18,6 +18,7 @@
font-size: 14px;
vertical-align: middle;
cursor: pointer;
transition: box-shadow 0.15s linear;
button {
display: flex;
@ -37,7 +38,7 @@
outline: none;
color: inherit;
cursor: inherit;
transition: background 0.2s linear;
transition: background 0.15s linear;
&::-moz-focus-inner {
border: none;
@ -55,6 +56,10 @@
height: 52px;
font-size: 18px;
button {
padding: 0 24px;
}
.icon {
--size: 26px;
}
@ -72,7 +77,7 @@
height: 36px;
button {
padding: 0 15px;
padding: 0 18px;
}
}
:host([size='medium'][circle]) {
@ -84,7 +89,7 @@
font-size: 12px;
button {
padding: 0 5px;
padding: 0 6px;
}
.icon {
@ -140,6 +145,9 @@
background: var(--color-plain-3);
}
}
:host(:focus-within:not([link])) {
box-shadow: 0 0 0 2px rgba(242, 245, 252, 0.5);
}
// -------------
:host([type='danger']:not([link])) button {
@ -156,6 +164,9 @@
background: var(--color-red-3);
}
}
:host([type='danger']:focus-within:not([link])) {
box-shadow: 0 0 0 2px rgba(255, 107, 129, 0.5);
}
// -------------
:host([type='info']:not([link])) button {
@ -172,6 +183,9 @@
background: var(--color-blue-3);
}
}
:host([type='info']:focus-within:not([link])) {
box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.5);
}
// --------
:host([type='sucess']:not([link])) button {
@ -188,6 +202,9 @@
background: var(--color-green-3);
}
}
:host([type='sucess']:focus-within:not([link])) {
box-shadow: 0 0 0 2px rgba(88, 214, 141, 0.5);
}
// ---------
:host([type='primary']:not([link])) button {
@ -204,6 +221,9 @@
background: var(--color-teal-3);
}
}
:host([type='primary']:focus-within:not([link])) {
box-shadow: 0 0 0 2px rgba(72, 201, 176, 0.5);
}
// ----------
:host([type='warning']:not([link])) button {
@ -220,6 +240,9 @@
background: var(--color-orange-3);
}
}
:host([type='warning']:focus-within:not([link])) {
box-shadow: 0 0 0 2px rgba(244, 211, 19, 0.5);
}
// -------
:host([type='inverse']:not([link])) button {
@ -236,6 +259,9 @@
background: var(--color-dark-3);
}
}
:host([type='inverse']:focus-within:not([link])) {
box-shadow: 0 0 0 2px rgba(65, 91, 118, 0.5);
}
// -------
:host([type='default']:not([link])) button {
@ -252,6 +278,9 @@
background: var(--color-grey-3);
}
}
:host([type='default']:focus-within:not([link])) {
box-shadow: 0 0 0 2px rgba(206, 214, 224, 0.5);
}
:host([loading]),
:host([disabled]) {
@ -268,10 +297,6 @@
}
}
}
:host(:focus-within:not([link]):not([disabled]):not([loading])) {
@include focus1;
}
</style>
<script>
@ -314,10 +339,12 @@ export default class Button {
if ((type === 'boolean' && val) || type !== 'boolean') {
this.props.loading = true
this.__BTN__.disabled = true
this.__ICO__.setAttribute('is', 'loading')
this.setAttribute('loading', '')
} else {
this.props.loading = false
this.__BTN__.disabled = false
this.__ICO__.setAttribute('is', this.props.icon)
this.removeAttribute('loading')
}
@ -335,9 +362,11 @@ export default class Button {
}
if ((type === 'boolean' && val) || type !== 'boolean') {
this.props.disabled = true
this.__BTN__.disabled = true
this.setAttribute('disabled', '')
} else {
this.props.disabled = false
this.__BTN__.disabled = false
this.removeAttribute('disabled')
}
}