Commit 9ce611e67c5047e617479323f2d70026eb3e7e32
1 parent
1ac52e8a
Exists in
master
[新增] 复选框
Showing
6 changed files
with
149 additions
and
1 deletions
Show diff stats
examples/router/routes.js
| @@ -51,6 +51,17 @@ const _components = [ | @@ -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 | group: '展示组件', | 65 | group: '展示组件', |
| 55 | children: [ | 66 | children: [ |
| 56 | { | 67 | { |
| @@ -0,0 +1,32 @@ | @@ -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 | \ No newline at end of file | 33 | \ No newline at end of file |
| @@ -0,0 +1,24 @@ | @@ -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 | \ No newline at end of file | 25 | \ No newline at end of file |
| @@ -0,0 +1,78 @@ | @@ -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 | \ No newline at end of file | 79 | \ No newline at end of file |
packages/icon/index.vue
| 1 | <template> | 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 | <div v-if="info || dot" class="zui-info" :class="{ dot: dot }">{{ info }}</div> | 3 | <div v-if="info || dot" class="zui-info" :class="{ dot: dot }">{{ info }}</div> |
| 4 | </i> | 4 | </i> |
| 5 | </template> | 5 | </template> |
packages/navBar/index.css
| @@ -34,6 +34,9 @@ | @@ -34,6 +34,9 @@ | ||
| 34 | flex: auto; | 34 | flex: auto; |
| 35 | font-size: 18px; | 35 | font-size: 18px; |
| 36 | font-weight: 700; | 36 | font-weight: 700; |
| 37 | + overflow: hidden; | ||
| 38 | + text-overflow: ellipsis; | ||
| 39 | + white-space: nowrap; | ||
| 37 | } | 40 | } |
| 38 | .zui-nav-bar__left, | 41 | .zui-nav-bar__left, |
| 39 | .zui-nav-bar__right { | 42 | .zui-nav-bar__right { |