Skip to content

Commit

Permalink
feat: 示例代码改造-badge组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaoming99999
tealyao authored and xiaoming99999 committed Oct 23, 2022
1 parent 7b935f9 commit b0fdfa3
Show file tree
Hide file tree
Showing 9 changed files with 1,064 additions and 521 deletions.
1,355 changes: 944 additions & 411 deletions src/badge/__test__/__snapshots__/demo.test.jsx.snap
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/badge/badge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default defineComponent({
// 徽标外层样式类
const badgeClasses = computed(() => ({
[`${name}`]: true,
[`${name}__ribbon--outer`]: props.shape === 'ribbon',
[`${name}--ribbon ${name}__inner ${name}--medium`]: props.shape === 'ribbon',
}));
// 徽标内层样式类
Expand Down
31 changes: 20 additions & 11 deletions src/badge/demos/color.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,15 @@
<div class="tdesign-mobile-demo">
<t-cell-group>
<div class="badge-demo">
<div class="badge-item">
<t-badge :count="12" class="badge-item">
<t-button size="small">按钮</t-button>
</t-badge>
<t-badge :count="999" color="#52c41a" class="badge-item">
<t-button size="small">绿色</t-button>
</t-badge>
<t-badge :count="1" color="#f52fff" class="badge-item">
<t-button size="small">自定义颜色</t-button>
</t-badge>
</div>
<t-badge :count="12" class="badge-item">
<t-button size="small">按钮</t-button>
</t-badge>
<t-badge :count="999" color="#52c41a" class="badge-item">
<t-button size="small">绿色</t-button>
</t-badge>
<t-badge :count="1" color="#f52fff" class="badge-item">
<t-button size="small">自定义颜色</t-button>
</t-badge>
</div>
</t-cell-group>
</div>
Expand All @@ -23,3 +21,14 @@ import { defineComponent } from 'vue';
export default defineComponent({});
</script>

<style lang="less" scoped>
.badge-demo {
justify-content: space-around;
}
.badge-item {
width: auto;
margin-right: 10px;
}
</style>
4 changes: 2 additions & 2 deletions src/badge/demos/dist.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<t-cell-group>
<t-cell value-align="left">
<span>单行标题</span>
<t-badge dot :offset="[10, 0]" class="list-item-badge" />
<t-badge dot :offset="[0, 10]" class="list-item-badge" />
</t-cell>
</t-cell-group>
</div>
Expand All @@ -28,7 +28,7 @@ export default defineComponent({});
}
.list-item-badge {
float: right;
float: left;
vertical-align: middle;
}
</style>
11 changes: 10 additions & 1 deletion src/badge/demos/max-count.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@
<t-badge :count="109" class="badge-item">
<t-button size="small">默认max:99</t-button>
</t-badge>
</div>
<div class="badge-demo">
<t-badge :count="45" :max-count="44" class="badge-item">
<t-button size="small">max:44</t-button>
</t-badge>
<t-badge :count="106" :max-count="105" class="badge-item">
<t-button size="small">max:105</t-button>
</t-badge>
</div>
<div class="badge-demo">
<div class="">
<t-cell-group>
<t-cell value-align="left">
<span>单行标题</span>
Expand All @@ -30,3 +32,10 @@ import { defineComponent } from 'vue';
export default defineComponent({});
</script>

<style lang="less" scoped>
.badge-item {
width: auto;
margin-right: 25px;
}
</style>
92 changes: 32 additions & 60 deletions src/badge/demos/mobile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,66 +2,38 @@
<div class="tdesign-mobile-demo">
<h1 class="title">Badge 徽标</h1>
<p class="summary">用于告知用户，该区域的状态变化或者待处理任务的数量。</p>
<tdesign-demo-block title="01 类型" summary="徽标主要分红点、数字、文字和角标提醒">
<div class="badge-demo">
<div class="badge-item">
<t-badge dot>消息</t-badge>
</div>
<div class="badge-item">
<t-badge count="16">消息</t-badge>
</div>
<div class="badge-item">
<t-badge count="NEW">消息</t-badge>
</div>
<div class="badge-item">
<t-badge count="···">消息</t-badge>
</div>
</div>
<div class="badge-demo">
<div class="badge-item">
<t-badge dot>
<t-button size="small" variant="outline">小按钮</t-button>
</t-badge>
</div>
<div class="badge-item">
<t-badge count="16">
<t-button size="small" variant="outline">小按钮</t-button>
</t-badge>
</div>
<div class="badge-item">
<t-badge count="NEW">
<t-button size="small" variant="outline">小按钮</t-button>
</t-badge>
</div>
<div class="badge-item">
<t-badge count="···">
<t-button size="small" variant="outline">小按钮</t-button>
</t-badge>
</div>
</div>
<t-cell-group style="overflow: hidden">
<t-cell title="单行标题" arrow>
<template #note>
<t-badge dot></t-badge>
</template>
</t-cell>
<t-cell title="单行标题" arrow>
<template #note>
<t-badge count="16"></t-badge>
</template>
</t-cell>
<t-cell title="单行标题" arrow>
<template #note>
<t-badge count="NEW" shape="round" />
<t-badge count="NEW" style="margin-left: 8px" />
</template>
</t-cell>
<t-cell title="单行标题">
<template #note>
<t-badge shape="ribbon" count="NEW"> </t-badge>
</template>
</t-cell>
</t-cell-group>
<tdesign-demo-block title="01 小红点" summary="">
<DistDemo />
</tdesign-demo-block>
<tdesign-demo-block title="02 数字型" summary="">
<MaxCountDemo />
</tdesign-demo-block>
<tdesign-demo-block title="03 文字型" summary="">
<TextDemo />
</tdesign-demo-block>
<tdesign-demo-block title="04 角标" summary="">
<ShapeDemo />
</tdesign-demo-block>
<tdesign-demo-block title="05 颜色" summary="">
<ColorDemo />
</tdesign-demo-block>
<tdesign-demo-block title="06 偏移用法" summary="">
<OffsetDemo />
</tdesign-demo-block>
</div>
</template>

<script lang="ts" setup>
import DistDemo from './dist.vue';
import MaxCountDemo from './max-count.vue';
import TextDemo from './text.vue';
import ShapeDemo from './shape.vue';
import ColorDemo from './color.vue';
import OffsetDemo from './offset.vue';
</script>

<style lang="less" scoped>
.tdesign-mobile-demo {
padding: 0 10px;
}
</style>
57 changes: 32 additions & 25 deletions src/badge/demos/offset.vue
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,28 @@
<template>
<div class="tdesign-mobile-demo">
<div class="badge-demo">
<div class="badge-line">
<span>offset: [10, 10]</span>
<t-badge :count="12" :offset="[10, 10]" class="badge-item">
<t-button size="small">按钮</t-button>
</t-badge>
</div>
<div class="badge-line">
<span>offset: [-10, 10]</span>
<t-badge :count="12" :offset="[-10, 10]" class="badge-item">
<t-button size="small">按钮</t-button>
</t-badge>
</div>
<div class="badge-line">
<span>offset: [-10, -10]</span>
<t-badge :count="12" :offset="[-10, -10]" class="badge-item">
<t-button size="small">按钮</t-button>
</t-badge>
</div>
<div class="badge-line">
<span>offset: [10, -10]</span>
<t-badge :count="12" :offset="[10, -10]" class="badge-item">
<t-button size="small">按钮</t-button>
</t-badge>
</div>
<div class="badge-line">
<span>offset: [10, 10]</span>
<t-badge :count="12" :offset="[10, 10]" class="badge-item">
<t-button size="small">按钮</t-button>
</t-badge>
</div>
<div class="badge-line">
<span>offset: [-10, 10]</span>
<t-badge :count="12" :offset="[-10, 10]" class="badge-item">
<t-button size="small">按钮</t-button>
</t-badge>
</div>
<div class="badge-line">
<span>offset: [-10, -10]</span>
<t-badge :count="12" :offset="[-10, -10]" class="badge-item">
<t-button size="small">按钮</t-button>
</t-badge>
</div>
<div class="badge-line">
<span>offset: [10, -10]</span>
<t-badge :count="12" :offset="[10, -10]" class="badge-item">
<t-button size="small">按钮</t-button>
</t-badge>
</div>
</div>
</template>
Expand All @@ -34,3 +32,12 @@ import { defineComponent } from 'vue';
export default defineComponent({});
</script>

<style lang="less" scoped>
.badge-line {
margin-top: 15px;
display: flex;
align-items: center;
justify-content: space-around;
}
</style>
22 changes: 17 additions & 5 deletions src/badge/demos/shape.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,18 @@
<t-badge :count="12" shape="round" class="badge-item">
<t-button size="small">round</t-button>
</t-badge>
<t-cell-group title="列表带徽标">
<t-cell label="单行标题">
<t-badge dot />
</div>
<div class="">
<t-cell-group title="列表带徽标" bordered>
<t-cell title="单行标题">
<template #note>
<t-badge dot />
</template>
</t-cell>
<t-cell label="单行标题">
<t-badge content="NEW" :offset="[5, 0]" shape="ribbon" />
<t-cell title="单行标题">
<template #note>
<t-badge content="NEW" :offset="[5, 0]" shape="ribbon" />
</template>
</t-cell>
</t-cell-group>
</div>
Expand All @@ -24,3 +30,9 @@ import { defineComponent } from 'vue';
export default defineComponent({});
</script>

<style lang="less" scoped>
.badge-item {
margin-right: 25px;
}
</style>
11 changes: 6 additions & 5 deletions src/badge/demos/text.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,11 @@
<t-button size="small">省略号</t-button>
</t-badge>
</div>
<div class="badge-wrap">
<div class="">
<t-cell-group>
<t-cell value-align="left">
<span>单行标题</span>
<t-cell title="单行标题">
<div class="badge-tag-wrap">
<t-badge content="NEW" shape="round" class="badge-tag" />
<t-badge content="NEW" shape="round" class="badge-tag" />
<t-badge content="NEW" shape="circle" class="badge-tag" />
<t-badge content="NEW" shape="circle" class="badge-tag" />
</div>
</t-cell>
Expand All @@ -31,6 +28,10 @@ export default defineComponent({});
</script>

<style lang="less" scoped>
.badge-item {
margin-right: 25px;
}
.badge-tag {
margin-right: 8px;
}
Expand Down

0 comments on commit b0fdfa3

Please sign in to comment.