bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化button和link组件

master
yutent 2023-11-21 10:03:28 +08:00
parent 9241300b1c
commit bef7dac956
2 changed files with 11 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/form/button.js
View File

@ -15,10 +15,10 @@ class Button extends Component {
type: Boolean, type: Boolean,
observer(val) { observer(val) {
if (val) { if (val) {
this.cacheIcon = this.icon this.#cacheIcon = this.icon
this.icon = 'loading' this.icon = 'loading'
} else { } else {
this.icon = this.cacheIcon === void 0 ? this.icon : this.cacheIcon this.icon = this.#cacheIcon === void 0 ? this.icon : this.#cacheIcon
} }
} }
}, },
@ -51,6 +51,7 @@ class Button extends Component {
min-width: 1px; min-width: 1px;
height: inherit; height: inherit;
padding: var(--wc-button-padding, 0 4px); padding: var(--wc-button-padding, 0 4px);
gap: 4px;
line-height: 1; line-height: 1;
border: 1px solid var(--wc-button-border-color, var(--color-grey-2)); border: 1px solid var(--wc-button-border-color, var(--color-grey-2));
border-radius: inherit; border-radius: inherit;
@ -95,7 +96,6 @@ class Button extends Component {
} }
.icon { .icon {
margin-right: 4px;
--wc-icon-size: var(--wc-button-icon-size, 14px); --wc-icon-size: var(--wc-button-icon-size, 14px);
} }
} }
@ -120,11 +120,6 @@ class Button extends Component {
:host(:focus-within) { :host(:focus-within) {
box-shadow: 0 0 0 2px var(--color-plain-a); box-shadow: 0 0 0 2px var(--color-plain-a);
} }
:host(:empty) {
button .icon {
margin-right: 0;
}
}
`, `,
// 尺寸 // 尺寸
css` css`
@ -185,9 +180,6 @@ class Button extends Component {
button { button {
padding: 0; padding: 0;
} }
.icon {
margin-right: 0;
}
slot { slot {
display: none; display: none;
@ -259,6 +251,8 @@ class Button extends Component {
` `
] ]
#cacheIcon
created() { created() {
this.stamp = 0 this.stamp = 0
@ -283,7 +277,7 @@ class Button extends Component {
mounted() { mounted() {
if (this.autofocus) { if (this.autofocus) {
nextTick(_ => this.$refs.btn.focus()) this.$refs.btn.focus()
} }
} }
@ -291,7 +285,7 @@ class Button extends Component {
return html` return html`
<button ref="btn" disabled=${this.disabled || this.loading}> <button ref="btn" disabled=${this.disabled || this.loading}>
<wc-icon class="icon" name=${this.icon}></wc-icon> <wc-icon class="icon" name=${this.icon}></wc-icon>
<slot ref="cont"></slot> <slot></slot>
</button> </button>
` `
} }

13
src/form/link.js
View File

@ -8,7 +8,6 @@ import { css, html, Component, bind, nextTick } from 'wkit'
class Link extends Component { class Link extends Component {
static props = { static props = {
type: 'primary',
to: '', to: '',
autofocus: false, autofocus: false,
disabled: false, disabled: false,
@ -31,13 +30,11 @@ class Link extends Component {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: var(--padding, 0 2px); padding: var(--wc-link-padding, 0 2px);
line-height: 1; line-height: 1;
font-size: inherit;
font-family: inherit;
outline: none;
color: inherit; color: inherit;
cursor: inherit; cursor: inherit;
outline: none;
text-decoration: none; text-decoration: none;
transition: color 0.15s linear; transition: color 0.15s linear;
-webkit-user-select: none; -webkit-user-select: none;
@ -54,7 +51,7 @@ class Link extends Component {
left: 0; left: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
border-bottom: 1px dashed transparent; border-bottom: 1px dashed var(--color-grey-1);
content: ''; content: '';
opacity: 0; opacity: 0;
transition: opacity 0.15s linear; transition: opacity 0.15s linear;
@ -68,9 +65,7 @@ class Link extends Component {
info: 'blue', info: 'blue',
success: 'green', success: 'green',
warning: 'orange', warning: 'orange',
danger: 'red', danger: 'red'
secondary: 'dark',
help: 'grey'
); );
@loop $t, $c in $colors { @loop $t, $c in $colors {