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

icon组件增加尺寸&颜色约束

old
宇天 2019-07-22 21:18:33 +08:00
parent 5fcd505739
commit 503e7ef06f
3 changed files with 120 additions and 3 deletions

View File

@ -63,7 +63,8 @@ function compileScss(code = '') {
function mkWCFile({ style, html, js }) { function mkWCFile({ style, html, js }) {
style = compileScss(style) style = compileScss(style)
let name, props let name = ''
let props = ''
js = js.replace(/props = (\{[\w\W]*?\})/, function(s, m) { js = js.replace(/props = (\{[\w\W]*?\})/, function(s, m) {
props = m props = m

70
src/form/input.wc Normal file
View File

@ -0,0 +1,70 @@
<template>
<label>
<slot name="left"></slot>
<input />
<wc-icon></wc-icon>
<slot class="append" name="append"></slot>
</label>
</template>
<style lang="scss">
:host {
display: inline-block;
user-select: none;
color: nth($cd, 2);
}
label {
display: flex;
justify-content: center;
align-items: center;
min-width: 32px;
height: 32px;
font-size: 14px;
border: 1px solid nth($cp, 3);
border-radius: 4px;
background: #fff;
color: inherit;
cursor: inherit;
input,
textarea {
padding: 0 5px;
border: 0;
border-radius: inherit;
color: inherit;
font-size: inherit;
background: none;
outline: none;
box-shadow: none;
}
.append {
display: inherit;
width: auto;
height: 30px;
padding: 0 18px;
border-left: 1px solid nth($cp, 3);
border-radius: 0 4px 4px 0;
background: nth($cp, 1);
}
}
</style>
<script>
import '../icon/index'
export default class Input {
props = {
value: '',
defaultValue: '',
placeholder: ''
}
constructor() {
/* render */
this.__OUTER__ = this.root.children[1]
this.__INPUT__ = this.__OUTER__.children[1]
this.__ICO__ = this.__OUTER__.children[2]
}
}
</script>

View File

@ -5,14 +5,16 @@
<style lang="scss"> <style lang="scss">
:host { :host {
display: inline-block; display: inline-block;
width: 32px;
height: 32px;
color: nth($cd, 2); color: nth($cd, 2);
} }
:host(:not([is])) { :host(:not([is])) {
display: none; display: none;
} }
.icon { .icon {
width: 100%; width: inherit;
height: 100%; height: inherit;
fill: currentColor; fill: currentColor;
vertical-align: -0.1em; vertical-align: -0.1em;
@ -26,6 +28,50 @@
} }
} }
:host([size='large']) .icon {
width: 42px;
height: 42px;
}
:host([size='medium']) .icon {
width: 38px;
height: 38px;
}
:host([size='mini']) .icon {
width: 20px;
height: 20px;
}
:host([color='red']) .icon {
color: nth($cr, 2);
}
:host([color='blue']) .icon {
color: nth($cb, 2);
}
:host([color='green']) .icon {
color: nth($cg, 2);
}
:host([color='teal']) .icon {
color: nth($ct, 2);
}
:host([color='orange']) .icon {
color: nth($co, 2);
}
:host([color='dark']) .icon {
color: nth($cd, 2);
}
:host([color='purple']) .icon {
color: nth($cpp, 2);
}
:host([color='grey']) .icon {
color: nth($cgr, 2);
}
@keyframes circle { @keyframes circle {
0% { 0% {
stroke-dasharray: 0, 3812px; stroke-dasharray: 0, 3812px;