release: 更新 TyhTagging 组件样式问题

Author: Tyh2001

CHANGELOG.md

@@ -1,5 +1,9 @@
 # 更新日志
 
+## 3.2.10 (2022-02-22)
+
+- 更新 TyhTagging 组件样式问题
+
 ## 3.2.10 (2022-02-21)
 
 - 加入 TyhTagging 组件

src/App.vue

@@ -1,4 +1,16 @@
 <template>
+  <p>
+    <tyh-tagging type="primary" size="20">tyh-ui</tyh-tagging>
+    整体<tyh-tagging type="danger" color="skyblue">非常简洁明了</tyh-tagging>，
+    虽没有很多高级的组件，但它是使用最简单的方式达到
+    <tyh-tagging type="danger">实用</tyh-tagging>的效果。
+  </p>
+  <p>
+    <tyh-tagging type="danger">
+      使用方便，配置简单，目录清晰，结构简单，组件轻量级，上手简单，像复制粘贴一样容易。
+    </tyh-tagging>
+  </p>
+
   <tyh-tagging>标注1</tyh-tagging>
   <tyh-tagging type="primary">标注2</tyh-tagging>
   <tyh-tagging type="success">标注3</tyh-tagging>
@@ -7,10 +19,10 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
-const fun = (x) => x + 1
-fun(2)
+// import { ref } from 'vue'
+// const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
+// const fun = (x) => x + 1
+// fun(2)
 // provide('newValue', '123')
 // 图片懒加载简单逻辑
 // nextTick(() => {

src/components/allStyle/tagging/style/index.css

@@ -0,0 +1,22 @@
+.tyh-tagging {
+  display: inline-block;
+  border-radius: 6px;
+  padding: 2px 8px;
+  margin: 0;
+}
+.tyh-tagging-,
+.tyh-tagging-default {
+  background-color: #e7e7e7;
+}
+.tyh-tagging-primary {
+  background-color: #3a6ff4;
+}
+.tyh-tagging-success {
+  background-color: #54c600;
+}
+.tyh-tagging-danger {
+  background-color: #d10f1b;
+}
+.tyh-tagging-warning {
+  background-color: #fbcc30;
+}

src/components/allStyle/tagging/style/index.less

@@ -0,0 +1,32 @@
+@primary: #3a6ff4;
+@success: #54c600;
+@danger: #d10f1b;
+@warning: #fbcc30;
+
+.tyh-tagging {
+  display: inline-block;
+  border-radius: 6px;
+  padding: 2px 8px;
+  margin: 0;
+}
+
+.tyh-tagging-,
+.tyh-tagging-default {
+  background-color: #e7e7e7;
+}
+
+.tyh-tagging-primary {
+  background-color: @primary;
+}
+
+.tyh-tagging-success {
+  background-color: @success;
+}
+
+.tyh-tagging-danger {
+  background-color: @danger;
+}
+
+.tyh-tagging-warning {
+  background-color: @warning;
+}

src/components/tyhUi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tyh-ui2",
-  "version": "3.2.10",
+  "version": "3.2.11",
   "description": "The next generation ui component library of tyh-ui is based on vue3 Version, fully embrace vue3.",
   "main": "src/index.js",
   "scripts": {

src/components/tyhUi/packages/tagging/TyhTagging.vue

@@ -20,14 +20,14 @@ const props = defineProps({
   },
   color: {
     type: String,
-    default: '#333'
+    default: '#fff'
   }
 })
 const isClass = computed(() => ['tyh-tagging', `tyh-tagging-${props.type}`])
 const isStyle = computed(() => {
-  return { fontSize: `${props.size}px`, color: props.color }
+  return {
+    fontSize: `${props.size}px`,
+    color: props.type === 'default' ? '#333' : props.color
+  }
 })
 </script>
-
-<style src="./style/index.css" scoped>
-</style>

src/components/tyhUi/packages/tagging/style/index.css

@@ -85,7 +85,7 @@ const install = app => {
 }
 
 const tyhUi = {
-  version: "3.2.10",
+  version: "3.2.11",
   install
 }