增加dropdown组件

src/form/dropdown.wc

@@ -0,0 +1,219 @@
+<template>
+  <div class="label">
+    <section class="preview">
+      <input readonly />
+      <wc-icon is="left"></wc-icon>
+    </section>
+    <ul class="options-box"></ul>
+    <slot name="option"></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+ul,
+li {
+  list-style: none;
+}
+slot {
+  display: none;
+}
+:host {
+  display: inline-flex;
+  min-width: 72px;
+  width: 128px;
+  height: 36px;
+  border-radius: 3px;
+  user-select: none;
+  -moz-user-select: none;
+  color: var(--color-dark-1);
+  font-size: 14px;
+  cursor: pointer;
+  transition: box-shadow 0.15s linear;
+
+  .label {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    line-height: 1;
+    border: 1px solid var(--color-grey-2);
+    border-radius: inherit;
+    white-space: nowrap;
+    background: #fff;
+    cursor: inherit;
+    transition: background 0.15s linear;
+  }
+
+  .preview {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 8px;
+
+    input {
+      flex: 1;
+      width: 0;
+      border: 0;
+      font: inherit;
+      color: inherit;
+      background: none;
+      outline: none;
+      cursor: inherit;
+
+      &::placeholder {
+        color: var(--color-grey-1);
+      }
+    }
+    wc-icon {
+      --size: 16px;
+      transform: rotate(-90deg);
+    }
+  }
+
+  .options-box {
+    overflow: hidden;
+    visibility: hidden;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 0;
+    top: 36px;
+    width: 100%;
+    height: 0;
+    border-radius: 3px;
+    background: #fff;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
+    transition: height 0.15s linear;
+
+    li {
+      display: flex;
+      align-items: center;
+      height: 32px;
+      padding: 0 8px;
+      transition: background 0.15s linear;
+
+      &:hover,
+      &.active {
+        background: var(--color-plain-1);
+      }
+    }
+
+    &.active {
+      visibility: visible;
+      height: auto;
+      padding: 6px 0;
+    }
+  }
+}
+
+:host(:focus-within) {
+  box-shadow: 0 0 0 2px var(--color-plain-a);
+}
+</style>
+
+<script>
+import '../icon/index'
+import $ from '../utils'
+
+export default class Dropdown {
+  props = {
+    value: '',
+    placeholder: ''
+  }
+
+  state = {
+    optionShow: false,
+    options: []
+  }
+
+  __init__() {
+    /* render */
+
+    var outbox = this.root.children[1]
+    this.__PREVIEW__ = outbox.children[0]
+    this.__OPTIONS__ = outbox.children[1]
+    this.__SLOT__ = outbox.children[2]
+    this.__INPUT__ = this.__PREVIEW__.children[0]
+    this.__ICO__ = this.__PREVIEW__.children[1]
+  }
+
+  get value() {
+    return this.props.value
+  }
+
+  set value(val) {
+    this.props.value = val
+    for (let it of this.state.options) {
+      if (it.opt.value === val) {
+        this.__INPUT__.value = it.label
+        break
+      }
+    }
+  }
+
+  mounted() {
+    let opts = this.__SLOT__.assignedNodes()
+    this.state.options = []
+
+    this.__OPTIONS__.innerHTML = opts
+      .map(it => {
+        let attr = ''
+        let tmp = { label: it.textContent, opt: { ...it.dataset } }
+        for (let k in tmp.opt) {
+          attr += `data-${k}="${tmp.opt[k]}" `
+        }
+        tmp.label = tmp.label || tmp.opt.value
+        tmp.opt.value = tmp.opt.value || tmp.label
+
+        this.state.options.push(tmp)
+        return `<li ${attr}>${tmp.label}</li>`
+      })
+      .join('')
+
+    this._activeFn = $.bind(this.__PREVIEW__, 'click', ev => {
+      this.state.optionShow = !this.state.optionShow
+      this.__OPTIONS__.classList.toggle('active', this.state.optionShow)
+    })
+
+    this._pickedFn = $.bind(this.__OPTIONS__, 'click', ev => {
+      if (ev.target === ev.currentTarget) {
+        return
+      }
+
+      let detail = { ...ev.target.dataset }
+      this.__INPUT__.value = ev.target.textContent
+      this.props.value = detail.value || ev.target.textContent
+
+      this.dispatchEvent(new CustomEvent('input'))
+      this.dispatchEvent(new CustomEvent('select', { detail }))
+
+      this.state.optionShow = false
+      this.__OPTIONS__.classList.toggle('active', false)
+    })
+
+    this._inactiveFn = $.outside(this, ev => {
+      this.state.optionShow = false
+      this.__OPTIONS__.classList.toggle('active', false)
+    })
+  }
+
+  unmount() {
+    this.state.options = []
+    $.unbind(this.__PREVIEW__, 'click', this._activeFn)
+    $.unbind(this.__OPTIONS__, 'click', this._pickedFn)
+    $.clearOutside(this._inactiveFn)
+  }
+
+  watch() {
+    switch (name) {
+      case 'placeholder':
+        this.__INPUT__.placeholder = val || ''
+        break
+
+      default:
+        break
+    }
+  }
+}
+</script>

