frontend / zui

Download as
Browse Code »

Commit 95417b870a76d45820d3aab6640033e28c360dd9

Authored by 刘汉宸
1 parent 60e30555
Exists in master

[修改] 标签新增圆角和圆点配置，更新标签文档

Showing 3 changed files with 110 additions and 28 deletions   Show diff stats
examples/views/docs/component/tag.md
  Diff comments   View file @95417b8
@@ -4,38 +4,100 @@ @@ -4,38 +4,100 @@
4 4
5 ## 基础用法 5 ## 基础用法
6 6
7 -标签说明 7 +默认为线框类型，配置`radius`属性改变圆角属性，配置`font-color`属性改变字体和线框颜色
8 8
9 -::: snippet 示例 9 +::: snippet 注意：配置`radius`时需要加上单位
10 10
11 ```html 11 ```html
12 <template> 12 <template>
13 <div> 13 <div>
14 - <zui-tag>6</zui-tag>  
15 - <zui-tag size="tiny" shape="circle" type="fill" fill-color="#FC7353" font-color="#000">2</zui-tag>  
16 - <zui-tag  
17 - size="small"  
18 - shape="circle"  
19 - sharp="bottom-left"  
20 - type="fill"  
21 - fill-color="linear-gradient(90deg, #FC7353 0%, #FC9153 100%)"  
22 - font-color="#fff"  
23 - >续保3折起</zui-tag>  
24 - <zui-tag size="small" shape="circle" sharp="bottom-left" type="fill" fill-color="rgba(231, 64, 33, 1)" font-color="#fff">  
25 - 发布3条 14 + <zui-tag>默认标签</zui-tag>
  15 + <zui-tag radius="4px">标签调整圆角</zui-tag>
  16 + <zui-tag font-color="#28AA91">标签颜色</zui-tag>
  17 + </div>
  18 +</template>
  19 +```
  20 +
  21 +:::
  22 +
  23 +## 填充效果
  24 +
  25 +配置`type`属性改变填充类型，配置`fill-color`改变填充类型颜色
  26 +
  27 +::: snippet 支持`fill`, `ghost`，默认为`ghost`
  28 +
  29 +```html
  30 +<template>
  31 + <div>
  32 + <zui-tag type="ghost">线框类型</zui-tag>
  33 + <zui-tag type="fill">填充类型</zui-tag>
  34 + <zui-tag type="fill" fill-color="#6691ff">填充颜色</zui-tag>
  35 + </div>
  36 +</template>
  37 +```
  38 +
  39 +:::
  40 +
  41 +## 特殊标签
  42 +
  43 +特殊业务需求下的标签，配置`shape`属性改变类型
  44 +
  45 +::: snippet 支持`coupon`, `quarter`, `bubble`, `dot`
  46 +
  47 +```html
  48 +<template>
  49 + <div>
  50 + <zui-tag size="large" shape="coupon" fill-color="#FC9153" type="fill" font-color="#fff" style="margin-right:20px;">票据标签</zui-tag>
  51 + <zui-tag size="large" shape="quarter" fill-color="#FC9153" type="fill" font-color="#fff" style="margin-right:20px;">
  52 + <zui-icon name="close"></zui-icon>
26 </zui-tag> 53 </zui-tag>
27 - <zui-tag size="small" shape="square" font-color="#28AA91" type="ghost">可选</zui-tag> 54 + <zui-tag size="large" shape="bubble" fill-color="linear-gradient(90deg, #FF5B60 0%, #F98472 100%)" type="fill" style="margin-right:20px;">12</zui-tag>
  55 + <zui-tag shape="dot" type="fill">1</zui-tag>
28 </div> 56 </div>
29 </template> 57 </template>
  58 +```
  59 +
  60 +:::
30 61
31 -<script>  
32 -export default {  
33 - data() {  
34 - return {  
35 - }  
36 - },  
37 -}  
38 -</script> 62 +## 圆点类型
  63 +
  64 +配置`shape`属性为`dot`时为圆点类型，配置`dot-size`属性自定义圆点大小
  65 +
  66 +::: snippet 注意：圆点类型宽高一致，如有内容时应注意内容溢出
  67 +
  68 +```html
  69 +<template>
  70 + <div>
  71 + <zui-tag shape="dot" size="tiny"></zui-tag>
  72 + <zui-tag shape="dot" type="fill" size="tiny"></zui-tag>
  73 + <zui-tag shape="dot"></zui-tag>
  74 + <zui-tag shape="dot" type="fill"></zui-tag>
  75 + <zui-tag shape="dot" type="fill">9</zui-tag>
  76 + <zui-tag shape="dot" type="fill" dot-size="20px">9+</zui-tag>
  77 + </div>
  78 +</template>
