完成 tag组件的重构
parent
a28a693766
commit
420bf73c03
|
|
@ -4,7 +4,7 @@
|
||||||
* @date 2023/03/06 15:17:25
|
* @date 2023/03/06 15:17:25
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { css, svg, html, Component } from 'wkit'
|
import { css, svg, html, Component, classMap } from 'wkit'
|
||||||
|
|
||||||
import SVG_DICT from './svg.js'
|
import SVG_DICT from './svg.js'
|
||||||
|
|
||||||
|
|
@ -35,7 +35,7 @@ class Icon extends Component {
|
||||||
:host(:not([name])) {
|
:host(:not([name])) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.icon {
|
.svg {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -91,11 +91,11 @@ class Icon extends Component {
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<svg
|
<svg
|
||||||
class="icon ${this.name === 'loading' ? 'loading' : ''}"
|
class=${classMap({ svg: true, loading: this.name === 'loading' })}
|
||||||
viewBox="0 0 1024 1024"
|
viewBox="0 0 1024 1024"
|
||||||
>
|
>
|
||||||
${this.name === 'loading'
|
${this.name === 'loading'
|
||||||
? svg`<circle class="circle" cx="512" cy="512" r="384" fill="none" stroke-width="80" />`
|
? svg`<circle cx="512" cy="512" r="384" fill="none" stroke-width="80" />`
|
||||||
: svg`<path d="${dict[this.name]}" />`}
|
: svg`<path d="${dict[this.name]}" />`}
|
||||||
</svg>
|
</svg>
|
||||||
`
|
`
|
||||||
|
|
|
||||||
214
src/tag/index.js
214
src/tag/index.js
|
|
@ -4,65 +4,48 @@
|
||||||
* @date 2023/04/28 16:14:10
|
* @date 2023/04/28 16:14:10
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { css, html, Component, styleMap } from 'wkit'
|
import { css, html, Component } from 'wkit'
|
||||||
import '../icon/index.js'
|
import '../icon/index.js'
|
||||||
|
|
||||||
const ANIMATION = {
|
const ANIMATION = { type: 'scale' }
|
||||||
duration: 100,
|
|
||||||
custom: [{ transform: 'scaleX(0)' }, { transform: 'scaleX(1)' }]
|
|
||||||
}
|
|
||||||
|
|
||||||
class Tag extends Component {
|
class Tag extends Component {
|
||||||
static props = {
|
static props = {
|
||||||
type: {
|
closable: false
|
||||||
type: String,
|
|
||||||
default: 'default'
|
|
||||||
},
|
|
||||||
closable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
hit: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
color: '',
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
default: 'xl'
|
|
||||||
},
|
|
||||||
effect: {
|
|
||||||
type: String,
|
|
||||||
default: 'light' // dark / light / plain
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static styles = [
|
static styles = [
|
||||||
css`
|
css`
|
||||||
:host {
|
:host {
|
||||||
position: relative;
|
display: inline-flex;
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag {
|
.container {
|
||||||
display: inline-block;
|
display: flex;
|
||||||
box-sizing: border-box;
|
align-items: center;
|
||||||
width: 100%;
|
width: auto;
|
||||||
font-size: 12px;
|
height: 32px;
|
||||||
border-radius: 4px;
|
padding: 0 10px;
|
||||||
|
gap: 3px;
|
||||||
|
font-size: var(--wc-tag-font, 12px);
|
||||||
|
border: 1px solid var(--wc-tag-border-color, var(--color-grey-1));
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--wc-tag-background, var(--color-plain-1));
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
.close-btn {
|
.close {
|
||||||
padding: 4px;
|
padding: 3px;
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
line-height: 0;
|
--wc-icon-size: 8px;
|
||||||
|
line-height: 1;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
vertical-align: middle;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: pink;
|
background: var(--color-grey-2);
|
||||||
cursor: pointer;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
|
|
@ -72,143 +55,80 @@ class Tag extends Component {
|
||||||
$sizes: (
|
$sizes: (
|
||||||
s: (
|
s: (
|
||||||
h: 20px,
|
h: 20px,
|
||||||
p: 0 5px,
|
p: 0 6px
|
||||||
s: 0.7
|
|
||||||
),
|
),
|
||||||
m: (
|
m: (
|
||||||
h: 24px,
|
h: 24px,
|
||||||
p: 0 8px,
|
p: 0 8px
|
||||||
s: 0.8
|
|
||||||
),
|
|
||||||
l: (
|
|
||||||
h: 28px,
|
|
||||||
p: 0 10px,
|
|
||||||
s: 0.8
|
|
||||||
),
|
|
||||||
xl: (
|
|
||||||
h: 32px,
|
|
||||||
p: 0 10px,
|
|
||||||
s: 1
|
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
@loop $s, $v in $sizes {
|
@loop $s, $v in $sizes {
|
||||||
:host([size='#{$s}']) {
|
:host([size='#{$s}']) {
|
||||||
height: map.get($v, 'h');
|
.container {
|
||||||
.tag {
|
height: map.get($v, 'h');
|
||||||
padding: map.get($v, 'p');
|
padding: map.get($v, 'p');
|
||||||
line-height: calc(map.get($v, 'h') - 2px);
|
|
||||||
}
|
|
||||||
.close-btn {
|
|
||||||
--wc-icon-size: 10px;
|
|
||||||
transform: scale(map.get($v, 's'));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
// 配色
|
// 配色
|
||||||
css`
|
css`
|
||||||
|
@use 'sass:map';
|
||||||
$colors: (
|
$colors: (
|
||||||
default: 'plain',
|
primary: (
|
||||||
info: 'grey',
|
c: 'teal',
|
||||||
success: 'green',
|
b: #ecf5ff
|
||||||
warning: 'orange',
|
),
|
||||||
danger: 'red'
|
info: (
|
||||||
|
c: 'blue',
|
||||||
|
b: #ecf5ff
|
||||||
|
),
|
||||||
|
success: (
|
||||||
|
c: 'green',
|
||||||
|
b: #f0f9eb
|
||||||
|
),
|
||||||
|
warning: (
|
||||||
|
c: 'orange',
|
||||||
|
b: #fdf6ec
|
||||||
|
),
|
||||||
|
danger: (
|
||||||
|
c: 'red',
|
||||||
|
b: #fef0f0
|
||||||
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
@loop $t, $c in $colors {
|
@loop $t, $v in $colors {
|
||||||
:host([type='#{$t}']) {
|
:host([type='#{$t}']) {
|
||||||
&:host([effect='light']) {
|
.container {
|
||||||
.tag {
|
border-color: var(--color-#{map.get($v, 'c')}-a);
|
||||||
background-color: var(--color-#{$c}-a);
|
background: #{map.get($v, 'b')};
|
||||||
border: 1px solid transparent;
|
color: var(--color-#{map.get($v, 'c')}-3);
|
||||||
@if $t == 'default' {
|
|
||||||
color: var(--color-blue-3);
|
|
||||||
} @else {
|
|
||||||
color: var(--color-#{$c}-3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.close-btn:hover {
|
|
||||||
color: #fff;
|
|
||||||
@if $t == 'default' {
|
|
||||||
background-color: var(--color-blue-2);
|
|
||||||
} @else {
|
|
||||||
background-color: var(--color-#{$c}-2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
.close:hover {
|
||||||
&:host([effect='dark']) {
|
color: #fff;
|
||||||
.tag {
|
background: var(--color-#{map.get($v, 'c')}-1);
|
||||||
@if $t == 'default' {
|
|
||||||
background-color: var(--color-blue-3);
|
|
||||||
border: 1px solid var(--color-blue-3);
|
|
||||||
} @else {
|
|
||||||
background-color: var(--color-#{$c}-3);
|
|
||||||
border: 1px solid var(--color-#{$c}-3);
|
|
||||||
}
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.close-btn:hover {
|
|
||||||
@if $t == 'default' {
|
|
||||||
background-color: var(--color-blue-1);
|
|
||||||
} @else {
|
|
||||||
background-color: var(--color-#{$c}-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:host([effect='plain']) {
|
|
||||||
.tag {
|
|
||||||
@if $t == 'default' {
|
|
||||||
color: var(--color-blue-3);
|
|
||||||
} @else {
|
|
||||||
color: var(--color-#{$c}-3);
|
|
||||||
}
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid var(--color-#{$c}-a);
|
|
||||||
}
|
|
||||||
.close-btn:hover {
|
|
||||||
color: #fff;
|
|
||||||
@if $t == 'default' {
|
|
||||||
background-color: var(--color-blue-1);
|
|
||||||
} @else {
|
|
||||||
background-color: var(--color-#{$c}-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:host([hit]) .tag {
|
|
||||||
@if $t == 'default' {
|
|
||||||
border: 1px solid var(--color-blue-3);
|
|
||||||
} @else {
|
|
||||||
border: 1px solid var(--color-#{$c}-3);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
]
|
]
|
||||||
|
|
||||||
handleClose() {
|
#close() {
|
||||||
this.$refs.tag.$animate(true).then(() => this.$emit('close'))
|
this.$refs.tag.$animate(true).then(_ => this.remove())
|
||||||
|
this.$emit('close')
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<span
|
<main class="container" ref="tag" #animation=${ANIMATION}>
|
||||||
class="tag"
|
|
||||||
#animation=${ANIMATION}
|
|
||||||
ref="tag"
|
|
||||||
style=${styleMap({ 'background-color': this.color })}
|
|
||||||
>
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
${this.closable
|
${this.closable
|
||||||
? html`<div class="close-btn" @click=${this.handleClose}>
|
? html`<span class="close" @click=${this.#close}
|
||||||
<wc-icon name="close"></wc-icon>
|
><wc-icon name="close"></wc-icon
|
||||||
</div>`
|
></span>`
|
||||||
: ''}
|
: ''}
|
||||||
</span>
|
</main>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue