From 9ce611e67c5047e617479323f2d70026eb3e7e32 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Thu, 19 Mar 2020 18:51:30 +0800
Subject: [PATCH] [新增] 复选框

---
 examples/router/routes.js                 | 11 +++++++++++
 examples/views/docs/component/checkbox.md | 32 ++++++++++++++++++++++++++++++++
 packages/checkbox/index.css               | 24 ++++++++++++++++++++++++
 packages/checkbox/index.vue               | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/icon/index.vue                   |  2 +-
 packages/navBar/index.css                 |  3 +++
 6 files changed, 149 insertions(+), 1 deletion(-)
 create mode 100644 examples/views/docs/component/checkbox.md
 create mode 100644 packages/checkbox/index.css
 create mode 100644 packages/checkbox/index.vue

diff --git a/examples/router/routes.js b/examples/router/routes.js
index f1a0ff0..861e52a 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -51,6 +51,17 @@ const _components = [
     ]
   },
   {
+    group: '表单组件',
+    children: [
+      {
+        path: 'checkbox',
+        name: 'checkbox',
+        meta: { title: 'Checkbox 复选框' },
+        component: () => import('@/views/docs/component/checkbox.md'),
+      },
+    ]
+  },
+  {
     group: '展示组件',
     children: [
       {
diff --git a/examples/views/docs/component/checkbox.md b/examples/views/docs/component/checkbox.md
new file mode 100644
index 0000000..5ad769c
--- /dev/null
+++ b/examples/views/docs/component/checkbox.md
@@ -0,0 +1,32 @@
+# Checkbox 复选框
+
+复选框
+
+## 基础用法
+
+说明
+
+::: snippet 示例
+
+```html
+<template>
+  <div>
+    <zui-checkbox v-model="checked">复选框</zui-checkbox>
+    <zui-checkbox v-model="checked" color="red" size="2rem">复选框颜色</zui-checkbox>
+    <zui-checkbox disabled>禁用</zui-checkbox>
+    <zui-checkbox v-model="checked" label-disabled>禁用标签点击</zui-checkbox>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checked: true,
+    }
+  }
+}
+</script>
+```
+
+:::
\ No newline at end of file
diff --git a/packages/checkbox/index.css b/packages/checkbox/index.css
new file mode 100644
index 0000000..8b1075f
--- /dev/null
+++ b/packages/checkbox/index.css
@@ -0,0 +1,24 @@
+.zui-checkbox {
+  display: flex;
+  align-items: center;
+}
+
+.zui-checkbox.disabled, .zui-checkbox.disabled .zui-checkbox__icon .zui-icon {
+  color: #c8c9cc;
+  cursor: not-allowed !important;
+}
+
+.zui-checkbox .zui-checkbox__icon .zui-icon {
+  font-size: 24px;
+  color: #a6a6a6;
+  transition: color 300ms;
+  cursor: pointer;
+}
+
+.zui-checkbox .zui-checkbox__icon .zui-icon.checked {
+  color: #FCD404;
+}
+
+.zui-checkbox .zui-checkbox-label {
+  padding-left: 10px;
+}
\ No newline at end of file
diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
new file mode 100644
index 0000000..9ed196d
--- /dev/null
+++ b/packages/checkbox/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="zui-checkbox" @click="onClick" :class="classRender" :style="styleRender">
+    <div class="zui-checkbox__icon">
+      <slot v-if="$slots.icon" :checked="checked" ></slot>
+      <zui-icon v-else :class="iconClassRender" :style="iconStyleRender" :name="iconRender" :size="size" @click="onIconClick"></zui-icon>
+    </div>
+    <div v-if="$slots.default" class="zui-checkbox-label">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Checkbox',
+  props: {
+    value: Boolean,
+    icon: {
+      type: String,
+      default: 'checkcircle'
+    },
+    iconChecked: {
+      type: String,
+      default: 'radiobuttonunchecked'
+    },
+    labelDisabled: Boolean,
+    disabled: Boolean,
+    color: String,
+    size: String,
+  },
+  data: function() {
+    return {
+      checked: this.value
+    }
+  },
+  watch: {
+    value: function(val) {
+      this.checked = val;
+    },
+  },
+  computed: {
+    iconRender: function() {
+      return this.checked ? this.icon : this.iconChecked;
+    },
+    styleRender: function() {
+      return { cursor: !this.labelDisabled ? 'pointer' : '' };
+    },
+    classRender: function() {
+      return { disabled: this.disabled };
+    },
+    iconStyleRender: function() {
+      return { color: this.color && this.checked && !this.disabled ? this.color : '' };
+    },
+    iconClassRender: function() {
+      return { checked: this.checked && !this.disabled };
+    }
+  },
+  methods: {
+    toggle: function() {
+      if (!this.disabled) {
+        this.$emit('input', !this.checked);
+      }
+    },
+    onClick: function() {
+      if (!this.labelDisabled) {
+        this.toggle();
+      }
+    },
+    onIconClick: function() {
+      this.toggle();
+    }
+  }
+}
+</script>
+
+<style>
+@import "./index.css";
+</style>
\ No newline at end of file
diff --git a/packages/icon/index.vue b/packages/icon/index.vue
index b0c43d2..00080ba 100644
--- a/packages/icon/index.vue
+++ b/packages/icon/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <i class="zui-icon" :class="classRender" :style="styleRender" @click="onClick">
+  <i class="zui-icon" :class="classRender" :style="styleRender" @click.stop="onClick">
     <div v-if="info || dot" class="zui-info" :class="{ dot: dot }">{{ info }}</div>
   </i>
 </template>
diff --git a/packages/navBar/index.css b/packages/navBar/index.css
index 284812f..df948b5 100644
--- a/packages/navBar/index.css
+++ b/packages/navBar/index.css
@@ -34,6 +34,9 @@
   flex: auto;
   font-size: 18px;
   font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .zui-nav-bar__left,
 .zui-nav-bar__right {
--
libgit2 0.21.0