frontend / zui

Download as
Browse Code »

Commit 76ac7eee75ec316e851e25bd4ce8c8ce3de3745d

Authored by Aaron.Liu
1 parent a535be4f
Exists in master

[修改] 按钮支持类型、大小切换，完善按钮文档

Showing 4 changed files with 180 additions and 25 deletions   Show diff stats
examples/views/docs/component/button.md
  Diff comments   View file @76ac7ee
1 # Button 按钮 1 # Button 按钮
2 2
3 -基础按钮 3 +按钮组件，可配置多种不同的按钮样式
4 4
5 -## 基础用法 5 +## 按钮类型
6 6
7 -按钮说明 7 +配置`type`属性改变按钮类型
8 8
9 -::: snippet 示例 9 +::: snippet 支持`default`、`primary`、`secondary`, `link`，默认为`default`
10 10
11 ```html 11 ```html
12 <template> 12 <template>
13 <div> 13 <div>
14 - <zui-button>普通按钮</zui-button> 14 + <zui-button disabled>Default</zui-button>
  15 + <zui-button type="primary">Primary</zui-button>
  16 + <zui-button type="secondary">Secondary</zui-button>
  17 + <zui-button type="link">链接</zui-button>
  18 + </div>
  19 +</template>
  20 +```
  21 +
  22 +:::
  23 +
  24 +## 按钮形状
  25 +
  26 +支持默认、圆角、矩形按钮
  27 +
  28 +::: snippet 配置`round`为圆角按钮、配置`square`为矩形按钮
  29 +
  30 +```html
  31 +<template>
  32 + <div>
  33 + <zui-button>默认按钮</zui-button>
15 <zui-button round>圆角按钮</zui-button> 34 <zui-button round>圆角按钮</zui-button>
16 - <zui-button rect>矩形按钮</zui-button> 35 + <zui-button square>矩形按钮</zui-button>
  36 + </div>
  37 +</template>
  38 +```
  39 +
  40 +:::
  41 +
  42 +## 按钮大小
  43 +
  44 +配置`size`属性改变按钮大小
  45 +
  46 +::: snippet 支持`sm`、`md`、`lg`，默认为`md`
  47 +
  48 +```html
  49 +<template>
  50 + <div>
  51 + <zui-button size="sm">小型按钮</zui-button>
  52 + <zui-button size="md" type="secondary">中型按钮</zui-button>
  53 + <zui-button size="lg" type="primary">大型按钮</zui-button>
  54 + </div>
  55 +</template>
  56 +```
  57 +
  58 +:::
  59 +
  60 +
  61 +## 块级元素
  62 +
  63 +宽度占满一行的按钮
  64 +
  65 +::: snippet 配置`block`
  66 +
  67 +```html
  68 +<template>
  69 + <div>
  70 + <zui-button type="primary" size="lg" square block>确定</zui-button>
  71 + <zui-button size="lg" square block>取消</zui-button>
  72 + </div>
  73 +</template>
  74 +```
  75 +
  76 +:::
  77 +
  78 +## 按钮禁用
  79 +
  80 +按钮支持禁用
  81 +
  82 +::: snippet 配置`disabled`
  83 +
  84 +```html
  85 +<template>
  86 + <div>
  87 + <zui-button type="primary" @click="handleClick">普通按钮</zui-button>
  88 + <zui-button disabled @click="handleClick">禁用按钮</zui-button>
17 </div> 89 </div>
18 </template> 90 </template>
19 91
20 <script> 92 <script>
21 export default { 93 export default {
22 - data() {  
23 - return { 94 + methods: {
  95 + handleClick() {
  96 + console.log('click');
24 } 97 }
25 - }, 98 + }
26 } 99 }
27 </script> 100 </script>
28 ``` 101 ```
29 102
30 -:::  
31 \ No newline at end of file 103 \ No newline at end of file
  104 +:::
  105 +
  106 +## API
  107 +
  108 +## Attribute 属性
  109 +
  110 +参数|说明|类型|可选值|默认值
  111 +-|-|-|-|-
  112 +type | 按钮类型 | String | default、primary、secondary | default
  113 +block | 块状按钮 | Boolean | true、false | false
  114 +round | 圆角按钮 | Boolean | true、false | false
  115 +square | 矩形按钮 | Boolean | true、false | false
  116 +disabled | 按钮禁用 | Boolean | true、false | false
  117 +
  118 +## Events 事件
  119 +
  120 +事件名称|说明|回调参数
  121 +-|-|-
  122 +click | 按钮点击事件 | -
32 \ No newline at end of file 123 \ No newline at end of file
packages/button/index.css
  Diff comments   View file @76ac7ee
