icon组件增加尺寸&颜色约束
parent
5fcd505739
commit
503e7ef06f
|
@ -63,7 +63,8 @@ function compileScss(code = '') {
|
|||
function mkWCFile({ style, html, js }) {
|
||||
style = compileScss(style)
|
||||
|
||||
let name, props
|
||||
let name = ''
|
||||
let props = ''
|
||||
|
||||
js = js.replace(/props = (\{[\w\W]*?\})/, function(s, 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">
|
||||
:host {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: nth($cd, 2);
|
||||
}
|
||||
:host(:not([is])) {
|
||||
display: none;
|
||||
}
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
fill: currentColor;
|
||||
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 {
|
||||
0% {
|
||||
stroke-dasharray: 0, 3812px;
|
||||
|
|
Reference in New Issue