src/form/index.js

@@ -8,4 +8,5 @@ import './radio'
 import './checkbox'
 import './switch'
 import './select'
+import './dropdown'
 import './star'

src/form/input.wc

@@ -51,8 +51,8 @@ li {
     padding: 0 8px;
     border: 0;
     border-radius: inherit;
-    color: inherit;
     font: inherit;
+    color: inherit;
     background: none;
     outline: none;
     box-shadow: none;

src/form/select.wc

@@ -1,9 +1,7 @@
 <template>
   <div class="label">
-    <slot class="prepend" name="prepend"></slot>
     <input readonly />
     <wc-icon class="arrow" is="left"></wc-icon>
-    <slot class="append" name="append"></slot>
     <div class="opt-box">
       <wc-scroll>
         <dl class="list"></dl>
@@ -15,38 +13,38 @@
 <style lang="scss">
 :host {
   overflow: hidden;
-  display: inline-block;
+  display: inline-flex;
+  min-width: 128px;
   user-select: none;
   -moz-user-select: none;
-  color: var(--color-dark-2);
+  color: var(--color-dark-1);
-  border-radius: 2px;
+  border-radius: 3px;
+  cursor: text;
+  transition: box-shadow 0.15s linear;
 }
 .label {
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
-  min-width: 64px;
+  height: 36px;
-  width: 100%;
-  height: 32px;
-  line-height: 1;
   font-size: 14px;
-  border: 1px solid var(--color-plain-3);
+  border: 1px solid var(--color-grey-2);
   border-radius: inherit;
-  background: #fff;
+  background: var(--bg-color, #fff);
   color: inherit;
-  cursor: default;
+  cursor: inherit;
 
   input {
     flex: 1;
-    width: 0;
+    min-width: 36px;
-    min-width: 64px;
     width: 0;
     height: 100%;
-    padding: 0 5px;
+    padding: 0 8px;
     border: 0;
     border-radius: inherit;
     color: inherit;
-    font-size: inherit;
+    font: inherit;
     background: none;
     outline: none;
     box-shadow: none;
@@ -63,23 +61,28 @@
     justify-content: center;
     align-items: center;
     width: auto;
-    height: 30px;
+    height: 34px;
     padding: 0 10px;
+    line-height: 1;
     white-space: nowrap;
-    background: var(--color-plain-1);
   }
   .prepend {
-    border-right: 1px solid var(--color-plain-3);
+    border-right: 1px solid var(--color-grey-a);
-    border-radius: 2px 0 0 2px;
+    border-radius: 6px 0 0 6px;
   }
   .append {
-    border-left: 1px solid var(--color-plain-3);
+    border-left: 1px solid var(--color-grey-a);
-    border-radius: 0 2px 2px 0;
+    border-radius: 0 6px 6px 0;
   }
   &[prepend] .prepend,
   &[append] .append {
     display: flex;
   }
+  &[prepend] input,
+  &[append] input {
+    min-width: 64px;
+  }
+
   /* ----- */
   .arrow {
     padding: 0 5px;
@@ -91,34 +94,23 @@
 
 .opt-box {
   display: none;
+  overflow: hidden;
   position: fixed;
-  z-index: 10260;
+  z-index: 10240;
   left: 0;
   top: 0;
   width: 200px;
   height: auto;
   max-height: 200px;
-  padding: 8px 0;
+  min-height: 46px;
-  border-radius: 2px;
+  padding: 4px 0;
-  background: #fff;
+  border-radius: 4px;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
+  background: var(--color-plain-1);
-  cursor: default;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
 
   .list {
     width: 100%;
   }
-
-  &::after {
-    position: absolute;
-    left: 30px;
-    top: -4px;
-    width: 8px;
-    height: 8px;
-    background: #fff;
-    box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
-    transform: rotate(45deg);
-    content: '';
-  }
   &.show {
     display: flex;
   }
@@ -172,10 +164,7 @@
 }
 
 :host(:focus-within) {
-  @include focus1;
+  box-shadow: 0 0 0 2px var(--color-plain-a);
-}
-:host(:focus-within[readonly]) {
-  @include focus2;
 }
 
 /* 额外样式 */
@@ -277,10 +266,8 @@ export default class Select {
     /* render */
 
     this.__OUTER__ = this.root.children[1]
-    this.__PREPEND__ = this.__OUTER__.children[0]
+    this.__INPUT__ = this.__OUTER__.children[0]
-    this.__INPUT__ = this.__OUTER__.children[1]
+    this.__OPTG__ = this.__OUTER__.children[2]
-    this.__APPEND__ = this.__OUTER__.children[3]
-    this.__OPTG__ = this.__OUTER__.children[4]
   }
 
   get readOnly() {
@@ -416,24 +403,6 @@ export default class Select {
   }
 
   mounted() {
-    var prepend = this.__PREPEND__.assignedNodes()
-    var append = this.__APPEND__.assignedNodes()
-
-    // 相同插槽, 只允许1个
-    while (prepend.length > 1) {
-      this.removeChild(prepend.pop())
-    }
-    while (append.length > 1) {
-      this.removeChild(append.pop())
-    }
-
-    if (prepend.length && this.props.type !== 'textarea') {
-      this.__OUTER__.setAttribute('prepend', '')
-    }
-    if (append.length && this.props.type !== 'textarea') {
-      this.__OUTER__.setAttribute('append', '')
-    }
-
     function initPos() {
       var { x, y, width } = this.getBoundingClientRect()
       var size = this.getAttribute('size')

src/form/textarea.wc

@@ -1,54 +1,40 @@
 <template>
   <div class="label">
-    <slot class="prepend" name="prepend"></slot>
+    <textarea spellcheck="false"></textarea>
-    ${input}
+    <div class="input-stat">0/100</div>
-    <wc-icon class="icon"></wc-icon>
-    <slot class="append" name="append"></slot>
-
-    <div class="suggestion">
-      <wc-scroll>
-        <ul class="list"></ul>
-      </wc-scroll>
-    </div>
   </div>
 </template>
 
 <style lang="scss">
-ul,
-li {
-  list-style: none;
-}
 :host {
-  overflow: hidden;
+  display: flex;
-  display: inline-flex;
+  width: 100%;
-  min-width: 128px;
+  height: 80px;
   user-select: none;
   -moz-user-select: none;
   color: var(--color-dark-1);
-  border-radius: 6px;
+  border-radius: 3px;
   cursor: text;
+  transition: box-shadow 0.15s linear;
 }
 
 .label {
-  flex: 1;
+  position: relative;
-  display: flex;
+  width: 100%;
-  justify-content: center;
+  height: 100%;
-  align-items: center;
-  height: 32px;
   font-size: 14px;
-  border: 2px solid var(--color-plain-2);
+  border: 1px solid var(--color-grey-2);
   border-radius: inherit;
   background: var(--bg-color, #fff);
   color: inherit;
   cursor: inherit;
 
-  input,
   textarea {
     flex: 1;
-    min-width: 32px;
+    min-width: 36px;
-    width: 0;
+    width: 100%;
     height: 100%;
-    padding: 0 5px;
+    padding: 5px 8px;
     border: 0;
     border-radius: inherit;
     color: inherit;
@@ -57,107 +43,37 @@ li {
     outline: none;
     box-shadow: none;
     cursor: inherit;
+    resize: none;
 
     &::placeholder {
       color: var(--color-grey-1);
     }
   }
-  textarea {
+
-    padding: 5px 8px;
+  .input-stat {
-    resize: none;
-  }
-  .prepend,
-  .append {
     display: none;
-    justify-content: center;
+    position: absolute;
-    align-items: center;
+    right: 4px;
-    width: auto;
+    bottom: 2px;
-    height: 30px;
+    z-index: 1;
-    padding: 0 10px;
     line-height: 1;
-    background: var(--bg-color, --color-plain-1);
+    font-size: 12px;
-    white-space: nowrap;
-  }
-  .prepend {
-    border-right: 1px solid var(--color-plain-3);
-    border-radius: 2px 0 0 2px;
-  }
-  .append {
-    border-left: 1px solid var(--color-plain-3);
-    border-radius: 0 2px 2px 0;
-  }
-  &[prepend] .prepend,
-  &[append] .append {
-    display: flex;
-  }
-  &[prepend] input,
-  &[append] input {
-    min-width: 64px;
-  }
-  /* ----- */
-  .icon {
-    --size: 20px;
-    padding: 0 5px;
-    margin: 0 5px;
     color: var(--color-grey-2);
   }
 }
 
-.suggestion {
+:host([show-limit]) {
-  display: none;
+  .label {
-  position: fixed;
+    padding-bottom: 14px;
-  z-index: 10240;
-  left: 0;
-  top: 0;
-  width: 200px;
-  height: auto;
-  max-height: 200px;
-  min-height: 46px;
-  padding: 8px 0;
-  border-radius: 2px;
-  background: #fff;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
 
-  .list {
+    .input-stat {
-    width: 100%;
+      display: block;
-  }
-
-  &::after {
-    position: absolute;
-    left: 30px;
-    top: -4px;
-    width: 8px;
-    height: 8px;
-    background: #fff;
-    box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
-    transform: rotate(45deg);
-    content: '';
-  }
-  &.show {
-    display: flex;
-  }
-
-  li {
-    overflow: hidden;
-    width: 100%;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 8px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: pointer;
-
-    &:hover,
-    &[focus] {
-      background: var(--color-plain-1);
     }
   }
 }
 
 /* --- */
-:host([auto-border]) .label {
+
-  border-color: transparent;
-}
 :host([disabled]) {
   cursor: not-allowed;
 
@@ -166,85 +82,45 @@ li {
     opacity: 0.6;
   }
 }
+
 :host([readonly]) {
   cursor: default;
 }
+
+/* ----- 类型(颜色) ----- */
 :host(:focus-within) {
-  // @include focus1;
+  box-shadow: 0 0 0 2px var(--color-plain-a);
-  .label {
-    border-color: var(--color-plain-3);
 }
+:host([type='primary']:focus-within) {
+  box-shadow: 0 0 0 2px var(--color-teal-a);
 }
-:host(:focus-within[readonly]) {
+:host([type='info']:focus-within) {
-  // @include focus2;
+  box-shadow: 0 0 0 2px var(--color-blue-a);
+}
+:host([type='success']:focus-within) {
+  box-shadow: 0 0 0 2px var(--color-green-a);
+}
+:host([type='danger']:focus-within) {
+  box-shadow: 0 0 0 2px var(--color-red-a);
+}
+:host([type='warning']:focus-within) {
+  box-shadow: 0 0 0 2px var(--color-orange-a);
 }
 
-:host([type='textarea']) {
+:host([type='primary']) .label {
-  display: flex;
+  border-color: var(--color-teal-2);
-  height: 80px;
-  .label {
-    width: 100%;
-    height: 100%;
 }
-  .icon,
+:host([type='info']) .label {
-  .suggestion {
+  border-color: var(--color-blue-2);
-    display: none;
 }
+:host([type='success']) .label {
+  border-color: var(--color-green-2);
 }
-
+:host([type='danger']) .label {
-/* 额外样式 */
+  border-color: var(--color-red-2);
-:host([round]) {
-  border-radius: 21px;
-
-  .label input {
-    padding: 0 10px;
-  }
-
-  .label[prepend] input,
-  .label[append] input {
-    padding: 0 5px;
-  }
-
-  .prepend {
-    border-radius: 21px 0 0 21px;
-  }
-  .append {
-    border-radius: 0 21px 21px 0;
-  }
-}
-
-:host([size='large']) {
-  .label {
-    height: 42px;
-    font-size: 16px;
-  }
-  .prepend,
-  .append {
-    height: 40px;
-  }
-}
-
-:host([size='medium']) {
-  .label {
-    height: 36px;
-  }
-  .prepend,
-  .append {
-    height: 34px;
-  }
-}
-:host([size='mini']) {
-  .label {
-    height: 24px;
-    font-size: 12px;
-  }
-  .icon {
-    --size: 16px;
-  }
-  .prepend,
-  .append {
-    height: 18px;
 }
+:host([type='warning']) .label {
+  border-color: var(--color-orange-2);
 }
 
 :host([no-border]),
@@ -254,61 +130,29 @@ li {
     border: 0;
   }
 }
-:host([transparent]) {
-  .label {
-    background: transparent;
-  }
-}
 </style>
 
 <script>
-import '../scroll/index'
-import '../icon/index'
 import $ from '../utils'
 
-const TYPES = ['text', 'textarea', 'password']
+export default class Textarea {
-const INPUTS = {
-  text: '<input spellcheck="false">',
-  textarea: '<textarea spellcheck="false"></textarea>'
-}
-
-export default class Input {
   props = {
     value: '',
-    icon: '',
-    type: 'text',
     placeholder: '',
     maxlength: null,
     minlength: null,
     autofocus: false,
     readonly: false,
-    disabled: false
+    disabled: false,
-  }
+    lazy: 0
-
-  state = {
-    mvidx: null //下拉列表光标的索引ID
   }
 
   __init__() {
-    var type = this.getAttribute('type')
-    var input = ''
-
-    if (type !== 'textarea') {
-      type = 'text'
-    }
-
-    input = INPUTS[type]
-
     /* render */
 
-    this.props.type = type
-
     this.__OUTER__ = this.root.children[1]
-    this.__PREPEND__ = this.__OUTER__.children[0]
+    this.__INPUT__ = this.__OUTER__.children[0]
-    this.__INPUT__ = this.__OUTER__.children[1]
+    this.__STAT__ = this.__OUTER__.children[1]
-    this.__ICO__ = this.__OUTER__.children[2]
-    this.__APPEND__ = this.__OUTER__.children[3]
-    this.__LIST__ = this.__OUTER__.children[4]
   }
 
   get readOnly() {
@@ -362,201 +206,54 @@ export default class Input {
     this.__INPUT__.value = val
   }
 
-  get type() {
-    return this.__INPUT__.type
-  }
-
-  set type(val) {
-    if (val !== 'textarea') {
-      this.__INPUT__.type = val
-    }
-  }
-
-  // 移动光标选择下拉选项
-  _moveSelect(ev) {
-    var { list } = this.props
-    if (list && list.length) {
-      ev.preventDefault()
-      var step = ev.keyCode === 38 ? -1 : 1
-      var items = Array.from(
-        this.__LIST__.firstElementChild.firstElementChild.children
-      )
-      if (this.state.mvidx === null) {
-        this.state.mvidx = 0
-      } else {
-        this.state.mvidx += step
-      }
-      if (this.state.mvidx < 0) {
-        this.state.mvidx = 0
-      } else if (this.state.mvidx > items.length - 1) {
-        this.state.mvidx = items.length - 1
-      }
-      items.forEach((it, i) => {
-        if (i === this.state.mvidx) {
-          this.__LIST__.firstElementChild.scrollTop = it.offsetTop - 150
-          it.setAttribute('focus', '')
-        } else {
-          it.removeAttribute('focus')
-        }
-      })
-    }
-  }
-
-  // 触发列表选择
-  _fetchSelect(idx, ev) {
-    var item = this.props.list[idx]
-    this.value = item.value
-    this.dispatchEvent(
-      new CustomEvent('select', {
-        detail: item
-      })
-    )
-    this._handleChange(ev)
-    this.__LIST__.classList.remove('show')
-    this.state.mvidx = null
-  }
-
-  _updateAttr() {
-    var { maxlength, minlength } = this.props
-
-    if (maxlength && maxlength > 0) {
-      this.__INPUT__.setAttribute('maxlength', maxlength)
-    } else {
-      this.__INPUT__.removeAttribute('maxlength')
-    }
-    if (minlength && minlength > 0) {
-      this.__INPUT__.setAttribute('minlength', minlength)
-    } else {
-      this.__INPUT__.removeAttribute('minlength')
-    }
-  }
-
   mounted() {
-    var prepend = this.__PREPEND__.assignedNodes()
+    this.stamp = 0
-    var append = this.__APPEND__.assignedNodes()
-    var { type } = this.props
-
-    // 相同插槽, 只允许1个
-    while (prepend.length > 1) {
-      this.removeChild(prepend.pop())
-    }
-    while (append.length > 1) {
-      this.removeChild(append.pop())
-    }
-
-    if (prepend.length && type !== 'textarea') {
-      this.__OUTER__.setAttribute('prepend', '')
-    }
-    if (append.length && type !== 'textarea') {
-      this.__OUTER__.setAttribute('append', '')
-    }
-
-    this._updateAttr()
 
     // 键盘事件
     this._handleSubmit = $.catch(this.__INPUT__, 'keydown', ev => {
+      let { minlength, lazy } = this.props
+      let val = this.value
+      let now = Date.now()
+
+      // 回车触发submit事件
+      // 要按Ctrl Or Cmd键, 才会触发
+      if (ev.keyCode === 13 && (ev.ctrlKey || ev.metaKey)) {
+        //
         if (this.disabled || this.readOnly) {
           return
         }
-      // up: 38, down: 40
+
-      if (ev.keyCode === 38 || ev.keyCode === 40) {
+        // 并发拦截
-        // 仅普通文本表单, 密码和多行文本框不做响应
+        if (lazy && now - this.stamp < lazy) {
-        if (type === 'text') {
+          return
-          return this._moveSelect(ev)
         }
+        if (minlength && minlength > 0) {
+          if (val.length < minlength) {
+            return
           }
-      // 回车触发submit事件
-      // textarea 要按Ctrl Or Cmd键, 才会触发
-      if (ev.keyCode === 13) {
-        // 如果是输入建议存在,则第1次回车的时候, 不触发提交
-        if (type === 'text' && this.state.mvidx !== null) {
-          return this._fetchSelect(this.state.mvidx, ev)
         }
 
-        if (
+        this.stamp = now
-          type === 'text' ||
+        this.dispatchEvent(new CustomEvent('submit', { detail: this.value }))
-          (type === 'textarea' && (ev.ctrlKey || ev.metaKey))
-        ) {
-          this.dispatchEvent(
-            new CustomEvent('submit', {
-              detail: this.value
-            })
-          )
-        }
       }
     })
 
-    // 非textarea, 可做输入建议功能
+    this._statFn = $.bind(this.__INPUT__, 'input,change', ev => {
-    if (type === 'text') {
+      let { maxlength } = this.props
-      // 输入状态事件
+      let len = this.value.length
-      this._handleChange = $.bind(this.__INPUT__, 'input', ev => {
+      maxlength = maxlength || '∞'
-        ev.preventDefault()
-        this.dispatchEvent(
-          new CustomEvent('fetch-suggest', {
-            detail: {
-              value: this.value,
-              send: list => {
-                this.props.list = list
-                this._parseSuggestion()
-              }
-            }
-          })
-        )
-      })
 
-      // 渲染建议列表
+      this.__STAT__.textContent = `${len}/${maxlength}`
-      this._parseSuggestion = $.bind(this.__INPUT__, 'click', ev => {
-        var { list } = this.props
-        let { x, y, width } = this.getBoundingClientRect()
-        if (list && list.length) {
-          var html = list
-            .map((it, i) => `<li data-idx="${i}">${it.value}</li>`)
-            .join('')
-          this.__LIST__.firstElementChild.firstElementChild.innerHTML = html
-          this.__LIST__.classList.toggle('show', true)
-          this.__LIST__.style.cssText = `left:${x}px;top:${y +
-            50}px;width:${width}px;`
-        } else {
-          this.__LIST__.classList.toggle('show', false)
-        }
     })
-
-      this._inactiveFn = $.outside(this, ev => {
-        this.__LIST__.classList.remove('show')
-      })
-
-      // 选择建议
-      this._handleSelect = $.bind(this.__LIST__, 'click', ev => {
-        if (ev.target.tagName === 'LI') {
-          this._fetchSelect(ev.target.dataset.idx, ev)
-          this.dispatchEvent(new CustomEvent('input'))
-        }
-      })
-    } else {
-      this._handleWheel = $.catch(this.__INPUT__, 'wheel')
-    }
   }
 
   unmount() {
-    $.unbind(this.__INPUT__, 'wheel', this._handleWheel)
     $.unbind(this.__INPUT__, 'keydown', this._handleSubmit)
-    $.unbind(this.__INPUT__, 'input', this._handleChange)
+    $.unbind(this.__INPUT__, 'input,change', this._statFn)
-    $.unbind(this.__LIST__, 'click', this._handleSelect)
-    $.clearOutside(this._inactiveFn)
   }
 
   watch() {
     switch (name) {
-      case 'icon':
-        this.props.icon = val
-        if (val) {
-          this.__ICO__.setAttribute('is', val)
-        } else {
-          this.removeAttribute('icon')
-          this.__ICO__.removeAttribute('is')
-        }
-        break
-
       case 'autofocus':
         this.__INPUT__.setAttribute('autofocus', '')
         // 辣鸡火狐, 要触发一下focus, 才能聚焦
@@ -570,22 +267,24 @@ export default class Input {
         this.__INPUT__.setAttribute('placeholder', val)
         break
 
-      case 'type':
-        if (~TYPES.indexOf(val)) {
-          this.type = val
-        } else {
-          this.type = 'text'
-        }
-        break
-
       case 'value':
         this.value = val
         break
 
       case 'maxlength':
       case 'minlength':
-        this.props[name] = val
+        if (val === null) {
-        this._updateAttr()
+          this.__INPUT__.removeAttribute(name)
+        } else {
+          let n = +val
+          if (n > 0) {
+            this.__INPUT__.setAttribute(name, +val)
+          }
+        }
+        break
+
+      case 'lazy':
+        this.props.lazy = val >> 0
         break
 
       case 'readonly':

src/meditor/index.wc

@@ -120,7 +120,6 @@
   display: flex;
   min-height: 300px;
   border-radius: 3px;
-  background: #fff;
 
   .editor,
   .preview {
@@ -334,6 +333,7 @@
 
   .meditor,
   .toolbar {
+    background: var(--color-plain-1);
     cursor: not-allowed;
   }