commit message

manager/src/views/my-components/tree-table/Checkbox/Checkbox.vue

@@ -0,0 +1,58 @@
+<template lang="html">
+  <label :class="`${prefixCls}-wrapper`">
+    <span :class="checkboxClass">
+      <span
+        :class="`${prefixCls}__inner`"
+        @click="toggle"></span>
+    </span>
+  </label>
+</template>
+
+<script>
+  export default {
+    name: 'zk-checkbox',
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      indeterminate: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        prefixCls: 'zk-checkbox',
+      };
+    },
+    computed: {
+      checkboxClass() {
+        return [
+          `${this.prefixCls}`,
+          {
+            [`${this.prefixCls}--disabled`]: this.disabled,
+            [`${this.prefixCls}--checked`]: this.value,
+            [`${this.prefixCls}--indeterminate`]: this.indeterminate,
+          },
+        ];
+      },
+    },
+    methods: {
+      toggle() {
+        if (this.disabled) {
+          return false;
+        }
+        const value = !this.value;
+        this.$emit('input', value);
+        return this.$emit('on-change', value);
+      },
+    },
+  };
+</script>
+
+<style lang="less" scoped src="./Checkbox.less"></style>