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 4  
5 5 ## 基础用法
6 6  
7   -标签说明
  7 +默认为线框类型，配置`radius`属性改变圆角属性，配置`font-color`属性改变字体和线框颜色
8 8  
9   -::: snippet 示例
  9 +::: snippet 注意：配置`radius`时需要加上单位
10 10  
11 11 ```html
12 12 <template>
13 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 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 56 </div>
29 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 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 105 \ No newline at end of file
... ...
packages/tag/index.css
  Diff comments   View file @95417b8
... ... @@ -9,6 +9,15 @@
9 9 color: rgba(231, 64, 33, 1);
10 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 21 .zui-tag .shape-square {
13 22 padding: 0 6px;
14 23 border-radius: 50%;
... ... @@ -125,10 +134,9 @@
125 134 }
126 135 .zui-tag .type-fill {
127 136 color: #fff;
128   - background: rgba(231, 64, 33, 1);
129 137 }
130 138 .zui-tag .type-ghost {
131   - border: 1px solid rgba(231, 64, 33, 1);
  139 + border: 1px solid #ff5151;
132 140 background: rgba(0,0,0,0);
133 141 }
134 142 .zui-tag .font-weight-normal {
... ...
packages/tag/index.vue
  Diff comments   View file @95417b8
... ... @@ -60,7 +60,9 @@ export default {
60 60 fontColor: {
61 61 type: String,
62 62 default: ""
63   - }
  63 + },
  64 + dotSize: String,
  65 + radius: String,
64 66 },
65 67 data: function() {
66 68 return {
... ... @@ -98,7 +100,14 @@ export default {
98 100 var style = {};
99 101 if (this.type == "fill") {
100 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 112 if (this.fontColor) {
104 113 if (this.type == "ghost") {
... ... @@ -106,6 +115,9 @@ export default {
106 115 }
107 116 style.color = this.fontColor;
108 117 }
  118 + if (this.radius) {
  119 + style.borderRadius = this.radius;
  120 + }
109 121 return style;
110 122 },
111 123 leftCoupon: function() {
... ...