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
宇天 2019-07-22 15:21:43 +08:00
parent 5ea37cb89f
commit 5fcd505739
5 changed files with 235 additions and 54 deletions

View File

@ -19,7 +19,7 @@ const BASE_SCSS = `
$ct: #3fc2a7 #19b491 #16967a; $ct: #3fc2a7 #19b491 #16967a;
$cg: #58d68d #2ecc71 #27ae60; $cg: #58d68d #2ecc71 #27ae60;
$cpp: #ac61ce #9b59b6 #8e44ad; $cpp: #ac61ce #9b59b6 #8e44ad;
$cb: #52a3de #2d8dd6 #2776b1; $cb: #66b1ff #409eff #3a8ee6;
$cr: #ff5061 #eb3b48 #ce3742; $cr: #ff5061 #eb3b48 #ce3742;
$co: #ffb618 #f39c12 #e67e22; $co: #ffb618 #f39c12 #e67e22;
$cp: #f3f5fb #e8ebf4 #dae1e9; $cp: #f3f5fb #e8ebf4 #dae1e9;
@ -111,6 +111,8 @@ function mkWCFile({ style, html, js }) {
'use strict' 'use strict'
const log = console.log
${js} ${js}
customElements.define('wc-${name.toLowerCase()}', ${name}) customElements.define('wc-${name.toLowerCase()}', ${name})

View File

@ -18,7 +18,7 @@ const BASE_SCSS = `
$ct: #3fc2a7 #19b491 #16967a; $ct: #3fc2a7 #19b491 #16967a;
$cg: #58d68d #2ecc71 #27ae60; $cg: #58d68d #2ecc71 #27ae60;
$cpp: #ac61ce #9b59b6 #8e44ad; $cpp: #ac61ce #9b59b6 #8e44ad;
$cb: #52a3de #2d8dd6 #2776b1; $cb: #66b1ff #409eff #3a8ee6;
$cr: #ff5061 #eb3b48 #ce3742; $cr: #ff5061 #eb3b48 #ce3742;
$co: #ffb618 #f39c12 #e67e22; $co: #ffb618 #f39c12 #e67e22;
$cp: #f3f5fb #e8ebf4 #dae1e9; $cp: #f3f5fb #e8ebf4 #dae1e9;

View File

@ -1,7 +1,7 @@
$ct: #3fc2a7 #19b491 #16967a; $ct: #3fc2a7 #19b491 #16967a;
$cg: #58d68d #2ecc71 #27ae60; $cg: #58d68d #2ecc71 #27ae60;
$cpp: #ac61ce #9b59b6 #8e44ad; $cpp: #ac61ce #9b59b6 #8e44ad;
$cb: #52a3de #2d8dd6 #2776b1; $cb: #66b1ff #409eff #3a8ee6;
$cr: #ff5061 #eb3b48 #ce3742; $cr: #ff5061 #eb3b48 #ce3742;
$co: #ffb618 #f39c12 #e67e22; $co: #ffb618 #f39c12 #e67e22;
$cp: #f3f5fb #e8ebf4 #dae1e9; $cp: #f3f5fb #e8ebf4 #dae1e9;

View File

