Skip to content

Commit

Permalink
fox:Modify the positioning problem of dot
Browse files Browse the repository at this point in the history
  • Loading branch information
kanghuiyi66 committed Jan 5, 2021
1 parent ad788e0 commit 393cd37
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 16 deletions.
12 changes: 10 additions & 2 deletions packages/varlet-ui/src/badge/Badge.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
>
Expand All @@ -31,16 +32,23 @@
},
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') {
values.value = props.value > props.maxValue ? `${props.maxValue}+` : props.value
} 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
}
}
})
Expand Down
20 changes: 13 additions & 7 deletions packages/varlet-ui/src/badge/badge.less
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,6 @@
&--danger {
background: @color-danger;
}

&--dot {
width: 8px;
height: 8px;
border-radius: 8px;
padding: 0;
}
&--right-top{
position: absolute;
top: 0;
Expand Down Expand Up @@ -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;
}
}
25 changes: 18 additions & 7 deletions packages/varlet-ui/src/badge/example/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand All @@ -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
}
Expand All @@ -86,7 +96,8 @@
margin-right: 20px;
margin-bottom: 8px;
}
.example-span{
.example-span {
font-size: 14px;
margin-right: 10px;
}
Expand Down

0 comments on commit 393cd37

Please sign in to comment.