使用函数式组件优化checkbox

Author: buuing

src/search-node.vue

@@ -52,7 +52,13 @@ export default {
         }} onClick={e => this.handlerExpand(e)}>
           <path d="M151.476947 199.553918l718.53082 0c39.763632 0 71.922053 31.909757 71.922053 71.675436 0 18.485003-7.095605 35.205826-18.486026 47.872311L568.114019 793.227056c-23.810289 31.400151-68.641333 37.993313-100.29731 14.183024-5.570879-4.052293-10.384511-8.873088-14.183024-14.190187L94.235245 314.041416c-23.547299-31.407314-17.217127-76.479859 14.436804-100.041484 12.922311-9.881045 27.864628-14.43885 42.804898-14.43885l0 0L151.476947 199.553918zM151.476947 199.553918" p-id="2223" fill="#c0c4cc"></path>
         </svg>
-        { root.showCheckbox && <zCheckbox value={data.checked} disabled={data[disabled]} indeterminate={this.indeterminate} onChange={e => this.handlerChecked(e)} class="tree-checkbox point"></zCheckbox> }
+        { root.showCheckbox && <zCheckbox
+          class="point"
+          value={data.checked}
+          disabled={data[disabled]}
+          indeterminate={this.indeterminate}
+          onClick={e => this.handlerChecked(e)}
+        ></zCheckbox> }
         <div class="tree-content point" onClick={e => {
           root.expandOnClickNode && this.handlerExpand(e)
           root.checkOnClickNode && this.handlerChecked(e)
@@ -105,9 +111,6 @@ export default {
     align-items: center;
     transform: translate(0);
   }
-  .tree-checkbox {
-    margin: 0 0 0 4px;
-  }
   .tree-content {
     width: 100%;
     margin: 0 0 0 3px;

src/z-checkbox.vue

@@ -1,28 +1,15 @@
 <script>
 export default {
   name: 'zCheckbox',
-  props: {
-    value: Boolean,
-    indeterminate: Boolean,
-    disabled: Boolean
-  },
-  data() {
-    return {
-      isChecked: this.value
-    }
-  },
-  watch: {
-    value (val) {
-      this.isChecked = val
-    }
-  },
-  methods: {
-    renderIcon () {
-      if (this.indeterminate) return <svg width="12" height="12">
+  functional: true,
+  render (h, ctx) {
+    const { props } = ctx
+    const renderIcon = function (props) {
+      if (props.indeterminate) return <svg width="12" height="12">
         <rect x="0" y="0" width="12" height="12" stroke="#2080f0" fill="#2080f0" stroke-width="2"/>
         <rect x="1.5" y="5" width="9" height="2" stroke="#2080f0" fill="#fff" stroke-width="0"/>
       </svg>
-      if (this.isChecked) return <svg width="12" height="12">
+      if (props.value) return <svg width="12" height="12">
         <rect x="0" y="0" width="12" height="12" stroke="#2080f0" fill="#2080f0" stroke-width="2"/>
         <line x1="1.5" x2="5.5" y1="5.5" y2="10.5" stroke="#fff" fill="transparent" stroke-width="1.5"/>
         <line x1="10.5" x2="5" y1="2" y2="10" stroke="#fff" fill="transparent" stroke-width="1.5"/>
@@ -31,17 +18,10 @@ export default {
         <rect x="0" y="0" width="12" height="12" stroke="#2080f0" fill="transparent" stroke-width="2"/>
       </svg>
     }
-  },
-  render () {
-    const { data, root } = this.$parent
-    const { nodeKey } = root
     return <div style={{
-      filter: `grayscale(${this.disabled ? 100 : 0}%)`,
-      opacity: this.disabled ? 0.7 : 1
-    }} onClick={e => {
-      this.$emit('input', this.isChecked)
-      this.$emit('change', e)
-    }}>{ this.renderIcon() }</div>
+      filter: `grayscale(${props.disabled ? 100 : 0}%)`,
+      opacity: props.disabled ? 0.7 : 1
+    }} onClick={e => ctx.listeners.click(e)}>{renderIcon(props)}</div>
   }
 }
 </script>
@@ -52,6 +32,7 @@ div {
   width: 12px;
   height: 12px;
   cursor: pointer;
+  margin: 0 0 0 3px;
 }
 svg {
   vertical-align: super;