完成文本框
parent
9c54ccd5a6
commit
9d1a378402
|
@ -206,4 +206,73 @@ Anot.component('checkbox', {
|
|||
}
|
||||
})
|
||||
|
||||
// 文本输入框
|
||||
Anot.component('input', {
|
||||
__init__(props, state, next) {
|
||||
state.text = this.textContent
|
||||
if (props.hasOwnProperty('disabled')) {
|
||||
state.disabled = true
|
||||
}
|
||||
if (props.iconR) {
|
||||
state.pos = 'right'
|
||||
props.icon = props.iconR
|
||||
delete props.iconR
|
||||
}
|
||||
this.classList.add('do-input')
|
||||
this.classList.add('do-fn-noselect')
|
||||
this.classList.add(props.color || 'grey')
|
||||
if (props.icon) {
|
||||
this.classList.add('icon-' + state.pos)
|
||||
}
|
||||
this.setAttribute(':class', '{disabled: disabled, active: active}')
|
||||
this.setAttribute(
|
||||
':css',
|
||||
'{width: props.width, height: props.height, lineHeight: props.height + "px"}'
|
||||
)
|
||||
|
||||
delete props.disabled
|
||||
delete props.color
|
||||
next()
|
||||
},
|
||||
render() {
|
||||
let { icon, placeholder } = this.props
|
||||
let holder = `
|
||||
<span
|
||||
class="do-input__holder"
|
||||
:class="{visible: !value || active}"
|
||||
:text="props.placeholder"></span>`
|
||||
let input = `
|
||||
<input
|
||||
class="do-input__input"
|
||||
:attr-disabled="disabled"
|
||||
:duplex="value"
|
||||
:blur="onBlur"
|
||||
:focus="onFocus" />`
|
||||
let ico = icon ? `<i class="do-input__icon do-icon-${icon}"></i>` : ''
|
||||
|
||||
return holder + input + ico
|
||||
},
|
||||
state: {
|
||||
pos: 'left', // icon position
|
||||
value: '',
|
||||
disabled: false,
|
||||
active: false
|
||||
},
|
||||
skip: ['pos'],
|
||||
props: {
|
||||
width: 180,
|
||||
height: 30,
|
||||
placeholder: '',
|
||||
default: ''
|
||||
},
|
||||
methods: {
|
||||
onFocus() {
|
||||
this.active = true
|
||||
},
|
||||
onBlur() {
|
||||
this.active = false
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Anot
|
||||
|
|
|
@ -200,4 +200,62 @@
|
|||
&.disabled.checked {color:nth($cgr, 2);}
|
||||
&.disabled.checked &__box {background:nth($cp, 3);}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.do-input {position:relative;display:inline-block;width:180px;height:30px;line-height:30px;border-bottom:1px solid nth($cp, 1);cursor:default;font-size:14px;
|
||||
|
||||
&.icon-left {padding-left:30px;}
|
||||
&.icon-right {padding-right:30px;}
|
||||
|
||||
&__holder {visibility:hidden;position:absolute;bottom:0;left:0;width:100%;height:30px;color: nth($cp, 3);@include ts(bottom, .2s);
|
||||
|
||||
&.visible {visibility:visible;}
|
||||
}
|
||||
&__input {position:relative;width:100%;height:30px;border:0;background:none;font-size:14px;color:nth($cgr, 1);}
|
||||
&__icon {position:absolute;bottom:0;width:30px;height:30px;text-align:center;font-size:20px;}
|
||||
|
||||
&::after {position:absolute;left:50%;bottom:-1px;width:0;height:2px;content:"";transition:left .15s linear,width .15s linear;}
|
||||
|
||||
&.active &__holder {bottom:20px;}
|
||||
&.active::after {left:0;width:100%;}
|
||||
|
||||
&.icon-left &__icon {left:0;}
|
||||
&.icon-right &__icon {right:0;}
|
||||
|
||||
&.icon-left &__holder {padding-left:30px;}
|
||||
&.icon-right &__holder {padding-right:30px;}
|
||||
|
||||
&.grey {color:nth($cgr, 1);
|
||||
&::after {background:nth($cgr, 2);}
|
||||
}
|
||||
|
||||
&.teal{color:nth($ct, 1);
|
||||
&::after {background:nth($ct, 2);}
|
||||
}
|
||||
|
||||
&.green {color:nth($cg, 1);
|
||||
&::after {background:nth($cg, 2);}
|
||||
}
|
||||
|
||||
&.red {color:nth($cr, 1);
|
||||
&::after {background:nth($cr, 2);}
|
||||
}
|
||||
|
||||
&.blue {color:nth($cb, 1);
|
||||
&::after {background:nth($cb, 2);}
|
||||
}
|
||||
|
||||
&.purple {color:nth($cpp, 1);
|
||||
&::after {background:nth($cpp, 2);}
|
||||
}
|
||||
|
||||
&.orange {color:nth($co, 1);
|
||||
&::after {background:nth($co, 2);}
|
||||
}
|
||||
|
||||
&.disabled {background:#fff8ed;color:nth($cp, 3);}
|
||||
&.disabled &__input {cursor:not-allowed;color:nth($cp, 3);}
|
||||
|
||||
}
|
Reference in New Issue