feat(tag): refresh ui

Signed-off-by: jacknan <zhumaonan@aliyun.com>

examples/sites/demos/mobile/app/tag/style.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="tiny-tag-demo">
+    <tiny-tag color="default" text="" type="round" cycleColor="#ff2956"> 默认 </tiny-tag>
+    <tiny-tag color="default" text="红色" type="round" />
+    <tiny-tag color="default" text="蓝色" type="round"> </tiny-tag>
+    <tiny-tag color="default" text="黄色" type="round"> </tiny-tag>
+    <tiny-tag color="default" text="绿色" type="round"> </tiny-tag>
+  </div>
+</template>
+
+<script>
+import { Tag } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTag: Tag
+  }
+}
+</script>
+
+<style>
+.tiny-tag-demo {
+  padding: 10px;
+}
+
+.tiny-mobile-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>

examples/sites/demos/mobile/app/tag/webdoc/tag.js

@@ -49,6 +49,18 @@ export default {
         'en-US': 'Mini'
       },
       codeFiles: ['mini.vue']
+    },
+    {
+      demoId: 'style',
+      name: {
+        'zh-CN': '样式',
+        'en-US': 'style'
+      },
+      desc: {
+        'zh-CN': '样式',
+        'en-US': 'style'
+      },
+      codeFiles: ['style.vue']
     }
   ]
 }

packages/renderless/src/tag/vue.ts

@@ -26,7 +26,8 @@ export const renderless = (
     mini: props.mini,
     color: props.color,
     text: props.text,
-    maxWidth: props.maxWidth
+    maxWidth: props.maxWidth,
+    cycleColor: props.cycleColor
   })
 
   const api: ITagApi = {

packages/renderless/types/tag.type.ts

@@ -10,6 +10,7 @@ export interface ITagState {
   color: string
   mini: boolean
   maxWidth: string | number
+  cycleColor: string
 }
 
 export interface ITagApi {

packages/theme-mobile/src/tag/index.less

@@ -30,6 +30,20 @@
   overflow: hidden;
   text-overflow: ellipsis;
 
+  &-round {
+    background-color: white !important;
+
+    &-cycle {
+      display: inline-block;
+      line-height: 100%;
+      background-color: var(--ti-mobile-tag-color-default);
+      border-radius: 4px;
+      width: 8px;
+      height: 8px;
+      margin-right: 4px;
+    }
+  }
+
   &-mini {
     line-height: var(--ti-mobile-tag-height-mini);
     padding: 0 var(--ti-mobile-tag-padding-mini);

packages/vue/src/tag/src/index.ts

@@ -44,7 +44,8 @@ export const tagProps = {
   maxWidth: {
     type: [String, Number],
     default: null
-  }
+  },
+  cycleColor: String
 }
 
 export default defineComponent({

packages/vue/src/tag/src/mobile.vue

@@ -12,9 +12,19 @@
 
 <template>
   <div
-    :class="['tiny-mobile-tag', 'tiny-mobile-tag-' + state.color, state.mini ? 'tiny-mobile-tag-mini' : null]"
+    :class="[
+      'tiny-mobile-tag',
+      'tiny-mobile-tag-' + state.color,
+      state.mini ? 'tiny-mobile-tag-mini' : null,
+      state.type === 'round' ? `tiny-mobile-tag-round` : null
+    ]"
     :style="{ maxWidth: state.maxWidth ? `${state.maxWidth}px` : null }"
   >
+    <div
+      v-if="state.type === 'round'"
+      class="tiny-mobile-tag-round-cycle"
+      :style="{ backgroundColor: state.cycleColor }"
+    ></div>
     <slot>{{ state.text }}</slot>
   </div>
 </template>
@@ -27,7 +37,7 @@ import '@opentiny/vue-theme-mobile/tag/index.less'
 
 export default defineComponent({
   emits: ['click', 'close'],
-  props: [...props, 'text', 'color', 'width', 'mini', 'maxWidth'],
+  props: [...props, 'text', 'color', 'width', 'mini', 'maxWidth', 'type', 'cycleColor'],
   setup(props, context) {
     return setup({ props, context, renderless, api, h }) as unknown as ITagApi
   }