完成文本框

src/js/form/index.js

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

src/js/form/style.scss

@@ -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);}
+
+}