icon组件增加尺寸&颜色约束
parent
5fcd505739
commit
503e7ef06f
|
@ -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
|
||||||
|
|
|
@ -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>
|
|
@ -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;
|
||||||
|
|
Reference in New Issue