完成button组件的重构
parent
646da06db1
commit
8b7f4b8267
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
|
|
Reference in New Issue