Commit e545066c09a2d8fcc2f5f71d9db831f1ce2aee96
1 parent
4b8ead7c
Exists in
master
[新增] 标签
Showing
4 changed files
with
341 additions
and
0 deletions
Show diff stats
examples/router/routes.js
| @@ -42,6 +42,12 @@ const _components = [ | @@ -42,6 +42,12 @@ const _components = [ | ||
| 42 | meta: { title: 'Icon 图标' }, | 42 | meta: { title: 'Icon 图标' }, |
| 43 | component: () => import('@/views/docs/component/icon.md'), | 43 | component: () => import('@/views/docs/component/icon.md'), |
| 44 | }, | 44 | }, |
| 45 | + { | ||
| 46 | + path: 'tag', | ||
| 47 | + name: 'tag', | ||
| 48 | + meta: { title: 'Tag 标签' }, | ||
| 49 | + component: () => import('@/views/docs/component/tag.md'), | ||
| 50 | + }, | ||
| 45 | ] | 51 | ] |
| 46 | }, | 52 | }, |
| 47 | { | 53 | { |
| @@ -0,0 +1,40 @@ | @@ -0,0 +1,40 @@ | ||
| 1 | +# Tag 标签 | ||
| 2 | + | ||
| 3 | +参考 <a href="https://didi.github.io/mand-mobile/#/zh-CN/docs/components/basic/tag" target="_blank">Mand Mobile - Tag</a> | ||
| 4 | + | ||
| 5 | +## 基础用法 | ||
| 6 | + | ||
| 7 | +标签说明 | ||
| 8 | + | ||
| 9 | +::: snippet 示例 | ||
| 10 | + | ||
| 11 | +```html | ||
| 12 | +<template> | ||
| 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条 | ||
| 26 | + </zui-tag> | ||
| 27 | + </div> | ||
| 28 | +</template> | ||
| 29 | + | ||
| 30 | +<script> | ||
| 31 | +export default { | ||
| 32 | + data() { | ||
| 33 | + return { | ||
| 34 | + } | ||
| 35 | + }, | ||
| 36 | +} | ||
| 37 | +</script> | ||
| 38 | +``` | ||
| 39 | + | ||
| 40 | +::: | ||
| 0 | \ No newline at end of file | 41 | \ No newline at end of file |
| @@ -0,0 +1,146 @@ | @@ -0,0 +1,146 @@ | ||
| 1 | +.zui-tag { | ||
| 2 | + font-size: 14px; | ||
| 3 | + text-align: center; | ||
| 4 | + display: inline-block; | ||
| 5 | + -webkit-user-select: none; | ||
| 6 | +} | ||
| 7 | +.zui-tag .default { | ||
| 8 | + background: rgba(0,0,0,0); | ||
| 9 | + color: rgba(231, 64, 33, 1); | ||
| 10 | + border-color: rgba(231, 64, 33, 1); | ||
| 11 | +} | ||
| 12 | +.zui-tag .shape-square { | ||
| 13 | + padding: 0 6px; | ||
| 14 | + border-radius: 50%; | ||
| 15 | +} | ||
| 16 | +.zui-tag .shape-square { | ||
| 17 | + padding: 0 6px; | ||
| 18 | + border-radius: 0; | ||
| 19 | +} | ||
| 20 | +.zui-tag .shape-fillet { | ||
| 21 | + padding: 1px 4px; | ||
| 22 | + border-radius: 1px; | ||
| 23 | +} | ||
| 24 | +.zui-tag .shape-quarter { | ||
| 25 | + position: relative; | ||
| 26 | + display: flex; | ||
| 27 | + width: 28px; | ||
| 28 | + height: 28px; | ||
| 29 | + background: transparent; | ||
| 30 | + overflow: hidden; | ||
| 31 | +} | ||
| 32 | +.zui-tag .shape-quarter .quarter-content { | ||
| 33 | + position: relative; | ||
| 34 | + left: 10%; | ||
| 35 | + bottom: 10%; | ||
| 36 | + display: flex; | ||
| 37 | + flex: 1; | ||
| 38 | + z-index: 2; | ||
| 39 | + justify-content: center; | ||
| 40 | + align-items: center; | ||
| 41 | +} | ||
| 42 | +.zui-tag .shape-quarter .quarter-bg { | ||
| 43 | + position: absolute; | ||
| 44 | + top: -100%; | ||
| 45 | + left: 0; | ||
| 46 | + width: 200%; | ||
| 47 | + height: 200%; | ||
| 48 | + border-radius: 50%; | ||
| 49 | +} | ||
| 50 | +.zui-tag .shape-quarter .quarter-wrap { | ||
| 51 | + display: inline-block; | ||
| 52 | + padding: 8px 6px 5px 13px; | ||
| 53 | +} | ||
| 54 | +.zui-tag .shape-quarter .quarter-wrap-hidden { | ||
| 55 | + visibility: hidden; | ||
| 56 | + display: inline-block; | ||
| 57 | + padding: 8px 6px 5px 13px; | ||
| 58 | +} | ||
| 59 | +.zui-tag .shape-quarter.size-small { | ||
| 60 | + width: 20px; | ||
| 61 | + height: 20px; | ||
| 62 | +} | ||
| 63 | +.zui-tag .shape-quarter.size-tiny { | ||
| 64 | + width: 12px; | ||
| 65 | + height: 12px; | ||
| 66 | +} | ||
| 67 | +.zui-tag .shape-coupon { | ||
| 68 | + position: relative; | ||
| 69 | + padding: 0 5px; | ||
| 70 | + background: transparent !important; | ||
| 71 | +} | ||
| 72 | +.zui-tag .shape-coupon .coupon-container { | ||
| 73 | + padding: 1px 0; | ||
| 74 | +} | ||
| 75 | +.zui-tag .shape-coupon .left-coupon, | ||
| 76 | +.zui-tag .shape-coupon .right-coupon { | ||
| 77 | + position: absolute; | ||
| 78 | + top: 0; | ||
| 79 | + width: 5px; | ||
| 80 | + height: 100%; | ||
| 81 | +} | ||
| 82 | +.zui-tag .shape-coupon .left-coupon { | ||
| 83 | + left: 0; | ||
| 84 | +} | ||
| 85 | +.zui-tag .shape-coupon .right-coupon { | ||
| 86 | + right: 0; | ||
| 87 | +} | ||
| 88 | +.zui-tag .shape-coupon.size-small { | ||
| 89 | + padding: 0 4px; | ||
| 90 | +} | ||
| 91 | +.zui-tag .shape-coupon.size-small .left-coupon, | ||
| 92 | +.zui-tag .shape-coupon.size-small .right-coupon { | ||
| 93 | + width: 4px; | ||
| 94 | +} | ||
| 95 | +.zui-tag .shape-coupon.size-tiny { | ||
| 96 | + padding: 0 2.5px; | ||
| 97 | +} | ||
| 98 | +.zui-tag .shape-coupon.size-tiny .left-coupon, | ||
| 99 | +.zui-tag .shape-coupon.size-tiny .right-coupon { | ||
| 100 | + width: 2.5px; | ||
| 101 | +} | ||
| 102 | +.zui-tag .shape-bubble { | ||
| 103 | + width: 25px; | ||
| 104 | + padding: 3px 0; | ||
| 105 | + border-radius: 50%; | ||
| 106 | + border-bottom-left-radius: 0; | ||
| 107 | + box-sizing: border-box; | ||
| 108 | +} | ||
| 109 | +.zui-tag .shape-bubble.size-small { | ||
| 110 | + width: 19px; | ||
| 111 | + padding: 1.5px 0; | ||
| 112 | +} | ||
| 113 | +.zui-tag .shape-bubble.size-tiny { | ||
| 114 | + width: 12px; | ||
| 115 | + padding: 1px 0; | ||
| 116 | +} | ||
| 117 | +.zui-tag .size-large { | ||
| 118 | + font-size: 13px; | ||
| 119 | +} | ||
| 120 | +.zui-tag .size-small { | ||
| 121 | + font-size: 10px; | ||
| 122 | +} | ||
| 123 | +.zui-tag .size-tiny { | ||
| 124 | + font-size: 6px; | ||
| 125 | +} | ||
| 126 | +.zui-tag .type-fill { | ||
| 127 | + color: #fff; | ||
| 128 | + background: rgba(231, 64, 33, 1); | ||
| 129 | +} | ||
| 130 | +.zui-tag .type-ghost { | ||
| 131 | + border: 1px solid rgba(231, 64, 33, 1); | ||
| 132 | + background: rgba(0,0,0,0); | ||
| 133 | +} | ||
| 134 | +.zui-tag .font-weight-normal { | ||
| 135 | + font-weight: normal; | ||
| 136 | +} | ||
| 137 | +.zui-tag .font-weight-bold { | ||
| 138 | + font-weight: bold; | ||
| 139 | +} | ||
| 140 | +.zui-tag .font-weight-bolder { | ||
| 141 | + font-weight: bolder; | ||
| 142 | +} | ||
| 143 | +.zui-tag .md-icon.icon-font { | ||
| 144 | + font-size: inherit; | ||
| 145 | + transform: scale(1.2); | ||
| 146 | +} |
| @@ -0,0 +1,149 @@ | @@ -0,0 +1,149 @@ | ||
| 1 | +<template> | ||
| 2 | + <div class="zui-tag"> | ||
| 3 | + <template v-if="showQuarter"> | ||
| 4 | + <div :class="computedClass"> | ||
| 5 | + <div class="quarter-content"> | ||
| 6 | + <slot></slot> | ||
| 7 | + </div> | ||
| 8 | + <div class="quarter-bg" :style="colorStyle"></div> | ||
| 9 | + </div> | ||
| 10 | + </template> | ||
| 11 | + <template v-else-if="showCoupon"> | ||
| 12 | + <div :class="computedClass"> | ||
| 13 | + <div class="coupon-container" :style="colorStyle"> | ||
| 14 | + <div class="left-coupon" :style="leftCoupon" v-if="showCoupon"></div> | ||
| 15 | + <slot></slot> | ||
| 16 | + <div class="right-coupon" :style="rightCoupon" v-if="showCoupon"></div> | ||
| 17 | + </div> | ||
| 18 | + </div> | ||
| 19 | + </template> | ||
| 20 | + <template v-else> | ||
| 21 | + <div :class="computedClass" :style="[colorStyle, sizeStyle]"> | ||
| 22 | + <slot></slot> | ||
| 23 | + </div> | ||
| 24 | + </template> | ||
| 25 | + </div> | ||
| 26 | +</template> | ||
| 27 | + | ||
| 28 | +<script> | ||
| 29 | +export default { | ||
| 30 | + name: "Tag", | ||
| 31 | + props: { | ||
| 32 | + size: { | ||
| 33 | + type: String, // tiny, small, large | ||
| 34 | + default: "large" | ||
| 35 | + }, | ||
| 36 | + shape: { | ||
| 37 | + // square, circle, fillet, quarter, coupon, bubble | ||
| 38 | + type: String, | ||
| 39 | + default: "square" | ||
| 40 | + }, | ||
| 41 | + sharp: { | ||
| 42 | + // top-left, top-right, bottom-left, bottom-right | ||
| 43 | + type: String, | ||
| 44 | + default: "" | ||
| 45 | + }, | ||
| 46 | + type: { | ||
| 47 | + // fill ghost | ||
| 48 | + type: String, | ||
| 49 | + default: "ghost" | ||
| 50 | + }, | ||
| 51 | + fillColor: { | ||
| 52 | + type: String, | ||
| 53 | + default: "" | ||
| 54 | + }, | ||
| 55 | + fontWeight: { | ||
| 56 | + // normal, bold, bolder | ||
| 57 | + type: String, | ||
| 58 | + default: "normal" | ||
| 59 | + }, | ||
| 60 | + fontColor: { | ||
| 61 | + type: String, | ||
| 62 | + default: "" | ||
| 63 | + } | ||
| 64 | + }, | ||
| 65 | + data: function() { | ||
| 66 | + return { | ||
| 67 | + sizeStyle: {} | ||
| 68 | + }; | ||
| 69 | + }, | ||
| 70 | + mounted() { | ||
| 71 | + this.$nextTick(() => { | ||
| 72 | + if (this.shape === "circle") { | ||
| 73 | + var radius = this.$el.offsetHeight / 2; | ||
| 74 | + this.$set(this.sizeStyle, "paddingLeft", radius / 2 + "px"); | ||
| 75 | + this.$set(this.sizeStyle, "paddingRight", radius / 2 + "px"); | ||
| 76 | + this.$set(this.sizeStyle, "borderRadius", radius + "px"); | ||
| 77 | + if (this.sharp) { | ||
| 78 | + this.$set( | ||
| 79 | + this.sizeStyle, | ||
| 80 | + this.transformCamelCase("border-" + this.sharp + "-radius"), | ||
| 81 | + 0 | ||
| 82 | + ); | ||
| 83 | + } | ||
| 84 | + } | ||
| 85 | + }); | ||
| 86 | + }, | ||
| 87 | + computed: { | ||
| 88 | + computedClass: function() { | ||
| 89 | + return [ | ||
| 90 | + "default", | ||
| 91 | + "size-" + this.size, | ||
| 92 | + "shape-" + this.shape, | ||
| 93 | + "type-" + this.type, | ||
| 94 | + "font-weight-" + this.fontWeight | ||
| 95 | + ]; | ||
| 96 | + }, | ||
| 97 | + colorStyle: function() { | ||
| 98 | + var style = {}; | ||
| 99 | + if (this.type === "fill") { | ||
| 100 | + // eslint-disable-next-line | ||
| 101 | + this.fillColor && (style.background = this.fillColor); | ||
| 102 | + } | ||
| 103 | + if (this.fontColor) { | ||
| 104 | + if (this.type === "ghost") { | ||
| 105 | + style.borderColor = this.fontColor; | ||
| 106 | + } | ||
| 107 | + style.color = this.fontColor; | ||
| 108 | + } | ||
| 109 | + return style; | ||
| 110 | + }, | ||
| 111 | + leftCoupon: function() { | ||
| 112 | + return { | ||
| 113 | + background: this.fillColor | ||
| 114 | + ? "radial-gradient(circle at left, transparent 33%, " + | ||
| 115 | + this.fillColor + | ||
| 116 | + " 33%)" | ||
| 117 | + : "" | ||
| 118 | + }; | ||
| 119 | + }, | ||
| 120 | + rightCoupon: function() { | ||
| 121 | + return { | ||
| 122 | + background: this.fillColor | ||
| 123 | + ? "radial-gradient(circle at right, transparent 33%, " + | ||
| 124 | + this.fillColor + | ||
| 125 | + " 33%)" | ||
| 126 | + : "" | ||
| 127 | + }; | ||
| 128 | + }, | ||
| 129 | + showQuarter: function() { | ||
| 130 | + return this.shape === "quarter"; | ||
| 131 | + }, | ||
| 132 | + showCoupon: function() { | ||
| 133 | + return this.shape === "coupon"; | ||
| 134 | + } | ||
| 135 | + }, | ||
| 136 | + methods: { | ||
| 137 | + transformCamelCase: function(str) { | ||
| 138 | + var re = /-(\w)/g; | ||
| 139 | + return str.replace(re, function($0, $1) { | ||
| 140 | + return $1.toUpperCase(); | ||
| 141 | + }); | ||
| 142 | + } | ||
| 143 | + } | ||
| 144 | +}; | ||
| 145 | +</script> | ||
| 146 | + | ||
| 147 | +<style> | ||
| 148 | +@import "./index.css"; | ||
| 149 | +</style> | ||
| 0 | \ No newline at end of file | 150 | \ No newline at end of file |