@ -1,8 +1,8 @@
<template> <template>
<label> <button>
<wc-icon class="icon"></wc-icon> <wc-icon class="icon"></wc-icon>
<slot></slot> <slot></slot>
</label> </button>
</template> </template>
<style lang="scss"> <style lang="scss">
@ -11,60 +11,239 @@
display: inline-block; display: inline-block;
user-select: none; user-select: none;
color: nth($cd, 2); color: nth($cd, 2);
background: #fff; cursor: pointer;
vertical-align: top;
label { button {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-width: 60px; min-width: 32px;
min-height: 33px; height: 32px;
padding: 0 5px; padding: 0 5px;
height: 100%;
font-size: 14px; font-size: 14px;
border: 1px solid nth($cp, 3); border: 1px solid nth($cp, 3);
border-radius: 3px; border-radius: 4px;
cursor: pointer; background: #fff;
outline: none;
color: inherit;
cursor: inherit;
&:hover {
background: nth($cp, 1);
} }
label.mini { &:active {
height: 20px; border-color: nth($cgr, 1);
}
} }
.icon { .icon {
width: 20px; width: 18px;
height: 20px; height: 18px;
margin-right: 3px; margin-right: 3px;
} }
}
&([size="mini"]) label { :host([round]) button {
min-width: 50px; border-radius: 21px;
}
:host([circle]) {
button {
border-radius: 50%;
padding: 0;
}
.icon {
margin-right: 0;
}
}
:host([size='large']) {
button {
min-width: 120px;
height: 42px;
font-size: 16px;
}
.icon {
width: 20px;
height: 20px;
}
}
:host([size='large'][circle]) {
button {
min-width: 42px;
}
}
:host([size='medium']) {
button {
min-width: 90px;
height: 36px;
font-size: 14px;
}
.icon {
width: 18px;
height: 18px;
}
}
:host([size='medium'][circle]) {
button {
min-width: 36px;
}
}
:host([size='mini']) {
button {
min-width: 20px;
height: 20px; height: 20px;
font-size: 12px; font-size: 12px;
} }
.icon {
width: 14px;
height: 14px;
}
} }
:host([loading]) label, :host([loading]),
:host([disabled]) label { :host([disabled]) {
cursor: not-allowed; cursor: not-allowed;
color: nth($cp, 3); color: nth($cgr, 1);
wc-icon { .icon {
color: nth($cp, 3); color: nth($cgr, 1);
} }
button {
opacity: 0.6;
background: #fff;
}
}
:host([color]) {
color: #fff;
button {
border-color: transparent;
}
.icon {
color: #fff;
}
}
:host([color='red']) button {
background: nth($cr, 2);
&:hover {
background: nth($cr, 1);
}
&:active {
background: nth($cr, 3);
}
}
:host([color='red'][loading]) button,
:host([color='red'][disabled]) button {
background: nth($cr, 1);
}
:host([color='blue']) button {
background: nth($cb, 2);
&:hover {
background: nth($cb, 1);
}
&:active {
background: nth($cb, 3);
}
}
:host([color='blue'][loading]) button,
:host([color='blue'][disabled]) button {
background: nth($cb, 1);
}
:host([color='green']) button {
background: nth($cg, 2);
&:hover {
background: nth($cg, 1);
}
&:active {
background: nth($cg, 3);
}
}
:host([color='green'][loading]) button,
:host([color='green'][disabled]) button {
background: nth($cg, 1);
}
:host([color='teal']) button {
background: nth($ct, 2);
&:hover {
background: nth($ct, 1);
}
&:active {
background: nth($ct, 3);
}
}
:host([color='teal'][loading]) button,
:host([color='teal'][disabled]) button {
background: nth($ct, 1);
}
:host([color='orange']) button {
background: nth($co, 2);
&:hover {
background: nth($co, 1);
}
&:active {
background: nth($co, 3);
}
}
:host([color='orange'][loading]) button,
:host([color='orange'][disabled]) button {
background: nth($co, 1);
}
:host([color='dark']) button {
background: nth($cd, 2);
&:hover {
background: nth($cd, 1);
}
&:active {
background: nth($cd, 3);
}
}
:host([color='dark'][loading]) button,
:host([color='dark'][disabled]) button {
background: nth($cd, 1);
}
:host([color='purple']) button {
background: nth($cpp, 2);
&:hover {
background: nth($cpp, 1);
}
&:active {
background: nth($cpp, 3);
}
}
:host([color='purple'][loading]) button,
:host([color='purple'][disabled]) button {
background: nth($cpp, 1);
}
:host([color='grey']) button {
background: nth($cgr, 2);
&:hover {
background: nth($cgr, 1);
}
&:active {
background: nth($cgr, 3);
}
}
:host([color='grey'][loading]) button,
:host([color='grey'][disabled]) button {
background: nth($cgr, 1);
} }
</style> </style>
<script> <script>
import '../icon/index' import '../icon/index'
const log = console.log
export default class Button { export default class Button {
props = { props = {
icon: '', icon: '',
size: 'small', autofocus: '',
color: 'red',
loading: false, loading: false,
disabled: false disabled: false
} }
@ -72,6 +251,11 @@ export default class Button {
constructor() { constructor() {
/* render */ /* render */
// 圆形按钮不允许文字
if (this.hasAttribute('circle')) {
this.textContent = ''
}
this.__BTN__ = this.root.children[1] this.__BTN__ = this.root.children[1]
this.__ICO__ = this.__BTN__.children[0] this.__ICO__ = this.__BTN__.children[0]
} }
@ -118,22 +302,19 @@ export default class Button {
} }
mounted() { mounted() {
this.__BTN__.addEventListener( this._handleClick = ev => {
'click',
ev => {
if (this.props.loading || this.props.disabled) { if (this.props.loading || this.props.disabled) {
// 阻止事件冒泡, 避免用户自己绑定click事件不受这2个值的限制 // 阻止事件冒泡, 避免用户自己绑定click事件不受这2个值的限制
ev.cancelBubble = true ev.cancelBubble = true
return return
} }
this.dispatchEvent(new CustomEvent('active')) this.dispatchEvent(new CustomEvent('active'))
}, }
false this.__BTN__.addEventListener('click', this._handleClick, false)
)
} }
unmount() { unmount() {
log(this) this.__BTN__.removeEventListener('click', this._handleClick)
} }
watch(name, old, val) { watch(name, old, val) {
@ -153,9 +334,10 @@ export default class Button {
} }
break break
case 'size': case 'autofocus':
this.props.size = val || 'small' setTimeout(_ => {
this.__BTN__.classList.add(this.props.size) this.__BTN__.focus()
}, 10)
break break
case 'loading': case 'loading':

View File

@ -11,11 +11,10 @@
display: none; display: none;
} }
.icon { .icon {
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
fill: currentColor; fill: currentColor;
overflow: hidden; vertical-align: -0.1em;
&.load { &.load {
animation: load 1.5s linear infinite; animation: load 1.5s linear infinite;
@ -52,8 +51,6 @@
<script> <script>
import SVG_DICT from './svg' import SVG_DICT from './svg'
const log = console.log
export default class Icon { export default class Icon {
props = { props = {
is: '' is: ''