frontend / zui

Download as
Browse Code »

Commit e545066c09a2d8fcc2f5f71d9db831f1ce2aee96

Authored by 刘汉宸
1 parent 4b8ead7c
Exists in master

[新增] 标签

Showing 4 changed files with 341 additions and 0 deletions   Show diff stats
examples/router/routes.js
  Diff comments   View file @e545066
... ... @@ -42,6 +42,12 @@ const _components = [
42 42 meta: { title: 'Icon 图标' },
43 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 {
... ...
examples/views/docs/component/tag.md 0 → 100644
  Diff comments   View file @e545066
... ... @@ -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 41 \ No newline at end of file
... ...
packages/tag/index.css 0 → 100644
  Diff comments   View file @e545066
... ... @@ -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 +}
... ...
packages/tag/index.vue 0 → 100644
  Diff comments   View file @e545066
... ... @@ -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 150 \ No newline at end of file
... ...