[新增] 复选框

刘汉宸
1 parent 1ac52e8a
Showing 6 changed files with 149 additions and 1 deletions Show diff stats
examples/router/routes.js
examples/views/docs/component/checkbox.md
packages/checkbox/index.css
packages/checkbox/index.vue
packages/icon/index.vue
packages/navBar/index.css
@@ -51,6 +51,17 @@ const _components = [
     ]
   },
   {
+    group: '表单组件',
+    children: [
+      {
+        path: 'checkbox',
+        name: 'checkbox',
+        meta: { title: 'Checkbox 复选框' },
+        component: () => import('@/views/docs/component/checkbox.md'),
+      },
+    ]
+  },
+  {
     group: '展示组件',
     children: [
       {
@@ -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
@@ -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
@@ -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
 <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>
@@ -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 {
...	...	@@ -51,6 +51,17 @@ const _components = [
51	51	]
52	52	},
53	53	{
	54	+ group: '表单组件',
	55	+ children: [
	56	+ {
	57	+ path: 'checkbox',
	58	+ name: 'checkbox',
	59	+ meta: { title: 'Checkbox 复选框' },
	60	+ component: () => import('@/views/docs/component/checkbox.md'),
	61	+ },
	62	+ ]
	63	+ },
	64	+ {
54	65	group: '展示组件',
55	66	children: [
56	67	{
...	...
...	...	@@ -0,0 +1,32 @@
	1	+# Checkbox 复选框
	2	+
	3	+复选框
	4	+
	5	+## 基础用法
	6	+
	7	+说明
	8	+
	9	+::: snippet 示例
	10	+
	11	+```html
	12	+<template>
	13	+ <div>
	14	+ <zui-checkbox v-model="checked">复选框</zui-checkbox>
	15	+ <zui-checkbox v-model="checked" color="red" size="2rem">复选框颜色</zui-checkbox>
	16	+ <zui-checkbox disabled>禁用</zui-checkbox>
	17	+ <zui-checkbox v-model="checked" label-disabled>禁用标签点击</zui-checkbox>
	18	+ </div>
	19	+</template>
	20	+
	21	+<script>
	22	+export default {
	23	+ data() {
	24	+ return {
	25	+ checked: true,
	26	+ }
	27	+ }
	28	+}
	29	+</script>
	30	+```
	31	+
	32	+:::
0	33	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,24 @@
	1	+.zui-checkbox {
	2	+ display: flex;
	3	+ align-items: center;
	4	+}
	5	+
	6	+.zui-checkbox.disabled, .zui-checkbox.disabled .zui-checkbox__icon .zui-icon {
	7	+ color: #c8c9cc;
	8	+ cursor: not-allowed !important;
	9	+}
	10	+
	11	+.zui-checkbox .zui-checkbox__icon .zui-icon {
	12	+ font-size: 24px;
	13	+ color: #a6a6a6;
	14	+ transition: color 300ms;
	15	+ cursor: pointer;
	16	+}
	17	+
	18	+.zui-checkbox .zui-checkbox__icon .zui-icon.checked {
	19	+ color: #FCD404;
	20	+}
	21	+
	22	+.zui-checkbox .zui-checkbox-label {
	23	+ padding-left: 10px;
	24	+}
0	25	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,78 @@
	1	+<template>
	2	+ <div class="zui-checkbox" @click="onClick" :class="classRender" :style="styleRender">
	3	+ <div class="zui-checkbox__icon">
	4	+ <slot v-if="$slots.icon" :checked="checked" ></slot>
	5	+ <zui-icon v-else :class="iconClassRender" :style="iconStyleRender" :name="iconRender" :size="size" @click="onIconClick"></zui-icon>
	6	+ </div>
	7	+ <div v-if="$slots.default" class="zui-checkbox-label">
	8	+ <slot></slot>
	9	+ </div>
	10	+ </div>
	11	+</template>
	12	+
	13	+<script>
	14	+export default {
	15	+ name: 'Checkbox',
	16	+ props: {
	17	+ value: Boolean,
	18	+ icon: {
	19	+ type: String,
	20	+ default: 'checkcircle'
	21	+ },
	22	+ iconChecked: {
	23	+ type: String,
	24	+ default: 'radiobuttonunchecked'
	25	+ },
	26	+ labelDisabled: Boolean,
	27	+ disabled: Boolean,
	28	+ color: String,
	29	+ size: String,
	30	+ },
	31	+ data: function() {
	32	+ return {
	33	+ checked: this.value
	34	+ }
	35	+ },
	36	+ watch: {
	37	+ value: function(val) {
	38	+ this.checked = val;
	39	+ },
	40	+ },
	41	+ computed: {
	42	+ iconRender: function() {
	43	+ return this.checked ? this.icon : this.iconChecked;
	44	+ },
	45	+ styleRender: function() {
	46	+ return { cursor: !this.labelDisabled ? 'pointer' : '' };
	47	+ },
	48	+ classRender: function() {
	49	+ return { disabled: this.disabled };
	50	+ },
	51	+ iconStyleRender: function() {
	52	+ return { color: this.color && this.checked && !this.disabled ? this.color : '' };
	53	+ },
	54	+ iconClassRender: function() {
	55	+ return { checked: this.checked && !this.disabled };
	56	+ }
	57	+ },
	58	+ methods: {
	59	+ toggle: function() {
	60	+ if (!this.disabled) {
	61	+ this.$emit('input', !this.checked);
	62	+ }
	63	+ },
	64	+ onClick: function() {
	65	+ if (!this.labelDisabled) {
	66	+ this.toggle();
	67	+ }
	68	+ },
	69	+ onIconClick: function() {
	70	+ this.toggle();
	71	+ }
	72	+ }
	73	+}
	74	+</script>
	75	+
	76	+<style>
	77	+@import "./index.css";
	78	+</style>
0	79	\ No newline at end of file
...	...
1	1	<template>
2		- <i class="zui-icon" :class="classRender" :style="styleRender" @click="onClick">
	2	+ <i class="zui-icon" :class="classRender" :style="styleRender" @click.stop="onClick">
3	3	<div v-if="info \|\| dot" class="zui-info" :class="{ dot: dot }">{{ info }}</div>
4	4	</i>
5	5	</template>
...	...
...	...	@@ -34,6 +34,9 @@
34	34	flex: auto;
35	35	font-size: 18px;
36	36	font-weight: 700;
	37	+ overflow: hidden;
	38	+ text-overflow: ellipsis;
	39	+ white-space: nowrap;
37	40	}
38	41	.zui-nav-bar__left,
39	42	.zui-nav-bar__right {
...	...