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

完成文本框

old
宇天 2018-06-15 17:58:12 +08:00
parent 9c54ccd5a6
commit 9d1a378402
2 changed files with 127 additions and 0 deletions

View File

@ -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

View File

@ -201,3 +201,61 @@
&.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);}
}