完成文本框
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
|
export default Anot
|
||||||
|
|
|
@ -201,3 +201,61 @@
|
||||||
&.disabled.checked &__box {background:nth($cp, 3);}
|
&.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