完成color组件的迁移

src/color/index.js

@@ -11,6 +11,7 @@ import {
   unbind,
   Component,
   outsideClick,
+  clearOutsideClick,
   nextTick,
   offset
 } from '@bd/core'
@@ -134,36 +135,9 @@ class Color extends Component {
       default: '',
       attribute: false,
       observer(val) {
-        var isHex
+        if (!this.panelShow) {
-        var rgb
+          this.#calc(val)
-
-        val = val.toLowerCase()
-
-        if (!val) {
-          return
         }
-
-        isHex = /^#[0-9a-f]{3,6}$/.test(val)
-
-        if (isHex) {
-          Object.assign(this.cache.rgba, hex2rgb(val), { a: 100 })
-        } else {
-          var res = val.match(
-            /rgba?\((\d+),\s*?(\d+),\s*?(\d+)[,\s]*?([\d\.]+)?\)/
-          )
-          if (res) {
-            this.cache.rgba = { r: +res[1], g: +res[2], b: +res[3], a: 100 }
-            if (res[4] !== undefined) {
-              this.cache.rgba.a = ~~(res[4] * 100)
-            }
-          } else {
-            return
-          }
-        }
-
-        this.cache.hsb = rgb2hsb(this.cache.rgba)
-        // this.cache.alphaColor = '#' + rgb2hex(this.cache.rgba)
-        // this.cache.scene = '#' + rgb2hex(hsb2rgb(this.cache.hsb))
       }
     },
     disabled: false,
@@ -451,10 +425,39 @@ class Color extends Component {
     `
   ]
 
+  #calc(val) {
+    var isHex
+    var rgb
+
+    val = val.toLowerCase()
+
+    if (!val) {
+      return
+    }
+
+    isHex = /^#[0-9a-f]{3,6}$/.test(val)
+
+    if (isHex) {
+      Object.assign(this.cache.rgba, hex2rgb(val), { a: 100 })
+    } else {
+      var res = val.match(/rgba?\((\d+),\s*?(\d+),\s*?(\d+)[,\s]*?([\d\.]+)?\)/)
+      if (res) {
+        this.cache.rgba = { r: +res[1], g: +res[2], b: +res[3], a: 100 }
+        if (res[4] !== undefined) {
+          this.cache.rgba.a = ~~(res[4] * 100)
+        }
+      } else {
+        return
+      }
+    }
+
+    this.cache.hsb = rgb2hsb(this.cache.rgba)
+  }
+
   toggleColorPanel() {
     this.$refs.panel.style.display = 'block'
-    this.temp = this.value
+    this.panelShow = true
-    // this.#updateView()
+    this.#updateView()
   }
 
   // 透明度变化
@@ -519,20 +522,28 @@ class Color extends Component {
   }
 
   closePanel() {
-    if (this.hasOwnProperty('temp')) {
+    if (this.hasOwnProperty('panelShow')) {
       this.$refs.panel.style.display = ''
-      this.value = this.temp
+      this.#calc(this.value)
-      delete this.temp
+      this.#updateView()
+      delete this.panelShow
     }
   }
 
+  submit() {
+    this.$refs.panel.style.display = ''
+    this.value = this.#value
+    this.$emit('change', { data: this.#value })
+    delete this.panelShow
+  }
+
   mounted() {
     var handleMove
 
     // 更新一次视图
     nextTick(_ => this.#updateView())
 
-    this.handleDown = bind(this.$refs.scene, 'mousedown', ev => {
+    bind(this.$refs.scene, 'mousedown', ev => {
       ev.preventDefault()
 
       var { pageX, pageY } = ev
@@ -570,6 +581,11 @@ class Color extends Component {
     })
   }
 
+  unmounted() {
+    clearOutsideClick(this._outsideFn)
+    unbind(document, 'mouseup', this.handleUp)
+  }
+
   render() {
     return html`
       <div class="color-picker">
@@ -619,7 +635,7 @@ class Color extends Component {
           <section class="input-box">
             <input class="input" :value=${this.#value} maxlength="28" />
             <a class="clear" @click=${this.closePanel}>清除</a>
-            <a tabindex="0" class="submit">确定</a>
+            <a tabindex="0" class="submit" @click=${this.submit}>确定</a>
           </section>
         </div>
       </div>