From 393cd37afdc7f6b4989aaa600c6138117bc6cefe Mon Sep 17 00:00:00 2001
From: kanghuiyi <1193185379@qq.com>
Date: Tue, 5 Jan 2021 18:09:27 +0800
Subject: [PATCH] fox:Modify the positioning problem of dot

---
 packages/varlet-ui/src/badge/Badge.vue        | 12 +++++++--
 packages/varlet-ui/src/badge/badge.less       | 20 +++++++++------
 .../varlet-ui/src/badge/example/index.vue     | 25 +++++++++++++------
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/packages/varlet-ui/src/badge/Badge.vue b/packages/varlet-ui/src/badge/Badge.vue
index b4a29daee01..83ee0a68851 100644
--- a/packages/varlet-ui/src/badge/Badge.vue
+++ b/packages/varlet-ui/src/badge/Badge.vue
@@ -7,7 +7,8 @@
       `var-badge--${type}`,
       'var-badge__content',
       {'var-badge--dot':dot},
-      position?`var-badge--${position} var-badge--position`:null
+      position?`var-badge--${position} var-badge--position`:null,
+      dotPosition
       ]"
         :style="{background:color}"
       >
@@ -31,7 +32,10 @@
 		},
 		props,
 		setup(props) {
+			console.log(typeof props.value === 'number' && typeof props.maxValue === 'number')
+			console.log(props)
 			const values: Ref<number | string | null | undefined> = ref(null)
+			const dotPosition: Ref<string | null> = ref(null)
 			if (props.dot) {
 				values.value = null
 			} else if (typeof props.value === 'number' && typeof props.maxValue === 'number') {
@@ -39,8 +43,12 @@
 			} else {
 				values.value = props.value
 			}
+			if(props.position&&props.dot){
+				dotPosition.value = props.position.indexOf('right') !== -1 ? 'var-badge--dot-right' : props.position.indexOf('left') !== -1 ? 'var-badge--dot-left' : null
+			}
 			return {
-				values
+				values,
+        dotPosition
 			}
 		}
 	})
diff --git a/packages/varlet-ui/src/badge/badge.less b/packages/varlet-ui/src/badge/badge.less
index 9ab73d957a6..bd72b6b8410 100644
--- a/packages/varlet-ui/src/badge/badge.less
+++ b/packages/varlet-ui/src/badge/badge.less
@@ -51,13 +51,6 @@
   &--danger {
     background: @color-danger;
   }
-
-  &--dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 8px;
-    padding: 0;
-  }
   &--right-top{
     position: absolute;
     top: 0;
@@ -85,4 +78,17 @@
   &--position{
     border: 2px #ffffff solid;
   }
+  &--dot {
+    box-sizing: content-box;
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    padding: 0;
+  }
+  &--dot-right{
+    right: 6px;
+  }
+  &--dot-left{
+    left: 6px;
+  }
 }
diff --git a/packages/varlet-ui/src/badge/example/index.vue b/packages/varlet-ui/src/badge/example/index.vue
index 8fabe03b829..0d81986b917 100644
--- a/packages/varlet-ui/src/badge/example/index.vue
+++ b/packages/varlet-ui/src/badge/example/index.vue
@@ -6,7 +6,7 @@
     <var-badge :value="data1" type="info"></var-badge>
     <var-badge :value="data1" type="warning"></var-badge>
     <var-badge :value="data1" type="success"></var-badge>
-    <var-badge :value="data1" type="danger"></var-badge>
+    <var-badge :value="data2" type="danger"></var-badge>
     <var-badge type="danger"></var-badge>
     <app-type>圆点徽标</app-type>
     <var-badge dot type="danger"></var-badge>
@@ -19,19 +19,27 @@
 
     <app-type>不同徽标定位</app-type>
 
-    <var-badge type="danger" position="right-top">
+    <var-badge type="danger" dot position="right-top">
       <var-chip plain :round="false" color="#009688">右上</var-chip>
     </var-badge>
-    <var-badge type="danger" position="right-bottom">
+    <var-badge type="danger" dot position="right-bottom">
       <var-chip plain :round="false" color="#009688">右下</var-chip>
     </var-badge>
-    <var-badge type="danger" position="left-top">
+    <var-badge type="danger" dot position="left-top">
       <var-chip plain :round="false" color="#009688">左上</var-chip>
     </var-badge>
     <var-badge type="danger" position="left-bottom">
       <var-chip plain :round="false" color="#009688">左下</var-chip>
     </var-badge>
 
+    <app-type>最大值</app-type>
+    <var-badge type="danger" position="right-top" :value="88" :max-value="99">
+      <var-chip plain :round="false" color="#009688">小于等于最大值</var-chip>
+    </var-badge>
+    <var-badge type="danger" position="right-top" :value="666" :max-value="99">
+      <var-chip plain :round="false" color="#009688">大于最大值</var-chip>
+    </var-badge>
+
     <app-type>是否显示徽标</app-type>
 
     <var-button @click="handleChange">
@@ -57,23 +65,25 @@
 	import { defineComponent, Ref, ref } from 'vue'
 	import Badge from '..'
 	import Button from '../../button'
-  import Chip from '../../chip'
+	import Chip from '../../chip'
 
 	export default defineComponent({
 		name: 'BadgeExample',
 		components: {
 			[Badge.name]: Badge,
 			[Button.name]: Button,
-      [Chip.name]:Chip
+			[Chip.name]: Chip
 		},
 		setup() {
 			const data1: Ref<string | number> = ref(1)
+			const data2: Ref<string | number> = ref('hot')
 			const hidden: Ref<boolean> = ref(false)
 			const handleChange = () => {
 				hidden.value = !hidden.value
 			}
 			return {
 				data1,
+				data2,
 				hidden,
 				handleChange
 			}
@@ -86,7 +96,8 @@
     margin-right: 20px;
     margin-bottom: 8px;
   }
-  .example-span{
+
+  .example-span {
     font-size: 14px;
     margin-right: 10px;
   }