39 ``` 79 ```
40 80
41 -:::  
42 \ No newline at end of file 81 \ No newline at end of file
  82 +:::
  83 +
  84 +## API
  85 +
  86 +## Attribute 属性
  87 +
  88 +参数|说明|类型|可选值|默认值
  89 +-|-|-|-|-
  90 +size | 大小 | String | tiny, small, large | large
  91 +shape | 形状 | String | square, circle, fillet, quarter, coupon, bubble | square
  92 +sharp | 尖角| String | top-left, top-right, bottom-left, bottom-right | -
  93 +type | 类型 | String | fill ghost | ghost
  94 +fillColor | 填充颜色 | String | - | rgba(0,0,0,0)
  95 +fontWeight | 字体粗细 | String | normal, bold, bolder | normal
  96 +fontColor | 字体颜色 | String | - | -
  97 +dotSize | 园点大小 | String | - | -
  98 +radius | 圆角大小 | String | - | -
  99 +
  100 +## Events 事件
  101 +
  102 +事件名称|说明|回调参数
  103 +-|-|-
  104 +click | 按钮点击事件 | -
43 \ No newline at end of file 105 \ No newline at end of file
packages/tag/index.css
  Diff comments   View file @95417b8
@@ -9,6 +9,15 @@ @@ -9,6 +9,15 @@
9 color: rgba(231, 64, 33, 1); 9 color: rgba(231, 64, 33, 1);
10 border-color: rgba(231, 64, 33, 1); 10 border-color: rgba(231, 64, 33, 1);
11 } 11 }
  12 +.zui-tag .shape-dot {
  13 + border-radius: 50%;
  14 + height: 16px;
  15 + width: 16px;
  16 +}
  17 +.zui-tag .shape-dot.size-tiny {
  18 + height: 8px;
  19 + width: 8px;
  20 +}
12 .zui-tag .shape-square { 21 .zui-tag .shape-square {
13 padding: 0 6px; 22 padding: 0 6px;
14 border-radius: 50%; 23 border-radius: 50%;
@@ -125,10 +134,9 @@ @@ -125,10 +134,9 @@
125 } 134 }
126 .zui-tag .type-fill { 135 .zui-tag .type-fill {
127 color: #fff; 136 color: #fff;
128 - background: rgba(231, 64, 33, 1);  
129 } 137 }
130 .zui-tag .type-ghost { 138 .zui-tag .type-ghost {
131 - border: 1px solid rgba(231, 64, 33, 1); 139 + border: 1px solid #ff5151;
132 background: rgba(0,0,0,0); 140 background: rgba(0,0,0,0);
133 } 141 }
134 .zui-tag .font-weight-normal { 142 .zui-tag .font-weight-normal {
packages/tag/index.vue
  Diff comments   View file @95417b8
@@ -60,7 +60,9 @@ export default { @@ -60,7 +60,9 @@ export default {
60 fontColor: { 60 fontColor: {
61 type: String, 61 type: String,
62 default: "" 62 default: ""
63 - } 63 + },
  64 + dotSize: String,
  65 + radius: String,
64 }, 66 },
65 data: function() { 67 data: function() {
66 return { 68 return {
@@ -98,7 +100,14 @@ export default { @@ -98,7 +100,14 @@ export default {
98 var style = {}; 100 var style = {};
99 if (this.type == "fill") { 101 if (this.type == "fill") {
100 // eslint-disable-next-line 102 // eslint-disable-next-line
101 - this.fillColor && (style.background = this.fillColor); 103 + style.background = this.fillColor || '#ff5151';
  104 + }
  105 + if (this.shape == 'dot') {
  106 + style.height = this.dotSize;
  107 + style.width = this.dotSize;
  108 + style.display = 'flex';
  109 + style.alignItems = 'center';
  110 + style.justifyContent = 'center';
102 } 111 }
103 if (this.fontColor) { 112 if (this.fontColor) {
104 if (this.type == "ghost") { 113 if (this.type == "ghost") {
@@ -106,6 +115,9 @@ export default { @@ -106,6 +115,9 @@ export default {
106 } 115 }
107 style.color = this.fontColor; 116 style.color = this.fontColor;
108 } 117 }
  118 + if (this.radius) {
  119 + style.borderRadius = this.radius;
  120 + }
109 return style; 121 return style;
110 }, 122 },
111 leftCoupon: function() { 123 leftCoupon: function() {