Browse Source

chore: 更新 Tag 标签样式,dom 元素;1、宽度避免固定,否则多文本 无法自动撑开( 需考虑文本过多时折行 )
2、尽量语义化使用 span 来实现

wangchunyu11 5 years ago
parent
commit
a276e74f95
2 changed files with 7 additions and 6 deletions
  1. 5 4
      src/packages/tag/tag.scss
  2. 2 2
      src/packages/tag/tag.vue

+ 5 - 4
src/packages/tag/tag.scss

@@ -4,6 +4,7 @@
     border: $border-width-base solid $color;
     color: $color;
     background-color: transparent;
+    padding: 1px 8px;
   } @else {
     background-color: $color;
     color: #fff;
@@ -15,8 +16,8 @@ $colorlist: $assist-color-orange $assist-color-yellow $assist-color-green $assis
 
 .nut-tag {
   cursor: pointer;
-  height: $tag-height-small;
-  padding: 0 9px;
+  min-height: $tag-height-small;
+  padding: 2px 9px;
   font-size: $font-size-small;
   border: none;
   outline: none;
@@ -25,8 +26,8 @@ $colorlist: $assist-color-orange $assist-color-yellow $assist-color-green $assis
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  // min-width: 42px;
-  width: 42px;
+  min-width: 42px;
+  max-width: 100%;
 
   @include text-ellipsis();
 

+ 2 - 2
src/packages/tag/tag.vue

@@ -1,7 +1,7 @@
 <template>
-  <div :class="clsStyle" @click="clickHandler">
+  <span :class="clsStyle" @click="clickHandler">
     <slot></slot>
-  </div>
+  </span>
 </template>
 <script>
 export default {