1 .zui-button { 1 .zui-button {
2 - background-color: #FCD404;  
3 - color: #FFF; 2 + color: #323233;
  3 + background-color: #fff;
  4 + border: 1px solid #ebedf0;
4 padding: 5px 15px; 5 padding: 5px 15px;
5 font-size: 14px; 6 font-size: 14px;
6 cursor: pointer; 7 cursor: pointer;
7 transition: background-color 300ms; 8 transition: background-color 300ms;
  9 + display: flex;
  10 + align-items: center;
  11 + justify-content: center;
  12 +}
  13 +
  14 +.zui-button.sm {
  15 + padding: 2px 4px;
  16 + font-size: 10px;
  17 +}
  18 +
  19 +.zui-button.lg {
  20 + padding: 10px 20px;
  21 + font-size: 18px;
8 } 22 }
9 23
10 .zui-button:active { 24 .zui-button:active {
  25 + background-color: #e6e6e6;
  26 + border-color: #e6e6e6;
  27 +}
  28 +
  29 +.zui-button.primary {
  30 + background-color: #FCD404;
  31 + border-color: #FCD404;
  32 + color: #FFF;
  33 +}
  34 +
  35 +.zui-button.primary:active {
11 background-color: #d6ab00; 36 background-color: #d6ab00;
  37 + border-color: #d6ab00;
  38 +}
  39 +
  40 +.zui-button.secondary {
  41 + background-color: #ffffe6;
  42 + border-color: #ffffe6;
  43 + color: #FCD404;
  44 +}
  45 +
  46 +.zui-button.secondary:active {
  47 + background-color: #f7f7df;
  48 + border-color: #f7f7df;
  49 +}
  50 +
  51 +.zui-button.link {
  52 + padding: 5px 15px;
  53 + background: inherit;
  54 + border: inherit;
  55 + color: #FCD404;
  56 +}
  57 +
  58 +.zui-button.link:active {
  59 + color: #d6ab00;
  60 +}
  61 +
  62 +.zui-button.disabled {
  63 + border-color: #f5f5f5;
  64 + background-color: #f5f5f5;
  65 + color: #ccc;
  66 + cursor: not-allowed;
  67 +}
  68 +
  69 +.zui-button.disabled:active {
  70 + border-color: #f5f5f5;
  71 + background-color: #f5f5f5;
12 } 72 }
13 \ No newline at end of file 73 \ No newline at end of file
packages/button/index.vue
  Diff comments   View file @76ac7ee
1 <template> 1 <template>
2 - <div class="zui-button" :style="style" @click="onClick"> 2 + <div class="zui-button" :class="classRender" :style="style" @click="onClick">
3 <slot></slot> 3 <slot></slot>
4 </div> 4 </div>
5 </template> 5 </template>
@@ -8,35 +8,42 @@ @@ -8,35 +8,42 @@
8 export default { 8 export default {
9 name: 'Button', 9 name: 'Button',
10 props: { 10 props: {
  11 + type: {
  12 + type: String,
  13 + default: 'default'
  14 + },
  15 + size: {
  16 + type: String,
  17 + default: 'md'
  18 + },
11 block: { 19 block: {
12 type: Boolean, 20 type: Boolean,
13 default: false 21 default: false
14 }, 22 },
15 round: Boolean, 23 round: Boolean,
16 - rect: Boolean,  
17 - },  
18 - data: function() {  
19 - return {  
20 -  
21 - }; 24 + square: Boolean,
  25 + disabled: Boolean,
22 }, 26 },
23 computed: { 27 computed: {
24 style: function() { 28 style: function() {
25 - return { display: this.block ? 'block' : 'inline-block', borderRadius: this.borderRadius }; 29 + return { display: this.block ? '' : 'inline-block', borderRadius: this.borderRadius };
26 }, 30 },
27 borderRadius: function() { 31 borderRadius: function() {
28 if (this.round) { 32 if (this.round) {
29 return '20px'; 33 return '20px';
30 - } else if (this.rect) { 34 + } else if (this.square) {
31 return '0'; 35 return '0';
32 } else { 36 } else {
33 return '4px'; 37 return '4px';
34 } 38 }
  39 + },
  40 + classRender: function() {
  41 + return [this.size, this.disabled ? 'disabled' : '', this.block ? 'block' : '', this.type];
35 } 42 }
36 }, 43 },
37 methods: { 44 methods: {
38 onClick: function() { 45 onClick: function() {
39 - if (this.$listeners['click']) { 46 + if (this.$listeners['click'] && !this.disabled) {
40 this.$emit('click'); 47 this.$emit('click');
41 } 48 }
42 } 49 }
packages/cell/index.css
  Diff comments   View file @76ac7ee
@@ -10,7 +10,6 @@ @@ -10,7 +10,6 @@
10 overflow: hidden; 10 overflow: hidden;
11 color: #323233; 11 color: #323233;
12 font-size: 14px; 12 font-size: 14px;
13 - line-height: 24px;  
14 background-color: #fff; 13 background-color: #fff;
15 } 14 }
16 15
@@ -32,9 +31,7 @@ @@ -32,9 +31,7 @@
32 31
33 .zui-cell__left-icon, .zui-cell__right-icon { 32 .zui-cell__left-icon, .zui-cell__right-icon {
34 min-width: 1em; 33 min-width: 1em;
35 - height: 24px;  
36 font-size: 16px; 34 font-size: 16px;
37 - line-height: 24px;  
38 } 35 }
39 36
40 .zui-cell:not(:last-child)::after { 37 .zui-cell:not(:last-child)::after {