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 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 11 ```html
12 12 <template>
13 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 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 89 </div>
18 90 </template>
19 91  
20 92 <script>
21 93 export default {
22   - data() {
23   - return {
  94 + methods: {
  95 + handleClick() {
  96 + console.log('click');
24 97 }
25   - },
  98 + }
26 99 }
27 100 </script>
28 101 ```
29 102  
30   -:::
31 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 123 \ No newline at end of file
... ...
packages/button/index.css
  Diff comments   View file @76ac7ee
1 1 .zui-button {
2   - background-color: #FCD404;
3   - color: #FFF;
  2 + color: #323233;
  3 + background-color: #fff;
  4 + border: 1px solid #ebedf0;
4 5 padding: 5px 15px;
5 6 font-size: 14px;
6 7 cursor: pointer;
7 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 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 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 73 \ No newline at end of file
... ...
packages/button/index.vue
  Diff comments   View file @76ac7ee
1 1 <template>
2   - <div class="zui-button" :style="style" @click="onClick">
  2 + <div class="zui-button" :class="classRender" :style="style" @click="onClick">
3 3 <slot></slot>
4 4 </div>
5 5 </template>
... ... @@ -8,35 +8,42 @@
8 8 export default {
9 9 name: 'Button',
10 10 props: {
  11 + type: {
  12 + type: String,
  13 + default: 'default'
  14 + },
  15 + size: {
  16 + type: String,
  17 + default: 'md'
  18 + },
11 19 block: {
12 20 type: Boolean,
13 21 default: false
14 22 },
15 23 round: Boolean,
16   - rect: Boolean,
17   - },
18   - data: function() {
19   - return {
20   -
21   - };
  24 + square: Boolean,
  25 + disabled: Boolean,
22 26 },
23 27 computed: {
24 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 31 borderRadius: function() {
28 32 if (this.round) {
29 33 return '20px';
30   - } else if (this.rect) {
  34 + } else if (this.square) {
31 35 return '0';
32 36 } else {
33 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 44 methods: {
38 45 onClick: function() {
39   - if (this.$listeners['click']) {
  46 + if (this.$listeners['click'] && !this.disabled) {
40 47 this.$emit('click');
41 48 }
42 49 }
... ...
packages/cell/index.css
  Diff comments   View file @76ac7ee
... ... @@ -10,7 +10,6 @@
10 10 overflow: hidden;
11 11 color: #323233;
12 12 font-size: 14px;
13   - line-height: 24px;
14 13 background-color: #fff;
15 14 }
16 15  
... ... @@ -32,9 +31,7 @@
32 31  
33 32 .zui-cell__left-icon, .zui-cell__right-icon {
34 33 min-width: 1em;
35   - height: 24px;
36 34 font-size: 16px;
37   - line-height: 24px;
38 35 }
39 36  
40 37 .zui-cell:not(:last-child)::after {
... ...